/**
 * Cookie Consent Styles
 * Custom styles for vanilla-cookieconsent integration
 * Uses CSS variables from color-modes.css for consistent theming
 * Follows app's design system (border-radius: 0.375rem, consistent spacing, etc.)
 * 
 * IMPORTANT: This file must be loaded AFTER vanilla-cookieconsent.css to override default styles
 */

/* ============================================
   MAIN CONTAINER
   ============================================ */
#cc-main {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  z-index: 1050 !important; /* Above Bootstrap modals (1030) but below tooltips (1070) */
}

/* ============================================
   CONSENT MODAL (cm)
   ============================================ */
#cc-main .cm {
  border-radius: 0.375rem !important; /* Consistent with app (6px) */
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
}

#cc-main .cm__body {
  padding: 1.5rem !important;
}

#cc-main .cm__title {
  color: var(--bs-body-color) !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
}

#cc-main .cm__desc {
  color: var(--bs-gray-600) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* ============================================
   CONSENT MODAL BUTTONS (cm__btn)
   ============================================ */
#cc-main .cm__btn,
#cc-main .pm__btn {
  border-radius: 0.375rem !important; /* Consistent with app (6px) */
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  min-height: 42px !important;
  color: var(--bs-fff) !important;
}

/* #cc-main .cm__btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(var(--bs-body-color-rgb), 0.1) !important;
} */

/* #cc-main .cm__btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
} */

/* Accept button - matches .btn-primary styling */
#cc-main .cm__btn:not(.cm__btn--secondary),
#cc-main .pm__btn:not(.pm__btn--secondary) {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

#cc-main .cm__btn:not(.cm__btn--secondary):hover,
#cc-main .pm__btn:not(.pm__btn--secondary):hover,
#cc-main .cm__btn:not(.cm__btn--secondary):focus-visible,
#cc-main .pm__btn:not(.pm__btn--secondary):focus-visible,
#cc-main .cm__btn:not(.cm__btn--secondary):active,
#cc-main .pm__btn:not(.pm__btn--secondary):active {
  background-color: var(--bs-primary-hover) !important;
  border-color: var(--bs-primary-hover) !important;
}

/* Reject button - matches .btn-secondary styling */
#cc-main .cm__btn--secondary,
#cc-main .pm__btn--secondary {
  background-color: unset !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

#cc-main .cm__btn--secondary:hover,
#cc-main .pm__btn--secondary:hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-fff) !important;
}

/* Button group spacing */
#cc-main .cm__btns,
#cc-main .pm__btns {
  border-top: 1px solid var(--bs-border-color) !important;
  padding: 1rem 1.5rem !important;
}

#cc-main .cm__btn-group,
#cc-main .pm__btn-group {
  /* display: flex !important; */
  gap: 0.5rem !important;
}

/* ============================================
   PREFERENCES MODAL (pm)
   ============================================ */
#cc-main .pm {
  border-radius: 0.375rem !important;
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

#cc-main .pm__header {
  border-bottom: 1px solid var(--bs-border-color) !important;
  padding: 1rem 1.5rem !important;
  background-color: var(--bs-body-bg) !important;
}

#cc-main .pm__title {
  color: var(--bs-body-color) !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
}

#cc-main .pm__body {
  padding: 1.5rem !important;
  background-color: var(--bs-body-bg) !important;
}

#cc-main .pm__footer {
  border-top: 1px solid var(--bs-border-color) !important;
  padding: 1rem 1.5rem !important;
  background-color: var(--bs-body-bg) !important;
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

/* Close button */
#cc-main .pm__close-btn {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-body-bg) !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s ease !important;
}

#cc-main .pm__close-btn:hover {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-body-bg) !important;
}

#cc-main .pm__close-btn svg {
  stroke: var(--bs-body-color) !important;
}

/* ============================================
   PREFERENCES MODAL SECTIONS (pm__section)
   ============================================ */

/* ============================================
   TOGGLE SWITCHES (section__toggle)
   ============================================ */
#cc-main .section__toggle-wrapper {
  cursor: pointer !important;
}

/* Toggle active state */
#cc-main .section__toggle:checked ~ .toggle__icon {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-body-bg) !important;
}

#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
  transform: translateX(27px) !important;
}

/* Toggle disabled/readonly state */
#cc-main .section__toggle:disabled ~ .toggle__icon {
  background-color: var(--bs-body-bg) !important;
  cursor: not-allowed !important;
}

#cc-main .section__toggle:checked:disabled ~ .toggle__icon {
  background-color: var(--bs-primary) !important;
}

#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  border: 1px solid var(--bs-border-color);
}

#cc-main .pm__section--toggle .pm__section-title,
#cc-main .pm__section--toggle .pm__section-title:hover {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}

#cc-main .pm__section--expandable .pm__section-arrow {
  background-color: var(--bs-body-bg) !important;
}

#cc-main .pm__section--expandable .pm__section-arrow svg {
  stroke: var(--bs-body-color) !important;
}

#cc-main .pm__section--expandable .pm__section-arrow:hover svg {
  stroke: var(--bs-primary) !important;
}

#cc-main .toggle__icon {
  box-shadow: none !important;
  background-color: var(--bs-secondary) !important;
}

/* ============================================
   SEPARATORS & BORDERS
   ============================================ */
#cc-main .cm__footer,
#cc-main .pm__footer {
  border-top-color: var(--bs-border-color) !important;
}

#cc-main .pm__header {
  border-bottom-color: var(--bs-border-color) !important;
}

/* ============================================
   LINKS
   ============================================ */
#cc-main .cm__link,
#cc-main a {
  color: var(--bs-primary) !important;
  font-weight: 600 !important;
}

#cc-main .cm__link:hover,
#cc-main a:hover {
  color: var(--bs-primary-hover) !important;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
/* Dark mode is automatically handled by CSS variables */
/* No additional dark mode rules needed as variables adapt automatically */

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media screen and (max-width: 640px) {
  #cc-main .cm__body,
  #cc-main .pm__body {
    padding: 1rem !important;
  }

  #cc-main .cm__btns,
  #cc-main .pm__footer {
    padding: 1rem !important;
  }

  #cc-main .cm__btn,
  #cc-main .pm__btn {
    width: 100% !important;
  }
}