/* assets/css/prefs.css — cookie banner, closable notices, "Recently viewed"
   and draft restore bar (assets/js/prefs.js). Loaded on every public page. */

/* ── shared buttons ─────────────────────────────────────────── */
.cs-btn {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 0 14px; border-radius: 10px;
    font: 700 12.5px/1 "Noto Sans Bengali", "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: .01em; white-space: nowrap; touch-action: manipulation;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.cs-btn:active { transform: scale(.97); }
.cs-btn:focus-visible { outline: 2px solid #fb923c; outline-offset: 2px; }
.cs-btn-main { border: 1px solid transparent; color: #fff; background: linear-gradient(135deg, #f97316, #ea580c); box-shadow: 0 2px 8px -2px rgba(234, 88, 12, .55); }
.cs-btn-main:hover { background: linear-gradient(135deg, #fb923c, #f97316); }
.cs-btn-ghost { border: 1px solid #e2e8f0; color: #334155; background: #fff; }
.cs-btn-ghost:hover { border-color: #fdba74; color: #c2410c; background: #fff7ed; }

/* ── 1. cookie banner ───────────────────────────────────────
   Small and quiet: one line of text with two actions. Desktop: a card in
   the bottom-right corner (the language chip is bottom-left). Phones: a
   slim bar above the bottom navigation. */
.cs-consent {
    position: fixed; z-index: 2147483001;
    right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: min(480px, calc(100vw - 24px));
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    padding: 12px 12px 12px 14px; border-radius: 12px;
    background: rgba(15, 23, 42, .95); color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .2), 0 14px 32px -12px rgba(15, 23, 42, .5);
    -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
    font: 500 12.5px/1.5 "Noto Sans Bengali", "Plus Jakarta Sans", system-ui, sans-serif;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.cs-consent.is-in { opacity: 1; transform: none; pointer-events: auto; }
.cs-consent-tx { flex: 1 1 180px; min-width: 0; margin: 0; color: #cbd5e1; }
.cs-consent-tx a { color: #fdba74; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cs-consent-tx a:hover { color: #fed7aa; }
.cs-consent-acts { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cs-consent .cs-btn { min-height: 32px; padding: 0 14px; border-radius: 9px; }
.cs-consent-ess {
    appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: none;
    min-height: 32px; padding: 0 8px; border-radius: 8px;
    font: 600 12px/1 inherit; color: #94a3b8;
}
.cs-consent-ess:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.cs-consent-ess:focus-visible { outline: 2px solid #fb923c; outline-offset: 2px; }
@media (max-width: 1023px) {
    .cs-consent {
        left: 12px; right: 12px; width: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        padding: 10px 10px 10px 12px; gap: 6px 10px;
    }
    /* Pages with a bottom navigation bar: sit just above it. */
    body:has(.cs-bottom-nav, .bottom-nav, .nav-item-fab) .cs-consent { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) {
    .cs-consent-tx { flex-basis: 100%; }
    .cs-consent-acts { width: 100%; justify-content: flex-end; }
}
@media print { .cs-consent { display: none; } }

/* ── 2. closable notices ────────────────────────────────────── */
.cs-notice-x {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    position: absolute; top: 8px; right: 8px; z-index: 11;
    width: 28px; height: 28px; padding: 0; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(15, 23, 42, .08); background: rgba(255, 255, 255, .75); color: #64748b;
    transition: background-color .16s ease, color .16s ease;
}
.cs-notice-x:hover { background: #fff; color: #0f172a; }
.cs-notice-x:focus-visible { outline: 2px solid #fb923c; outline-offset: 2px; }
@media (pointer: coarse) { .cs-notice-x { width: 34px; height: 34px; top: 6px; right: 6px; } }
.cs-notice-out {
    overflow: hidden; opacity: 0;
    margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
    transition: max-height .3s ease, opacity .2s ease, margin .3s ease, padding .3s ease;
}

/* ── 4. recently viewed ─────────────────────────────────────── */
.cs-recent { margin: 14px 0; font-family: "Noto Sans Bengali", "Plus Jakarta Sans", system-ui, sans-serif; }
.cs-recent[hidden] { display: none; }
.cs-recent-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 8px; }
.cs-recent-title {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748b;
}
.cs-recent-title svg { color: #f97316; }
.cs-recent-clear {
    appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: none;
    padding: 4px 8px; border-radius: 8px; font: 700 12px/1 inherit; color: #c2410c;
}
.cs-recent-clear:hover { background: #fff7ed; }
.cs-recent-clear:focus-visible { outline: 2px solid #fb923c; outline-offset: 1px; }
.cs-recent-row {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px;
    scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cs-recent-row::-webkit-scrollbar { display: none; }
.cs-recent-card {
    flex: 0 0 auto; width: 200px; scroll-snap-align: start;
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: 12px; background: #fff; border: 1px solid #e8edf3; color: #0f172a; text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cs-recent-card:hover { border-color: #fdba74; box-shadow: 0 6px 16px -8px rgba(234, 88, 12, .35); transform: translateY(-1px); }
.cs-recent-card:focus-visible { outline: 2px solid #fb923c; outline-offset: 2px; }
.cs-recent-logo {
    flex: none; width: 36px; height: 36px; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #fff7ed; border: 1px solid #fde3c8; color: #c2410c; font-weight: 800; font-size: 15px;
}
.cs-recent-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; }
.cs-recent-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-recent-tx b { font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-recent-tx small { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .cs-recent-card, .cs-consent, .cs-notice-out { transition: none; } }

/* ── 5. draft restore bar ───────────────────────────────────── */
.cs-draft {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 10px 10px 10px 12px; border-radius: 12px;
    background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12;
    font: 500 12.5px/1.45 "Noto Sans Bengali", "Plus Jakarta Sans", system-ui, sans-serif;
    animation: cs-draft-in .25s ease-out;
}
.cs-draft-tx { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cs-draft-tx svg { flex: none; color: #ea580c; }
.cs-draft-tx span { display: flex; flex-direction: column; }
.cs-draft-tx b { font-weight: 800; color: #9a3412; }
.cs-draft-tx small { font-size: 11px; color: #b45309; }
.cs-draft-acts { display: flex; gap: 6px; margin-left: auto; }
.cs-draft-acts .cs-btn { min-height: 32px; padding: 0 12px; }
.cs-draft.is-done { justify-content: flex-start; background: #ecfdf5; border-color: #a7f3d0; color: #065f46; font-weight: 700; }
@keyframes cs-draft-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cs-draft { animation: none; } }