/* public/klaro-brand.css
 * RENOVA brand override for Klaro 0.7.x — REAL DOM based
 * Loaded AFTER klaro.css in index.html
 *
 * Verified live DOM (2026-04-26):
 * <div class="klaro">
 *   <div id="klaro-cookie-notice" class="cookie-notice">     ← bottom banner (first visit)
 *     <div class="cn-body">
 *       <p id="id-cookie-notice"><span><span>...desc...</span></span></p>
 *       <div class="cn-ok">
 *         <a class="cm-link cn-learn-more">Dostosuj</a>
 *         <div class="cn-buttons">
 *           <button class="cm-btn cm-btn-danger cn-decline">Odrzuć</button>
 *           <button class="cm-btn cm-btn-success">Akceptuj</button>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *   <div class="cookie-modal">...preferences modal...</div>
 * </div>
 */

:root {
  --klaro-bg: #272154;
  --klaro-fg: #FFFDF9;
  --klaro-muted: rgba(255, 253, 249, 0.72);
  --klaro-yellow: #FFFDF9;
  --klaro-yellow-hover: #F3F1EB;
  --klaro-border: rgba(255, 255, 255, 0.08);
  --klaro-radius: 18px;
  --klaro-radius-sm: 12px;
  --klaro-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.klaro,
.klaro * {
  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif !important;
  box-sizing: border-box;
}

/* ─── BANNER (cookie-notice on first visit) ──────────────────── */
.klaro #klaro-cookie-notice,
.klaro .cookie-notice {
  background: var(--klaro-bg) !important;
  color: var(--klaro-fg) !important;
  border: 1px solid var(--klaro-border) !important;
  border-radius: var(--klaro-radius) !important;
  box-shadow: var(--klaro-shadow) !important;
  max-width: 460px !important;
  width: calc(100vw - 48px) !important;
  margin: 0 !important;
  padding: 0 !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  position: fixed !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  animation: klaro-slide-up 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden !important;
  outline: none !important;
}

.klaro #klaro-cookie-notice:focus,
.klaro #klaro-cookie-notice:focus-visible,
.klaro .cookie-notice:focus,
.klaro .cookie-notice:focus-visible {
  outline: none !important;
  box-shadow: var(--klaro-shadow), 0 0 0 2px rgba(255, 200, 57, 0.15) !important;
}

@keyframes klaro-slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.klaro #klaro-cookie-notice .cn-body,
.klaro .cookie-notice .cn-body {
  margin: 0 !important;
  padding: 22px 24px !important;
  background: transparent !important;
}

.klaro #klaro-cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice #id-cookie-notice {
  color: var(--klaro-fg) !important;
  font-size: 14.5px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  line-height: 1.55 !important;
  background: transparent !important;
}

/* Inline policy links inside banner/modal description text */
.klaro .cookie-notice a[href^="/"],
.klaro .cookie-modal .cm-header a[href^="/"] {
  color: var(--klaro-yellow) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-color: rgba(255, 200, 57, 0.5) !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}

.klaro .cookie-notice a[href^="/"]:hover,
.klaro .cookie-modal .cm-header a[href^="/"]:hover {
  color: var(--klaro-yellow-hover) !important;
  text-decoration-color: var(--klaro-yellow-hover) !important;
}

/* Klaro wraps text in <span><span>...</span></span> — kill any leftover styling */
.klaro .cookie-notice #id-cookie-notice span,
.klaro .cookie-notice .cn-body p span {
  background: transparent !important;
  color: inherit !important;
  display: inline !important;
  padding: 0 !important;
}

/* ─── BANNER buttons row (.cn-ok) ─────────────────────────────── */
.klaro .cookie-notice .cn-ok,
.klaro #klaro-cookie-notice .cn-ok {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* "Dostosuj" link (cm-link.cn-learn-more) — subtle yellow text */
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice .cm-link {
  color: var(--klaro-yellow) !important;
  background: transparent !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  border: none !important;
  margin-right: auto !important;
  transition: background 0.2s, color 0.2s !important;
}

.klaro .cookie-notice .cn-learn-more:hover,
.klaro .cookie-notice .cm-link:hover {
  color: var(--klaro-yellow-hover) !important;
  background: rgba(255, 200, 57, 0.08) !important;
}

/* Button group (decline + accept) */
.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ─── BUTTONS (shared base) ───────────────────────────────────── */
.klaro .cm-btn,
.klaro .cookie-notice button.cm-btn,
.klaro .cookie-modal button.cm-btn {
  font-family: "Figtree", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1) !important;
  letter-spacing: 0;
  line-height: 1.2 !important;
  white-space: nowrap;
  margin: 0 !important;
}

/* Accept all → yellow primary */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cookie-notice .cm-btn-success {
  background: var(--klaro-yellow) !important;
  color: var(--klaro-bg) !important;
}

.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept:hover,
.klaro .cm-btn.cm-btn-accept-all:hover {
  background: var(--klaro-yellow-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px -4px rgba(255, 200, 57, 0.4) !important;
}

/* Decline all → ghost outline (Klaro uses .cm-btn-danger for decline!) */
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cn-decline,
.klaro .cookie-notice .cn-decline {
  background: transparent !important;
  color: var(--klaro-muted) !important;
  border: 1px solid var(--klaro-border) !important;
}

.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cn-decline:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--klaro-fg) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Info / "Learn more" → subtle yellow text */
.klaro .cm-btn.cm-btn-info {
  background: transparent !important;
  color: var(--klaro-yellow) !important;
}

.klaro .cm-btn.cm-btn-info:hover {
  background: rgba(255, 200, 57, 0.08) !important;
  color: var(--klaro-yellow-hover) !important;
}

/* ─── PREFERENCES MODAL (.cookie-modal) ──────────────────────── */
.klaro .cookie-modal {
  font-family: "Figtree", sans-serif !important;
}

.klaro .cookie-modal .cm-bg {
  background: rgba(35, 39, 47, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-klaro {
  background: var(--klaro-bg) !important;
  color: var(--klaro-fg) !important;
  border-radius: var(--klaro-radius) !important;
  box-shadow: var(--klaro-shadow) !important;
  border: 1px solid var(--klaro-border) !important;
  max-width: 560px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.klaro .cookie-modal .cm-header {
  background: var(--klaro-bg) !important;
  border-bottom: 1px solid var(--klaro-border) !important;
  padding: 26px 28px 22px !important;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2,
.klaro .cookie-modal h1.title {
  color: var(--klaro-fg) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
  letter-spacing: 0;
  line-height: 1.25 !important;
}

.klaro .cookie-modal .cm-header p,
.klaro .cookie-modal .cm-header > p {
  color: var(--klaro-muted) !important;
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

.klaro .cookie-modal .cm-body {
  padding: 0 !important;
  background: var(--klaro-bg) !important;
}

.klaro .cookie-modal .cm-body ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.klaro .cookie-modal .cm-body li.cm-service,
.klaro .cookie-modal .cm-body li.cm-purpose {
  position: relative !important;
  padding: 18px 88px 18px 28px !important;  /* right: 28 gutter + 50 switch + 10 gap */
  border-bottom: 1px solid var(--klaro-border) !important;
  background: transparent !important;
  min-height: 60px !important;
}

/* Override Klaro default: padding-left:60px (space for left-side switch) */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
  padding-left: 28px !important;
  padding-right: 88px !important;
}

/* Move switch from left:0 of label to right:28px of li (anchor relative to li) */
.klaro .cookie-modal .cm-list-label {
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Toggle anchored to title row (not LI vertical center) so it stays aligned
   with title even when 'X usługi' is expanded and LI grows much taller.
   18px = matches padding-top of LI; switch center lands at title baseline. */
.klaro .cookie-modal .cm-list-label .cm-switch {
  position: absolute !important;
  left: auto !important;
  right: 28px !important;
  top: 18px !important;
  bottom: auto !important;
  transform: none !important;
  width: 50px !important;
  height: 24px !important;
}

.klaro .cookie-modal .cm-list-label .cm-switch .slider {
  width: 50px !important;
  height: 24px !important;
  border-radius: 999px !important;
}

/* Thumb (::before) — Klaro default is 20x20 with bottom:5px, designed for a
   30px tall slider. Our slider is 24px → thumb sticks out 1px on top.
   Fix: shrink thumb to 18x18 and recenter inside the 24px track.
   Off state: left 3px (3+18+3 fits in 24px? no, 24 wide). The track is 50 wide,
   thumb at left:3 means it sits at 3..21 (18px). Centered vertically: top 3px. */
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
  height: 18px !important;
  width: 18px !important;
  top: 3px !important;
  bottom: auto !important;
  left: 3px !important;
  border-radius: 999px !important;
}

/* On-state transform: 50 (track) - 18 (thumb) - 3 (left padding) - 3 (right) = 26px */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before {
  transform: translateX(26px) !important;
}

/* ─── EXPANDED nested services list (".↓ X usługi" reveal) ──────── */

/* Klaro default has `margin-left: -40px` on .cm-content (designed for original
   60px parent padding). We changed parent padding to 28px → -40px now overflows.
   Reset to 0 and rely on parent's own padding-right to right-align switches. */
.klaro .cookie-modal .cm-content.expanded {
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Nested service items — visually distinct so user knows they're sub-items.
   Yellow border-left indicator + subtle bg + tighter padding. */
.klaro .cookie-modal .cm-content.expanded li.cm-service {
  position: relative !important;
  padding: 12px 72px 12px 16px !important;
  margin: 6px 0 0 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 10px !important;
  border-bottom: none !important;
  border-left: 3px solid var(--klaro-yellow) !important;
  min-height: auto !important;
}

.klaro .cookie-modal .cm-content.expanded li.cm-service:first-child {
  margin-top: 0 !important;
}

/* Nested item title smaller */
.klaro .cookie-modal .cm-content.expanded .cm-list-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

/* "Cel: Analityka" purpose tag inside nested service — smaller subtle tag */
.klaro .cookie-modal .cm-content.expanded p.purposes {
  color: rgba(249, 250, 251, 0.5) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
}

/* Nested switch — tighter right padding (16px gutter vs 28px on parent) +
   vertical center (compact 2-line item, so center alignment looks correct) */
.klaro .cookie-modal .cm-content.expanded li.cm-service .cm-switch {
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Hide caret arrow that Klaro might render — use icon in 'X usługi' link itself */
.klaro .cookie-modal .cm-content.expanded .cm-caret {
  display: none !important;
}

.klaro .cookie-modal .cm-body li:last-child {
  border-bottom: none !important;
}

.klaro .cookie-modal .cm-list-title,
.klaro .cookie-modal label .cm-list-title {
  color: var(--klaro-fg) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal p.cm-list-description {
  color: var(--klaro-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
}

/* "1 usługa" / "X usługi" link inside service list — was Klaro default green */
.klaro .cookie-modal .cm-services .cm-link,
.klaro .cookie-modal .cm-services a,
.klaro .cookie-modal .cm-purposes .cm-link,
.klaro .cookie-modal .cm-purposes a {
  color: var(--klaro-yellow) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-block !important;
  margin-top: 4px !important;
}

.klaro .cookie-modal .cm-services .cm-link:hover,
.klaro .cookie-modal .cm-purposes .cm-link:hover {
  color: var(--klaro-yellow-hover) !important;
  text-decoration: underline !important;
}

.klaro .cookie-modal .cm-footer {
  border-top: 1px solid var(--klaro-border) !important;
  padding: 18px 28px !important;
  background: var(--klaro-bg) !important;
}

.klaro .cookie-modal .cm-footer-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* "Akceptuj wybrane" in modal footer — Klaro renders as <a class="cm-link"> not button.
   Style as pill matching other buttons. */
.klaro .cookie-modal .cm-footer-buttons a.cm-link,
.klaro .cookie-modal .cm-footer-buttons .cn-modal-link {
  font-family: "Figtree", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid var(--klaro-yellow) !important;
  color: var(--klaro-yellow) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1) !important;
  white-space: nowrap;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.klaro .cookie-modal .cm-footer-buttons a.cm-link:hover {
  background: rgba(255, 200, 57, 0.1) !important;
  color: var(--klaro-yellow-hover) !important;
}

.klaro .cookie-modal .cm-powered-by {
  font-size: 11px !important;
  color: rgba(249, 250, 251, 0.35) !important;
  margin-top: 8px !important;
}

.klaro .cookie-modal .cm-powered-by a {
  color: rgba(249, 250, 251, 0.5) !important;
}

/* ─── TOGGLE SWITCHES ────────────────────────────────────────── */
.klaro .cm-list-input + .cm-list-label .slider,
.klaro .cookie-modal .slider,
.klaro .cookie-notice .slider {
  background: rgba(255, 255, 255, 0.18) !important;
  transition: background 0.2s ease !important;
}

.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background: var(--klaro-yellow) !important;
}

.klaro .cm-list-input:checked + .cm-list-label .slider::before {
  background: var(--klaro-bg) !important;
}

.klaro .cm-list-input + .cm-list-label .slider::before {
  background: var(--klaro-fg) !important;
}

.klaro .cm-list-input:focus-visible + .cm-list-label .slider {
  box-shadow: 0 0 0 3px rgba(255, 200, 57, 0.4) !important;
  outline: none !important;
}

.klaro .cm-list-input.cm-required:checked + .cm-list-label .slider,
.klaro .cm-list-input.required:checked + .cm-list-label .slider {
  background: rgba(255, 200, 57, 0.45) !important;
}

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .klaro #klaro-cookie-notice,
  .klaro .cookie-notice {
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  .klaro #klaro-cookie-notice .cn-body,
  .klaro .cookie-notice .cn-body {
    padding: 18px 18px !important;
  }

  .klaro .cookie-notice .cn-ok {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .klaro .cookie-notice .cn-learn-more {
    margin-right: 0 !important;
    margin-bottom: 4px !important;
    text-align: center;
  }

  .klaro .cookie-notice .cn-buttons {
    flex-direction: column !important;
  }

  .klaro .cookie-notice .cm-btn {
    width: 100% !important;
    text-align: center !important;
  }

  .klaro .cookie-modal .cm-modal,
  .klaro .cookie-modal .cm-klaro {
    margin: 12px !important;
    border-radius: 14px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: hidden !important;
  }

  .klaro .cookie-modal .cm-body {
    max-height: 50dvh !important;
    overflow-y: auto !important;
  }

  .klaro .cookie-modal .cm-header {
    padding: 20px 18px 16px !important;
  }

  .klaro .cookie-modal .cm-footer {
    padding: 14px 18px !important;
  }

  .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service,
  .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose,
  .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service,
  .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
    padding-left: 18px !important;
    padding-right: 72px !important;
  }

  .klaro .cookie-modal .cm-list-label .cm-switch {
    right: 18px !important;
  }
}