/* ============================================================================
   Cookaki — Cookie consent banner (GDPR / ePrivacy + Google Consent Mode v2)
   Sleek, brand-matched, GPU-light. Styles only load on interaction surfaces.
   ============================================================================ */

.ck-consent,
.ck-consent * { box-sizing: border-box; }

/* ---- Floating reopen button (bottom-left, subtle) -------------------------- */
.ck-reopen {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: var(--z-dock, 90);
  display: none;                 /* shown only after a choice is stored */
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line, rgba(42,42,42,.12));
  border-radius: 999px;
  background: var(--cream, #FCFAF6);
  color: var(--olive-deep, #081F49);
  box-shadow: var(--shadow, 0 6px 18px rgba(42,42,42,.08));
  cursor: pointer;
  transition: transform var(--t-fast,180ms) var(--ease,ease),
              box-shadow var(--t-fast,180ms) var(--ease,ease);
}
.ck-reopen:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 24px 48px rgba(42,42,42,.14)); }
.ck-reopen:focus-visible { outline: 2px solid var(--olive,#0D2E67); outline-offset: 2px; }
.ck-reopen svg { width: 20px; height: 20px; }
.ck-show-reopen .ck-reopen { display: inline-flex; }

/* ---- Backdrop (used by the customise modal) ------------------------------- */
.ck-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 100);
  background: rgba(42, 42, 42, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base,320ms) var(--ease,ease), visibility var(--t-base,320ms);
}
.ck-backdrop.is-open { opacity: 1; visibility: visible; }

/* ---- Shared card chrome --------------------------------------------------- */
.ck-banner,
.ck-modal {
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--ink, #2B2B2B);
  background: var(--cream, #FCFAF6);
  border: 1px solid var(--line, rgba(42,42,42,.12));
  box-shadow: var(--shadow-lg, 0 24px 48px rgba(42,42,42,.14));
}

/* ---- First-layer banner (bottom bar) -------------------------------------- */
.ck-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(140%);
  z-index: var(--z-modal, 100);
  width: min(680px, calc(100vw - 32px));
  padding: 20px 22px;
  border-radius: var(--radius-lg, 22px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--t-base,320ms) var(--ease-out, cubic-bezier(.16,1,.3,1)),
              opacity var(--t-base,320ms) var(--ease,ease),
              visibility var(--t-base,320ms);
}
.ck-banner.is-open { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }

.ck-banner__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--fs-md, 1.2rem);
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: .01em;
}
.ck-banner__text {
  font-size: var(--fs-sm, .92rem);
  line-height: 1.55;
  color: var(--ink-muted, #6E6E6E);
  margin: 0 0 16px;
}
.ck-banner__text a { color: var(--olive-deep, #081F49); text-decoration: underline; }

/* ---- Buttons -------------------------------------------------------------- */
.ck-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-actions--end { justify-content: flex-end; }

.ck-btn {
  appearance: none;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--fs-sm, .92rem);
  font-weight: 600;
  line-height: 1;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast,180ms) var(--ease,ease),
              background var(--t-fast,180ms) var(--ease,ease),
              border-color var(--t-fast,180ms) var(--ease,ease),
              color var(--t-fast,180ms) var(--ease,ease);
}
.ck-btn:hover { transform: translateY(-1px); }
.ck-btn:focus-visible { outline: 2px solid var(--olive,#0D2E67); outline-offset: 2px; }

.ck-btn--primary { background: var(--olive, #0D2E67); color: var(--cream, #FCFAF6); flex: 1 1 auto; }
.ck-btn--primary:hover { background: var(--olive-deep, #081F49); }

.ck-btn--ghost {
  background: transparent;
  color: var(--ink, #2B2B2B);
  border-color: var(--line-strong, rgba(42,42,42,.24));
  flex: 1 1 auto;
}
.ck-btn--ghost:hover { border-color: var(--ink, #2B2B2B); background: rgba(42,42,42,.04); }

.ck-btn--link {
  background: transparent;
  color: var(--ink-muted, #6E6E6E);
  padding: 12px 10px;
  text-decoration: underline;
  flex: 0 0 auto;
}
.ck-btn--link:hover { color: var(--ink, #2B2B2B); transform: none; }

/* ---- Customise modal ------------------------------------------------------ */
.ck-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%) scale(.98);
  z-index: var(--z-modal, 100);
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  overflow: auto;
  padding: 26px 26px 22px;
  border-radius: var(--radius-lg, 22px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--t-base,320ms) var(--ease-out, cubic-bezier(.16,1,.3,1)),
              opacity var(--t-base,320ms) var(--ease,ease),
              visibility var(--t-base,320ms);
}
.ck-modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }

.ck-modal__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--fs-lg, 1.5rem);
  font-weight: 600;
  margin: 0 0 4px;
}
.ck-modal__intro {
  font-size: var(--fs-sm, .92rem);
  line-height: 1.55;
  color: var(--ink-muted, #6E6E6E);
  margin: 0 0 18px;
}

/* ---- Category rows -------------------------------------------------------- */
.ck-cat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line, rgba(42,42,42,.12));
}
.ck-cat:last-of-type { border-bottom: 1px solid var(--line, rgba(42,42,42,.12)); }
.ck-cat__name { font-weight: 600; font-size: var(--fs-base, 1rem); }
.ck-cat__desc { grid-column: 1 / 2; font-size: var(--fs-xs, .8rem); line-height: 1.5; color: var(--ink-muted, #6E6E6E); }

/* ---- Toggle --------------------------------------------------------------- */
.ck-switch { position: relative; width: 46px; height: 26px; flex: none; }
.ck-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ck-switch__track {
  position: absolute; inset: 0;
  background: var(--beige, #E7E0D4);
  border-radius: 999px;
  transition: background var(--t-fast,180ms) var(--ease,ease);
}
.ck-switch__track::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(42,42,42,.3);
  transition: transform var(--t-fast,180ms) var(--ease,ease);
}
.ck-switch input:checked + .ck-switch__track { background: var(--olive, #0D2E67); }
.ck-switch input:checked + .ck-switch__track::after { transform: translateX(20px); }
.ck-switch input:focus-visible + .ck-switch__track { outline: 2px solid var(--olive,#0D2E67); outline-offset: 2px; }
.ck-switch input:disabled { cursor: not-allowed; }
.ck-switch input:disabled + .ck-switch__track { background: var(--sage, #C9D4C1); opacity: .7; }

.ck-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ck-modal__actions .ck-btn--primary,
.ck-modal__actions .ck-btn--ghost { flex: 1 1 160px; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 520px) {
  .ck-banner { bottom: 0; width: 100vw; border-radius: var(--radius-lg,22px) var(--radius-lg,22px) 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); }
  .ck-actions { flex-direction: column-reverse; }
  .ck-btn--link { order: 99; align-self: center; }
  .ck-reopen { left: 12px; bottom: 12px; }
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ck-banner, .ck-modal, .ck-backdrop, .ck-reopen, .ck-btn, .ck-switch__track, .ck-switch__track::after {
    transition: none !important;
  }
}