/* consent.css — behaviour styles for consent.js (required on every site).
 * Handles: initial hidden state (no flash on load), open/close transitions,
 * toggle on/off visuals, scroll lock. Look-and-feel styling of the cards
 * themselves belongs to the site's own CSS (or theme.css from this kit). */

/* Legacy CookieFlow interaction hotspots are inert in this build */
[rd-cookieflow="banner-interaction"],
[rd-cookieflow="consent-interaction"],
[rd-cookieflow="preferences-interaction"],
[rd-cookieflow="manager-interaction"],
[rd-cookieflow="toggle-interaction"] {
  display: none !important;
}

/* Legacy accept-only banner tier — this kit only ships GDPR + US */
[rd-cookieflow="banner-zone-one"] {
  display: none !important;
}

/* ---- Banners + receipt card: hidden until .cf-open ------------------- */
/* visibility (not display) so CSS transitions run, and so the card is
 * hidden at first paint — no flash while scripts load */
[rd-cookieflow="banner-zone-three"],
[rd-cookieflow="banner-gdpr"],
[rd-cookieflow="banner-zone-two"],
[rd-cookieflow="banner-us"],
[rd-cookieflow="consent-banner"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4rem);
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.5s;
}

/* The site CSS may default these cards to display:none (Webflow zone rules
 * expected CookieFlow to pick one). We keep them rendered and hide with
 * visibility instead, so the entrance transition can actually animate. */
[rd-cookieflow="banner-zone-three"],
[rd-cookieflow="banner-gdpr"],
[rd-cookieflow="banner-zone-two"],
[rd-cookieflow="banner-us"] {
  display: block !important;
}

[rd-cookieflow="consent-banner"] {
  display: flex !important;
}

[rd-cookieflow="banner-zone-three"].cf-open,
[rd-cookieflow="banner-gdpr"].cf-open,
[rd-cookieflow="banner-zone-two"].cf-open,
[rd-cookieflow="banner-us"].cf-open,
[rd-cookieflow="consent-banner"].cf-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

/* ---- Preferences modal ------------------------------------------------ */
[rd-cookieflow="settings"] {
  display: flex !important; /* the site CSS may say display:none — we own it */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

[rd-cookieflow="settings"].cf-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s;
}

[rd-cookieflow="settings"] form {
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

[rd-cookieflow="settings"].cf-open form {
  transform: none;
}

/* ---- Scroll lock while the modal is open ------------------------------ */
html.cf-lock,
html.cf-lock body {
  overflow: hidden !important;
}

/* ---- Toggle visuals (checkbox state -> sliding dot) ------------------- */
.rd-cookie-us_toggle,
.rd-cookie-consent_toggle {
  position: relative;
}

[rd-cookieflow="wrapper"] .rd-toggle_dot {
  transition: left 0.2s ease, background-color 0.2s ease;
}

[rd-cookieflow="wrapper"] .rd-toggle_background,
[rd-cookieflow="wrapper"] .rd-toggle_track {
  transition: background-color 0.2s ease;
}

.cf-on .rd-toggle_dot {
  left: calc(100% - 1.5rem - 3px);
}

.cf-on .rd-toggle_dot.is-tiny {
  left: calc(100% - 1rem - 3px);
}

.cf-on .rd-toggle_background {
  background-color: var(--cf-accent, var(--swatch--brand-1, #084834));
}

/* the always-on "Required" toggle reads as on */
[rd-cookieflow="wrapper"] .rd-toggle_track.is-required {
  background-color: var(--cf-accent, var(--swatch--brand-1, #084834));
}

/* ---- Info-icon tooltips (replaces Reform's TooltipX script) ----------- */
/* Markup: [rd-tooltipx="icon" tabindex="0"] containing the tooltip box.
 * Hover or keyboard-focus shows it; tapping focuses on touch devices. */
[rd-tooltipx="tooltip"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

[rd-tooltipx="icon"]:hover [rd-tooltipx="tooltip"],
[rd-tooltipx="icon"]:focus [rd-tooltipx="tooltip"],
[rd-tooltipx="icon"]:focus-within [rd-tooltipx="tooltip"],
[rd-tooltipx="wrapper"]:hover [rd-tooltipx="tooltip"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease, visibility 0s;
}