/* cookie-consent.css — cookie consent banner
   Self-contained on purpose: the banner is injected into EVERY page, including
   authenticated app pages that never load public.css, so it must not depend on
   any page-level variables. Colours are declared on .ck-banner itself. */

.ck-banner {
    --ck-bg:      #0b1628;
    --ck-bd:      #1e2d45;
    --ck-text:    #e2e8f0;
    --ck-muted:   #94a3b8;
    --ck-ac:      #22d3ee;
    --ck-ac-ink:  #041016;
    --ck-hover:   rgba(255,255,255,.05);
    --ck-shadow:  0 -12px 40px rgba(0,0,0,.45);

    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9998;
    background: var(--ck-bg);
    border-top: 1px solid var(--ck-bd);
    color: var(--ck-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: var(--ck-shadow);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.ck-banner[hidden] { display: none; }
.ck-banner.ck-open { transform: none; }
/* Applied when the document is hidden at reveal time — the transition timeline
   does not advance in a background tab, so the slide-in is skipped entirely. */
.ck-banner.ck-no-anim { transition: none; }

[data-theme="light"] .ck-banner {
    --ck-bg:      #ffffff;
    --ck-bd:      #cbd5e1;
    --ck-text:    #0f172a;
    --ck-muted:   #475569;
    --ck-ac:      #0e7490;
    --ck-ac-ink:  #ffffff;
    --ck-hover:   rgba(0,0,0,.04);
    --ck-shadow:  0 -12px 40px rgba(15,23,42,.14);
}

.ck-banner-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px 24px;
}
.ck-banner-text { flex: 1 1 auto; min-width: 0; }
.ck-banner-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 4px;
    font-size: 14.5px; font-weight: 700;
    color: var(--ck-text);
}
.ck-banner-title i { color: var(--ck-ac); font-size: 15px; }
.ck-banner-desc { margin: 0; font-size: 13.5px; color: var(--ck-muted); }
.ck-banner-desc a { color: var(--ck-ac); text-decoration: none; }
.ck-banner-desc a:hover { text-decoration: underline; }

.ck-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.ck-btn {
    font: inherit; font-size: 13.5px; font-weight: 600;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.ck-btn:focus-visible { outline: 2px solid var(--ck-ac); outline-offset: 2px; }
.ck-btn-primary { background: var(--ck-ac); color: var(--ck-ac-ink); }
.ck-btn-primary:hover { opacity: .88; }
.ck-btn-outline { background: transparent; border-color: var(--ck-bd); color: var(--ck-text); }
.ck-btn-outline:hover { background: var(--ck-hover); }
.ck-btn-ghost { background: transparent; color: var(--ck-muted); padding: 9px 10px; }
.ck-btn-ghost:hover { color: var(--ck-text); text-decoration: underline; }

/* ── Preferences panel ─────────────────────────────────── */
.ck-prefs {
    border-top: 1px solid var(--ck-bd);
    background: var(--ck-bg);
    max-height: min(70vh, 520px);
    overflow-y: auto;
}
.ck-prefs[hidden] { display: none; }
.ck-prefs-inner { max-width: 1280px; margin: 0 auto; padding: 20px 24px 22px; }
.ck-prefs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ck-prefs-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ck-text); }
.ck-prefs-close {
    background: none; border: none; cursor: pointer;
    color: var(--ck-muted); font-size: 15px; padding: 4px; line-height: 1;
}
.ck-prefs-close:hover { color: var(--ck-text); }
.ck-prefs-close:focus-visible { outline: 2px solid var(--ck-ac); outline-offset: 2px; border-radius: 4px; }

.ck-row {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 13px 0;
    border-top: 1px solid var(--ck-bd);
}
.ck-row:first-child { border-top: none; }
.ck-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-row-name { font-size: 13.5px; font-weight: 600; color: var(--ck-text); }
.ck-row-desc { font-size: 12.5px; color: var(--ck-muted); }
.ck-row-desc a { color: var(--ck-ac); text-decoration: none; }
.ck-row-desc a:hover { text-decoration: underline; }

.ck-switch {
    position: relative; flex-shrink: 0;
    width: 42px; height: 24px;
    padding: 0; border: 1px solid var(--ck-bd); border-radius: 999px;
    background: transparent; cursor: pointer;
    transition: background .18s, border-color .18s;
}
.ck-switch .ck-knob {
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--ck-muted);
    transition: transform .18s, background .18s;
}
.ck-switch[aria-checked="true"] { background: var(--ck-ac); border-color: var(--ck-ac); }
.ck-switch[aria-checked="true"] .ck-knob { transform: translateX(18px); background: var(--ck-ac-ink); }
.ck-switch:focus-visible { outline: 2px solid var(--ck-ac); outline-offset: 2px; }
.ck-switch-locked { cursor: not-allowed; background: var(--ck-hover); opacity: .75; }

.ck-prefs-foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--ck-bd); }

/* ── Re-open control (shown only after a choice is saved) ── */
.ck-reopen {
    position: fixed;
    left: 16px; bottom: 16px;
    z-index: 9997;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ck-bg, #0b1628);
    border: 1px solid var(--ck-bd, #1e2d45);
    border-radius: 50%;
    color: var(--ck-muted, #94a3b8);
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
    transition: color .15s, border-color .15s;
}
.ck-reopen[hidden] { display: none; }
.ck-reopen:hover { color: var(--ck-ac, #22d3ee); border-color: var(--ck-ac, #22d3ee); }
.ck-reopen:focus-visible { outline: 2px solid var(--ck-ac, #22d3ee); outline-offset: 2px; }

@media (max-width: 860px) {
    .ck-banner-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
    .ck-banner-actions { justify-content: flex-start; }
    .ck-btn { flex: 1 1 auto; text-align: center; }
    .ck-btn-ghost { flex-basis: 100%; order: 3; }
    .ck-prefs-inner { padding: 18px 16px 20px; }
    .ck-row { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-banner, .ck-switch, .ck-switch .ck-knob { transition: none; }
    .ck-banner.ck-open { transform: none; }
}