/* Merv consent banner — brand styling for the self-hosted Klaro (no-css build).
 * Scoped under .klaro so it can't touch the rest of the site. */

.klaro {
  --merv-ink: #0e1524;
  --merv-brand: #2563eb;
  --merv-brand-hover: #1d4ed8;
  --merv-line: #e6e8ee;
  --merv-body: #4b5563;
  --merv-muted: #9ca3af;
  font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---- the bottom-right notice card ---- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: #fff !important;
  color: var(--merv-ink) !important;
  border: 1px solid var(--merv-line);
  border-radius: 16px;
  box-shadow: 0 18px 50px -14px rgba(14,21,36,.34), 0 2px 8px -2px rgba(14,21,36,.10);
  max-width: 420px;
  left: auto; right: 22px; bottom: 22px;
  padding: 22px 24px 20px;
  overflow: hidden;
}
/* subtle brand accent line along the top of the card */
.klaro .cookie-notice:not(.cookie-modal-notice)::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--merv-brand), #60a5fa);
}

/* title (from consentNotice.title) */
.klaro .cookie-notice .cn-body > *:first-child,
.klaro .cookie-notice .cn-title {
  font-weight: 800; font-size: 16px; color: var(--merv-ink); margin: 0 0 8px; letter-spacing: -.01em;
}
.klaro .cookie-notice .cn-body { margin: 0; padding: 0; }
.klaro .cookie-notice .cn-body p,
.klaro .cookie-modal .cn-body p {
  font-size: 13.5px; line-height: 1.6; color: var(--merv-body); margin: 0 0 16px;
}
.klaro .cookie-notice .cn-ok {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px;
}

/* ---- buttons ---- */
.klaro .cm-btn,
.klaro .cookie-notice .cm-btn {
  border-radius: 10px !important;
  font-weight: 700; font-size: 13.5px; padding: 11px 20px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  cursor: pointer;
}
.klaro .cm-btn:active { transform: translateY(1px); }

/* primary = Accept all */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn-accept-all,
.klaro .cookie-notice .cm-btn-success {
  background: var(--merv-brand) !important; color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(37,99,235,.5);
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn-accept-all:hover { background: var(--merv-brand-hover) !important; }

/* secondary = Decline (outlined) */
.klaro .cm-btn.cn-decline,
.klaro .cm-btn.cm-btn-decline {
  background: #fff !important; color: var(--merv-body) !important;
  border-color: var(--merv-line) !important;
}
.klaro .cm-btn.cn-decline:hover,
.klaro .cm-btn.cm-btn-decline:hover { border-color: #c7ccd6 !important; color: var(--merv-ink) !important; }

/* tertiary = Manage preferences (quiet text link, pushed to the left) */
.klaro .cm-btn.cm-btn-info,
.klaro .cn-learn-more {
  background: transparent !important; color: var(--merv-brand) !important;
  border: none !important; text-decoration: none; font-weight: 700;
  padding: 11px 6px; margin-right: auto;
}
.klaro .cm-btn.cm-btn-info:hover,
.klaro .cn-learn-more:hover { text-decoration: underline; }

/* ---- the "Manage preferences" modal ---- */
.klaro .cookie-modal .cm-bg { background: rgba(14,21,36,.55); }
.klaro .cookie-modal .cm-modal {
  border-radius: 18px; color: var(--merv-ink); font-family: inherit; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(14,21,36,.5);
}
.klaro .cookie-modal .cm-header {
  border-bottom: 1px solid var(--merv-line); padding-bottom: 18px;
}
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h1.title { color: var(--merv-ink) !important; font-weight: 800; letter-spacing: -.01em; }
.klaro .cookie-modal .cm-body p { color: var(--merv-body); font-size: 13.5px; line-height: 1.6; }
.klaro .cookie-modal .cm-list-title { font-weight: 700; color: var(--merv-ink); font-size: 14px; }
.klaro .cookie-modal .cm-list-description { color: var(--merv-body); font-size: 12.5px; line-height: 1.55; }
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--merv-brand) !important;
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before { background: #fff; }
.klaro .cookie-modal .cm-footer { border-top: 1px solid var(--merv-line); }
.klaro .cookie-modal a, .klaro .cookie-notice a {
  color: var(--merv-brand); font-weight: 600; text-decoration: underline;
}

/* Hide Klaro's "powered by" line — this is our banner. */
.klaro .cookie-notice .cn-ok .cn-buttons + a[href*="kiprotect"],
.klaro .cm-powered-by,
.klaro a[href*="kiprotect"],
.klaro a[href*="klaro"] { display: none !important; }

/* ---- mobile ---- */
@media (max-width: 640px) {
  /* Card, not an edge-to-edge slab: real margins + radius so it reads as a card
     and never gets clipped at the fold. */
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 12px !important; right: 12px !important; bottom: 12px !important;
    top: auto !important; width: auto !important; max-width: none !important;
    padding: 22px 18px 18px !important; border-radius: 16px !important;
  }
  /* Buttons: one clean vertical stack, full width, clear order
     (Accept all on top, then Decline, then Manage preferences). */
  .klaro .cookie-notice .cn-buttons,
  .klaro .cookie-notice .cn-ok {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 10px !important;
    width: 100%; margin-top: 6px;
  }
  .klaro .cookie-notice .cm-btn,
  .klaro .cookie-notice .cn-ok .cm-btn {
    width: 100% !important; text-align: center !important;
    justify-content: center !important; margin: 0 !important;
  }
  .klaro .cm-btn-accept-all, .klaro .cm-btn.cm-btn-success { order: 1; }
  .klaro .cm-btn.cn-decline, .klaro .cm-btn.cm-btn-decline { order: 2; }
  .klaro .cm-btn.cm-btn-info, .klaro .cn-learn-more { order: 3; padding: 6px !important; }
}