/* =====================================================================
   Cookie consent banner + preferences dialog.
   DOM is built by js/cookie-consent.js. Everything is scoped under
   .sl-cc* so it cannot clash with the rest of the app. Uses the shared
   design tokens from css/variables.css.
   ===================================================================== */

.sl-cc-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1400;              /* above help FAB (1200), below modals/drawers if any */
    max-width: 760px;
    margin: 0 auto;
    background: var(--color-white);
    color: var(--color-gray-800);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: var(--text-base);
    line-height: 1.5;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}
.sl-cc-banner.sl-cc-show { transform: translateY(0); opacity: 1; }

.sl-cc-title {
    font-size: var(--text-lg);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-gray-900);
}
.sl-cc-title i { color: var(--color-primary); }

.sl-cc-text { margin: 0; color: var(--color-gray-600); }
.sl-cc-text a { color: var(--color-primary); text-decoration: underline; }

.sl-cc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.sl-cc-btn {
    appearance: none;
    cursor: pointer;
    border-radius: var(--border-radius);
    padding: 9px 16px;
    font-size: var(--text-base);
    font-weight: 600;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sl-cc-btn-primary { background: var(--color-primary); color: #fff; }
.sl-cc-btn-primary:hover { background: var(--color-primary-hover); }
.sl-cc-btn-ghost {
    background: var(--color-white);
    color: var(--color-gray-700);
    border-color: var(--color-gray-300);
}
.sl-cc-btn-ghost:hover { background: var(--color-gray-100); }
.sl-cc-btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    padding: 9px 8px;
    text-decoration: underline;
}
.sl-cc-btn-link:hover { color: var(--color-primary-hover); }

/* ---- Preferences dialog ---- */
.sl-cc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1410;
    background: rgba(3, 7, 18, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.sl-cc-backdrop.sl-cc-show { opacity: 1; pointer-events: auto; }

.sl-cc-dialog {
    position: fixed;
    z-index: 1420;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%);
    width: calc(100% - 32px);
    max-width: 520px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.sl-cc-dialog.sl-cc-show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}
.sl-cc-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.sl-cc-dialog-head h2 {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--color-gray-900);
}
.sl-cc-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-gray-500);
    padding: 4px 8px;
    border-radius: var(--border-radius);
}
.sl-cc-close:hover { background: var(--color-gray-100); color: var(--color-gray-800); }
.sl-cc-dialog-sub { margin: 0 0 14px; color: var(--color-gray-600); font-size: var(--text-sm); }

.sl-cc-cat {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.sl-cc-cat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sl-cc-cat-name { font-weight: 600; color: var(--color-gray-900); }
.sl-cc-cat-desc { margin: 6px 0 0; font-size: var(--text-sm); color: var(--color-gray-600); }
.sl-cc-locked { font-size: var(--text-xs); color: var(--color-success); font-weight: 600; }

/* iOS-style toggle (pure CSS, no images) */
.sl-cc-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.sl-cc-switch input { opacity: 0; width: 0; height: 0; }
.sl-cc-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--color-gray-300);
    border-radius: 24px; transition: background .15s ease;
}
.sl-cc-slider::before {
    content: ""; position: absolute; height: 18px; width: 18px;
    left: 3px; top: 3px; background: #fff; border-radius: 50%;
    transition: transform .15s ease; box-shadow: var(--shadow-sm);
}
.sl-cc-switch input:checked + .sl-cc-slider { background: var(--color-primary); }
.sl-cc-switch input:checked + .sl-cc-slider::before { transform: translateX(18px); }

.sl-cc-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

@media (max-width: 520px) {
    .sl-cc-actions { justify-content: stretch; }
    .sl-cc-actions .sl-cc-btn { flex: 1 1 auto; }
}