/* =====================================================================
   neysa-ot-banner.css
   OneTrust-style skin for the custom Complianz banner template.
   Scoped to .neysa-ot so it never touches the rest of the site.

   COLOURS + FONTS come from the Complianz banner design settings.
   Complianz exposes them as --cmplz_* custom properties inside a :root
   block (the mu-plugin keeps that block and drops the rest). We map them
   to --ot-* here. Fallbacks apply ONLY if that block is unavailable, so
   nothing brand-related is hardcoded. Edit colours in
   Complianz > Cookie banner > Design, NOT here.

   STATES
   ------
   .neysa-ot                          -> visible
   .neysa-ot.cmplz-hidden             -> hidden (engine controlled)
   :not(.cmplz-categories-visible)    -> first-layer bottom strip
   .cmplz-categories-visible          -> centred left-nav modal
   ===================================================================== */

.neysa-ot {
  /* --- from Complianz design settings --- */
  --ot-text:            var(--cmplz_text_color, #2d2d2d);
  --ot-link:            var(--cmplz_hyperlink_color, #1a73e8);
  --ot-bg:              var(--cmplz_banner_background_color, #ffffff);
  --ot-border:          var(--cmplz_banner_border_color, #e3e6ea);
  --ot-radius:          var(--cmplz_banner_border_radius, 10px);
  --ot-accent:          var(--cmplz_slider_active_color, #1a73e8); /* active tab indicator */

  --ot-accept-bg:       var(--cmplz_button_accept_background_color, #1a73e8);
  --ot-accept-text:     var(--cmplz_button_accept_text_color, #ffffff);
  --ot-accept-border:   var(--cmplz_button_accept_border_color, #1a73e8);
  --ot-deny-bg:         var(--cmplz_button_deny_background_color, #ffffff);
  --ot-deny-text:       var(--cmplz_button_deny_text_color, #2d2d2d);
  --ot-deny-border:     var(--cmplz_button_deny_border_color, #d0d5db);
  --ot-settings-bg:     var(--cmplz_button_settings_background_color, #ffffff);
  --ot-settings-text:   var(--cmplz_button_settings_text_color, #2d2d2d);
  --ot-settings-border: var(--cmplz_button_settings_border_color, #d0d5db);

  --ot-slider-on:       var(--cmplz_slider_active_color, #1a73e8);
  --ot-slider-off:      var(--cmplz_slider_inactive_color, #c5c9cf);
  --ot-slider-bullet:   var(--cmplz_slider_bullet_color, #ffffff);
  --ot-always-active:   var(--cmplz_category_header_always_active_color, #1a7f37);

  --ot-font:            var(--cmplz_text_font_size, 14px);
  --ot-title-font:      var(--cmplz_title_font_size, 17px);
  --ot-btn-font:        var(--cmplz_button_font_size, 13px);
  --ot-cat-title-font:  var(--cmplz_category_header_title_font_size, 16px);
  --ot-cat-body-font:   var(--cmplz_category_body_font_size, 14px);
  --ot-link-font:       var(--cmplz_link_font_size, 12px);

  /* --- structural chrome (no Complianz setting exists; neutral, not brand) --- */
  --ot-nav-bg:          #f6f8fa;
  --ot-nav-active-bg:   var(--cmplz_banner_background_color, #ffffff);
  --ot-overlay:         rgba(0,0,0,.55);
  --ot-muted:           #5f6368;
  --ot-btn-radius:      var(--cmplz_button_border_radius, 6px);
  --ot-maxw:            920px;

  box-sizing: border-box;
  color: var(--ot-text);
  font-size: var(--ot-font);
  line-height: 1.55;
}
.neysa-ot *, .neysa-ot *::before, .neysa-ot *::after { box-sizing: border-box; }

/* Engine-controlled hidden state.
   cmplz-hidden    = server-rendered, before the JS runs.
   cmplz-dismissed = after consent exists. Complianz removes cmplz-hidden on
   every load and adds cmplz-dismissed when a consent record is present, so this
   keeps the banner hidden on refresh once the user has accepted/denied/saved. */
.cmplz-cookiebanner.neysa-ot.cmplz-hidden,
.cmplz-cookiebanner.neysa-ot.cmplz-dismissed { display: none !important; }

/* ---------------------------------------------------------------------
   SHARED CARD
   --------------------------------------------------------------------- */
.neysa-ot .ot-modal-card { background: var(--ot-bg); width: 100%; }
.neysa-ot .cmplz-header { display: flex; align-items: center; gap: 12px; }
.neysa-ot .cmplz-logo { display: flex; align-items: center; }
.neysa-ot .cmplz-logo img, .neysa-ot .cmplz-logo svg { max-height: 34px; width: auto; }
.neysa-ot .cmplz-title { font-size: var(--ot-title-font); font-weight: 700; flex: 1; color: var(--ot-text); }
.neysa-ot .cmplz-close { cursor: pointer; color: var(--ot-text); line-height: 0; padding: 4px; border-radius: 6px; opacity: .7; }
.neysa-ot .cmplz-close svg { width: 16px; height: 16px; }
.neysa-ot .cmplz-close:hover { opacity: 1; background: var(--ot-nav-bg); }
.neysa-ot .cmplz-divider { display: none; }

/* Buttons - colours straight from the Complianz design settings */
.neysa-ot .cmplz-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.neysa-ot .cmplz-btn {
  appearance: none; cursor: pointer; font-size: var(--ot-btn-font); font-weight: 600;
  padding: 10px 18px; border-radius: var(--ot-btn-radius); line-height: 1.2;
  text-decoration: none; display: inline-flex; align-items: center;
  background: var(--ot-settings-bg); color: var(--ot-settings-text);
  border: 1px solid var(--ot-settings-border);
}
.neysa-ot .cmplz-btn:hover { filter: brightness(.97); }
.neysa-ot .cmplz-accept {
  background: var(--ot-accept-bg); color: var(--ot-accept-text); border-color: var(--ot-accept-border);
}
.neysa-ot .cmplz-deny {
  background: var(--ot-deny-bg); color: var(--ot-deny-text); border-color: var(--ot-deny-border);
}
.neysa-ot .cmplz-view-preferences {
  background: var(--ot-settings-bg); color: var(--ot-settings-text); border-color: var(--ot-settings-border);
}
/* "Confirm My Choices" is the primary action in OneTrust, so it reuses the
   Accept colours from settings. Swap to the settings-* vars if you'd rather it
   match Complianz's default (where Save uses the settings button colour). */
.neysa-ot .cmplz-save-preferences {
  background: var(--ot-accept-bg); color: var(--ot-accept-text); border-color: var(--ot-accept-border);
}
.neysa-ot .cmplz-manage-options.tcf { display: none; }

/* ---------------------------------------------------------------------
   STATE 1 - FIRST-LAYER BOTTOM STRIP
   --------------------------------------------------------------------- */
.neysa-ot:not(.cmplz-categories-visible) {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  background: var(--ot-bg); border-top: 1px solid var(--ot-border);
  box-shadow: 0 -2px 18px rgba(0,0,0,.08);
}
.neysa-ot:not(.cmplz-categories-visible) .ot-modal-card {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px 24px; flex-wrap: nowrap; padding: 16px 22px; justify-content: space-between;
}
.neysa-ot:not(.cmplz-categories-visible) .cmplz-header,
.neysa-ot:not(.cmplz-categories-visible) .ot-layout,
.neysa-ot:not(.cmplz-categories-visible) .cmplz-links,
.neysa-ot:not(.cmplz-categories-visible) .cmplz-documents { display: none; }
.neysa-ot:not(.cmplz-categories-visible) .cmplz-message {
  flex: 1 1 380px; min-width: 240px; color: var(--ot-text); margin: 0;
  font-size: var(--ot-font);
}
.neysa-ot:not(.cmplz-categories-visible) .cmplz-buttons { flex: 0 0 auto; margin-left: auto; }
.neysa-ot:not(.cmplz-categories-visible) .cmplz-save-preferences { display: none; }

/* ---------------------------------------------------------------------
   STATE 2 - PREFERENCES MODAL
   --------------------------------------------------------------------- */
.neysa-ot.cmplz-categories-visible {
  position: fixed; inset: 0; z-index: 99999; background: var(--ot-overlay);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.neysa-ot.cmplz-categories-visible .ot-modal-card {
  width: min(var(--ot-maxw), 96vw); max-height: 88vh;
  border-radius: var(--ot-radius); box-shadow: 0 12px 48px rgba(0,0,0,.3);
  display: flex; flex-direction: column; overflow: hidden;
}
.neysa-ot.cmplz-categories-visible .cmplz-header {
  padding: 18px 22px; border-bottom: 1px solid var(--ot-border); flex: 0 0 auto;
}
.neysa-ot.cmplz-categories-visible > .ot-modal-card .cmplz-body > .cmplz-message { display: none; }
.neysa-ot.cmplz-categories-visible .cmplz-body { flex: 1 1 auto; min-height: 0; padding: 0; }
.neysa-ot.cmplz-categories-visible .ot-layout { display: flex; height: 100%; min-height: 0; }

/* Left nav */
.neysa-ot .ot-nav {
  flex: 0 0 230px; background: var(--ot-nav-bg); border-right: 1px solid var(--ot-border);
  overflow-y: auto; display: flex; flex-direction: column; padding: 10px 0;
}
.neysa-ot .ot-nav-item {
  appearance: none; border: 0; background: transparent; cursor: pointer; text-align: left;
  font-size: var(--ot-font); font-weight: 600; color: var(--ot-muted);
  padding: 13px 20px; border-left: 3px solid transparent; line-height: 1.3;
}
.neysa-ot .ot-nav-item:hover { background: rgba(0,0,0,.03); color: var(--ot-text); }
.neysa-ot .ot-nav-item.ot-active {
  background: var(--ot-nav-active-bg); color: var(--ot-text); border-left-color: var(--ot-accent);
}

/* Right panels */
.neysa-ot .ot-panels { flex: 1 1 auto; overflow-y: auto; padding: 24px 26px; }
.neysa-ot .ot-panel { display: none; }
.neysa-ot .ot-panel.ot-active { display: block; }
.neysa-ot .ot-panel-title,
.neysa-ot.cmplz-categories-visible .cmplz-category-title {
  font-size: var(--ot-cat-title-font); font-weight: 700; color: var(--ot-text); margin: 0 0 10px;
}
.neysa-ot .ot-panel-text,
.neysa-ot .cmplz-description { color: var(--ot-text); font-size: var(--ot-cat-body-font); }
.neysa-ot .cmplz-description { display: block !important; margin-top: 6px; }
.neysa-ot .cmplz-description[hidden] { display: block !important; }

.neysa-ot.cmplz-categories-visible .cmplz-category-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px;
}
.neysa-ot .cmplz-category-toggle { display: none; }

.neysa-ot .cmplz-always-active {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--ot-always-active); white-space: nowrap;
}

/* ---------------------------------------------------------------------
   TOGGLE SWITCHES  (colours from Complianz slider settings)
   --------------------------------------------------------------------- */
.neysa-ot .cmplz-banner-checkbox { position: relative; display: inline-block; }
.neysa-ot .cmplz-consent-checkbox {
  position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; z-index: 2;
}
.neysa-ot .cmplz-banner-checkbox .cmplz-label {
  display: inline-block; width: 44px; height: 24px; border-radius: 999px;
  background: var(--ot-slider-off); position: relative; transition: background .15s ease;
}
.neysa-ot .cmplz-banner-checkbox .cmplz-label::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ot-slider-bullet); box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .15s ease;
}
.neysa-ot .cmplz-consent-checkbox:checked + .cmplz-label { background: var(--ot-slider-on); }
.neysa-ot .cmplz-consent-checkbox:checked + .cmplz-label::after { transform: translateX(20px); }
.neysa-ot .cmplz-consent-checkbox:focus-visible + .cmplz-label { outline: 2px solid var(--ot-accent); outline-offset: 2px; }
.neysa-ot .cmplz-functional .cmplz-banner-checkbox { display: none; }
.neysa-ot .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Links + footer */
.neysa-ot.cmplz-categories-visible .cmplz-links.cmplz-information { flex: 0 0 auto; padding: 12px 26px 0; }
.neysa-ot .cmplz-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.neysa-ot .cmplz-links a { color: var(--ot-link); font-size: var(--ot-link-font); text-decoration: underline; }
.neysa-ot .cmplz-links .tcf { display: none; }
.neysa-ot.cmplz-categories-visible .cmplz-buttons {
  flex: 0 0 auto; padding: 16px 22px; border-top: 1px solid var(--ot-border); justify-content: flex-end;
}
.neysa-ot.cmplz-categories-visible .cmplz-view-preferences,
.neysa-ot.cmplz-categories-visible .cmplz-documents { display: none; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .neysa-ot.cmplz-categories-visible { padding: 0; }
  .neysa-ot.cmplz-categories-visible .ot-modal-card { width: 100vw; max-height: 100vh; border-radius: 0; }
  .neysa-ot.cmplz-categories-visible .ot-layout { flex-direction: column; }
  .neysa-ot .ot-nav {
    flex: 0 0 auto; flex-direction: row; overflow-x: auto; border-right: 0;
    border-bottom: 1px solid var(--ot-border); padding: 0;
  }
  .neysa-ot .ot-nav-item { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .neysa-ot .ot-nav-item.ot-active { border-left: 0; border-bottom-color: var(--ot-accent); }
  .neysa-ot:not(.cmplz-categories-visible) .cmplz-buttons { width: 100%; margin-left: 0; }
  .neysa-ot:not(.cmplz-categories-visible) .cmplz-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 760px) {
  .neysa-ot:not(.cmplz-categories-visible) .ot-modal-card { flex-direction: column; gap: 12px; padding: 16px; }
  .neysa-ot:not(.cmplz-categories-visible) .cmplz-message { flex: 1 1 auto; min-width: 0; }
}