/**
 * cookie-banner.css — Kixx styling for the Complianz cookie banner.
 *
 * Complianz builds its banner from CSS variables declared on :root in a
 * generated file (uploads/complianz/css/banner-*.css), which is sometimes
 * injected by JS after this sheet. We redeclare the variables on the two
 * Complianz wrappers instead of :root, so they win through inheritance no
 * matter which file loads last. Live banner settings (DB) can't override this.
 *
 * Contrast: orange #FF7500 on black ≈ 7.8:1, black on orange ≈ 7.8:1 (AAA).
 * White on orange (≈2.7:1) fails, so buttons use black text.
 */

#cmplz-cookiebanner-container,
#cmplz-manage-consent {
  --kixx-cb-orange: var(--color-kixx-orange, #ff7500);
  --kixx-cb-orange-hover: var(--color-surface-brand-hover, #cc5e00);
  --kixx-cb-black: #000000;
  --kixx-cb-text: #ffffff;
  --kixx-cb-font: var(--font-body, "Plus Jakarta Sans", sans-serif);

  --cmplz_banner_background_color: var(--kixx-cb-black);
  --cmplz_banner_border_color: var(--kixx-cb-orange);
  --cmplz_banner_border_width: 2px 2px 2px 2px;
  --cmplz_banner_border_radius: 16px 16px 16px 16px;
  --cmplz_text_color: var(--kixx-cb-text);
  --cmplz_hyperlink_color: var(--kixx-cb-orange);
  --cmplz_text_font_size: 14px;
  --cmplz_title_font_size: 18px;
  --cmplz_link_font_size: 13px;
  --cmplz_button_font_size: 16px;
  --cmplz_category_body_font_size: 13px;
  --cmplz_category_header_title_font_size: 15px;
  --cmplz_category_header_active_font_size: 13px;
  --cmplz_category_header_always_active_color: var(--kixx-cb-orange);
  --cmplz_button_border_radius: 9999px 9999px 9999px 9999px;

  /* Accept and Deny are identical: ICO guidance asks for equal prominence. */
  --cmplz_button_accept_background_color: var(--kixx-cb-orange);
  --cmplz_button_accept_border_color: var(--kixx-cb-orange);
  --cmplz_button_accept_text_color: var(--kixx-cb-black);
  --cmplz_button_deny_background_color: var(--kixx-cb-orange);
  --cmplz_button_deny_border_color: var(--kixx-cb-orange);
  --cmplz_button_deny_text_color: var(--kixx-cb-black);

  /* Preferences / Save: secondary, orange outline. */
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: var(--kixx-cb-orange);
  --cmplz_button_settings_text_color: var(--kixx-cb-orange);

  --cmplz_slider_active_color: var(--kixx-cb-orange);
  --cmplz_slider_inactive_color: #555555;
  --cmplz_slider_bullet_color: var(--kixx-cb-black);
}

/* ── Typography ─────────────────────────────────────────────────────── */

#cmplz-cookiebanner-container .cmplz-cookiebanner,
#cmplz-cookiebanner-container .cmplz-cookiebanner button,
#cmplz-cookiebanner-container .cmplz-cookiebanner a,
#cmplz-manage-consent .cmplz-manage-consent {
  font-family: var(--kixx-cb-font);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
  font-weight: 800;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
  line-height: 1.5;
}

/* ── Buttons ────────────────────────────────────────────────────────── */

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  font-weight: 800;
  border-width: 2px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
  background-color: var(--kixx-cb-orange-hover);
  border-color: var(--kixx-cb-orange-hover);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options:hover {
  background-color: var(--kixx-cb-orange);
  color: var(--kixx-cb-black);
}

/* Visible keyboard focus on every control (white ring reads on black and orange). */
#cmplz-cookiebanner-container .cmplz-cookiebanner button:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner a:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner input:focus-visible,
#cmplz-manage-consent .cmplz-manage-consent:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* ── Categories panel (Preferences view) ────────────────────────────── */

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
  color: var(--kixx-cb-text);
}

/* ── Floating "Manage consent" tab ──────────────────────────────────── */

#cmplz-manage-consent .cmplz-manage-consent {
  font-weight: 700;
  color: var(--kixx-cb-orange);
}

/* ── Homepage: hold the banner until the GSAP intro has finished ────── */
/*
 * body.kixx-intro-pending is added in PHP on the full homepage only (never on
 * the lite /?lite=1 page). cookie-banner-delay.js adds .kixx-intro-done when
 * the intro ends. We hide the WRAPPERS with opacity/visibility rather than
 * display:none, so Complianz's own show/hide classes keep working untouched.
 *
 * Failsafe: if no JS runs at all, the animation below reveals the banner
 * after 20s. It works because these declarations aren't !important, which
 * lets an animation override them.
 */

body.kixx-intro-pending #cmplz-cookiebanner-container,
body.kixx-intro-pending #cmplz-manage-consent {
  transition: opacity 0.5s ease;
}

body.kixx-intro-pending:not(.kixx-intro-done) #cmplz-cookiebanner-container,
body.kixx-intro-pending:not(.kixx-intro-done) #cmplz-manage-consent {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: kixx-cb-failsafe 0s linear 20s forwards;
}

@keyframes kixx-cb-failsafe {
  to {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.kixx-intro-pending #cmplz-cookiebanner-container,
  body.kixx-intro-pending #cmplz-manage-consent {
    transition: none;
  }
}