/* LoveSnack consent banner — brand styling for self-hosted Klaro.
 * Scoped under .klaro so it can't touch the rest of the site.
 * Palette: navy #1f3d5c (primary), coral #dc4530 (accent), cream #faf8f3. */

.klaro {
  --ls-ink: #1a1a1a;
  --ls-navy: #1f3d5c;
  --ls-navy-dark: #16304a;
  --ls-coral: #dc4530;
  --ls-line: #e5e1d6;
  --ls-body: #4a4a44;
  --ls-muted: #6b6b66;
  font-family: inherit;
}

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

.klaro .cookie-notice .cn-body > *:first-child,
.klaro .cookie-notice .cn-title {
  font-weight: 800; font-size: 16px; color: var(--ls-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(--ls-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 (navy) */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn-accept-all,
.klaro .cookie-notice .cm-btn-success {
  background: var(--ls-navy) !important; color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(31,61,92,.5);
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn-accept-all:hover { background: var(--ls-navy-dark) !important; }

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

/* tertiary = Preferences (quiet text link, coral) */
.klaro .cm-btn.cm-btn-info,
.klaro .cn-learn-more {
  background: transparent !important; color: var(--ls-coral) !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 preferences modal ---- */
.klaro .cookie-modal .cm-bg { background: rgba(31,61,92,.55); }
.klaro .cookie-modal .cm-modal {
  border-radius: 18px; color: var(--ls-ink); font-family: inherit; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(31,61,92,.5);
}
.klaro .cookie-modal .cm-header { border-bottom: 1px solid var(--ls-line); padding-bottom: 18px; }
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h1.title { color: var(--ls-ink) !important; font-weight: 800; letter-spacing: -.01em; }
.klaro .cookie-modal .cm-body p { color: var(--ls-body); font-size: 13.5px; line-height: 1.6; }
.klaro .cookie-modal .cm-list-title { font-weight: 700; color: var(--ls-ink); font-size: 14px; }
.klaro .cookie-modal .cm-list-description { color: var(--ls-body); font-size: 12.5px; line-height: 1.55; }
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider { background-color: var(--ls-navy) !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(--ls-line); }
.klaro .cookie-modal a, .klaro .cookie-notice a {
  color: var(--ls-coral); font-weight: 600; text-decoration: underline;
}

/* Hide Klaro's "powered by" line. */
.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 (matches the Merv mobile fix: clean vertical button stack) ---- */
@media (max-width: 640px) {
  .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;
  }
  .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; }
}