/*
  BookitOne theme for Silktide Consent Manager.
  Loaded AFTER silktide-consent-manager.css. Light/luxury navy direction to
  match the marketing site: white surfaces, deep-navy brand, Lexend type, soft
  brand-tinted shadow, rounded-xl, one gradient "accept" moment.
*/

#stcm-wrapper {
  /* Brand tokens (mirror tailwind `brand` scale) */
  --bk-navy: #11285d;   /* brand-400 */
  --bk-navy-700: #031947; /* brand-500 */
  --bk-navy-900: #021335; /* brand-600 */
  --bk-ink: #1d2746;
  --bk-muted: #5b6680;
  --bk-line: rgba(17, 40, 93, 0.12);
  --bk-track: #cbd5e1;

  /* Silktide variable overrides */
  --fontFamily: var(--font-lexend), ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --primaryColor: var(--bk-navy);
  --backgroundColor: #ffffff;
  --textColor: var(--bk-ink);
  --backdropBackgroundColor: rgba(3, 25, 71, 0.55);
  --backdropBackgroundBlur: 6px;
  --iconColor: var(--bk-navy);       /* circle background */
  --iconBackgroundColor: #ffffff;    /* cookie glyph fill */
  --boxShadow: 0 24px 60px -24px rgba(3, 25, 71, 0.45),
    0 8px 24px -12px rgba(3, 25, 71, 0.22);
}

/* ---------------- Surfaces ---------------- */
#stcm-wrapper #stcm-banner,
#stcm-wrapper #stcm-modal {
  border: 1px solid var(--bk-line);
  border-radius: 18px;
  box-shadow: var(--boxShadow);
  letter-spacing: -0.01em;
}

#stcm-wrapper #stcm-modal h1 {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--bk-navy-700);
}

#stcm-wrapper #stcm-banner p,
#stcm-wrapper #stcm-modal p {
  color: var(--bk-muted);
  opacity: 1;
}

#stcm-wrapper #stcm-modal legend {
  color: var(--bk-navy-700);
  font-weight: 700;
}

/* ---------------- Buttons (base) ---------------- */
#stcm-wrapper .stcm-button {
  border-radius: 10px;
  font-weight: 600;
  padding: 12px 22px;
  border-width: 1.5px;
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 150ms ease, color 150ms ease, box-shadow 150ms ease,
    border-color 150ms ease;
}

#stcm-wrapper .stcm-button:active {
  transform: translateY(0);
}

/* Primary "accept" — the one memorable moment: brand gradient + lift */
#stcm-wrapper .stcm-accept-all,
#stcm-wrapper .stcm-modal-save {
  color: #ffffff;
  border-color: transparent;
  background-image: linear-gradient(135deg, var(--bk-navy) 0%, var(--bk-navy-700) 100%);
  background-color: var(--bk-navy);
  box-shadow: 0 10px 22px -10px rgba(3, 25, 71, 0.55);
}

#stcm-wrapper .stcm-accept-all:hover,
#stcm-wrapper .stcm-modal-save:hover {
  color: #ffffff;
  background-image: linear-gradient(135deg, var(--bk-navy-700) 0%, var(--bk-navy-900) 100%);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -12px rgba(3, 25, 71, 0.6);
}

/* Reject — secondary outline, lower visual weight */
#stcm-wrapper .stcm-reject-all,
#stcm-wrapper .stcm-modal-reject-all {
  color: var(--bk-navy);
  background-color: #ffffff;
  background-image: none;
  border-color: var(--bk-line);
  box-shadow: none;
}

#stcm-wrapper .stcm-reject-all:hover,
#stcm-wrapper .stcm-modal-reject-all:hover {
  color: var(--bk-navy-700);
  background-color: rgba(17, 40, 93, 0.06);
  border-color: var(--bk-navy);
}

/* Preferences (text button) */
#stcm-wrapper #stcm-banner .stcm-preferences-button {
  color: var(--bk-muted);
  font-weight: 600;
}
#stcm-wrapper #stcm-banner .stcm-preferences-button span:hover {
  color: var(--bk-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------- Toggles ---------------- */
/* OFF must read as off on a light surface (base maps OFF track to --textColor) */
#stcm-wrapper #stcm-modal .stcm-toggle-track {
  background: var(--bk-track);
}
#stcm-wrapper #stcm-modal .stcm-toggle input:checked + .stcm-toggle-track {
  background: var(--bk-navy);
}
#stcm-wrapper #stcm-modal .stcm-toggle-thumb {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(3, 25, 71, 0.25);
}
#stcm-wrapper #stcm-modal .stcm-toggle-off {
  color: #475569;
}
#stcm-wrapper #stcm-modal .stcm-toggle-on {
  color: #ffffff;
}

/* ---------------- Focus ring (brand, visible on white) ---------------- */
#stcm-wrapper a:focus,
#stcm-wrapper #stcm-banner button:focus,
#stcm-wrapper #stcm-modal button:focus,
#stcm-wrapper #stcm-modal .stcm-toggle:focus-within {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--bk-navy);
}
#stcm-wrapper #stcm-icon:focus {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--bk-navy);
}

/* ---------------- Reopen icon ---------------- */
#stcm-wrapper #stcm-icon {
  box-shadow: 0 10px 24px -10px rgba(3, 25, 71, 0.5);
}

/* ---------------- Hide Silktide branding ---------------- */
#stcm-wrapper .stcm-logo,
#stcm-wrapper .stcm-credit-link {
  display: none !important;
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  #stcm-wrapper #stcm-banner,
  #stcm-wrapper #stcm-modal,
  #stcm-wrapper #stcm-icon {
    animation: none !important;
  }
  #stcm-wrapper .stcm-button,
  #stcm-wrapper .stcm-toggle-thumb {
    transition: none !important;
  }
  #stcm-wrapper .stcm-accept-all:hover,
  #stcm-wrapper .stcm-modal-save:hover {
    transform: none;
  }
}