/* Cookie Consent Custom Styling - Ultra Compact Dark Theme */

/* Dark mode overrides */
.cc--darkmode #cc-main {
  --cc-bg: #1a1a1a;
  --cc-primary-color: #a0a0a0;
  --cc-secondary-color: #808080;
  --cc-btn-primary-bg: #C2D0E0;
  --cc-btn-primary-color: #1a1a1a;
  --cc-btn-primary-border-color: #C2D0E0;
  --cc-btn-primary-hover-bg: #d4dfe8;
  --cc-btn-primary-hover-color: #1a1a1a;
  --cc-btn-primary-hover-border-color: #d4dfe8;
  --cc-btn-secondary-bg: #C2D0E0;
  --cc-btn-secondary-color: #1a1a1a;
  --cc-btn-secondary-border-color: #C2D0E0;
  --cc-btn-secondary-hover-bg: #d2dce4;
  --cc-btn-secondary-hover-color: #1a1a1a;
  --cc-btn-secondary-hover-border-color: #d4dfe8;
  --cc-separator-border-color: #3a3a3a;
  --cc-cookie-category-block-bg: #2a2a2a;
  --cc-cookie-category-block-border-color: #3a3a3a;
  --cc-cookie-category-block-hover-bg: #3a3a3a;
  --cc-cookie-category-expanded-block-bg: #1a1a1a;
  --cc-cookie-category-expanded-block-hover-bg: #2a2a2a;
  --cc-toggle-readonly-bg: #5a5a5a;
  --cc-overlay-bg: rgba(0, 0, 0, 0.65);
  --cc-webkit-scrollbar-bg: #2a2a2a;
  --cc-webkit-scrollbar-hover-bg: #3a3a3a;
  --cc-link-color: #90cdf4;
  --cc-font-size: 11px;
}

/* Main consent bar - ultra compact */
#cc-main .cm {
  border-radius: 0 !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4) !important;
  max-height: 50px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Bar inline layout */
#cc-main .cm--bar.cm--inline {
  max-height: 50px !important;
  padding: 0 16px !important;
}

/* Inner wrapper */
#cc-main .cm--bar.cm--inline .cm__body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  max-height: 50px !important;
  gap: 16px !important;
}

/* Hide title */
#cc-main .cm__title {
  display: none !important;
}

/* Text description - compact */
#cc-main .cm__desc {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  color: #a0a0a0 !important;
}

#cc-main .cm__desc a {
  color: #90cdf4 !important;
  text-decoration: none !important;
}

#cc-main .cm__desc a:hover {
  text-decoration: underline !important;
}

/* Text wrapper */
#cc-main .cm--bar.cm--inline .cm__texts {
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Button container - all buttons inline */
#cc-main .cm--bar.cm--inline .cm__btns {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Force button groups to be inline */
#cc-main .cm__btns > div {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

/* Button styling - matching reference */
#cc-main .cm__btn {
  border-radius: 4px !important;
  font-weight: 500 !important;
  padding: 4px 18px !important;
  font-size: 11px !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  min-width: auto !important;
  height: 24px !important;
  max-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: none !important;
  margin: 0 !important;
}

/* Accept button - light gray/blue */
#cc-main .cm__btn--primary {
  background-color: #C2D0E0 !important;
  color: #1a1a1a !important;
}

#cc-main .cm__btn--primary:hover {
  background-color: #d4dfe8 !important;
}

/* Reject button - same style */
#cc-main .cm__btn--secondary {
  background-color: #C2D0E0 !important;
  color: #1a1a1a !important;
}

#cc-main .cm__btn--secondary:hover {
  background-color: #d4dfe8 !important;
}

/* Manage preferences as link style */
#cc-main .cm__btn[data-role="show"] {
  background: transparent !important;
  border: none !important;
  color: #90cdf4 !important;
  text-decoration: underline !important;
  padding: 6px 8px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  height: auto !important;
  max-height: none !important;
}

#cc-main .cm__btn[data-role="show"]:hover {
  background: transparent !important;
  color: #b8e0fc !important;
}

/* Button group */
#cc-main .cm__btn-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

/* Preferences modal styling */
#cc-main .pm {
  border-radius: 8px;
}

#cc-main .pm__badge {
  background-color: #48bb78;
  color: #1a1a1a;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
}

/* Toggle styling */
#cc-main .section__toggle-wrapper input:checked + .toggle__icon {
  background-color: #48bb78;
}

/* Mobile responsive - ultra compact */
@media (max-width: 768px) {
  #cc-main .cm,
  #cc-main .cm--bar.cm--inline {
    max-height: none !important;
    padding: 8px 12px !important;
  }

  #cc-main .cm--bar.cm--inline .cm__body {
    flex-direction: column !important;
    align-items: stretch !important;
    max-height: none !important;
    padding: 4px 0 !important;
    gap: 8px !important;
  }

  #cc-main .cm__desc {
    font-size: 10px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  #cc-main .cm--bar.cm--inline .cm__btns {
    justify-content: center !important;
    gap: 6px !important;
  }

  #cc-main .cm__btns > div {
    gap: 16px !important;

    #cc-main .cm__btn {
      padding: 0 16px !important;
    }
  }

  #cc-main .cm__btn {
    padding: 5px 16px !important;
    font-size: 10px !important;
    height: 26px !important;
    max-height: 26px !important;
    margin-top: 6px !important;
  }

  #cc-main .cm__btn[data-role="show"] {
    font-size: 10px !important;
    padding: 4px 6px !important;
  }
}

/* Extra small mobile
@media (max-width: 480px) {
  #cc-main .cm,
  #cc-main .cm--bar.cm--inline {
    padding: 6px 10px !important;
  }

  #cc-main .cm__desc {
    font-size: 9px !important;
  }

  #cc-main .cm__btn {
    padding: 4px 12px !important;
    font-size: 9px !important;
    height: 22px !important;
    max-height: 22px !important;
  }

  #cc-main .cm__btn[data-role="show"] {
    font-size: 9px !important;
    padding: 3px 5px !important;
  }

  #cc-main .cm--bar.cm--inline .cm__btns {
    gap: 4px !important;
  }

  #cc-main .cm__btns > div {
    gap: 4px !important;
  }
} */