/*
  Meventa theme for Silktide Consent Manager.
  Colors and button treatment from the medical app's CookieBanner
  (frontend/app/src/components/CookieConsent/CookieBanner.module.css).
  Font uses the landing page's own Inter (not the app's Manrope) so
  the banner matches its surrounding page rather than requiring an
  extra web font import.

  Design tokens:
    font (landing page):       'Inter', system-ui, sans-serif
    --color-main-blue:         #46b1f3
    --color-dark-blue:         #1E2952
    --color-white:             #FFFFFF
    --color-dark-text-main:    #333333
    --color-dark-text-secondary: #757575
    --color-border:            #E0E0E0
*/

/* ── Global theme variables ──────────────────────────────────── */
#stcm-wrapper {
  --fontFamily: 'Inter', system-ui, sans-serif;
  --primaryColor: #46b1f3;
  --backgroundColor: #FFFFFF;
  --textColor: #333333;
  --backdropBackgroundColor: rgba(0, 0, 0, 0.4);
  --backdropBackgroundBlur: 4px;
  --iconColor: #FFFFFF;
  --iconBackgroundColor: #333333;
  --boxShadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
}

/* ── Banner — full-width bottom bar ──────────────────────────── */
#stcm-banner {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  padding: 1.25rem 2rem;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
}

#stcm-banner.stcm-pos-center,
#stcm-banner.stcm-pos-bottom-left,
#stcm-banner.stcm-pos-bottom-center {
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  position: fixed !important;
}

#stcm-banner p {
  color: #333333;
  font-size: clamp(0.9rem, 0.8rem + 0.25vw, 1.1rem);
  line-height: 1.5;
  flex: 1;
}

#stcm-banner a {
  color: #46b1f3;
  background-color: transparent;
}

#stcm-banner a:hover {
  color: #46b1f3;
  opacity: 0.8;
}

#stcm-banner .stcm-actions {
  flex-direction: row !important;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* ── Buttons (banner + modal) ────────────────────────────────── */
#stcm-wrapper .stcm-button {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.85rem, 0.75rem + 0.25vw, 1.05rem);
  padding: 0.65rem 1.25rem;
  border-radius: 10px;
  transition: opacity 0.2s, box-shadow 0.2s;
}

#stcm-wrapper .stcm-button:hover {
  opacity: 0.9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Accept = main blue bg, white text */
#stcm-banner .stcm-accept-all,
#stcm-modal .stcm-modal-save {
  background-color: #46b1f3 !important;
  color: #FFFFFF !important;
  border-color: #46b1f3 !important;
}

#stcm-banner .stcm-accept-all:hover,
#stcm-modal .stcm-modal-save:hover {
  background-color: #46b1f3 !important;
  color: #FFFFFF !important;
}

/* Reject = dark blue bg, white text */
#stcm-banner .stcm-reject-all,
#stcm-modal .stcm-modal-reject-all {
  background-color: #1E2952 !important;
  color: #FFFFFF !important;
  border-color: #1E2952 !important;
}

#stcm-banner .stcm-reject-all:hover,
#stcm-modal .stcm-modal-reject-all:hover {
  background-color: #1E2952 !important;
  color: #FFFFFF !important;
}

/* Preferences = transparent, dark blue text */
#stcm-banner .stcm-preferences-button {
  color: #1E2952;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.85rem, 0.75rem + 0.25vw, 1.05rem);
}

#stcm-banner .stcm-preferences-button span:hover {
  color: #1E2952;
  opacity: 0.7;
}

/* ── Modal ───────────────────────────────────────────────────── */
#stcm-modal {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  max-width: 600px;
}

#stcm-modal h1 {
  color: #1E2952;
  font-weight: 700;
  font-size: clamp(1.35rem, 1.2rem + 0.35vw, 1.65rem);
}

#stcm-modal p {
  color: #757575;
  opacity: 1;
  font-size: clamp(0.9rem, 0.8rem + 0.25vw, 1.1rem);
  line-height: 1.5;
}

#stcm-modal legend {
  color: #333333;
  font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.15rem);
}

#stcm-modal .stcm-consent-row {
  padding: 1rem;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  margin-bottom: 1rem;
}

#stcm-modal .stcm-consent-description p {
  font-size: clamp(0.82rem, 0.75rem + 0.2vw, 1rem);
  line-height: 1.45;
  color: #757575;
}

#stcm-modal fieldset {
  margin: 0 0 0.5rem;
}

/* Toggle: position/color only, no text labels */
#stcm-modal .stcm-toggle-track {
  background: #E0E0E0;
}

#stcm-modal .stcm-toggle input:checked + .stcm-toggle-track {
  background: #46b1f3;
}

#stcm-modal .stcm-toggle-thumb {
  background: #FFFFFF;
}

#stcm-modal .stcm-toggle-off,
#stcm-modal .stcm-toggle-on {
  display: none;
}

#stcm-modal .stcm-toggle input:disabled + .stcm-toggle-track {
  opacity: 0.5;
}

#stcm-modal .stcm-modal-close {
  background: transparent;
  color: #333333;
}

#stcm-modal .stcm-modal-close svg {
  fill: #333333;
}

/* ── Cookie icon ─────────────────────────────────────────────── */
#stcm-icon {
  width: 44px;
  height: 44px;
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s, transform 0.2s;
}

#stcm-icon:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transform: scale(1.05);
}

#stcm-icon svg {
  fill: #333333;
  width: 20px;
  height: 20px;
}

/* ── Focus states (light theme) ──────────────────────────────── */
#stcm-wrapper a:focus,
#stcm-wrapper #stcm-banner button:focus,
#stcm-wrapper #stcm-modal button:focus,
#stcm-wrapper #stcm-icon:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #46b1f3;
}

/* ── Attribution removal ─────────────────────────────────────── */
#stcm-modal footer a.stcm-credit-link,
#stcm-banner a.stcm-logo {
  display: none !important;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #stcm-banner .stcm-actions {
    flex-direction: column;
  }

  #stcm-banner .stcm-actions .stcm-button {
    width: 100%;
  }

  #stcm-modal .stcm-consent-row {
    flex-direction: column;
    align-items: flex-start;
  }
}