/* ==========================================================================
   Trischick brand theme for Klaro (F-20).

   Overrides the VENDORED klaro.css (which stays untouched for clean updates).
   Linked AFTER klaro.css in layout.tsx, so equal-specificity rules win by
   source order; button-colour rules add one class (0,4,0) to beat the base
   button rule (0,3,0).

   Brand hex (from globals.css @theme):
     wine  #7B1B38  (--accent-wine)  — primary CTA, links, toggle ON
     clay  #B87E5D  (--accent-clay)  — Decline button (branded, NOT grey)
     earth #5A3E2D  (--surface-earth)— body/title text
     taupe #735C58  (--text-secondary)— secondary button (Settings/Learn more)
     cream #EAE4DD  (--surface-page) — button text
     elev  #F2EDE5  (--surface-elevated)— banner/modal surface
     sunk  #DDD6CB  (--surface-sunk) — borders

   EDPB: "Accept" and "Decline" are visually EQUAL — identical box (padding,
   radius, min-width, font, size, weight); only the fill colour differs and
   neither is greyed/de-emphasised.
   ========================================================================== */

/* --- Variable overrides (safe, clearly-scoped: fonts + green→wine + radius) --- */
.klaro {
  --font-family: var(--font-poppins), system-ui, sans-serif;
  --title-font-family: var(--font-poppins), system-ui, sans-serif;
  --button-text-color: #EAE4DD;        /* cream */
  --border-radius: 8px;                /* notice/modal container corners */
  /* Klaro's "success/green" family → wine. Catches the success button AND the
     service toggle ON-state AND focus glow, all of which read var(--green*). */
  --green1: #7B1B38;                   /* wine */
  --green2: #7B1B38;                   /* wine (accept-selected) */
  --green3: #B87E5D;                   /* clay focus glow */
}

/* --- Container: banner + settings modal --- */
.klaro .cookie-notice,
.klaro .context-notice,
.klaro .cookie-modal .cm-modal {
  background-color: #F2EDE5;           /* elevated cream */
  color: #5A3E2D;                      /* earth */
  border-color: #DDD6CB;               /* sunk border */
  font-family: var(--font-poppins), system-ui, sans-serif;
}

/* Titles + body copy → earth, Poppins */
.klaro .cookie-notice .cn-body,
.klaro .context-notice .cn-body,
.klaro .cookie-modal .cm-title,
.klaro .cookie-modal .cm-body,
.klaro .cm-list-title,
.klaro .cm-list-description {
  color: #5A3E2D;                      /* earth */
  font-family: var(--font-poppins), system-ui, sans-serif;
}

/* Links → wine */
.klaro a,
.klaro .cm-link,
.klaro .cookie-notice a {
  color: #7B1B38;                      /* wine */
}

/* "Podešavanja" / "Settings" link on the short banner (opens per-service
   settings). Default Klaro renders the <a> form faint/small; make it clearly
   visible — wine, underlined, medium weight, readable size — so the per-service
   choice is an obvious option, not a hidden afterthought. (The button form,
   .cm-btn-lern-more.cm-btn-info, is already a visible taupe button — left as-is
   to keep cream-on-taupe contrast.) */
.klaro .cm-link.cn-learn-more,
.klaro .cookie-notice a.cn-learn-more {
  color: #7B1B38;                      /* wine */
  font-family: var(--font-poppins), system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;                /* match button text size */
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 1;                          /* override any faint default */
}

/* ==========================================================================
   EDPB equal-prominence buttons
   The base box below is IDENTICAL for every button (Accept + Decline share
   padding / radius / min-width / font / size / weight / text colour).
   ========================================================================== */
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  font-family: var(--font-poppins), system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;                /* 15px — identical */
  line-height: 1.2;
  padding: 0.7em 1.6em;                /* identical */
  min-width: 132px;                    /* identical */
  border-radius: 9999px;               /* identical brand pill */
  border: none;
  color: #EAE4DD;                      /* cream text on both */
  cursor: pointer;
  transition: opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.klaro .cookie-modal .cm-btn:hover,
.klaro .context-notice .cm-btn:hover,
.klaro .cookie-notice .cm-btn:hover {
  opacity: 0.9;
}

/* Accept all / Accept / Accept-selected → WINE */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success-var {
  background-color: #7B1B38;           /* wine */
  color: #EAE4DD;                      /* cream */
}

/* Decline all / Decline → EARTH (branded, NOT grey — EDPB EQUAL weight).
   Earth #5A3E2D and wine #7B1B38 have near-identical perceived brightness
   (68 vs 59 on 0–255), so neither button draws the eye more than the other —
   genuine equal prominence, distinguished only by hue. (Clay #B87E5D was
   ~2.4x lighter than wine, making Accept visually dominant — a soft dark
   pattern — so it was rejected for the decline button.)
   Klaro applies cm-btn-danger + cm-btn-decline to the decline button (verified
   in klaro.js; the vendored CSS has NO rule for these, so without this it would
   fall back to the grey base button — also a dark pattern). */
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .context-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .context-notice .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-decline {
  background-color: #5A3E2D;           /* earth — equal weight to wine */
  color: #EAE4DD;                      /* cream */
}

/* Settings / Learn more (secondary, NOT the decline path) → taupe */
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: #735C58;           /* taupe */
  color: #EAE4DD;                      /* cream */
}

/* Service toggle knob → cream (on the wine ON-track from --green1) */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before {
  background-color: #EAE4DD;           /* cream knob */
}

/* "powered by Klaro" footer — keep subtle, brand-muted */
.klaro .cm-powered-by a {
  color: #735C58;                      /* taupe */
}

/* ==========================================================================
   NOTICE (short banner) ONLY — position, size, and equal-weight buttons.
   Scoped to .cookie-notice:not(.cookie-modal-notice) so the settings MODAL
   (.cookie-modal) is untouched (it keeps wine / earth / taupe).

   NON-BLOCKING by design: the notice has NO backdrop/overlay (only the modal's
   .cm-bg dims the page). Centering it does not block scrolling or clicking —
   it is a centered card, not a cookie wall. mustConsent stays false in config.
   ========================================================================== */

/* Bottom-centre, a little above the bottom edge — natural for a soft banner.
   (Vertical-centre is possible by setting `top:50%` + translateY(-50%), but a
   card floating mid-screen over live content reads less naturally than a
   bottom-centre bar.) */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 2rem;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 560px;                    /* slightly bigger card (was ~400) */
  /* Cream surface, earth text — the notice container defaults to var(--dark1)
     (#333 dark grey) via a 0,3,0 klaro rule that beat the step-B 0,2,0 override,
     so the banner stayed dark while only the buttons were branded. This 0,3,0
     selector (loaded after klaro.css) wins by source order. */
  background-color: #F2EDE5;           /* cream — brand surface */
  color: #5A3E2D;                      /* earth text, cascades to children */
  border: 1px solid #DDD6CB;           /* sunk border */
  box-shadow: 0 8px 28px rgba(31, 31, 31, 0.18);
}

/* Notice title/headings/lists default to var(--light1) (#fafafa, for the old
   dark bg). Flip to earth so they are readable on the cream surface. The klaro
   rule is `.klaro .cookie-notice h1,h2,ul,li` (0,2,1); this matches it and wins
   by source order. */
.klaro .cookie-notice:not(.cookie-modal-notice) h1,
.klaro .cookie-notice:not(.cookie-modal-notice) h2,
.klaro .cookie-notice:not(.cookie-modal-notice) h3,
.klaro .cookie-notice:not(.cookie-modal-notice) ul,
.klaro .cookie-notice:not(.cookie-modal-notice) li,
.klaro .cookie-notice:not(.cookie-modal-notice) p {
  color: #5A3E2D;                      /* earth — readable on cream */
}

/* Slightly larger, more noticeable — but not a giant modal. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 1.5em;                      /* roomier (was 1em) */
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  font-size: 1.05rem;                  /* a touch larger copy */
  line-height: 1.5;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn {
  padding: 0.8em 1.8em;                /* slightly bigger buttons */
  font-size: 1rem;                     /* 16px */
}

/* Both bulk buttons → EARTH (identical fill, equal prominence — EDPB).
   "Prihvati sve" is solid earth; "Odbij sve" is the same solid earth with a
   subtle clay inset border so they are distinguishable without either being
   more prominent. (A border on Decline, if anything, makes reject slightly
   MORE visible — never a dark pattern; only making reject *less* prominent is.)
   Specificity 0,5,0 — higher than the general button rules above, and scoped to
   the notice, so the modal's wine/earth/taupe is unaffected. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-success,
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-danger,
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-decline {
  background-color: #5A3E2D;           /* earth — both buttons identical fill */
  color: #EAE4DD;                      /* cream */
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-danger,
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-decline {
  box-shadow: inset 0 0 0 1.5px #B87E5D; /* subtle clay outline — distinguisher */
}