/*!
 * consent-bar v1.3.0 - base styles
 * Every visual decision is a custom property so a brand can skin this
 * without forking the file. House-of-brands rule: shared production
 * standards, never shared visual DNA.
 */

.cb-root {
  --cb-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cb-surface: #ffffff;
  --cb-fg: #14181d;
  --cb-muted: #4d5560;
  --cb-border: #dfe3e8;
  --cb-accent: #14181d;
  --cb-accent-fg: #ffffff;
  --cb-accent-hover: #2b3138;
  --cb-secondary-bg: #ffffff;
  --cb-secondary-fg: #14181d;
  --cb-secondary-border: #b9c0c9;
  --cb-focus: #2563eb;
  --cb-radius: 10px;
  --cb-radius-sm: 8px;
  --cb-shadow: 0 -1px 0 rgba(20, 24, 29, .08), 0 12px 40px rgba(20, 24, 29, .16);
  --cb-z: 2147483000;
  --cb-max: 1180px;
  --cb-gap: 16px;
  --cb-pad: 20px;
  --cb-font-size: 14px;
  --cb-title-size: 16px;
  --cb-overlay: rgba(12, 16, 20, .55);

  font-family: var(--cb-font);
  position: relative;
  z-index: var(--cb-z);
}

.cb-root *,
.cb-root *::before,
.cb-root *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ *
 * Notice shell
 * ------------------------------------------------------------------ */
/* The notice has NO entrance animation, deliberately.
   Both a transition away from opacity:0 and a keyframe with an opacity:0
   "from" leave the element invisible whenever rendering is suspended
   (background tab, occluded window, throttled process), while the page
   underneath stays fully usable. That is the one failure mode a consent
   notice must never have, and a slide-up is not worth owning it.
   Resting state is visible, with no dependency on anything completing. */
.cb-notice {
  position: fixed;
  z-index: var(--cb-z);
  background: var(--cb-surface);
  color: var(--cb-fg);
  box-shadow: var(--cb-shadow);
  padding: var(--cb-pad);
  display: flex;
  gap: var(--cb-gap);
  align-items: center;
  justify-content: space-between;
  opacity: 1;
  outline: none;
}
.cb-notice:focus-visible { box-shadow: var(--cb-shadow); }

/* Used only by the preferences layer, which is always opened by a click
   from a focused tab, so it can never be caught mid-freeze. */
@keyframes cb-fade { from { opacity: 0; } }
@keyframes cb-zoom { from { opacity: 0; transform: scale(.97); } }

.cb-title {
  margin: 0 0 6px;
  font-size: var(--cb-title-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cb-fg);
}
.cb-message {
  margin: 0;
  font-size: var(--cb-font-size);
  line-height: 1.55;
  color: var(--cb-muted);
}
.cb-links {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--cb-muted);
}
.cb-links a {
  color: var(--cb-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cb-links a:hover { color: var(--cb-fg); }

/* ------------------------------------------------------------------ *
 * Notice at Collection disclosure (CCPA 1798.100(a))
 * Native <details> so it opens without JavaScript and carries keyboard
 * and screen reader semantics for free.
 * ------------------------------------------------------------------ */
.cb-collect {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--cb-muted);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: rgba(0, 0, 0, .015);
}
.cb-collect > summary {
  cursor: pointer;
  padding: 9px 12px;
  font-weight: 600;
  color: var(--cb-fg);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--cb-radius-sm);
}
.cb-collect > summary::-webkit-details-marker { display: none; }
.cb-collect > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
  flex-shrink: 0;
}
.cb-collect[open] > summary::before { transform: rotate(90deg); }
.cb-collect > summary:focus-visible { outline: 2px solid var(--cb-focus); outline-offset: -2px; }
.cb-collect-row {
  margin: 0;
  padding: 0 12px 10px;
  line-height: 1.55;
}
.cb-collect-row:first-of-type { padding-top: 2px; }
.cb-collect-row strong { color: var(--cb-fg); }

/* GPC acknowledgement in the first layer. */
.cb-gpc-note {
  margin: 10px 0 0;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cb-fg);
  background: rgba(37, 99, 235, .08);
  border-left: 3px solid var(--cb-focus);
  border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * Buttons
 * Reject and Accept are deliberately the same size, same shape, and
 * same weight. Making "reject" harder than "accept" is the exact
 * pattern regulators cite when they fine people.
 * ------------------------------------------------------------------ */
.cb-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}
.cb-btn {
  font: inherit;
  font-size: var(--cb-font-size);
  font-weight: 600;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--cb-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;              /* touch target */
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cb-btn:focus-visible { outline: 2px solid var(--cb-focus); outline-offset: 2px; }

.cb-btn-primary {
  background: var(--cb-accent);
  color: var(--cb-accent-fg);
  border-color: var(--cb-accent);
}
.cb-btn-primary:hover { background: var(--cb-accent-hover); border-color: var(--cb-accent-hover); }

.cb-btn-secondary {
  background: var(--cb-secondary-bg);
  color: var(--cb-secondary-fg);
  border-color: var(--cb-secondary-border);
}
.cb-btn-secondary:hover { border-color: var(--cb-fg); }

.cb-btn-link {
  background: none;
  border-color: transparent;
  color: var(--cb-muted);
  text-decoration: underline;
  padding-left: 8px;
  padding-right: 8px;
}
.cb-btn-link:hover { color: var(--cb-fg); }

/* Settings link sitting inline in the policy-links row. Reset the button
   box so it reads as text, not as a quiet third action button. It stays
   a real <button> for keyboard and screen reader semantics. */
.cb-settings-link {
  min-height: 0;
  padding: 0;
  font-size: inherit;
  /* .cb-btn sets line-height:1, which would make this 13px tall next to
     sibling anchors at ~20px: visually cramped and a smaller hit area
     than the links it sits beside. Match the row instead. */
  line-height: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 2px;
  vertical-align: baseline;
}

/* ------------------------------------------------------------------ *
 * Layout: bar (full width, bottom)
 * ------------------------------------------------------------------ */
[data-cb-layout="bar"] .cb-notice {
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--cb-border);
  padding-bottom: max(var(--cb-pad), env(safe-area-inset-bottom));
}
[data-cb-layout="bar"] .cb-notice-body { max-width: 78ch; }
[data-cb-layout="bar"] .cb-notice {
  padding-left: max(var(--cb-pad), calc(50vw - var(--cb-max) / 2));
  padding-right: max(var(--cb-pad), calc(50vw - var(--cb-max) / 2));
}

/* ------------------------------------------------------------------ *
 * Layout: card (corner, bounded width)
 * ------------------------------------------------------------------ */
[data-cb-layout="card"] .cb-notice {
  flex-direction: column;
  align-items: stretch;
  width: min(340px, calc(100vw - 32px));
  border: 0;
  border-radius: var(--cb-radius);
  bottom: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
}
[data-cb-layout="card"][data-cb-position="bottom-left"] .cb-notice { left: 16px; }
[data-cb-layout="card"][data-cb-position="bottom-right"] .cb-notice { right: 16px; }
[data-cb-layout="card"][data-cb-position="bottom"] .cb-notice {
  left: 50%; transform: translateX(-50%);
}
[data-cb-layout="card"] .cb-actions > .cb-btn { flex: 1 1 auto; }

/* Portfolio default: a compact white lower-left privacy card with three
   equal-size choices. The selector is intentionally more specific than
   a brand skin so the first layer stays light on every site. Brand tokens
   still apply to the preferences layer and the persistent reopen control. */
[data-cb-layout="card"][data-cb-force-light] {
  --cb-surface: #ffffff;
  --cb-fg: #1d2925;
  --cb-muted: #52615c;
  --cb-border: #e7ebe9;
  --cb-focus: #2b6d59;
  --cb-radius: 14px;
  --cb-radius-sm: 9px;
  --cb-pad: 18px;
  --cb-gap: 12px;
  --cb-font-size: 13.5px;
  --cb-title-size: 15px;
}
[data-cb-layout="card"][data-cb-force-light] .cb-notice {
  background: #ffffff;
  border: 0;
  box-shadow: 0 10px 28px rgba(21, 43, 35, .10);
}
[data-cb-layout="card"][data-cb-force-light] .cb-notice:focus-visible {
  box-shadow: 0 10px 28px rgba(21, 43, 35, .10);
}
[data-cb-layout="card"][data-cb-force-light] .cb-actions .cb-btn-secondary {
  flex: 1 1 0;
  background: #f7f9f8;
  color: #35413d;
  border-color: #d9dfdc;
}
[data-cb-layout="card"][data-cb-force-light] .cb-actions .cb-btn-secondary:hover {
  background: #f1f4f2;
  color: #1f2b27;
  border-color: #b9c4bf;
}
[data-cb-layout="card"][data-cb-force-light] .cb-actions .cb-btn-primary {
  flex: 1 1 0;
  background: #18794e;
  color: #ffffff;
  border-color: #18794e;
}
[data-cb-layout="card"][data-cb-force-light] .cb-actions .cb-btn-primary:hover {
  background: #12613e;
  color: #ffffff;
  border-color: #12613e;
}
[data-cb-layout="card"][data-cb-force-light] .cb-actions {
  gap: 8px;
}
[data-cb-layout="card"][data-cb-force-light] .cb-actions .cb-btn {
  padding-left: 12px;
  padding-right: 12px;
}

/* ------------------------------------------------------------------ *
 * Layout: pill (BrandBucket style - compact acknowledgement)
 * ------------------------------------------------------------------ */
[data-cb-layout="pill"] {
  --cb-surface: #12161a;
  --cb-fg: #ffffff;
  --cb-muted: #e6e9ec;
  --cb-accent: #ffffff;
  --cb-accent-fg: #12161a;
  --cb-accent-hover: #e9edf1;
  --cb-radius: 999px;
}
[data-cb-layout="pill"] .cb-notice {
  border-radius: var(--cb-radius);
  width: min(560px, calc(100vw - 32px));
  padding: 14px 14px 14px 24px;
  bottom: max(20px, env(safe-area-inset-bottom));
  gap: 18px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .34);
}
[data-cb-layout="pill"][data-cb-position="bottom-right"] .cb-notice { right: 20px; }
[data-cb-layout="pill"][data-cb-position="bottom-left"] .cb-notice { left: 20px; }
[data-cb-layout="pill"][data-cb-position="bottom"] .cb-notice {
  left: 50%; transform: translateX(-50%);
}
[data-cb-layout="pill"] .cb-message { color: var(--cb-muted); font-size: 14px; }
[data-cb-layout="pill"] .cb-message a { color: #fff; }
[data-cb-layout="pill"] .cb-btn-primary { border-radius: 999px; padding: 12px 26px; }
[data-cb-layout="pill"] .cb-btn-link { color: #c8cdd3; }

/* ------------------------------------------------------------------ *
 * Layout: modal (hard gate, nothing below is reachable first)
 * ------------------------------------------------------------------ */
[data-cb-layout="modal"] .cb-notice {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(520px, calc(100vw - 32px));
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--cb-radius);
  padding: 28px;
}
[data-cb-layout="modal"] .cb-actions > .cb-btn { flex: 1 1 auto; }

/* Real overlay node, not a pseudo-element. A ::before looks identical
   but does not reliably swallow clicks aimed at the page behind it,
   which is the entire point of a gate. */
.cb-notice-shade {
  position: fixed;
  inset: 0;
  background: var(--cb-overlay);
  z-index: calc(var(--cb-z) - 1);
}

/* ------------------------------------------------------------------ *
 * Preferences modal (second layer, shared by every layout)
 * ------------------------------------------------------------------ */
.cb-overlay {
  position: fixed;
  inset: 0;
  background: var(--cb-overlay);
  z-index: calc(var(--cb-z) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 1;
  animation: cb-fade .2s ease;
  overflow-y: auto;
}
.cb-notice-shade { animation: cb-fade .2s ease; }

.cb-modal {
  background: var(--cb-surface);
  color: var(--cb-fg);
  border-radius: var(--cb-radius);
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 24px 70px rgba(12, 16, 20, .34);
  animation: cb-zoom .22s ease;
}

.cb-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.cb-modal-head .cb-title { font-size: 18px; margin: 0; }

.cb-close {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--cb-muted);
  font-size: 15px;
  line-height: 1;
  width: 36px; height: 36px;
  cursor: pointer;
  flex-shrink: 0;
}
.cb-close:hover { background: rgba(0, 0, 0, .05); color: var(--cb-fg); }
.cb-close:focus-visible { outline: 2px solid var(--cb-focus); outline-offset: 2px; }

.cb-cats { margin: 18px 0 20px; display: flex; flex-direction: column; gap: 2px; }

.cb-cat {
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--cb-surface);
}
.cb-cat.is-locked { background: rgba(0, 0, 0, .025); }
.cb-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cb-cat-label { font-size: 14px; font-weight: 600; color: var(--cb-fg); cursor: pointer; }
.cb-cat.is-locked .cb-cat-label { cursor: default; }
.cb-cat-desc { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--cb-muted); }
.cb-cat-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cb-fg);
  background: rgba(37, 99, 235, .08);
  border-left: 3px solid var(--cb-focus);
  padding: 8px 10px;
  border-radius: 4px;
}

/* Switch: a real checkbox with role="switch" under a painted track. */
.cb-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.cb-switch-input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.cb-switch-input:disabled { cursor: not-allowed; }
.cb-switch-ui {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #c3c9d1;
  transition: background-color .18s ease;
  pointer-events: none;
}
.cb-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .18s ease;
}
.cb-switch-input:checked + .cb-switch-ui { background: var(--cb-accent); }
.cb-switch-input:checked + .cb-switch-ui::after { transform: translateX(20px); }
.cb-switch-input:disabled + .cb-switch-ui { opacity: .55; }
.cb-switch-input:focus-visible + .cb-switch-ui { outline: 2px solid var(--cb-focus); outline-offset: 2px; }

.cb-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--cb-border);
}
.cb-modal-actions .cb-btn { flex: 1 1 150px; }

/* ------------------------------------------------------------------ *
 * Persistent re-open control
 * ------------------------------------------------------------------ */
.cb-floating {
  position: fixed;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: calc(var(--cb-z) - 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--cb-muted);
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  padding: 9px 14px 9px 12px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(12, 16, 20, .12);
  opacity: .82;
  transition: opacity .15s ease, color .15s ease;
}
.cb-floating:hover { opacity: 1; color: var(--cb-fg); }
.cb-floating:focus-visible { outline: 2px solid var(--cb-focus); outline-offset: 2px; opacity: 1; }
.cb-floating-icon { display: inline-flex; }

html.cb-locked { overflow: hidden; }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .cb-root { --cb-pad: 16px; }
  [data-cb-layout="bar"] .cb-notice,
  [data-cb-layout="pill"] .cb-notice {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  [data-cb-layout="pill"] .cb-notice { border-radius: 16px; padding: 18px; }
  .cb-actions { flex-direction: column-reverse; }
  [data-cb-layout="card"][data-cb-force-light] .cb-notice .cb-actions {
    flex-direction: column;
  }
  .cb-actions > .cb-btn { width: 100%; }
  .cb-modal-actions { flex-direction: column-reverse; }
  .cb-floating-text { display: none; }
  .cb-floating { padding: 10px; }
}

/* ------------------------------------------------------------------ *
 * Dark mode. Skins may override; this is the neutral fallback.
 * ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  .cb-root:not([data-cb-force-light]) {
    --cb-surface: #171b20;
    --cb-fg: #f2f4f6;
    --cb-muted: #a9b2bc;
    --cb-border: #2c333a;
    --cb-accent: #f2f4f6;
    --cb-accent-fg: #171b20;
    --cb-accent-hover: #ffffff;
    --cb-secondary-bg: transparent;
    --cb-secondary-fg: #f2f4f6;
    --cb-secondary-border: #4a535d;
    --cb-focus: #7ea6ff;
  }
  .cb-root:not([data-cb-force-light]) .cb-cat.is-locked { background: rgba(255, 255, 255, .04); }
  .cb-root:not([data-cb-force-light]) .cb-close:hover { background: rgba(255, 255, 255, .08); }
  .cb-root:not([data-cb-force-light]) .cb-switch-ui { background: #4a535d; }
}

/* ------------------------------------------------------------------ *
 * Motion and contrast preferences
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cb-notice, .cb-overlay, .cb-modal, .cb-notice-shade,
  .cb-switch-ui, .cb-switch-ui::after, .cb-btn {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  .cb-root { --cb-border: currentColor; --cb-secondary-border: currentColor; }
}