/* =========================================================
   AISEL GALLERY
   DARK MODE
   Black • Pink • Gold • Silver
========================================================= */


/* =========================================================
   01. DARK VARIABLES
========================================================= */

body.dark-mode {

    --white: #171419;
    --off-white: #0f0d10;

    --black: #ffffff;
    --dark: #0b090c;
    --dark-soft: #211b21;

    --text: #f7f2f5;
    --text-light: #aaa1a8;

    --pink: #ed91b1;
    --pink-light: #5c3545;
    --pink-soft: #291b22;
    --pink-dark: #f09abb;

    --gold: #d9b86f;
    --gold-light: #665536;
    --gold-dark: #e1bd72;

    --silver: #bfc4cc;
    --silver-light: #34373d;
    --silver-dark: #9298a1;

    --border:
        rgba(255, 255, 255, 0.09);

    --shadow-sm:
        0 5px 25px rgba(0, 0, 0, 0.28);

    --shadow:
        0 15px 50px rgba(0, 0, 0, 0.38);

    --shadow-lg:
        0 25px 80px rgba(0, 0, 0, 0.50);
}


/* =========================================================
   02. BODY
========================================================= */

body.dark-mode {

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(237, 145, 177, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(217, 184, 111, 0.04),
            transparent 25%
        ),
        #0f0d10;

    color: var(--text);
}


/* =========================================================
   03. SCROLLBAR
========================================================= */

body.dark-mode::-webkit-scrollbar-track {

    background: #171419;
}

body.dark-mode::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            var(--pink-dark),
            var(--gold)
        );
}


/* =========================================================
   04. HEADER
========================================================= */

body.dark-mode .site-header {

    background:
        rgba(15, 13, 16, 0.88);

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

body.dark-mode .brand-en {

    color: var(--gold);
}

body.dark-mode .brand-fa {

    color: var(--text-light);
}

body.dark-mode .menu-button {

    background:
        rgba(237,145,177,0.08);

    border:
        1px solid rgba(237,145,177,0.20);
}

body.dark-mode .menu-button span {

    background: var(--pink);
}

body.dark-mode .icon-button {

    background:
        #19161b;

    border:
        1px solid rgba(255,255,255,0.09);

    color: var(--text);
}

body.dark-mode .icon-button:hover {

    border-color:
        rgba(217,184,111,0.45);

    color:
        var(--gold);
}


/* =========================================================
   05. MOBILE MENU
========================================================= */

body.dark-mode .mobile-menu {

    background:
        #151217;

    box-shadow:
        -20px 0 70px rgba(0,0,0,0.55);
}

body.dark-mode .mobile-menu-header {

    color: var(--gold);

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

body.dark-mode .mobile-menu-header button {

    background:
        var(--pink-soft);

    color:
        var(--pink);
}

body.dark-mode .mobile-menu nav a {

    color: var(--text);
}

body.dark-mode .mobile-menu nav a:hover {

    background:
        rgba(237,145,177,0.08);

    color:
        var(--pink);
}

body.dark-mode .menu-overlay {

    background:
        rgba(0,0,0,0.70);
}


/* =========================================================
   06. SPLASH
========================================================= */

body.dark-mode .splash-screen {

    background:
        radial-gradient(
            circle at center,
            rgba(237,145,177,0.10),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0e0c0f,
            #171218 50%,
            #21191f
        );
}

body.dark-mode .splash-content h1 {

    color:
        var(--text);
}

body.dark-mode .splash-logo {

    color:
        var(--gold);

    text-shadow:
        0 4px 30px rgba(217,184,111,0.20);
}

body.dark-mode .splash-product {

    color:
        var(--pink);
}

body.dark-mode .splash-description {

    color:
        var(--text-light);
}

body.dark-mode .splash-loader {

    background:
        rgba(255,255,255,0.08);
}


/* =========================================================
   07. HERO
========================================================= */

body.dark-mode .hero-section {

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(237,145,177,0.10),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #171419,
            #201a20 50%,
            #19151a
        );

    border:
        1px solid rgba(217,184,111,0.18);

    box-shadow:
        var(--shadow);
}

body.dark-mode .hero-label {

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(217,184,111,0.28);

    color:
        var(--gold);
}

body.dark-mode .hero-content h1 {

    color:
        var(--text);
}

body.dark-mode .hero-content h1 strong {

    color:
        var(--pink);
}

body.dark-mode .hero-content p {

    color:
        var(--text-light);
}

body.dark-mode .hero-button {

    background:
        linear-gradient(
            100deg,
            #c8658b,
            #ed91b1
        );

    box-shadow:
        0 10px 35px rgba(237,145,177,0.16);
}

body.dark-mode .hero-button:hover {

    box-shadow:
        0 15px 45px rgba(237,145,177,0.23);
}

body.dark-mode .gold-circle {

    border-color:
        rgba(217,184,111,0.18);

    box-shadow:
        inset 0 0 70px rgba(217,184,111,0.04);
}

body.dark-mode .silver-circle {

    border-color:
        rgba(191,196,204,0.18);
}

body.dark-mode .pink-circle {

    background:
        radial-gradient(
            circle,
            rgba(237,145,177,0.13),
            rgba(237,145,177,0.02) 65%,
            transparent 70%
        );
}


/* =========================================================
   08. SECTION HEADINGS
========================================================= */

body.dark-mode .section-heading > span {

    color:
        var(--gold);
}

body.dark-mode .section-heading h2 {

    color:
        var(--text);
}

body.dark-mode .section-heading p {

    color:
        var(--text-light);
}

body.dark-mode .section-heading-row > a {

    color:
        var(--pink);

    border-color:
        rgba(237,145,177,0.22);
}

body.dark-mode .section-heading-row > a:hover {

    color:
        var(--gold);
}


/* =========================================================
   09. CATEGORY CARDS
========================================================= */

body.dark-mode .category-card {

    background:
        #18151a;

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        var(--shadow-sm);
}

body.dark-mode .category-card:hover {

    box-shadow:
        0 25px 70px rgba(0,0,0,0.42);
}

body.dark-mode .category-number {

    color:
        var(--gold-light);
}


/* Dark category backgrounds */

body.dark-mode .category-cream .category-image {

    background:
        linear-gradient(
            135deg,
            #684450,
            #39242d
        );
}

body.dark-mode .category-perfume .category-image {

    background:
        linear-gradient(
            135deg,
            #7c6335,
            #3d301b
        );
}

body.dark-mode .category-cosmetics .category-image {

    background:
        linear-gradient(
            135deg,
            #8c4f68,
            #492638
        );
}

body.dark-mode .category-jewelry .category-image {

    background:
        linear-gradient(
            135deg,
            #60656d,
            #30343a
        );
}

body.dark-mode .category-special .category-image {

    background:
        linear-gradient(
            135deg,
            #211b21,
            #0d0b0e
        );
}

body.dark-mode .category-recommended .category-image {

    background:
        linear-gradient(
            135deg,
            #735d31,
            #3d3019
        );
}


/* =========================================================
   10. PRODUCTS
========================================================= */

body.dark-mode .products-slider::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--gold)
        );
}

body.dark-mode .empty-products {

    background:
        linear-gradient(
            135deg,
            #19151a,
            #241a20
        );

    border:
        1px dashed rgba(217,184,111,0.30);
}

body.dark-mode .empty-products > span {

    color:
        var(--gold);
}

body.dark-mode .empty-products h3 {

    color:
        var(--text);
}

body.dark-mode .empty-products p {

    color:
        var(--text-light);
}


/* =========================================================
   11. ABOUT
========================================================= */

body.dark-mode .about-section {

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(237,145,177,0.08),
            transparent 30%
        ),
        linear-gradient(
            115deg,
            #171319,
            #241c23
        );

    border:
        1px solid rgba(217,184,111,0.10);
}

body.dark-mode .about-content > span {

    color:
        var(--gold);
}

body.dark-mode .about-content h2 {

    color:
        var(--text);
}

body.dark-mode .about-content p {

    color:
        rgba(247,242,245,0.65);
}

body.dark-mode .about-content a {

    color:
        var(--gold);

    border-color:
        rgba(217,184,111,0.30);
}

body.dark-mode .about-content a:hover {

    background:
        var(--gold);

    color:
        #171419;
}

body.dark-mode .about-section::after {

    color:
        rgba(255,255,255,0.025);
}


/* =========================================================
   12. CONTACT
========================================================= */

body.dark-mode .contact-button {

    background:
        #18151a;

    color:
        var(--gold);

    border:
        1px solid rgba(217,184,111,0.25);
}

body.dark-mode .contact-button:hover {

    background:
        var(--gold);

    color:
        #171419;
}


/* =========================================================
   13. FOOTER
========================================================= */

body.dark-mode .site-footer {

    background:
        #0d0b0e;

    border-top:
        1px solid rgba(255,255,255,0.07);
}

body.dark-mode .footer-brand strong {

    color:
        var(--gold);
}

body.dark-mode .footer-brand span,
body.dark-mode .site-footer > p {

    color:
        var(--text-light);
}

body.dark-mode .footer-links a {

    color:
        var(--text-light);
}

body.dark-mode .footer-links a:hover {

    color:
        var(--pink);
}

body.dark-mode .footer-copy {

    color:
        var(--silver-dark);
}


/* =========================================================
   14. BOTTOM NAVIGATION
========================================================= */

body.dark-mode .bottom-navigation {

    background:
        rgba(22,19,23,0.92);

    border:
        1px solid rgba(217,184,111,0.18);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.45);
}

body.dark-mode .bottom-nav-item {

    color:
        var(--text-light);
}

body.dark-mode .bottom-nav-item:hover {

    color:
        var(--pink);

    background:
        rgba(237,145,177,0.07);
}

body.dark-mode .bottom-nav-item.active {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #bd5f83,
            #df86a7
        );

    box-shadow:
        0 8px 25px rgba(237,145,177,0.16);
}


/* =========================================================
   15. FORM ELEMENTS
   آماده برای صفحات بعدی
========================================================= */

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {

    background:
        #18151a;

    color:
        var(--text);

    border-color:
        rgba(255,255,255,0.10);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {

    color:
        #756d75;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {

    border-color:
        rgba(237,145,177,0.55);

    box-shadow:
        0 0 0 3px rgba(237,145,177,0.08);
}


/* =========================================================
   16. MOBILE DARK MODE
========================================================= */

@media (max-width: 767px) {

    body.dark-mode .bottom-navigation {

        background:
            rgba(20,17,21,0.94);

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);
    }

    body.dark-mode .hero-section {

        box-shadow:
            0 15px 45px rgba(0,0,0,0.35);
    }

}


/* =========================================================
   17. SYSTEM DARK MODE FALLBACK
========================================================= */

@media (prefers-color-scheme: dark) {

    body:not(.light-mode) {

        color-scheme: dark;
    }

}


/* =========================================================
   END DARK MODE
========================================================= */