/* =====================================================================
   WeatherMyTrip — Cookie Consent theme
   Maps orestbida/cookieconsent v3 variables onto the REAL WMT design
   tokens from assets/css/wmt.css (Brand Identity Guide v1.0).

   Every value reads the site's own --wmt-* token first, so it inherits
   the exact live palette, with the brand hex as a fallback. This makes
   the banner render identically to the rest of the site.

   Palette (from the brand guide):
     sky-blue     #5BC2E7  primary accent / CTAs / links
     cyan-drop    #66CBED  primary hover / interactive
     soft-blue    #A6D9F1  secondary accent
     dark-charcoal#383536  primary text / headings
     mid-grey     #747474  body / secondary text
     off-white    #F7F9FC  section backgrounds
     surface-light#EDF3F8  alternate surfaces
     success      #2ECC71
     font         Inter
   ===================================================================== */

#cc-main {
  /* ---- Core ------------------------------------------------------- */
  --cc-font-family: var(--wmt-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --cc-bg: #ffffff;
  --cc-primary-color: var(--wmt-dark, #383536);          /* headings */
  --cc-secondary-color: var(--wmt-muted, #747474);       /* body copy */
  --cc-link-color: var(--wmt-primary, #5BC2E7);
  --cc-z-index: 2147483640;

  /* ---- Primary button (Accept all) — matches .wmt-btn-primary ----- */
  --cc-btn-primary-bg: var(--wmt-primary, #5BC2E7);
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: var(--wmt-primary, #5BC2E7);
  --cc-btn-primary-hover-bg: var(--wmt-primary-hover, #66CBED);
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: var(--wmt-primary-hover, #66CBED);

  /* ---- Secondary button (Reject / Manage) ------------------------- */
  --cc-btn-secondary-bg: var(--wmt-bg-soft, #F7F9FC);
  --cc-btn-secondary-color: var(--wmt-dark, #383536);
  --cc-btn-secondary-border-color: var(--wmt-border, rgba(0,0,0,.1));
  --cc-btn-secondary-hover-bg: var(--wmt-bg-panel, #EDF3F8);
  --cc-btn-secondary-hover-color: var(--wmt-dark, #383536);
  --cc-btn-secondary-hover-border-color: var(--wmt-primary-light, #A6D9F1);

  /* ---- Toggles ---------------------------------------------------- */
  --cc-toggle-on-bg: var(--wmt-primary, #5BC2E7);
  --cc-toggle-off-bg: #C4CDD6;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-enabled-icon-color: var(--wmt-primary, #5BC2E7);
  --cc-toggle-disabled-icon-color: #C4CDD6;
  /* Read-only (strictly-necessary): soft-blue, clearly "locked on" */
  --cc-toggle-readonly-bg: var(--wmt-primary-light, #A6D9F1);
  --cc-toggle-readonly-knob-bg: #ffffff;
  --cc-toggle-readonly-knob-icon-color: var(--wmt-primary, #5BC2E7);

  /* ---- Category blocks in preferences modal ----------------------- */
  --cc-cookie-category-block-bg: var(--wmt-bg-soft, #F7F9FC);
  --cc-cookie-category-block-border: var(--wmt-border, rgba(0,0,0,.08));
  --cc-cookie-category-block-hover-bg: var(--wmt-bg-panel, #EDF3F8);
  --cc-cookie-category-block-hover-border: var(--wmt-primary-light, #A6D9F1);
  --cc-cookie-category-expanded-block-bg: #ffffff;
  --cc-cookie-category-expanded-block-hover-bg: var(--wmt-bg-soft, #F7F9FC);

  /* ---- Structure -------------------------------------------------- */
  --cc-section-category-border: var(--wmt-border, rgba(0,0,0,.08));
  --cc-separator-border-color: var(--wmt-border, rgba(0,0,0,.08));
  --cc-footer-bg: var(--wmt-bg-soft, #F7F9FC);
  --cc-footer-color: var(--wmt-muted, #747474);
  --cc-footer-border-color: var(--wmt-border, rgba(0,0,0,.08));

  /* ---- Shape (match .wmt-btn / .wmt-card) ------------------------- */
  --cc-modal-border-radius: var(--wmt-radius-lg, 1rem);
  --cc-btn-border-radius: var(--wmt-radius, 0.75rem);
  --cc-pm-toggle-border-radius: 999px;
  --cc-modal-margin: 1rem;
  --cc-modal-transition-duration: .2s;

  /* ---- Overlay + scrollbar --------------------------------------- */
  --cc-overlay-bg: rgba(26, 29, 35, .55);   /* --wmt-charcoal @ 55% */
  --cc-webkit-scrollbar-bg: #C4CDD6;
  --cc-webkit-scrollbar-hover-bg: #A6D9F1;
}

/* Consent box: soft sky-blue glow, matching the brand micro-interaction
   ("glow on hover — sky-blue shadow") and .wmt-card elevation. */
#cc-main .cm,
#cc-main .pm {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05),
              0 0 0 1px rgba(91,194,231,.10);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Primary buttons lift on hover, like .wmt-btn */
#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"] {
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease;
}
#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="all"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(91,194,231,.55);   /* sky-blue glow */
}

@media (prefers-reduced-motion: reduce) {
  #cc-main .cm__btn, #cc-main .pm__btn { transition: none !important; }
  #cc-main .cm__btn:hover, #cc-main .pm__btn:hover { transform: none !important; }
}