/* ============================================================
   Bizarre Bunny consent bar — theme layer over Klaro
   ============================================================
   Loads after klaro-base.css and overrides it. Klaro's own theme is
   CSS-variable driven, so most of the work is redefining its palette
   variables; the rest is layout for the bottom bar and BB buttons.

   Klaro already renders the notice as a full-width fixed bottom bar
   when noticeAsModal is false, so nothing here repositions it.

   Tokens mirror bb-design-system/colors_and_type.css. They are written
   out literally rather than imported, because this stylesheet is
   injected into every page by functions/_middleware.js and cannot
   assume the page defines the BB variables.
   ------------------------------------------------------------ */

.klaro {
  /* Klaro's palette, remapped to BB black/white. The brand is mono, so
     Klaro's greens and blues all resolve to white or a white tint. */
  --dark1:  #0a0a0a;              /* bar + modal background */
  --dark2:  rgba(255,255,255,0.70);
  --dark3:  rgba(255,255,255,0.55);
  --light1: #ffffff;
  --light2: rgba(255,255,255,0.15);   /* rules */
  --light3: rgba(255,255,255,0.40);
  --white2: rgba(255,255,255,0.15);   /* toggle track, off */
  --white3: rgba(255,255,255,0.55);   /* toggle knob, off */
  --green1: #ffffff;                  /* toggle track, on */
  --green2: rgba(255,255,255,0.55);
  --green3: #ffffff;
  --blue1:  #ffffff;
  --blue2:  rgba(255,255,255,0.70);

  /* Klaro's own layout hooks. Its desktop default (min-width 1024px) is a
     floating 400px card pinned bottom-right; these turn it into an edge to
     edge bar across the foot of the page.

     Note: --border-radius is deliberately NOT overridden here. Klaro reuses
     that one variable for the notice corners AND the buttons, so zeroing it
     squares off the pills too. The bar's corners are squared in its own rule
     below instead. */
  --notice-max-width: none;
  --notice-left: 0;
  --notice-right: 0;
  --notice-bottom: 0;

  --bb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bb-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  font-family: var(--bb-font-sans);
}

/* ---------- Bottom bar ---------- */

.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: #0a0a0a;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-radius: 0;
  box-shadow: none;                 /* BB: no shadows on panels */
  padding: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px clamp(20px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  flex-wrap: wrap;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > p {
  margin: 0;
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.70);
}

/* Mono eyebrow, set inline in the notice copy. */
.klaro .bb-cn-label {
  display: block;
  font-family: var(--bb-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
  margin-bottom: 6px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: flex;
  gap: 10px;
  margin: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
  margin: 0;
}

/* 'Choose' opens the per-service detail. Plain link, not a button, so it
   reads as the quieter third option without hiding it. */
.klaro .cn-learn-more,
.klaro .cookie-notice .cn-body .cn-learn-more {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--bb-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.klaro .cn-learn-more:hover { color: #ffffff; }

/* Links inside the bar copy, e.g. the privacy policy. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > p a,
.klaro .cookie-modal .cm-body p a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > p a:hover,
.klaro .cookie-modal .cm-body p a:hover { opacity: 0.7; }

/* ---------- Buttons ---------- */

.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
  font-family: var(--bb-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 11px 26px;
  margin-right: 0;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.klaro .cookie-notice .cm-btn:hover,
.klaro .cookie-modal .cm-btn:hover { transform: scale(1.03); }

/* Accept */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-modal .cm-btn.cm-btn-success-var {
  background: #ffffff;
  color: #0a0a0a;
}

/* Decline and everything else: outlined, equal visual weight */
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-info {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.30);
}

.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-info:hover {
  background: rgba(255,255,255,0.08);
}

/* ---------- Detail modal ---------- */

.klaro .cookie-modal .cm-bg {
  background: rgba(0,0,0,0.75);
}

.klaro .cookie-modal .cm-modal.cm-klaro {
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  box-shadow: none;
  color: rgba(255,255,255,0.70);
}

.klaro .cookie-modal .cm-header,
.klaro .cookie-modal .cm-footer {
  border-color: rgba(255,255,255,0.15);
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h1.title {
  font-family: var(--bb-font-sans);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #ffffff;
}

.klaro .cookie-modal .cm-body p,
.klaro .cookie-modal .cm-body .cm-list-description {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.70);
}

.klaro .cookie-modal .cm-list-title {
  font-family: var(--bb-font-sans);
  font-weight: 700;
  color: #ffffff;
}

.klaro .cookie-modal .cm-purpose .cm-list-title,
.klaro .cookie-modal .cm-purposes .cm-purpose > .cm-list-label .cm-list-title {
  font-family: var(--bb-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}

/* Klaro puts a shadow on the toggle knob. BB does not do shadows. */
.klaro .cookie-modal .slider,
.klaro .cookie-notice .slider {
  box-shadow: none;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before {
  background-color: #0a0a0a;
}

/* ---------- Accessibility ---------- */

.klaro .cookie-notice .cm-btn:focus-visible,
.klaro .cookie-modal .cm-btn:focus-visible,
.klaro .cn-learn-more:focus-visible,
.klaro .cm-list-input:focus-visible + .cm-list-label .slider {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .klaro .cm-btn,
  .klaro .cookie-modal .slider,
  .klaro .cookie-notice .slider {
    transition: none;
  }
  .klaro .cm-btn:hover { transform: none; }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 720px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 16px 20px;
    gap: 14px;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    width: 100%;
    justify-content: flex-start;
    gap: 14px;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    flex: 1 1 auto;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    flex: 1 1 auto;
  }
}