/* ── Fonts ────────────────────────────────────────────── */
@font-face {
    font-family: 'Estedad-Bold';
    src: url('../fonts/Estedad/Estedad-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Estedad-SemiBold';
    src: url('../fonts/Estedad/Estedad-SemiBold.woff2')format('woff2');
}

@font-face {
    font-family: 'Estedad-Light';
    src: url('../fonts/Estedad/Estedad-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'BNAZANINB';
    src: url('../fonts/BNazanin/BNAZANB.woff2') format('woff2');
}

/* ── Tokens ───────────────────────────────────────────── */
:root {
    /* Default: warm orange */
    --clr-bg: 255,251,240; /* #FFFBF0 */
    --clr-primary: 232,130,12; /* #E8820C */
    --clr-primary-d: 196,110,8;
    --clr-primary-l: 255,240,220; /* #FFF0DC */
    --clr-gold: 245,197,24; /* #F5C518 */
    --clr-text: 28,26,20; /* #1C1A14 */
    --clr-muted: 122,112,96; /* #7A7060 */
    --clr-border: 232,130,12;
    --clr-surface: 255,255,255;
    --clr-surface-2: 248,244,236; /* slightly tinted surface for cards */
    --clr-coral: 255,107,107;
    --clr-mint: 45,201,138;
    --clr-on-primary: 255,255,255; /* text on primary bg */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 2px 8px rgba(232,130,12,0.10);
    --shadow-md: 0 6px 24px rgba(232,130,12,0.18);
    --hdr-h: 62px;
    --ff-bold: 'Estedad-Bold', sans-serif;
    --ff-semi: 'Estedad-SemiBold',sans-serif;
    --ff-light: 'Estedad-Light', sans-serif;
    --content-width: 1400px;
}

/* ── Blue theme ───────────────────────────────────────── */
[data-theme="blue"] {
    --clr-bg: 240,246,255;
    --clr-primary: 26,102,200;
    --clr-primary-d: 20,82,160;
    --clr-primary-l: 221,238,255;
    --clr-gold: 58,189,232;
    --clr-text: 15,31,61;
    --clr-muted: 74,96,128;
    --clr-border: 26,102,200;
    --clr-surface: 255,255,255;
    --clr-surface-2: 235,245,255;
    --clr-on-primary: 255,255,255;
    --shadow-sm: 0 2px 8px rgba(26,102,200,0.10);
    --shadow-md: 0 6px 24px rgba(26,102,200,0.18);
}

/* ── Green theme ──────────────────────────────────────── */
[data-theme="green"] {
    --clr-bg: 240,250,242;
    --clr-primary: 42,140,74;
    --clr-primary-d: 30,110,55;
    --clr-primary-l: 220,250,229;
    --clr-gold: 111,202,58;
    --clr-text: 13,38,20;
    --clr-muted: 58,96,69;
    --clr-border: 42,140,74;
    --clr-surface: 255,255,255;
    --clr-surface-2: 235,250,240;
    --clr-on-primary: 255,255,255;
    --shadow-sm: 0 2px 8px rgba(42,140,74,0.10);
    --shadow-md: 0 6px 24px rgba(42,140,74,0.18);
}

/* ── Dark theme (improved) ────────────────────────────── */
[data-theme="dark"] {
    --clr-bg: 18,18,30; /* deep near-black */
    --clr-primary: 148,130,255; /* soft lavender-purple */
    --clr-primary-d: 108,92,220;
    --clr-primary-l: 38,36,62; /* very dark purple tint for card interiors */
    --clr-gold: 190,165,255; /* muted lavender accent */
    --clr-text: 230,228,248; /* near-white with slight blue tint */
    --clr-muted: 155,150,190; /* desaturated purple-gray */
    --clr-border: 148,130,255;
    --clr-surface: 28,28,46; /* card surface — distinct from page bg */
    --clr-surface-2: 38,38,58; /* slightly lighter surface for nested elements */
    --clr-on-primary: 218,218,230; /* dark text on the light-ish primary */
    --clr-coral: 255,120,120;
    --clr-mint: 60,215,155;
    --shadow-sm: 0 2px 8px rgba(148,130,255,0.15);
    --shadow-md: 0 6px 24px rgba(148,130,255,0.28);
}

/* ── Pink / Rose theme ────────────────────────────────── */
[data-theme="pink"] {
    --clr-bg: 255,242,248;
    --clr-primary: 214,55,120; /* #D63778 */
    --clr-primary-d: 180,35,95;
    --clr-primary-l: 255,220,237;
    --clr-gold: 248,116,180; /* hot pink accent */
    --clr-text: 55,15,35;
    --clr-muted: 140,80,110;
    --clr-border: 214,55,120;
    --clr-surface: 255,255,255;
    --clr-surface-2: 255,235,248;
    --clr-on-primary: 255,255,255;
    --shadow-sm: 0 2px 8px rgba(214,55,120,0.12);
    --shadow-md: 0 6px 24px rgba(214,55,120,0.22);
}

/* ── Navy / Sarmeh-ei (سرمه‌ای) theme ─────────────────── */
[data-theme="navy"] {
    --clr-bg: 236,240,248;
    --clr-primary: 22,52,110; /* #16346E deep navy */
    --clr-primary-d: 12,34,80;
    --clr-primary-l: 210,222,245;
    --clr-gold: 88,148,220; /* steel-blue accent */
    --clr-text: 8,20,45;
    --clr-muted: 70,90,130;
    --clr-border: 22,52,110;
    --clr-surface: 255,255,255;
    --clr-surface-2: 228,234,248;
    --clr-on-primary: 255,255,255;
    --shadow-sm: 0 2px 8px rgba(22,52,110,0.12);
    --shadow-md: 0 6px 24px rgba(22,52,110,0.22);
}

/* ── Theme toggle button (fixed, bottom-left) ─────────── */
.theme-toggle-btn {
    position: fixed;
    bottom: 24px;
    left: 20px;
    z-index: 2000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--clr-primary), 0.90);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.18s, background 0.18s;
}

.theme-toggle-btn:hover {
    transform: scale(1.10);
}

/* ── Theme picker panel ───────────────────────────────── */
.theme-panel {
    position: fixed;
    bottom: 76px;
    left: 16px;
    z-index: 1999;
    background: rgb(var(--clr-surface));
    border: 1px solid rgba(var(--clr-border), 0.18);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: 14px 12px 10px;
    width: 240px;
    direction: rtl;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.20s, transform 0.20s;
}

.theme-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.theme-panel-title {
    font-family: var(--ff-semi);
    font-size: 12px;
    color: rgb(var(--clr-muted));
    margin-bottom: 10px;
    text-align: center;
}

.theme-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 7px;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 4px 7px;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    background: none;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--ff-semi);
    font-size: 10px;
}

.theme-option:hover {
    background: rgba(var(--clr-primary-l), 1);
    color: rgb(var(--clr-text));
}

.theme-option.active {
    border-color: rgba(var(--clr-primary), 0.7);
    background: rgba(var(--clr-primary-l), 1);
}

.theme-option .swatch-group {
    display: flex;
    gap: 3px;
}

.theme-option .sw {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.10);
}

/* ── Reset ────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--ff-light);
    background: rgb(var(--clr-bg));
    color: rgb(var(--clr-text));
    direction: rtl;
}

/* ── Header ───────────────────────────────────────────── */
.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    height: var(--hdr-h);
    background: rgba(var(--clr-primary), 0.82);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 3px 18px rgba(var(--clr-primary), 0.35);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--content-width);
    margin: 0 auto;
    width: 100%;
}

.hdr-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.hdr-logo img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    opacity: 0.92;
    display: block;
}

.countdown-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,0.20);
    border-radius: 24px;
    padding: 4px 12px;
}

.countdown-pill .num {
    font-family: 'BNAZANINB', sans-serif;
    font-size: 22px;
    color: rgb(var(--clr-gold));
    line-height: 1;
}

.countdown-pill .lbl {
    font-family: var(--ff-light);
    font-size: 12px;
    color: rgba(var(--clr-on-primary), 0.80);
}

/* Center nav */
.hdr-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* User box in header */
.user-header-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--clr-surface), 0.95);
    color: rgb(var(--clr-primary));
    padding: 5px 12px 5px 6px;
    border-radius: 24px;
    text-decoration: none;
    font-family: var(--ff-semi);
    font-size: 13px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, background 0.15s;
}

.user-header-box:hover {
    text-decoration: none;
    background: rgba(var(--clr-primary-l), 1);
    color: rgb(var(--clr-primary));
    transform: translateY(-1px);
}

.user-header-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(var(--clr-primary-l), 1);
    border: 2px solid rgba(var(--clr-primary), 0.35);
}

.user-header-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(var(--clr-primary-l), 1);
    border: 2px solid rgba(var(--clr-on-primary), 0.85);
}

/* Nav buttons */
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 20px;
    border: none;
    font-family: var(--ff-semi);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s;
    white-space: nowrap;
    text-decoration: none;
}

.nav-btn:hover {
    transform: translateY(-1px);
}

.nav-btn:active {
    transform: translateY(0);
}

.nav-btn--ghost {
    background: rgba(var(--clr-on-primary), 0.16);
    color: rgb(var(--clr-on-primary));
}

.nav-btn--ghost:hover {
    background: rgba(var(--clr-on-primary), 0.26);
}

.nav-btn--gold {
    background: rgb(var(--clr-gold));
    /* gold text: use primary-d for warm themes, on-primary for dark/cool */
    color: rgb(var(--clr-text));
}

.nav-btn--gold:hover {
    filter: brightness(1.08);
}

.nav-btn--white {
    background: rgba(var(--clr-surface), 0.95);
    color: rgb(var(--clr-primary));
}

.nav-btn--white:hover {
    background: rgba(var(--clr-primary-l), 1);
}

/* Hamburger */
.hdr-right {
    display: none;
}

.hamburger {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(var(--clr-on-primary), 0.15);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s;
    padding: 0;
}

    .hamburger:hover {
        background: rgba(var(--clr-on-primary), 0.25);
    }

    .hamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background: rgb(var(--clr-on-primary));
        border-radius: 2px;
        transition: transform 0.25s, opacity 0.25s;
    }

[data-theme="dark"] .hamburger span {
    background: rgb(var(--clr-text));
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.hdr-spacer {
    height: var(--hdr-h);
}

/* ── Mobile drawer ────────────────────────────────────── */
.mobile-drawer {
    display: none;
    position: fixed;
    top: var(--hdr-h);
    right: 0;
    left: 0;
    z-index: 999;
    background: rgba(var(--clr-primary-d), 0.88);
    backdrop-filter: blur(10px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.30s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

    .mobile-drawer.open {
        max-height: 260px;
    }

.drawer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 18px 12px 20px;
    gap: 8px;
}

.drawer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 10px 4px;
    border-radius: var(--radius-sm);
    transition: background 0.18s;
    border: none;
    background: none;
    text-decoration: none;
}

    .drawer-item:hover {
        background: rgba(var(--clr-on-primary), 0.12);
    }

.drawer-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
/* Drawer icon bg colors use theme-aware semi-transparent fills */
.di--home {
    background: rgba(var(--clr-coral), 0.75);
}

.di--award {
    background: rgba(var(--clr-gold), 0.75);
}

.di--login {
    background: rgba(var(--clr-mint), 0.75);
}

.di--user {
    background: rgba(var(--clr-surface), 0.65);
}

.drawer-lbl {
    font-family: var(--ff-semi);
    font-size: 12px;
    color: rgb(var(--clr-on-primary));
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 720px) {
    .hdr-nav {
        display: none;
    }

    .hdr-right {
        display: flex;
    }

    .mobile-drawer {
        display: block;
    }

    .header {
        padding: 0 14px;
    }
}

/* ── Footer ───────────────────────────────────────────── */
footer {
    text-align: center;
    padding: 22px 16px;
    margin-top: 40px;
    font-family: var(--ff-light);
    font-size: 13px;
    color: rgb(var(--clr-muted));
    border-top: 1px solid rgba(var(--clr-border), 0.25);
    background: rgb(var(--clr-surface-2));
}

/* ── OTP Login Modal ──────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0,0,0,0.50);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

.modal-card {
    background: rgb(var(--clr-surface));
    border: 1px solid rgba(var(--clr-border), 0.18);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 32px 28px 24px;
    width: 340px;
    max-width: 94vw;
    direction: rtl;
}

.modal-logo {
    display: block;
    margin: 0 auto 18px;
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.modal-title {
    font-family: var(--ff-semi);
    font-size: 14px;
    color: rgb(var(--clr-text));
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.6;
}

.modal-error {
    display: none;
    background: rgba(var(--clr-coral), 0.12);
    color: rgb(var(--clr-coral));
    border: 1px solid rgba(var(--clr-coral), 0.30);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-family: var(--ff-semi);
    font-size: 13px;
    margin-bottom: 12px;
    text-align: center;
}

.modal-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(var(--clr-border), 0.35);
    background: rgb(var(--clr-surface-2));
    color: rgb(var(--clr-text));
    font-family: var(--ff-light);
    font-size: 15px;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}

    .modal-input:focus {
        border-color: rgba(var(--clr-primary), 0.70);
        box-shadow: 0 0 0 3px rgba(var(--clr-primary), 0.12);
    }

.btn-primary {
    display: block;
    width: 100%;
    padding: 11px;
    background: rgb(var(--clr-primary));
    color: rgb(var(--clr-on-primary));
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--ff-semi);
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: filter 0.18s, transform 0.12s;
}

.btn-primary:hover {
    filter: brightness(1.10);
    transform: translateY(-1px);
}

.btn-primary--green {
    background: rgb(var(--clr-mint));
    color: rgb(8,50,30);
}

.btn-ghost {
    display: block;
    width: 100%;
    padding: 9px;
    background: rgba(var(--clr-primary-l), 1);
    color: rgb(var(--clr-muted));
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--ff-semi);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.18s;
}

.btn-ghost:hover {
    background: rgba(var(--clr-primary), 0.12);
    color: rgb(var(--clr-text));
}

/* OTP boxes */
.otp-boxes {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
    direction: ltr;
}

.otp-box {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 22px;
    font-family: 'Estedad-Bold', sans-serif;
    border: 2px solid rgba(var(--clr-border), 0.30);
    border-radius: var(--radius-sm);
    background: rgb(var(--clr-surface-2));
    color: rgb(var(--clr-text));
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    caret-color: rgb(var(--clr-primary));
}

.otp-box:focus, .otp-box.filled {
    border-color: rgb(var(--clr-primary));
    box-shadow: 0 0 0 3px rgba(var(--clr-primary), 0.15);
}

.otp-hint {
    font-family: var(--ff-light);
    font-size: 13px;
    color: rgb(var(--clr-muted));
    text-align: center;
    margin-bottom: 4px;
}

.otp-sent-to {
    font-family: var(--ff-semi);
    font-size: 14px;
    color: rgb(var(--clr-primary));
    text-align: center;
    margin-bottom: 14px;
    direction: ltr;
}

.otp-countdown {
    font-family: var(--ff-light);
    font-size: 12px;
    color: rgb(var(--clr-muted));
    text-align: center;
    margin-bottom: 12px;
}

.otp-countdown .time {
    font-family: 'Estedad-Bold', sans-serif;
    color: rgb(var(--clr-text));
}

.otp-countdown .time.urgent {
    color: rgb(var(--clr-coral));
}

/* Toast */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgb(var(--clr-surface));
    color: rgb(var(--clr-text));
    border: 1px solid rgba(var(--clr-border), 0.25);
    border-radius: var(--radius-md);
    padding: 10px 20px;
    font-family: var(--ff-semi);
    font-size: 14px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 5000;
    pointer-events: none;
    white-space: nowrap;
}

@keyframes shake {
    0%,100% {
        transform: translateX(0);
    }

    20%,60% {
        transform: translateX(-6px);
    }

    40%,80% {
        transform: translateX(6px);
    }
}

/* Modal Backdrop & Centering */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.3s ease; /* Matches PopupAnimationType="Fade" */
    align-items: center; /* Vertical Center */
    justify-content: center; /* Horizontal Center */
}

/* Modal Box */
.custom-modal-content {
    background-color: rgb(var(--clr-surface));
    max-width: 400px; /* Matches MaxWidth="400px" */
    max-height: 620px; /* Matches MaxHeight="620px" */
    width: 90%;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    direction: rtl; /* Necessary for Persian content */
}

/* Header Styles mapped directly from your HeaderStyle node */
.custom-modal-header {
    background-color: rgb(var(--clr-primary));
    color: White;
    font-family: 'Estedad-SemiBold', Tahoma, Arial, sans-serif;
    font-weight: bold;
    font-size: 11pt;
    text-align: center;
    padding: 12px 15px;
    position: relative;
}

/* The Close Button (X) */
.custom-modal-close {
    position: absolute;
    left: 15px; /* Positioned on the left for RTL */
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.custom-modal-close:hover {
    color: #f1f1f1;
}

/* Content Area */
.custom-modal-body {
    padding: 20px;
    text-align: center;
    overflow-y: auto;
    max-height: calc(620px - 50px); /* Restrict height minus header */
}