/* Tokenkarma brand override for Klaro v0.7.
 * Loads after the vendor stylesheet (/klaro.css). Vendor file is left
 * untouched so future Klaro upgrades stay clean.
 *
 * Design intent:
 *   - Bottom-right notice card, glassy elevated surface, brand accent
 *     #22c55e on the primary action only.
 *   - Eyebrow row "● COOKIES" (matches the eyebrow-pill pattern used
 *     across the site), then a primary-color headline and a muted
 *     subline so hierarchy reads at a glance.
 *   - Geist family, tight letter-spacing on buttons, generous body
 *     line-height for readability.
 *   - Slide-up entrance with cubic-bezier, no jumpy hover translates.
 *   - Mobile: full-width with breathing room, same hierarchy.
 *   - Modal (full Customize panel) inherits the same surface and
 *     button system so the experience stays cohesive.
 */

/* ===== Root font ===== */
#klaro,
.klaro {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-feature-settings: 'cv11', 'ss01';
}

/* ===== Notice card (small bottom-right popup) ===== */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  /* Surface: layered glass, sits above the page bg with a hairline
     border and a subtle accent ribbon at the top edge. */
  background: rgba(20, 20, 22, 0.94) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--text-primary, #fafafa) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  /* Three layers: 1px highlight inset, deep ambient, tight contact. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 48px rgba(0, 0, 0, 0.6),
    0 6px 14px rgba(0, 0, 0, 0.4) !important;
  max-width: 380px !important;
  padding: 20px 22px 14px !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  animation: tk-klaro-slide 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes tk-klaro-slide {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Body copy with hierarchy ===== */
.klaro .cookie-notice .cn-body {
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.klaro .cookie-notice .cn-body p {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: inherit !important;
}

.klaro .cookie-notice .cn-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--accent, #22c55e) !important;
  margin-bottom: 4px !important;
}
.klaro .cookie-notice .cn-eyebrow-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent, #22c55e) !important;
  box-shadow: 0 0 8px var(--accent, #22c55e) !important;
  flex-shrink: 0 !important;
}
.klaro .cookie-notice .cn-headline {
  display: block !important;
  color: var(--text-primary, #fafafa) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}
.klaro .cookie-notice .cn-sub {
  display: block !important;
  color: var(--text-muted, #71717a) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* ===== Action row =====
 * Klaro's actual markup is:
 *   .cookie-notice > .cn-body > [p, .cn-ok > [.cn-learn-more, .cn-buttons > buttons]]
 *
 * `.cn-ok` is the outer action row that holds More info + the button
 * group. `.cn-buttons` is just the inner Decline+Accept pair. Only one
 * of them gets the divider — the outer one — so we don't get two
 * hairlines stacked. The inner button group is rendered inline with
 * no border, no padding, no margin. */
.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-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.klaro .cookie-notice .cn-ok .cn-buttons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 0 none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* ===== Buttons (shared base) ===== */
.klaro .cookie-notice .cn-buttons button,
.klaro .cookie-modal .cm-btn,
.klaro button.cm-btn {
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.18s ease !important;
}
.klaro .cookie-notice .cn-buttons button:focus-visible,
.klaro .cookie-modal .cm-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.32) !important;
}

/* ===== Primary (Accept / Save / Accept all) ===== */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn-accept,
.klaro .cookie-notice .cm-btn-accept-all,
.klaro .cookie-modal .cm-btn-success,
.klaro .cookie-modal .cm-btn-accept-all {
  background: var(--accent, #22c55e) !important;
  color: var(--bg-base, #0a0a0b) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn-accept:hover,
.klaro .cookie-notice .cm-btn-accept-all:hover,
.klaro .cookie-modal .cm-btn-success:hover {
  background: var(--accent-light, #4ade80) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 4px 14px rgba(34, 197, 94, 0.3) !important;
}

/* ===== Secondary (Decline / Close / Danger) ===== */
.klaro .cookie-notice .cm-btn-danger,
.klaro .cookie-notice .cm-btn-decline,
.klaro .cookie-modal .cm-btn-danger {
  background: transparent !important;
  color: var(--text-secondary, #a1a1aa) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.klaro .cookie-notice .cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn-decline:hover,
.klaro .cookie-modal .cm-btn-danger:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-primary, #fafafa) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ===== Tertiary (More info → Customize) ===== */
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice button.cn-learn-more {
  background: transparent !important;
  color: var(--text-muted, #71717a) !important;
  border: none !important;
  padding: 8px 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  position: relative !important;
  margin-right: auto !important;
  transition: color 0.15s ease !important;
}
.klaro .cookie-notice .cn-learn-more::after {
  content: ' →';
  margin-left: 4px;
  transition: transform 0.15s ease;
  display: inline-block;
}
.klaro .cookie-notice .cn-learn-more:hover {
  color: var(--accent, #22c55e) !important;
}
.klaro .cookie-notice .cn-learn-more:hover::after {
  transform: translateX(2px);
}

/* ===== Inline links inside the body copy (HTML in description) ===== */
.klaro .cookie-notice .cm-link,
.klaro .cookie-notice button[data-show] {
  color: var(--accent, #22c55e) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font: inherit !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.klaro .cookie-notice .cm-link:hover,
.klaro .cookie-notice button[data-show]:hover {
  color: var(--accent-light, #4ade80) !important;
}

/* ===== Modal (full Customize panel) ===== */
.klaro .cookie-modal {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.klaro .cookie-modal .cm-modal {
  background: var(--bg-elevated, #141416) !important;
  color: var(--text-primary, #fafafa) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 32px 80px rgba(0, 0, 0, 0.6) !important;
}
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2,
.klaro .cookie-modal .cm-modal h1,
.klaro .cookie-modal .cm-modal h2 {
  color: var(--text-primary, #fafafa) !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal li,
.klaro .cookie-modal .cm-services .cm-service .cm-service-description {
  color: var(--text-secondary, #a1a1aa) !important;
  line-height: 1.6 !important;
}
.klaro .cookie-modal .cm-services .cm-service {
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.klaro .cookie-modal .cm-services .cm-service .cm-content {
  padding: 14px 16px !important;
}

/* ===== Toggle switch ===== */
.klaro .cookie-modal .cm-list-input + .cm-list-label .slider,
.klaro .cm-list-input + .cm-list-label .slider {
  background: rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  transition: background 0.18s ease !important;
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background: var(--accent, #22c55e) !important;
}
.klaro .cookie-modal .cm-list-input + .cm-list-label .slider .switch {
  background: #fafafa !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.32) !important;
}

/* ===== Modal notice fallback (defensive against noticeAsModal=true) ===== */
.klaro .cookie-modal-notice {
  background: rgba(20, 20, 22, 0.96) !important;
  color: var(--text-primary, #fafafa) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
}

/* ===== Mobile: notice goes near full-width with breathing room ===== */
@media (max-width: 540px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    max-width: none !important;
    padding: 18px 18px 14px !important;
  }
  .klaro .cookie-notice .cn-buttons,
  .klaro .cookie-notice .cn-ok {
    justify-content: stretch !important;
  }
  .klaro .cookie-notice .cn-buttons .cm-btn-success,
  .klaro .cookie-notice .cn-buttons .cm-btn-accept,
  .klaro .cookie-notice .cn-buttons .cm-btn-accept-all,
  .klaro .cookie-notice .cn-buttons .cm-btn-decline,
  .klaro .cookie-notice .cn-buttons .cm-btn-danger {
    flex: 1 1 auto;
  }
  .klaro .cookie-notice .cn-learn-more {
    flex: 0 0 100%;
    margin-right: 0 !important;
    text-align: center;
    padding: 6px 0 !important;
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    animation: none !important;
  }
  .klaro .cookie-notice .cn-eyebrow-dot {
    box-shadow: none !important;
  }
}