/* ============================================================
   TAKHRIJ HADITH LAB — Tema borang tempahan
   Mewarisi sistem reka bentuk halaman utama (home.css):
   · Dark  — emas manuskrip + mandala gelap (lalai)
   · Light — biru dakwat + parchment berlakaran
   Tema dibaca dari localStorage 'thl-theme' (skrip dalam <head>).
   Dimuat SELEPAS <style> sedia ada — hanya menimpa rupa,
   bukan logik atau susun atur borang.
   ============================================================ */

html[data-theme="dark"] {
    --accent: #C8A35C;
    --accent-hover: #E3C285;
    --bg: #0A0D13;
    --text: #EDE8DC;
    --text-muted: #8E94A1;
    --border: rgba(232, 222, 200, 0.14);
    --t-accent-rgb: 200, 163, 92;
    --t-accent-bright: #E3C285;
    --t-on-accent: #15110A;
    --t-glass: rgba(20, 25, 39, 0.55);
    --t-glass-border: rgba(232, 222, 200, 0.16);
    --t-glass-highlight: rgba(255, 255, 255, 0.08);
    --t-panel: #11151F;
    --t-placeholder: #565D6B;
    --t-key-bg: rgba(255, 255, 255, 0.06);
    --t-scroll: #232938;
    --t-pdpa-text: #6EE7B7;
    color-scheme: dark;
}

html[data-theme="light"] {
    --accent: #1A52B8;
    --accent-hover: #123E8F;
    --bg: #F2EEE5;
    --text: #14213A;
    --text-muted: #3F4A64;
    --border: rgba(38, 50, 78, 0.18);
    --t-accent-rgb: 26, 82, 184;
    --t-accent-bright: #2E72E5;
    --t-on-accent: #FBF9F4;
    --t-glass: rgba(253, 251, 246, 0.6);
    --t-glass-border: rgba(255, 255, 255, 0.75);
    --t-glass-highlight: rgba(255, 255, 255, 0.9);
    --t-panel: #FDFBF6;
    --t-placeholder: #A3A294;
    --t-key-bg: #FFFFFF;
    --t-scroll: #D8D2C2;
    --t-pdpa-text: #065F46;
    color-scheme: light;
}

/* ── Latar bercorak ikut tema ── */
html[data-theme="dark"] body {
    background: #0A0D13 url('assets/images/bg-dark-pattern.webp') center / cover no-repeat fixed;
}

html[data-theme="light"] body {
    background: #F2EEE5 url('assets/images/bg-light-sketch.webp') center / cover no-repeat fixed;
}

/* ── Logo: putih dalam dark mode ── */
html[data-theme="dark"] .tf-logo-inline {
    filter: brightness(0) invert(0.95);
}

/* ── Tipografi soalan: serif Fraunces, gaya halaman utama ── */
.tf-question {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    color: var(--text);
}

.tf-q-num {
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-weight: 700;
}

/* ── Progress bar ── */
.tf-progress-bar { background: rgba(var(--t-accent-rgb), 0.12); }

.tf-progress-fill {
    background: linear-gradient(90deg, var(--t-accent-bright), var(--accent));
}

/* ── Input utama ── */
.tf-input { color: var(--accent-hover); }
.tf-input::placeholder { color: var(--t-placeholder); }

/* ── Senarai pilihan ── */
.tf-choices-container::-webkit-scrollbar-thumb { background: var(--t-scroll); }

.tf-choice {
    background: rgba(var(--t-accent-rgb), 0.07);
    border-radius: 12px;
}

@media (hover: hover) {
    .tf-choice:hover {
        background: rgba(var(--t-accent-rgb), 0.14);
        border-color: rgba(var(--t-accent-rgb), 0.45);
    }
    html[data-theme] .tf-choices-container:has(.tf-choice:hover) .tf-choice.selected:not(:hover) {
        background: rgba(var(--t-accent-rgb), 0.03);
        border-color: var(--border);
        color: var(--text);
    }
    html[data-theme] .tf-choices-container:has(.tf-choice:hover) .tf-choice.selected:not(:hover) .tf-choice-key {
        background: var(--t-key-bg);
        color: var(--text-muted);
        border-color: var(--border);
    }
}

.tf-choice.selected {
    background: rgba(var(--t-accent-rgb), 0.16);
    border-color: var(--accent);
    color: var(--accent-hover);
}

.tf-choice-key {
    background: var(--t-key-bg);
    border-color: var(--border);
    color: var(--text-muted);
    box-shadow: none;
}

.tf-choice.selected .tf-choice-key {
    background: var(--accent);
    color: var(--t-on-accent);
    border-color: var(--accent);
}

/* ── Input "Lain-lain" ── */
.tf-choice-other-input {
    border-color: var(--border);
    border-radius: 12px;
}

.tf-choice-other-input:focus,
.tf-choice-other-input.has-value {
    border-color: var(--accent);
    background: rgba(var(--t-accent-rgb), 0.07);
}

.tf-choice-other-input::placeholder { color: var(--t-placeholder); }

/* ── Kad pakej: kaca macOS ── */
.tf-pakej-card {
    background: var(--t-glass);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-color: var(--t-glass-border);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 var(--t-glass-highlight);
}

@media (hover: hover) {
    .tf-pakej-card:hover {
        border-color: var(--accent);
        background: rgba(var(--t-accent-rgb), 0.10);
    }
    html[data-theme] .tf-pakej-grid:has(.tf-pakej-card:hover) .tf-pakej-card.selected:not(:hover) {
        border-color: var(--t-glass-border);
        background: var(--t-glass);
    }
}

.tf-pakej-card.selected {
    border-color: var(--accent);
    background: rgba(var(--t-accent-rgb), 0.14);
}

.tf-choice:focus-visible, .tf-pakej-card:focus-visible {
    border-color: var(--accent);
    background: rgba(var(--t-accent-rgb), 0.10);
    box-shadow: 0 4px 12px rgba(var(--t-accent-rgb), 0.2);
}

.tf-pakej-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; }

/* ── Butang ── */
.tf-btn, .tf-nav-btn {
    background: linear-gradient(135deg, var(--t-accent-bright), var(--accent) 60%, var(--accent-hover));
    color: var(--t-on-accent);
    border-radius: 999px;
}

html[data-theme="light"] .tf-btn,
html[data-theme="light"] .tf-nav-btn {
    background: var(--accent);
}

html[data-theme="light"] .tf-btn:hover:not(:disabled),
html[data-theme="light"] .tf-nav-btn:hover:not(:disabled) {
    background: var(--accent-hover);
    color: #FBF9F4;
}

.tf-nav-btn { border-radius: 10px; }

/* ── PDPA ── */
.tf-pdpa-shield {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

.tf-pdpa-shield p { color: var(--t-pdpa-text); }

.tf-pdpa-wrap {
    background: var(--t-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: var(--t-glass-border);
}

.tf-pdpa-wrap p { color: var(--text-muted); }

/* ── Kotak sebut harga (gaya inline dari JS — perlu !important) ── */
[id^="quote-"] > div {
    background: rgba(var(--t-accent-rgb), 0.07) !important;
    border-color: rgba(var(--t-accent-rgb), 0.3) !important;
    border-radius: 14px !important;
}

/* ── Modal ── */
.tf-modal {
    background: var(--t-panel);
    border: 1px solid var(--t-glass-border);
    color: var(--text);
}

.tf-modal h2 { color: var(--text); font-family: 'Fraunces', Georgia, serif; }

/* ── Skrin kejayaan ── */
.tf-success h1 {
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-weight: 400;
    color: var(--text);
}

.tf-success-box {
    background: var(--t-glass);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-color: var(--t-glass-border);
    border-radius: 16px;
}

.tf-success-box h3 { color: var(--accent-hover); }

.tf-success-box ol { color: var(--text); }
