/* ─── Dark Mode Variables ─── */
:root {
    --bg-primary:       #ffffff;
    --bg-secondary:     #F5F5F5;
    --bg-tertiary:      #FCFCFC;
    --bg-card:          rgba(245,245,245,0.8);
    --bg-overlay:       rgba(0,0,0,0.25);
    --text-primary:     #353535;
    --text-secondary:   #4B4B4B;
    --text-muted:       #707070;
    --text-dark:        #2C2C2C;
    --text-footer:      #414141;
    --border-color:     rgba(53,53,53,0.32);
    --border-light:     rgba(112,112,112,0.18);
    --border-card:      rgba(112,112,112,0.05);
    --nav-bg:           #ffffff;
    --nav-border:       rgba(0,0,0,0.07);
    --btn-border:       rgba(0,0,0,0.08);
    --btn-bg:           #FCFCFC;
    --brand:            #3EB4A1;
    --brand-dark:       #2F8678;
    --brand-light:      rgba(62,180,161,0.54);
    --brand-faint:      rgba(62,180,161,0.16);
    --brand-bg:         rgba(62,180,161,0.20);
    --brand-10:         rgba(62,180,161,0.10);
    --badge-bg:         rgba(62,180,161,0.10);
    --circle-bg:        #86D0C4;
    --icon-social-bg:   #414141;
    --shadow-color:     rgba(0,0,0,0.05);
    --input-bg:         #ffffff;
    --modal-bg:         #ffffff;
    --footer-bg:        #F5F5F5;
    --bg-menu:          #ffffff;
}

html.dark {
    --bg-primary:       #0f1117;
    --bg-secondary:     #181c27;
    --bg-tertiary:      #1a1e2b;
    --bg-card:          rgba(30,36,52,0.85);
    --bg-overlay:       rgba(0,0,0,0.55);
    --text-primary:     #e2e8f0;
    --text-secondary:   #cbd5e1;
    --text-muted:       #94a3b8;
    --text-dark:        #cbd5e1;
    --text-footer:      #94a3b8;
    --border-color:     rgba(148,163,184,0.25);
    --border-light:     rgba(148,163,184,0.12);
    --border-card:      rgba(148,163,184,0.08);
    --nav-bg:           #131720;
    --nav-border:       rgba(255,255,255,0.06);
    --btn-border:       rgba(255,255,255,0.08);
    --btn-bg:           #1e2433;
    --brand:            #4ecdb8;
    --brand-dark:       #3ab5a0;
    --brand-light:      rgba(78,205,184,0.40);
    --brand-faint:      rgba(78,205,184,0.12);
    --brand-bg:         rgba(78,205,184,0.15);
    --brand-10:         rgba(78,205,184,0.10);
    --badge-bg:         rgba(78,205,184,0.12);
    --circle-bg:        rgba(78,205,184,0.25);
    --icon-social-bg:   #2a2f3e;
    --shadow-color:     rgba(0,0,0,0.3);
    --input-bg:         #1e2433;
    --modal-bg:         #181c27;
    --footer-bg:        #0d1018;
    --bg-menu:          #23262f;
}

/* ─── Apply variables to elements ─── */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Nav & menus */
#bottom-nav {
    background-color: var(--nav-bg) !important;
    border-color: var(--nav-border) !important;
}
.menu-bar {
    background-color: var(--bg-menu) !important;
}

/* Buttons */
.menu,
[aria-label="مشاهده اعلان‌های پروفایل کاربر"] {
}

/* Modal */
#loginModal {
    background-color: var(--bg-overlay) !important;
}
.login-modal-container {
    background-color: var(--modal-bg) !important;
}
.phone-number,
.otp-digit {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.phone-number::placeholder {
    color: var(--text-muted) !important;
}

/* Cards */
.swiper-slide article,
.swiper-slide > div {
    background-color: var(--bg-card) !important;
    border-color: var(--border-card) !important;
}

/* Stats cards */
article.rounded-2xl.backdrop-blur-md {
    background-color: var(--bg-card) !important;
}

/* Trust section circle */
.absolute.inset-0.m-auto.bg-\[\#86D0C4\] {
    background-color: var(--circle-bg) !important;
}

/* Banner */
.bg-\[\#3EB4A1\]\/\[0\.54\] {
    background-color: var(--brand-light) !important;
}

/* Download section */
.bg-\[\#FCFCFC\] {
    background-color: var(--bg-tertiary) !important;
}

/* Article cards */
article.bg-\[\#FAFAFA\] {
    background-color: var(--bg-secondary) !important;
    border-color: var(--brand-faint) !important;
}

/* Footer */
footer {
    background-color: var(--footer-bg) !important;
}

/* Social icons */
footer a.bg-\[\#414141\] {
    background-color: var(--icon-social-bg) !important;
}

/* Q&A cards */
.bg-\[\#F5F5F5\] {
    background-color: var(--bg-secondary) !important;
}

/* Text colors */
.text-\[\#353535\],
.text-\[\#4B4B4B\],
.text-\[\#2C2C2C\],
.text-\[\#313131\],
.text-\[\#414141\] {
    color: var(--text-secondary) !important;
}
.text-\[\#707070\] {
    color: var(--text-muted) !important;
}

/* Border colors */
.border-\[\#C7C7C7\]\/\[0\.17\] {
    border-color: var(--border-light) !important;
}
.border-\[rgba\(112\,112\,112\,0\.18\)\],
.border-\[rgba\(112\,112\,112\,0\.11\)\],
.border-\[rgba\(112\,112\,112\,0\.05\)\] {
    border-color: var(--border-light) !important;
}

/* Badge/tag backgrounds */
.bg-\[\#3EB4A1\]\/10 {
    background-color: var(--badge-bg) !important;
}

/* Overlay */
.overlay {
    background-color: rgba(0,0,0,0.6) !important;
}

/* ─── Theme Toggle Button ─── */
#theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9.44px;
    border: 0.83px solid var(--btn-border);
    background-color: var(--btn-bg);
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    flex-shrink: 0;
}
#theme-toggle svg {
    transition: transform 0.4s ease, opacity 0.3s ease;
}
#theme-toggle .icon-sun  { display: none; }
#theme-toggle .icon-moon { display: block; }
html.dark #theme-toggle .icon-sun  { display: block; }
html.dark #theme-toggle .icon-moon { display: none; }