/* ===== UTF-8 Character Encoding Declaration ===== */
@charset "UTF-8";

/* ======================================================================
   SitePurple.css - Purple Theme Override Layer
   Load order: Bootstrap -> Site.css -> SitePurple.css

   Important:
   - This file must NOT duplicate Site.css.
   - This file must NOT redefine navbar direction/flex order.
   - Site.css already controls RTL/LTR menu order.
   - Purple theme only changes colors, radius, gradients, and small spacing.
   ====================================================================== */


/* ======================================================================
   1) Purple theme tokens
   ====================================================================== */
:root {
    --bs-nav-tabs-border-color: #58498b !important;
    --bs-border-width: 1.5px !important;
    /* Main purple brand colors */
    --navbar-right: #58498b;
    --navbar-left: #988bc1;
    /* Navbar text colors */
    --hero-brand-color: #58498b;
    --nav-latest-projects-color: #656565;
    /* Purple navbar control */
    --purple-navbar-inner-bg: #ffffff;
    /* Sep 2026: was #656565 (a medium gray) - the user reported the public
       navbar's link text as basically unreadable in LIGHT mode, and this is
       the confirmed reason: this token (not "--hero-brand-color", which a
       LATER, same-specificity rule in this same file's own section 2
       overrides it with, per this file's source-order-wins-ties load
       position after Site.css) is what actually colors ".navbar .navbar-nav
       .nav-link" against the "inner white pill" background
       ("--purple-navbar-inner-bg", above) - confirmed via direct grep of
       both Site.css and this file, not guessed. #656565-on-white technically
       passes WCAG AA (~5.9:1) but reads as faint in practice; switched to
       this project's own already-established dark brand surface color
       (#241f33, reused rather than inventing a new one, per the user's own
       explicit "reuse general/shared tokens" request) for unambiguous
       contrast. This is a LIGHT-mode base value, not a dark-mode override -
       the white pill background itself is not yet dark-mode-aware at all
       (flagged as a separate, not-yet-reported gap - see Pending below). */
    --purple-navbar-text: #241f33;
    --purple-navbar-hover: #d4af37;
    --purple-navbar-toggler: #241f33;
    --purple-navbar-radius: 0 0 50px 50px;
    --purple-navbar-inner-radius: 50px;
    /* Footer colors */
    --purple-footer-start: #fbfaff;
    --purple-footer-end: var(--navbar-left);
    --purple-footer-text: #58498b;
    --purple-footer-hover: #d4af37;
    /* Common radius */
    --purple-radius-sm: 8px;
    --purple-radius-md: 12px;
    --purple-radius-lg: 15px;
    /* Product/footer card purple */
    --product-footer-purple: #442f8c;
    --product-footer-purple-soft: #f4f0fbcf;
    --product-footer-border: #e6ddf500;
    --product-footer-text: #4b5563;
    --product-footer-icon-bg: #ffffff;
    --navbar-left-light: #988bc13e;
}


/* ======================================================================
   2) Navbar purple appearance
   Do not set .navbar-nav flex-direction here.
   Do not set .navbar-collapse order here.
   Do not use public-navbar classes because they are not in _Layout.cshtml.
   ====================================================================== */
html[dir="rtl"] .navbar,
html[dir="ltr"] .navbar {
    border-radius: var(--purple-navbar-radius) !important;
    border-color: #1a237e !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.10) !important;
}

/* RTL and LTR keep the same visual gradient as your layout inline style. */
.navbar {
    background: linear-gradient(135deg, var(--navbar-left) 0%, var(--navbar-right) 100%) !important;
}

    /* Inner white pill container shown in your screenshot. */
    .navbar .container {
        background-color: var(--purple-navbar-inner-bg) !important;
        color: var(--purple-navbar-text) !important;
        border-radius: var(--purple-navbar-inner-radius) !important;
        min-height: 70px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Brand text and links */
    .navbar .navbar-brand,
    .navbar .navbar-brand:visited,
    .navbar .navbar-brand:active {
        color: var(--hero-brand-color) !important;
    }

        .navbar .navbar-brand:hover,
        .navbar .navbar-brand:focus {
            color: var(--purple-navbar-hover) !important;
        }

    /* Nav links */
    .navbar .navbar-nav .nav-link,
    .navbar .navbar-nav .nav-link:visited,
    .navbar .navbar-nav .nav-link:active,
    .navbar .nav-link.nav-latest-projects,
    .navbar .nav-link.nav-latest-projects:visited,
    .navbar .nav-link.nav-latest-projects:active {
        color: var(--purple-navbar-text) !important;
        font-weight: 700 !important;
    }

        .navbar .navbar-nav .nav-link:hover,
        .navbar .navbar-nav .nav-link:focus,
        .navbar .nav-link.nav-latest-projects:hover,
        .navbar .nav-link.nav-latest-projects:focus {
            color: var(--hero-brand-color) !important;
        }

    /* Keep the active/latest-project color purple */
    .navbar .nav-link.nav-latest-projects {
        color: var(--nav-latest-projects-color) !important;
    }


/* ======================================================================
   3) Critical RTL menu order fix
   Your Site.css already has:
   [dir="rtl"] .navbar-nav { flex-direction: row-reverse; }

   The previous SitePurple.css broke this by forcing desktop navbar-nav
   back to row. These rules only restore the correct behavior and do not
   redesign the navbar.
   ====================================================================== */
html[dir="rtl"] .navbar .navbar-nav {
    /*  flex-direction: row-reverse !important;*/
    direction: rtl !important;
}

html[dir="ltr"] .navbar .navbar-nav {
    flex-direction: row !important;
    direction: ltr !important;
}

/* Keep the main menu on the correct side in RTL.
   The menu ul has Bootstrap class me-auto in _Layout.cshtml.
   In RTL Bootstrap this is usually correct, but this protects it from
   accidental override by theme CSS. */
html[dir="rtl"] .navbar .navbar-collapse > .navbar-nav.me-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="ltr"] .navbar .navbar-collapse > .navbar-nav.me-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}


/* ======================================================================
   4) Navbar toggler / mobile menu icon
   ====================================================================== */
.navbar .navbar-toggler {
    border-color: var(--purple-navbar-toggler) !important;
    color: var(--purple-navbar-toggler) !important;
    box-shadow: none !important;
}

    .navbar .navbar-toggler:focus,
    .navbar .navbar-toggler:hover {
        box-shadow: none !important;
        background-color: rgba(88, 73, 139, 0.08) !important;
    }

    .navbar .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23656565' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }


/* ======================================================================
   5) Login button
   Fixes mobile issue: the ورود button was stuck to the lower edge.
   ====================================================================== */
.navbar-login-btn {
    background-color: var(--navbar-left) !important;
    border: 2px solid var(--navbar-left) !important;
    color: #ffffff !important;
    border-radius: var(--purple-radius-sm) !important;
    font-weight: 800 !important;
    text-align: center !important;
    min-width: 82px !important;
}

    .navbar-login-btn:hover,
    .navbar-login-btn:focus {
        background-color: var(--navbar-right) !important;
        border-color: var(--navbar-right) !important;
        color: #ffffff !important;
    }

/* Mobile expanded menu spacing */
@media (max-width: 767.98px) {
    .navbar .container {
        /*        padding-top: 10px !important;
        padding-bottom: 14px !important;*/
    }

    .navbar .navbar-collapse {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }

    .navbar .navbar-nav {
        width: 100% !important;
    }

        .navbar .navbar-nav .nav-item {
            width: 100% !important;
            text-align: center !important;
            margin: 4px 0 !important;
        }

        .navbar .navbar-nav .nav-link {
            justify-content: center !important;
            text-align: center !important;
            padding-top: 1px !important;
            padding-bottom: 1px !important;
        }

    .navbar-login-btn {
        display: block !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin: 18px auto 6px auto !important;
        padding: 12px 18px !important;
    }

    #language-toggle,
    #languageDropdownToggle {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Tablet navbar collapse spacing */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar .navbar-collapse {
        padding-top: 14px !important;
        padding-bottom: 12px !important;
    }

    .navbar-login-btn {
        margin-top: 12px !important;
        margin-bottom: 8px !important;
    }
}


/* =========================================================
    Navbar Outer Spacing
   Give breathing room between white navbar and purple border
   ========================================================= */


.navbar .container,
.navbar .container-fluid {
    margin-left: 12px !important;
    margin-right: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
}


/* ======================================================================
   6) Language dropdown theme
   ====================================================================== */
.flag-icon,
.dropdown-toggle {
    color: var(--purple-navbar-text) !important;
}

#languageDropdownMenu .dropdown-item {
    color: #333333 !important;
    background-color: #ffffff !important;
    text-align: center !important;
}

    #languageDropdownMenu .dropdown-item:hover,
    #languageDropdownMenu .dropdown-item.active {
        background-color: #f4f0fb !important;
        color: var(--hero-brand-color) !important;
    }


/* ======================================================================
   7) Footer purple theme (legacy - superseded by section 15 below)
   ------------------------------------------------------------------
   This ".footer" rule is dead code: section 15 further down in this same
   file re-declares ".footer { background: ... !important; }" later in
   the file, and on an equal-specificity/!important tie CSS resolves by
   source order, so section 15's rule always wins and this one never
   paints anything on screen.
   Sep 2026: even though it was already invisible, it still called
   linear-gradient(...) (with both color stops the same, so it never
   looked like a visible gradient either - but it was still, technically,
   a gradient() function). Per the explicit "حتما گرادینت را حذف کن"
   request, that leftover gradient() call is removed here too so no
   ".footer" rule anywhere in this file still references a gradient -
   replaced with a plain background-color using the same token.
   ====================================================================== */
.footer {
    background-color: var(--purple-footer-start) !important;
    border-top: 3px solid var(--navbar-right) !important;
}

    .footer *,
    .footer-logo-link,
    .footer-logo-link:hover,
    .footer-logo-link:focus,
    .footer-logo-link:visited,
    .footer-logo-link:active,
    .footer-logo-text,
    .footer-tagline,
    .footer-column ul li a {
        color: var(--purple-footer-text) !important;
    }

.footer-column {
    border-radius: var(--purple-radius-sm) !important;
}

    .footer-column:hover {
        background-color: var(--purple-footer-hover) !important;
    }

        .footer-column:hover,
        .footer-column:hover * {
            color: #ffffff !important;
        }

.social-icon:hover {
    background-color: var(--purple-footer-hover) !important;
}


/* ======================================================================
   8) Mobile footer purple theme
   Sep 2026: made glassy (translucent + blur) per user request. Only the
   surface (background/blur/shadow/border) changed - layout-critical
   properties (display:flex, position:fixed, bottom/left/width/z-index/
   height) are left exactly as they were so the fixed bottom mobile nav
   bar keeps working exactly like before.
   ====================================================================== */
@media (max-width: 1230px) {
    .footer .button-group {
        background: rgba(152, 139, 193, 0.55) !important;
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
        border-color: var(--navbar-right) !important;
        border-top: 1px solid rgba(255,255,255,0.35) !important;
    }

    html[dir="rtl"] .footer .button-group {
        background: rgba(152, 139, 193, 0.55) !important;
    }

    .footer .btn-middle {
        background: rgba(88, 73, 139, 0.7) !important;
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        backdrop-filter: blur(10px) saturate(180%);
        border: 1.5px solid rgba(255,255,255,0.45) !important;
        color: #ffffff !important;
    }

    .footer .button-group {
        display: flex;
        justify-content: space-around;
        margin: 0 !important;
        padding: 0 !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100% !important;
        padding: 5px;
        text-align: center;
        z-index: 1000;
        height: 50px;
        border-radius: 0px;
        box-shadow: 0 -4px 22px rgba(37,28,66,0.28);
    }

    /* No glass/box on the individual icon+label buttons (".btn-middle" is
       the one deliberately-circular raised button and keeps its glass
       fill above). A long user name (the account/profile item) is wider
       than the old fixed 50x50 circle and used to spill visibly outside
       a colored box - removing the box/border/radius here means the text
       just extends into the transparent bar instead of poking out of a
       visible shape. */
    .footer .btn:not(.btn-middle) {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        width: auto !important;
        min-width: 50px;
        max-width: none !important;
        padding: 2px 3px !important;
    }

    .footer .icon,
    .footer .text {
        color: var(--hero-brand-color) !important;
    }

    /* The big desktop footer (glass cards + bottom bar, further down in
       this file) is hidden below this same breakpoint so it never shows
       at the same time as this fixed mobile bar - matching the existing
       .mobile-footer / .footer .button-group show/hide breakpoint above. */
    .footer-modern-grid,
    .footer-bottom-fullwidth {
        display: none !important;
    }
}


/* ======================================================================
   9) Buttons / sections / carousel color overrides
   ====================================================================== */
.my_primary_btn {
    color: var(--navbar-right) !important;
    border-color: var(--navbar-right) !important;
}

    .my_primary_btn:hover {
        background-color: var(--navbar-right) !important;
        color: #ffffff !important;
        border-color: var(--navbar-right) !important;
    }

.section-title {
    background-color: var(--navbar-right) !important;
    color: #ffffff !important;
}

.btn {
    border-radius: var(--purple-radius-sm) !important;
}

#fullPageCarousel .carousel-control-prev-icon,
#fullPageCarousel .carousel-control-next-icon {
    background-color: var(--navbar-right) !important;
    border-radius: var(--purple-radius-sm) !important;
}


/* ======================================================================
   10) Card and product footer theme
   Keep only visual overrides.
   ====================================================================== */
.card-footer-color {
    color: var(--product-footer-purple) !important;
    font-weight: 700 !important;
}

.price_div {
    background: rgba(152, 139, 193, 0.32) !important;
    border: none !important;
    color: #2b2b2b !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    box-shadow: 0 4px 18px rgba(88, 73, 139, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.project-category-pill:hover,
.project-category-pill:focus {
    color: var(--navbar-right) !important;
    border-color: var(--navbar-right) !important;
}

.project-category-pill.active,
.project-category-nav {
    background: rgba(152, 139, 193, 0.32) !important;
    border: none !important;
    color: #2b2b2b !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    box-shadow: 0 4px 18px rgba(88, 73, 139, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

    .project-category-nav i {
        color: #2b2b2b !important;
    }

    .project-category-nav:hover:not(:disabled),
    .project-category-nav:focus:not(:disabled) {
        background: rgba(152, 139, 193, 0.55) !important;
        color: #2b2b2b !important;
    }


/* Product footer card style */
.project-card-footer.product-card-footer {
    background: #d6d3d3 !important;
    border-top: 0 !important;
}

.product-card-footer .project-product-title {
    color: var(--product-footer-purple) !important;
    font-weight: 500 !important;
    text-align: center !important;
}

.product-card-footer .product-card-details {
    color: var(--product-footer-text) !important;
}

.product-card-footer .product-card-detail-icon {
    border-color: var(--product-footer-border) !important;
    background: var(--product-footer-icon-bg) !important;
    color: var(--product-footer-purple) !important;
}

    .product-card-footer .product-card-detail-icon i,
    .product-card-footer .product-card-pain-icon i {
        color: var(--product-footer-purple) !important;
    }

.product-card-footer .product-card-detail-content strong {
    color: var(--product-footer-purple) !important;
}

.product-card-footer .product-card-pain-box {
    border-color: var(--product-footer-border) !important;
    background: var(--product-footer-purple-soft) !important;
    color: var(--product-footer-purple) !important;
}

    .product-card-footer .product-card-pain-box strong,
    .product-card-footer .product-card-pain-box span {
        color: var(--product-footer-purple) !important;
    }


/* ======================================================================
   11) Calendar purple headers
   ====================================================================== */
.calendar-nav-header,
.calendar-nav-header table {
    background: linear-gradient(135deg, var(--navbar-right) 0%, var(--navbar-left) 100%) !important;
}

.Table-Max-Size thead {
    background: linear-gradient(135deg, var(--navbar-right) 0%, var(--navbar-left) 100%) !important;
}

.today {
    box-shadow: inset 0 0 0 2px var(--navbar-right) !important;
}


@media (max-width: 767.98px) {
    .carousel-container,
    #fullPageCarousel,
    #fullPageCarousel .carousel-inner,
    #fullPageCarousel .carousel-item,
    #fullPageCarousel .carousel-item img {
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .hero-section {
        border-radius: 30px !important;
    }

    .carousel-container {
        aspect-ratio: auto !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }

    #fullPageCarousel,
    #fullPageCarousel .carousel-inner,
    #fullPageCarousel .carousel-item {
        height: 100% !important;
    }

        #fullPageCarousel .carousel-item img {
            height: 100% !important;
            min-height: 0 !important;
            object-fit: cover !important;
            object-position: center top !important;
            display: block !important;
        }
}

.item_detail.top_IMG_Fullpage .item_detail_overlay_text .item_detail_topimg_line2 {
    background-color: var(--navbar-left);
}

/* Sep 2026 follow-up - Story/Details.cshtml "info boxes" redesign:
   these were a flat solid --navbar-left rectangle with no depth. The user
   asked for a "glassy" (شیشه‌ای) look with a shadow. Reusing the same
   translucent-purple-glass recipe already proven in section 18.5
   (rgba(88,73,139,*) background + #f2f0fa near-white text) instead of
   inventing a new one-off effect, per the shared-class-first preference -
   this rule is unscoped (applies in both light and dark mode, same as the
   solid color it replaces), so one edit fixes both themes at once. The
   border-radius for this element already exists in Site.css (10px) and is
   left as-is; only the fill/border/shadow change here. !important is used
   because this competes at equal selector specificity with a Site.css rule
   of the same 4-class selector and is meant to win regardless of file
   load-order changes, not just today's source order. */
.item_detail.top_IMG_Fullpage .item_detail_overlay_text .item_detail_topimg_line3 {
    background: rgba(88, 73, 139, 0.55) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
    color: #f2f0fa !important;
}

.partners-section {
    background: linear-gradient(135deg, var(--navbar-left) 0%, var(--navbar-right) 100%) !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    border-radius: 20px !important;
    padding-right: 50px !important;
    padding-left: 50px !important;
}

.partners-logo-track {
    /*background: linear-gradient(135deg, var(--navbar-left) 0%, var(--navbar-right) 100%) !important;*/

    background-color: transparent;
}

.partner-logo-item {
    background-color: transparent !important;
}

.partner-logo-img {
    background-color: transparent !important;
    background: #ffffff00 !important;
    padding: 0px !important;
    margin: 0px !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: rgba(152, 139, 193, 0.32) !important;
    border: none !important;
    color: #2b2b2b !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    box-shadow: 0 4px 18px rgba(88, 73, 139, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}






/* ======================================================================
   Dr Hoda SEO Article Template
   Purpose:
   Reusable purple medical article design for Description HTML content.
   Usage:
   Store only article HTML in SQL Description.
   Do NOT store <style> inside each article anymore.
   Load order: Site.css -> SitePurple.css
   ====================================================================== */
:root {
    --article-purple-main: #58498b;
    --article-purple-light: #988bc1;
    --article-purple-soft: #f7f3ff;
    --article-purple-border: #e6ddf5;
    --article-gold: #d4af37;
    --article-text: #2b2b2b;
    --article-muted: #6b7280;
    --article-white: #ffffff;
    --article-radius-sm: 10px;
    --article-radius-md: 14px;
    --article-radius-lg: 18px;
    --article-shadow: 0 8px 22px rgba(88, 73, 139, 0.16);
}

/* Main article wrapper */
.drhoda-seo-article {
    direction: rtl;
    text-align: right;
    font-family: "Shabnam-FD",Shabnam, Tahoma, Arial, sans-serif;
    line-height: 2;
    color: var(--article-text);
    max-width: 100%;
    background: var(--article-white);
}

    /* Main title */
    .drhoda-seo-article h1 {
        background: linear-gradient(135deg, var(--article-purple-main), var(--article-purple-light));
        color: var(--article-white);
        padding: 18px 22px;
        border-radius: var(--article-radius-lg);
        font-size: clamp(23px, 2.4vw, 30px);
        font-weight: 900;
        line-height: 1.7;
        margin: 20px 0;
        box-shadow: var(--article-shadow);
    }

    /* Section titles */
    .drhoda-seo-article h2 {
        background: linear-gradient(135deg, var(--article-purple-main), var(--article-purple-light));
        color: var(--article-white);
        padding: 13px 18px;
        border-radius: var(--article-radius-md);
        font-size: clamp(20px, 2vw, 24px);
        font-weight: 800;
        line-height: 1.7;
        margin: 30px 0 16px;
        box-shadow: 0 5px 16px rgba(88, 73, 139, 0.13);
    }

    /* Sub titles */
    .drhoda-seo-article h3 {
        background: var(--article-purple-soft);
        color: var(--article-purple-main);
        padding: 11px 15px;
        border-right: 5px solid var(--article-purple-main);
        border-radius: var(--article-radius-sm);
        font-size: clamp(18px, 1.7vw, 21px);
        font-weight: 800;
        line-height: 1.8;
        margin: 24px 0 12px;
    }

    /* Paragraphs and text */
    .drhoda-seo-article p {
        font-size: 17px;
        line-height: 2.05;
        margin-bottom: 14px;
        color: var(--article-text);
    }

    .drhoda-seo-article strong {
        color: var(--article-purple-main);
        font-weight: 900;
    }

    /* Lists */
    .drhoda-seo-article ul,
    .drhoda-seo-article ol {
        padding-right: 24px;
        padding-left: 0;
        margin-bottom: 18px;
    }

    .drhoda-seo-article li {
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 2;
    }

    /* Links */
    .drhoda-seo-article a {
        color: var(--article-purple-main);
        font-weight: 800;
        text-decoration: none;
    }

        .drhoda-seo-article a:hover,
        .drhoda-seo-article a:focus {
            color: var(--article-gold);
            text-decoration: none;
        }

    /* Reusable boxes */
    .drhoda-seo-article .toc-box,
    .drhoda-seo-article .doctor-note,
    .drhoda-seo-article .note-box,
    .drhoda-seo-article .warning-box,
    .drhoda-seo-article .summary-box,
    .drhoda-seo-article .snippet-box {
        background: var(--article-purple-soft);
        border: 1px solid var(--article-purple-border);
        border-radius: var(--article-radius-lg);
        padding: 18px;
        margin: 22px 0;
    }

    /* Doctor review box */
    .drhoda-seo-article .doctor-note {
        border-right: 5px solid var(--article-gold);
    }

    /* Warning box */
    .drhoda-seo-article .warning-box {
        background: #fff8e8;
        border-color: #f1d58a;
        border-right: 5px solid var(--article-gold);
    }

    /* Summary box */
    .drhoda-seo-article .summary-box {
        background: linear-gradient(135deg, var(--article-purple-main), var(--article-purple-light));
        color: var(--article-white);
    }

        .drhoda-seo-article .summary-box *,
        .drhoda-seo-article .summary-box p,
        .drhoda-seo-article .summary-box strong {
            color: var(--article-white) !important;
        }

    /* CTA box */
    .drhoda-seo-article .cta-box {
        background: linear-gradient(135deg, var(--article-purple-main), var(--article-purple-light));
        color: var(--article-white);
        text-align: center;
        border-radius: var(--article-radius-lg);
        padding: 22px 18px;
        margin: 28px 0;
        box-shadow: var(--article-shadow);
    }

        .drhoda-seo-article .cta-box h2,
        .drhoda-seo-article .cta-box h3 {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            color: var(--article-white) !important;
            margin-top: 0;
        }

        .drhoda-seo-article .cta-box p,
        .drhoda-seo-article .cta-box strong,
        .drhoda-seo-article .cta-box a {
            color: var(--article-white) !important;
        }

    /* Tables */
    .drhoda-seo-article .article-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 20px 0;
    }

    .drhoda-seo-article table {
        width: 100%;
        min-width: 620px;
        border-collapse: collapse;
        background: var(--article-white);
        border-radius: var(--article-radius-md);
        overflow: hidden;
    }

    .drhoda-seo-article th {
        background: var(--article-purple-main);
        color: var(--article-white);
        padding: 12px;
        border: 1px solid var(--article-purple-border);
        text-align: center;
        font-weight: 900;
    }

    .drhoda-seo-article td {
        padding: 12px;
        border: 1px solid var(--article-purple-border);
        text-align: center;
        vertical-align: middle;
        color: var(--article-text);
    }

    .drhoda-seo-article tr:nth-child(even) {
        background: var(--article-purple-soft);
    }

    /* FAQ */
    .drhoda-seo-article .faq-item {
        background: #ffffff;
        border: 1px solid var(--article-purple-border);
        border-radius: var(--article-radius-md);
        padding: 16px;
        margin-bottom: 14px;
        box-shadow: 0 4px 12px rgba(88, 73, 139, 0.06);
    }

        .drhoda-seo-article .faq-item h3 {
            margin-top: 0;
        }

    /* Accessibility */
    .drhoda-seo-article :target {
        scroll-margin-top: 120px;
    }

/* Mobile */
@media (max-width: 768px) {
    .drhoda-seo-article {
        line-height: 1.9;
    }

        .drhoda-seo-article h1 {
            font-size: 23px;
            padding: 15px 16px;
        }

        .drhoda-seo-article h2 {
            font-size: 20px;
            padding: 12px 14px;
        }

        .drhoda-seo-article h3 {
            font-size: 18px;
            padding: 10px 12px;
        }

        .drhoda-seo-article p,
        .drhoda-seo-article li {
            font-size: 15px;
        }

        .drhoda-seo-article .toc-box,
        .drhoda-seo-article .doctor-note,
        .drhoda-seo-article .note-box,
        .drhoda-seo-article .warning-box,
        .drhoda-seo-article .summary-box,
        .drhoda-seo-article .snippet-box,
        .drhoda-seo-article .cta-box {
            padding: 14px;
            border-radius: 14px;
        }
}


/* ======================================================================
   12) Fixed / Glass Navbar + Centered Desktop Menu + Search Toggle
   Requested Sep 2026:
   - Navbar becomes fixed to the very top of the viewport (not just the
     old sticky-top, which still scrolls away part of its own space).
   - While the page is at the very top, the navbar stays fully solid
     (opaque) - matching the reference site (Epione).
   - After the user scrolls down, the purple/white navbar background
     turns translucent + blurred (glass), letting the page underneath
     show through.
   - On desktop the menu is centered inside the bar; the logo stays on
     the right, the login button stays on the left.
   - A small search icon (light purple box) sits beside the login button
     and opens a text input with a smooth slide/fade animation. The
     actual search behaviour will be wired up later - this is UI only.

   Requires markup added in _Layout.cshtml:
   - <nav id="mainNavbar" class="navbar ... navbar-fixed-glass">
   - a small script that toggles ".navbar--scrolled" on scroll, sets the
     --drhoda-nav-height custom property, and opens/closes the search box.

   This section does NOT set navbar-nav flex-direction or item order -
   Site.css still owns that. Only position/background/opacity are added.
   ====================================================================== */

.navbar.navbar-fixed-glass {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
    background: linear-gradient(135deg, var(--navbar-left) 0%, var(--navbar-right) 100%) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.10) !important;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

    .navbar.navbar-fixed-glass .container {
        transition: background-color 0.4s ease;
    }

    /* ---- Scrolled / glass state (class added by JS once scrollY > ~30px) ----
   Made properly transparent/see-through again per Sep 2026 feedback - the
   readability problem is solved by switching the text to solid black
   (with a soft light halo) instead of by hiding the glass behind it. */
    .navbar.navbar-fixed-glass.navbar--scrolled {
        background: linear-gradient(135deg, rgba(152,139,193,0.28) 0%, rgba(88,73,139,0.32) 100%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
        box-shadow: 0 6px 24px rgba(37,28,66,0.18) !important;
    }

        .navbar.navbar-fixed-glass.navbar--scrolled .container {
            background-color: rgba(255,255,255,0.32) !important;
            -webkit-backdrop-filter: blur(12px) saturate(180%);
            backdrop-filter: blur(12px) saturate(180%);
        }

        /* Text turns solid black while scrolled so it stays readable over the
       now much more transparent/blurred glass bar, whatever is behind it. */
        .navbar.navbar-fixed-glass.navbar--scrolled .navbar-nav .nav-link,
        .navbar.navbar-fixed-glass.navbar--scrolled .navbar-brand,
        .navbar.navbar-fixed-glass.navbar--scrolled .navbar-brand span {
            color: #000000 !important;
            text-shadow: 0 1px 3px rgba(255,255,255,0.65), 0 0 1px rgba(255,255,255,0.5) !important;
        }

        .navbar.navbar-fixed-glass.navbar--scrolled .navbar-search-toggle {
            background: rgba(255,255,255,0.55) !important;
            border-color: rgba(88,73,139,0.4) !important;
            color: #000000 !important;
        }

/* Push page content below the now-fixed navbar on every page. The home
   page hero overrides this back to 0 (see Index.cshtml) so its carousel
   can sit flush at the very top, underneath the glass navbar. */
.body-content {
    padding-top: calc(var(--drhoda-nav-height, 92px) + 14px);
}

@media (min-width: 1200px) {
    .body-content {
        padding-top: calc(var(--drhoda-nav-height, 92px) + 24px);
    }
}

/* ---- Desktop: center the menu, keep logo right / login+search left ---- */
@media (min-width: 1200px) {
    .navbar .container {
        position: relative;
    }

    /* Take the menu out of the normal flex flow and center it on the bar.
       We only add position/transform here - flex-direction and the
       reading order of the <li> items are left untouched. */
    .navbar .navbar-nav.me-auto {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 2;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.25s ease;
    }

    /* While the search box is open (".navbar-search-open" is toggled on
       #mainNavbar by the script below), hide the centered menu instead of
       letting the expanding search input land on top of its text. */
    .navbar.navbar-search-open .navbar-nav.me-auto {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* The search+login group must stay pinned to the LEFT edge, even in
       RTL. Without the menu ul sitting in the flow between it and the
       brand any more, the two nested-flex "auto margins" this file relies
       on (from Site.css) collapse the login/search group right next to
       the logo - so it is pulled out of flow too and pinned explicitly. */
    .navbar .navbar-collapse > ul.navbar-nav:not(.me-auto) {
        position: absolute !important;
        top: 50% !important;
        left: 50px !important;
        right: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        gap: 14px;
        z-index: 3;
    }

    /* Make the search icon and the login button the same height so they
       line up as a matched pair instead of the search icon looking small
       next to it. */
    .navbar .navbar-login-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
    }

    .navbar-search-toggle {
        width: 42px;
        height: 42px;
    }

    .navbar-search-input {
        height: 42px;
    }
}

/* ---- Search icon + expanding search box, next to the login button ---- */
.navbar-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-search-toggle {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--purple-radius-sm);
    border: 1.5px solid var(--navbar-left-light);
    background: var(--navbar-left-light);
    color: var(--navbar-right);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .navbar-search-toggle:hover,
    .navbar-search-toggle.active {
        background: var(--navbar-left);
        border-color: var(--navbar-left);
        color: #ffffff;
    }

.navbar-search-input {
    width: 0;
    min-width: 0;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 1.5px solid transparent;
    border-radius: 20px;
    background: #f4f0fb;
    color: #333333;
    font-size: 14px;
    opacity: 0;
    overflow: hidden;
    transition: width 0.45s cubic-bezier(.4,0,.2,1), opacity 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
}

.navbar-search-wrap.open .navbar-search-input {
    width: 190px;
    opacity: 1;
    padding: 0 14px;
    border-color: var(--navbar-left);
}

@media (max-width: 1199.98px) {
    .navbar-search-wrap {
        width: 100%;
        justify-content: center;
        margin: 6px 0;
    }

        .navbar-search-wrap.open .navbar-search-input {
            width: min(240px, 70%);
        }
}


/* ======================================================================
   13) Full-height (100vh) hero carousel + glass hero buttons overlaid
   on the carousel + matching glass carousel controls
   Requested Sep 2026:
   - The carousel should fill the whole 100vh of the page.
   - The 3 buttons that used to sit below the carousel now live inside
     it (see Index.cshtml) and are already positioned by the existing
     ".carousel-container .hero-buttons" rule in Site.css. Here they are
     only restyled to be glassy, using the same purple + hover transition
     as the login button, instead of the old solid fill.
   - The carousel's prev/next arrow buttons get the same glass treatment.
   ====================================================================== */
.carousel-container {
    height: 100vh !important;
    min-height: 100vh !important;
    aspect-ratio: unset !important;
}

#fullPageCarousel .carousel-item img {
    min-height: 100vh !important;
}

.carousel-container .hero-buttons .btn-hero-glass,
#fullPageCarousel .carousel-control-prev-icon,
#fullPageCarousel .carousel-control-next-icon {
    background: rgba(152, 139, 193, 0.32) !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: 0 4px 18px rgba(88,73,139,0.25), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-hero-glass {
    background: rgba(152, 139, 193, 0.32) !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: 0 4px 18px rgba(88,73,139,0.25), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.carousel-container .hero-buttons .btn-hero-glass:hover,
.carousel-container .hero-buttons .btn-hero-glass:focus,
#fullPageCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#fullPageCarousel .carousel-control-next:hover .carousel-control-next-icon {
    background: rgba(88, 73, 139, 0.62) !important;
    border-color: rgba(255,255,255,0.65) !important;
    color: #ffffff !important;
}


/* ======================================================================
   14) Carousel headline - readable straight on the photo (Epione-style)
   Requested Sep 2026:
   - Drop the dark rounded "box" that used to sit behind the title
     (background/radius/padding on .carousel_Title) - it looked cheap.
   - No shadow/box under the text at all; legibility now comes from a
     bold weight + a soft drop-shadow on the text itself.
   - Add one flat, uniform gray layer over the slide photo itself so the
     text reads well no matter which image is showing.
   ====================================================================== */

/* Uniform gray layer on top of every slide photo, under the text and
   above the <img>. carousel-item already is position:relative (Site.css),
   so this ::after just needs to sit above it and below the text. */
#fullPageCarousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(35, 35, 40, 0.42);
    pointer-events: none;
    z-index: 1;
}

#fullPageCarousel .Carousel-Relative-Absolute {
    z-index: 2 !important;
}

/* Text sits directly on the (now darkened) photo - no box, no shadow
   behind it, just a drop-shadow on the letters themselves for contrast. */
#fullPageCarousel .slide-content .carousel_Title {
    background-color: transparent !important;
    padding-inline-start: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4) !important;
}

#fullPageCarousel .slide-content .carousel_Des {
    text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.35) !important;
}


/* ======================================================================
   15) Footer redesign (Sep 2026) - glass cards on one seamless background
   What was wrong originally (first Sep 2026 pass):
   - .footer had a gradient, and .footer-bottom-fullwidth used
     "background: inherit" - which recomputes that same gradient over its
     OWN (much shorter) box instead of continuing the parent's, so the
     page showed two independent light-to-dark bands stacked on top of
     each other (the "2 gradient" complaint).
   - The old .footer-left/.footer-right/.footer-column layout and the
     bootstrap row/col/offset hacks in .footer-bottom-fullwidth were never
     really designed together, hence the "not beautiful" result.
   First fix: one gradient on .footer only, every section below it left
   transparent, and a fresh, consistent "glass card" language (frosted
   panels, soft borders, gold-accented icons) used for every column,
   matching the navbar/buttons/sms-tab glass look already used elsewhere
   on this site.
   The desktop version below is hidden under 1230px (see section 8) so it
   never shows at the same time as the fixed mobile bottom bar.

   ---- Sep 2026 update #1 (flat lilac + colorless-glass) ----
   1) Gradient removed - .footer became a single flat lilac ("یاسی")
      color, var(--navbar-left). Since it was no longer a gradient, the
      old RTL-only mirrored-gradient override was deleted too (a flat
      color has no direction).
   2) All footer text (tagline, description, card titles, link/contact/
      badge text, copyright line) switched from white to black so it
      reads clearly on the now much lighter flat background.
   3) .footer-glass-card keeps the frosted-glass blur, its border and its
      drop shadow exactly as before ("border و سایه‌ها" kept per request)
      but the white background TINT is removed (background: transparent)
      so the card is glass without color, not glass-plus-white-wash.

   ---- Sep 2026 update #2 (explicit hex requested) ----
   User asked again, explicitly: "حتما اول گرادینت بک‌گراند فوتر را حذف
   کن، دوم رنگ آن را تبدیل کن به #dbc0f0" - confirming no gradient()
   function remains anywhere in the .footer rule below, and pinning the
   flat color to the literal hex #dbc0f0 instead of the var(--navbar-left)
   token used in update #1. See the ".footer" rule immediately below for
   the actual change.
   ====================================================================== */

/* Sep 2026 request: "حتما اول گرادینت بک‌گراند فوتر را حذف کن، دوم رنگ آن
   را تبدیل کن به #dbc0f0" - gradient removed, flat color set to #dbc0f0.
   THIS is the one rule that actually paints the desktop footer background
   (it wins over the older plain, non-!important ".footer { background:
   linear-gradient(...) }" rule still sitting in Site.css around line 210,
   because this file loads after Site.css and this rule carries
   !important). No gradient() function is used anywhere in this rule any
   more - solid color only. */
.footer {
    background: #c2b7ca !important;
    border-top: none !important;
    padding: 56px 0 0 0 !important;
    overflow: hidden;
}

/* Every section inside the footer now shares the single flat color above -
   nothing below this point is allowed to declare its own background. */
.footer-bottom-fullwidth {
    background: transparent !important;
    margin-top: 40px !important;
    padding: 22px 0 26px 0 !important;
}

.footer-modern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: stretch;
}

@media (max-width: 1400px) {
    .footer-modern-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.footer-glass-card {
    /* Colorless glass: blur + border + shadow kept, no background tint. */
    background: #c3bcdd !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 20px;
    padding: 26px 22px;
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 10px 30px rgba(30, 20, 55, 0.16);
    transition: transform 0.3s ease;
}

    .footer-glass-card:hover {
        transform: translateY(-4px);
    }

.footer-brand-card {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-brand-desc {
    color: rgba(0, 0, 0, 0.8);
    font-size: 0.85em;
    line-height: 1.9;
    margin: 6px 0 0 0;
}

.footer-card-title {
    color: #000000;
    font-size: 1.02em;
    font-weight: 800;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    position: relative;
}

    .footer-card-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 42px;
        height: 3px;
        border-radius: 3px;
        background: var(--purple-footer-hover, var(--article-gold, #d4af37));
    }

.footer-link-list,
.footer-contact-list,
.footer-badge-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .footer-link-list li a {
        display: flex;
        align-items: center;
        gap: 8px;
        color: rgba(0, 0, 0, 0.85);
        text-decoration: none;
        font-size: 0.92em;
        transition: color 0.25s ease, gap 0.25s ease, transform 0.25s ease;
    }

        .footer-link-list li a i {
            font-size: 0.75em;
            color: var(--purple-footer-hover, var(--article-gold, #d4af37));
            transition: transform 0.25s ease;
        }

        .footer-link-list li a:hover {
            color: #000000;
            transform: translateX(-4px);
        }

            .footer-link-list li a:hover i {
                transform: translateX(-3px);
            }

    .footer-contact-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

        .footer-contact-list li a {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(0, 0, 0, 0.88);
            text-decoration: none;
            font-size: 0.92em;
            transition: color 0.25s ease;
        }

            .footer-contact-list li a:hover {
                color: var(--purple-footer-hover, var(--article-gold, #d4af37));
            }

        .footer-contact-list li > span:not(.footer-contact-icon) {
            color: rgba(0, 0, 0, 0.88);
            font-size: 0.92em;
            line-height: 1.8;
            padding-top: 5px;
        }

.footer-contact-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #000000;
    font-size: 0.85em;
}

.footer-badge-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 10px 12px;
    transition: background 0.25s ease;
}

    .footer-badge-list li:hover {
        background: rgba(255, 255, 255, 0.16);
    }

    .footer-badge-list li i {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--purple-footer-hover, var(--article-gold, #d4af37));
        font-size: 1em;
    }

    .footer-badge-list li span {
        color: rgba(0, 0, 0, 0.88);
        font-size: 0.86em;
        line-height: 1.85;
    }

.footer-bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.footer-social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Social icons - glass circles instead of the old flat solid fill */
.social-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #000000 !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
    margin-right: 0 !important;
}

    .social-icon:hover {
        background: var(--purple-footer-hover, var(--article-gold, #d4af37)) !important;
        border-color: var(--purple-footer-hover, var(--article-gold, #d4af37));
        color: #ffffff !important;
        transform: translateY(-3px);
    }

.footer-divider {
    width: 100%;
    max-width: 480px;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    margin: 4px auto;
    opacity: 1;
}

.footer-bottom-inner p {
    color: rgba(0, 0, 0, 0.8);
    font-size: 0.85em;
    margin: 0;
}

@media (max-width: 991.98px) {
    .footer-modern-grid {
        grid-template-columns: 1fr;
    }

    .footer-glass-card {
        text-align: center;
    }

    .footer-link-list li a,
    .footer-contact-list li,
    .footer-contact-list li a,
    .footer-badge-list li {
        justify-content: center;
    }
}


/* ======================================================================
   16) Glass conversion of remaining solid-purple UI elements (Sep 2026)
   ------------------------------------------------------------------
   Request: every solid-purple badge/button/tab still left on the site
   ("وقت دهی" booking button, the circular package badges built from
   .icon-circle, the .section-title labels used for headings such as
   "پکیج خدمات" / "خدمات منتخب و جدید" / "مجموعه خدمات") should look
   EXACTLY like ".btn-hero-glass" (section 13 above, the 3 hero buttons
   on the carousel) - same translucent/blurred matte glass background,
   but with no border and dark text instead of white (per Sep 2026
   follow-up feedback: these sit on plain light page backgrounds, not on
   a photo, so white text on the very light hero-glass tint was
   unreadable - dark text on that same light glass reads clearly).
   .nav-tabs active tab, .price_div and the
   .project-category-pill/.project-category-nav "فروشگاه"/"تجهیزات"
   toggle were converted in place above (sections 9-10) using this same
   recipe; the three selectors below only exist in Site.css with a
   plain/opaque purple background, so they are overridden here instead
   of touching Site.css.
   ====================================================================== */

/* "وقت دهی" - booking button under each package/price card */
.btn_goto_arrangement {
    background: rgba(152, 139, 193, 0.32) !important;
    border: none !important;
    color: #2b2b2b !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    box-shadow: 0 4px 18px rgba(88, 73, 139, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transition: background 0.3s ease, color 0.3s ease;
}

    .btn_goto_arrangement:hover {
        background: rgba(152, 139, 193, 0.55) !important;
        color: #2b2b2b !important;
        box-shadow: 0 6px 20px rgba(88, 73, 139, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }

/* Circular package/feature badges (e.g. "پکیج‌های زیبایی"، "پریمیوم"، "پایه") */
.icon-circle {
    background: rgba(152, 139, 193, 0.32) !important;
    border: none !important;
    color: #2b2b2b !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    box-shadow: 0 4px 18px rgba(88, 73, 139, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Section-title labels/buttons (e.g. "پکیج خدمات", "خدمات منتخب و جدید",
   "مجموعه خدمات") - same shared class, different translated text per use */
.section-title {
    background: rgba(152, 139, 193, 0.32) !important;
    border: none !important;
    border-bottom: none !important;
    color: #2b2b2b !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
    backdrop-filter: blur(10px) saturate(160%) !important;
    box-shadow: 0 4px 18px rgba(88, 73, 139, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* ======================================================================
   17) Site-wide body background: white -> cream (Sep 2026)
   ------------------------------------------------------------------
   Site.css sets "body { background-color: var(--light-gray) !important; }"
   (line ~81) - same specificity + !important, so this only wins because
   SitePurple.css loads after Site.css in the page's <link> order.
   ====================================================================== */
body {
    background-color: #05020254 !important;
}


/* ======================================================================
   18) Accessibility widget - Dark Mode (Sep 2026, rebuilt)
   ------------------------------------------------------------------
   Turned on/off by the "_AccessibilityWidget" partial, which adds/removes
   the "a11y-dark-mode" class on <html> and remembers the choice in
   localStorage so it survives normal page navigation.

   Sep 2026 fix - the first version of this section used a single
   "filter: invert(1) hue-rotate(180deg)" on <html> to darken everything
   at once, including content this file never sees (About_Dr, SEO
   articles, ... - stored as raw HTML/CSS in the SQL Translations table).
   That broke the page in a different way: per the CSS spec, a "filter"
   on an ancestor creates a new containing block for every
   "position: fixed" descendant anywhere under it - so with dark mode on,
   the navbar, the footer's mobile bar, ".reservation-tab"/".sms-tab" AND
   this widget's own fab/panel/ADHD masks all lost their normal
   viewport-relative fixed positioning (this is also exactly why the ADHD
   mouse-spotlight stopped tracking the mouse whenever dark mode was also
   turned on - same root cause, one shared ancestor filter). There is no
   version of a shared filter that keeps that effect and also leaves
   position:fixed working normally, so it had to go entirely - not just
   be tuned.

   This version instead hand-darkens each known/visible component below:
   the page background, generic Bootstrap surfaces (cards, forms, tables,
   dropdowns, modals) that appear on most pages, the navbar, the desktop
   and mobile footer, the shared "frosted glass" components already used
   elsewhere on the site (.price_div / .project-category-nav /
   .btn_goto_arrangement / .icon-circle / .section-title), and the SEO
   article template (.drhoda-seo-article, via its own CSS variables).

   Trade-off, on purpose: this can only recolor what this stylesheet can
   see. It does NOT reach into raw HTML/CSS stored per-row in the SQL
   Translations table (e.g. a future About_Dr edit that hardcodes its own
   inline colors) - any such spot would need its own small rule added
   here once it's pointed out, the same way the rest of this file has
   grown section by section. Nothing below touches "filter"/"transform"
   on any ancestor of a fixed element, so this does not reintroduce the
   positioning bug above.

   The widget's own panel UI (inside "#drhodaA11yRoot") is deliberately
   left alone here - it keeps its normal light appearance no matter which
   profile is active, the same way most real accessibility-tool panels do.
   ====================================================================== */

/* ---- 18.0 Bootstrap's own semantic color variables --------------------
   Sep 2026: found via a live screenshot of History/Today - table text was
   still black on a dark row, even though 18.1 below already sets
   "body { color: ... }". Root cause: Bootstrap 5 components like ".table"
   don't just inherit "color" from body - they explicitly redeclare their
   own local variable from a Bootstrap ROOT-level variable, e.g.
   ".table { --bs-table-color: var(--bs-body-color); color:
   var(--bs-table-color); border-color: var(--bs-table-border-color); }"
   (where "--bs-table-border-color" itself defaults to "--bs-border-color").
   Overriding the ELEMENT's "color" (what 18.1 does for body) never
   reaches that chain - only overriding the Bootstrap VARIABLE itself
   does, because the ".table" rule re-reads the variable, not the
   computed color. This is a big, page-agnostic fix: it's the same reason
   ANY plain Bootstrap table/badge/border on ANY admin page could still
   show default-black text or a stark light-gray border in dark mode
   without ever being hand-tokenized - so check here first before writing
   a page-specific fix for "text still looks black" or "border still
   looks like light mode's color".
   Border WIDTH is separate: SitePurple.css's own base purple skin (see
   "1) Purple theme tokens" near the top of this file) sets
   "--bs-border-width: 1.5px !important" globally, on purpose, for BOTH
   themes - that line is intentionally left untouched. In dark mode that
   extra 0.5px reads as noticeably heavier because the border is now a
   highly visible light color on a dark row instead of a barely-visible
   light-gray-on-white hairline, so it's thinned back down to 1px here,
   scoped to dark mode only ("html.a11y-dark-mode" beats a bare ":root"
   declaration on specificity, so this line doesn't need "!important" to
   win, but it's kept for parity/clarity with the line it overrides).
   Sep 2026 addition: "--bs-body-bg" was found the same way, this time on
   the Reservation flow's "Confirm_TimeSlice.cshtml" - several of its own
   surfaces (".confirm-container", ".confirm-time-item", ".confirm-input")
   deliberately read "var(--bs-body-bg, #fff)" instead of a hardcoded
   white, expecting this Bootstrap variable to already be theme-aware -
   but nothing in this file ever gave it a dark value, so it silently fell
   back to its "#fff" fallback (or Bootstrap's own light default) in dark
   mode, same "Bootstrap variable never overridden" gap as the others
   above. Fixed here, once, so ANY current or future page that reads
   "var(--bs-body-bg, ...)" gets a real dark surface instead of white. */
html.a11y-dark-mode {
    --bs-border-width: 1px;
    --bs-body-bg: #15131c;
    --bs-body-color: #e7e5ee;
    --bs-body-color-rgb: 231, 229, 238;
    --bs-emphasis-color: #f1eef8;
    --bs-secondary-color: rgba(231, 229, 238, 0.75);
    --bs-tertiary-color: rgba(231, 229, 238, 0.5);
    --bs-heading-color: #f1eef8;
    --bs-border-color: rgba(255, 255, 255, 0.14);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
}

    /* ---- 18.1 Page background -------------------------------------------- */
    html.a11y-dark-mode body {
        background-color: #15131c !important;
        color: #e7e5ee;
    }

    /* ---- 18.2 Generic Bootstrap-ish surfaces (cards/forms/tables/menus) --- */
    html.a11y-dark-mode .card,
    html.a11y-dark-mode .list-group-item,
    html.a11y-dark-mode .modal-content,
    html.a11y-dark-mode .dropdown-menu {
        background-color: #201c2b !important;
        color: #e7e5ee !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    html.a11y-dark-mode .form-control,
    html.a11y-dark-mode .form-select,
    html.a11y-dark-mode textarea,
    html.a11y-dark-mode select,
    html.a11y-dark-mode input:not([type="checkbox"]):not([type="radio"]) {
        background-color: #201c2b !important;
        color: #e7e5ee !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
    }

        html.a11y-dark-mode .form-control::placeholder {
            color: rgba(231, 229, 238, 0.55) !important;
        }

    /* Sep 2026: "دارک مود ... فونت‌های تیره روی زمینه‌ی تیره" - Site.css's
       own ".form-group label { color: #003366; ... }" (a global, unscoped
       rule - matches ANY <label> inside ANY ".form-group" regardless of
       the label's own class, e.g. Bootstrap's ".control-label"/".form-
       label") had no dark-mode override anywhere. That's a fixed dark
       navy blue with no theme awareness, so every form label sitewide
       stayed dark-navy-on-dark-page in dark mode - reported on
       Business_Member/Edit.cshtml and Business_Member_Working_Hours/
       Edit.cshtml, but since the source rule is completely generic this
       affects every ".form-group" on the site, not just those two pages -
       fixed once, here, rather than adding a page-local override to each. */
    html.a11y-dark-mode .form-group label {
        color: #c3b9f2 !important;
    }

    /* Sep 2026: the generic rule above also matches "<input type=submit>"/
       "<input type=button>" (only checkbox/radio are excluded), flattening
       this project's own outline-then-fill button system - ".btn-custom-
       save"/".btn-custom-success"/".btn-custom-info" (Site.css, "Custom
       button styles according to project rules", used as an <input> on ~30
       views) - into a plain dark box, wiping out their brand border/text
       color and hover-fill effect (reported on Business_Member/Edit.cshtml
       as solid near-black pills). Restoring their own look needs to beat
       the rule above, which is a bigger cascade fight than it looks: with
       both rules "!important", specificity decides, and ".input:not([type=
       …]):not([type=…])" (two attribute selectors from the :not()s) is
       actually MORE specific than a plain "html.a11y-dark-mode .btn-custom-
       save" would be - so the selectors below repeat the same "input[type=
       …]" shape to at least tie on specificity, and being declared after
       the rule above in this same file wins that tie. Scoped to exactly
       these 3 classes, not a change to the generic rule itself, so the
       ~50 other plain "<input type=submit>" buttons elsewhere in this app
       (no custom class, relying on this generic rule for a non-broken dark
       appearance) are unaffected. */
    html.a11y-dark-mode input[type="submit"].btn-custom-save,
    html.a11y-dark-mode input[type="button"].btn-custom-success,
    html.a11y-dark-mode input[type="button"].btn-custom-info {
        background-color: transparent !important;
    }

    html.a11y-dark-mode input[type="submit"].btn-custom-save {
        color: #3b93ff !important;
        border-color: #3b93ff !important;
    }

    html.a11y-dark-mode input[type="button"].btn-custom-success {
        color: #34c759 !important;
        border-color: #34c759 !important;
    }

    html.a11y-dark-mode input[type="button"].btn-custom-info {
        color: #22c3dd !important;
        border-color: #22c3dd !important;
    }

    html.a11y-dark-mode input[type="submit"].btn-custom-save:hover {
        background-color: #3b93ff !important;
        color: #fff !important;
    }

    html.a11y-dark-mode input[type="button"].btn-custom-success:hover {
        background-color: #34c759 !important;
        color: #fff !important;
    }

    html.a11y-dark-mode input[type="button"].btn-custom-info:hover {
        background-color: #22c3dd !important;
        color: #fff !important;
    }

    /* Sep 2026: the generic input rule above (background-color/color on the
   <input> itself) does NOT reach an "input[type=file]"'s native "Choose
   File"/"انتخاب فایل" button - that button is a separate, browser-drawn
   sub-part of the control (a UA shadow-root piece), only reachable via
   its own "::file-selector-button" pseudo-element (the standard name,
   supported by current Chrome/Edge/Firefox/Safari) plus the older
   Chromium-only alias "::-webkit-file-upload-button" for safety on any
   older embedded browser view this site might run in. Without this, the
   button stayed a plain white OS-styled button on every page with a file
   upload field, even though the rest of that same input already went
   dark from the generic rule above - reported by the user as "still
   white in every page so far", so fixed here ONCE, site-wide, rather
   than per page. */
    html.a11y-dark-mode input[type="file"]::file-selector-button,
    html.a11y-dark-mode input[type="file"]::-webkit-file-upload-button {
        background-color: #2a2440 !important;
        color: #e7e5ee !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 4px !important;
    }

        html.a11y-dark-mode input[type="file"]::file-selector-button:hover,
        html.a11y-dark-mode input[type="file"]::-webkit-file-upload-button:hover {
            background-color: #352d52 !important;
        }

    /* Sep 2026: "color: #e7e5ee" alone looked sufficient here, but Bootstrap
   5.3.8's real ".table" rule also sets its OWN opaque "--bs-table-bg"
   (Bootstrap ships a light default for it), which paints on top of
   whatever background the parent (page body, ".card", ...) has - the
   same "child paints over parent" issue already handled per-row further
   down this file, except this is the base ".table" class itself, so it
   was affecting every plain Bootstrap table on the site, not just pages
   with custom row coloring. Confirmed white-table-in-dark-mode via a
   direct render with real Bootstrap 5.3.8 CSS before adding the 3
   "--bs-table-*" overrides below; re-confirmed fixed after. */
    html.a11y-dark-mode .table {
        color: #e7e5ee;
        --bs-table-bg: #201c2b !important;
        --bs-table-color: #e7e5ee !important;
        --bs-table-border-color: rgba(255, 255, 255, 0.14) !important;
    }

    /* ---- 18.2b Generic Bootstrap 5 utilities (Sep 2026 addition) ----------
   Sep 2026: after tokenizing the "Client Reservation Records Profile"
   page (18.7), 2 spots on that same page were still white - not because
   they use a custom "crp-*"/"crc-*" class, but because they use PLAIN
   BOOTSTRAP UTILITY classes (".bg-white", ".alert-info", inline
   "style=\"background:#fff\"", ...) that this section never touched.
   Bootstrap utility classes like these are used all over the ~150 admin
   views in this app - far more consistently than any one-off custom
   class - so covering the common ones here is the single highest-leverage
   step toward "no page should stay half-white in dark mode" across the
   whole admin area, without having to open every view first. */
    html.a11y-dark-mode .bg-white,
    html.a11y-dark-mode .bg-light,
    html.a11y-dark-mode .bg-body,
    html.a11y-dark-mode .bg-body-secondary,
    html.a11y-dark-mode .bg-body-tertiary {
        background-color: #201c2b !important;
    }

    /* Sep 2026: ".text-bg-light" is yet another separate Bootstrap 5.3
       utility (combined text+background helper, not covered by ".bg-light"
       above) - it hardcodes "color:#000" and "background-color:RGBA(var(
       --bs-light-rgb),...)" with "!important", found on Instagram/Index,
       Instagram/Edit and ImageCompress rendering solid white/near-white
       pills in dark mode. */
    html.a11y-dark-mode .text-bg-light {
        background-color: #241f33 !important;
        color: #e7e5ee !important;
    }

    /* Sep 2026 addition: ".bg-body-secondary"/".bg-body-tertiary" are a
   SEPARATE pair of Bootstrap 5.3 utility classes from ".bg-body" above -
   they read their own "--bs-secondary-bg"/"--bs-tertiary-bg" variables,
   which this site never redeclares for dark mode (this site toggles dark
   mode via "html.a11y-dark-mode", not Bootstrap's own
   "[data-bs-theme=dark]" attribute, so Bootstrap's built-in dark values
   for these variables are never applied here either). Found on
   Story/Create.cshtml, Story/CreateMemberStory.cshtml, Story/Edit.cshtml
   and Story/Edit_Mems.cshtml, whose "Dashboard info"/"Body info" section-
   header rows use "bg-body-secondary" and rendered as solid white bars in
   dark mode - reported directly by the user from a live screenshot. Fixed
   here, once, on the shared utility-class layer rather than per page,
   since both classes are standard Bootstrap 5.3 utilities that may be
   reused anywhere across the ~150 admin views in this app, not just on
   the Story pages that surfaced the bug. */

    html.a11y-dark-mode .text-dark,
    html.a11y-dark-mode .text-body {
        color: #e7e5ee !important;
    }

    html.a11y-dark-mode .text-muted,
    html.a11y-dark-mode .text-secondary {
        color: #a9a4bd !important;
    }

    html.a11y-dark-mode .border,
    html.a11y-dark-mode .border-top,
    html.a11y-dark-mode .border-bottom,
    html.a11y-dark-mode .border-start,
    html.a11y-dark-mode .border-end,
    html.a11y-dark-mode .border-light,
    html.a11y-dark-mode .border-secondary {
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    /* A hardcoded inline "style=\"background: #ffffff\"" (no class at all)
   can only be beaten by an !important rule with high enough specificity -
   this is a deliberate, narrow exception for that one common pattern. */
    html.a11y-dark-mode [style*="background: #ffffff"],
    html.a11y-dark-mode [style*="background:#ffffff"],
    html.a11y-dark-mode [style*="background: #fff"],
    html.a11y-dark-mode [style*="background:#fff"] {
        background-color: #201c2b !important;
    }

    html.a11y-dark-mode .alert {
        border-width: 1px;
        border-style: solid;
    }

    html.a11y-dark-mode .alert-info {
        background-color: rgba(13, 202, 240, 0.16) !important;
        color: #79d4e8 !important;
        border-color: rgba(13, 202, 240, 0.35) !important;
    }

    html.a11y-dark-mode .alert-success {
        background-color: rgba(25, 135, 84, 0.18) !important;
        color: #6fdba0 !important;
        border-color: rgba(25, 135, 84, 0.35) !important;
    }

    html.a11y-dark-mode .alert-warning {
        background-color: rgba(255, 193, 7, 0.16) !important;
        color: #e8c65a !important;
        border-color: rgba(255, 193, 7, 0.35) !important;
    }

    html.a11y-dark-mode .alert-danger {
        background-color: rgba(220, 53, 69, 0.18) !important;
        color: #f28b95 !important;
        border-color: rgba(220, 53, 69, 0.35) !important;
    }

    html.a11y-dark-mode .alert-primary {
        background-color: rgba(13, 110, 253, 0.18) !important;
        color: #9fb8fb !important;
        border-color: rgba(13, 110, 253, 0.35) !important;
    }

    html.a11y-dark-mode .alert-secondary,
    html.a11y-dark-mode .alert-light {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: #d9d6e6 !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
    }

    html.a11y-dark-mode .nav-tabs,
    html.a11y-dark-mode .nav-tabs .nav-link {
        border-color: rgba(255, 255, 255, 0.14) !important;
        background-color: transparent;
        color: #d9d6e6;
    }

        html.a11y-dark-mode .nav-tabs .nav-link.active,
        html.a11y-dark-mode .nav-pills .nav-link.active {
            background-color: #2a2440 !important;
            color: #f1eef8 !important;
        }

    html.a11y-dark-mode .accordion-item,
    html.a11y-dark-mode .accordion-button {
        background-color: #201c2b !important;
        color: #e7e5ee !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

        html.a11y-dark-mode .accordion-button:not(.collapsed) {
            background-color: #2a2440 !important;
            color: #f1eef8 !important;
        }

    html.a11y-dark-mode .page-link {
        background-color: #201c2b !important;
        color: #d9d6e6 !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    /* ---- 18.3 Navbar - already purple; deepen the scrolled glass state --- */
    html.a11y-dark-mode .navbar.navbar-fixed-glass {
        background: linear-gradient(135deg, #4b4476 0%, #2f2750 100%) !important;
    }

        html.a11y-dark-mode .navbar.navbar-fixed-glass.navbar--scrolled {
            background: linear-gradient(135deg, rgba(60, 53, 97, 0.55) 0%, rgba(35, 28, 58, 0.62) 100%) !important;
        }

            html.a11y-dark-mode .navbar.navbar-fixed-glass.navbar--scrolled .container {
                background-color: rgba(20, 17, 30, 0.45) !important;
            }

            html.a11y-dark-mode .navbar.navbar-fixed-glass.navbar--scrolled .navbar-nav .nav-link,
            html.a11y-dark-mode .navbar.navbar-fixed-glass.navbar--scrolled .navbar-brand,
            html.a11y-dark-mode .navbar.navbar-fixed-glass.navbar--scrolled .navbar-brand span {
                color: #ffffff !important;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.5) !important;
            }

            html.a11y-dark-mode .navbar.navbar-fixed-glass.navbar--scrolled .navbar-search-toggle {
                background: rgba(20, 17, 30, 0.5) !important;
                border-color: rgba(255, 255, 255, 0.25) !important;
                color: #ffffff !important;
            }

    html.a11y-dark-mode .navbar-search-input {
        background: #201c2b !important;
        color: #e7e5ee !important;
    }

    /* ---- 18.4 Footer - desktop glass cards + mobile bottom bar ----------- */
    html.a11y-dark-mode .footer {
        background: #1c1828 !important;
    }

    html.a11y-dark-mode .footer-glass-card {
        background: #272236 !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    html.a11y-dark-mode .footer-card-title {
        color: #f3f1fa !important;
    }

    html.a11y-dark-mode .footer-brand-desc,
    html.a11y-dark-mode .footer-link-list li a,
    html.a11y-dark-mode .footer-contact-list li a,
    html.a11y-dark-mode .footer-contact-list li > span:not(.footer-contact-icon),
    html.a11y-dark-mode .footer-badge-list li span,
    html.a11y-dark-mode .footer-bottom-inner p {
        color: rgba(255, 255, 255, 0.82) !important;
    }

        html.a11y-dark-mode .footer-link-list li a:hover {
            color: #ffffff !important;
        }

    html.a11y-dark-mode .footer-contact-icon {
        color: #ffffff !important;
    }

    html.a11y-dark-mode .social-icon {
        color: #ffffff !important;
    }

    html.a11y-dark-mode .footer-divider {
        border-top-color: rgba(255, 255, 255, 0.18) !important;
    }

/* Mobile fixed bottom bar (".footer .button-group", Section 8 above) */
@media (max-width: 1230px) {
    html.a11y-dark-mode .footer .button-group {
        background: rgba(30, 25, 48, 0.82) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    }

    html.a11y-dark-mode .footer .icon,
    html.a11y-dark-mode .footer .text {
        color: #e7e5ee !important;
    }
}

/* ---- 18.5 Shared glass-purple components -> deepen tint, lighten text -
   (.price_div / .project-category-nav / .btn_goto_arrangement /
   .icon-circle / .section-title all share this exact recipe already -
   see sections 9, 10 and 16 above. Manage/Menu.cshtml's ".btn-card" menu
   tiles joined this list Sep 2026 - see the comment above this rule's
   selector for why plain Site.css ".card" dark-mode coverage wasn't
   enough on its own, and section 18.28 below for the rest of that fix.) */
html.a11y-dark-mode .price_div,
html.a11y-dark-mode .project-category-pill.active,
html.a11y-dark-mode .project-category-nav,
html.a11y-dark-mode .btn_goto_arrangement,
html.a11y-dark-mode .icon-circle,
html.a11y-dark-mode .section-title,
html.a11y-dark-mode .btn-card {
    background: rgba(88, 73, 139, 0.55) !important;
    color: #f2f0fa !important;
}

    html.a11y-dark-mode .project-category-nav i {
        color: #f2f0fa !important;
    }

    html.a11y-dark-mode .btn_goto_arrangement:hover,
    html.a11y-dark-mode .project-category-nav:hover:not(:disabled),
    html.a11y-dark-mode .project-category-nav:focus:not(:disabled) {
        background: rgba(88, 73, 139, 0.75) !important;
        color: #ffffff !important;
    }

/* ---- 18.6 SEO article template - flip its own CSS variables ----------
   Every ".drhoda-seo-article ..." rule above (section 11) is built on
   these custom properties, so redeclaring them here under dark mode
   recolors the whole article without touching a single one of those
   rules directly. */
html.a11y-dark-mode {
    --article-purple-soft: #2a2440;
    --article-purple-border: #453c66;
    --article-text: #e7e5ee;
    --article-white: #221d30;
}

    html.a11y-dark-mode .drhoda-seo-article .warning-box {
        background: #3a301a !important;
        border-color: #6b5626 !important;
    }

    html.a11y-dark-mode .drhoda-seo-article .faq-item {
        background: #221d30 !important;
    }

/* ---- 18.7 Client Reservation Records Profile (admin) - variable-driven -
   Sep 2026: this is the first internal/admin screen tokenized per the
   client's own suggestion - instead of hand-picking a selector to override
   for every component (sections 18.1-18.6 above), the component's own
   stylesheet (Site.css, "Client Reservation Records Profile" section) now
   defines every one of its colors as a "--crp-*" variable instead of a
   literal hex/rgba. All that's needed here is to redeclare those same
   variable names - the ~30 rules that consume them (page background, the
   "سوابق" timeline, status pills, comment/file boxes, avatars...) recolor
   themselves automatically, with zero risk of missing a selector.

   This is the reason the previous pass only affected a few generic spots
   (page background, <textarea>/<input>): internal/admin pages like this
   one have hundreds of lines of their OWN page-specific CSS that section
   18.1-18.6's hand-picked selectors never touch. The plan going forward is
   to tokenize each admin page the same way, one at a time, as they're
   flagged - starting here. */
html.a11y-dark-mode {
    --crp-page-bg: #15131c;
    --crp-card-bg: #201c2b;
    --crp-card-border: rgba(255, 255, 255, 0.12);
    --crp-card-shadow: rgba(0, 0, 0, 0.45);
    --crp-accent: #8f86d9;
    --crp-accent-soft: rgba(143, 134, 217, 0.18);
    --crp-text-heading: #f1eef8;
    --crp-text-value: #e7e5ee;
    --crp-text-muted: #a9a4bd;
    --crp-text-body: #d9d6e6;
    --crp-text-service: #b7b2c9;
    --crp-text-faint: #9691a8;
    --crp-text-placeholder: #8b869c;
    --crp-timeline-line: #3a3350;
    --crp-surface-soft: #1c1828;
    --crp-surface-muted: #2a2440;
    --crp-surface-image: #2a2440;
    --crp-service-img-border: rgba(255, 255, 255, 0.15);
    --crp-avatar-border: rgba(255, 255, 255, 0.25);
    --crp-avatar-shadow: rgba(0, 0, 0, 0.5);
    --crp-badge-overlay-bg: rgba(0, 0, 0, 0.6);
    --crp-badge-overlay-text: #ffffff;
    --crp-status-info-bg: rgba(57, 73, 171, 0.25);
    --crp-status-info-text: #aab8f7;
    --crp-status-completed-bg: rgba(25, 135, 84, 0.22);
    --crp-status-completed-text: #6fdba0;
    --crp-status-pending-bg: rgba(183, 121, 31, 0.22);
    --crp-status-pending-text: #e8b768;
    --crp-status-canceled-bg: rgba(220, 53, 69, 0.22);
    --crp-status-canceled-text: #f28b95;
    --crp-mobile-actions-bg: rgba(21, 19, 28, 0.92);
    /* This page's own fixed header/breadcrumb bar (defined inline in
       Profile-v2.cshtml, not in Site.css - same "--crp-*" family). */
    --crp-header-bg: #1c1828;
    --crp-breadcrumb-muted: #a9a4bd;
    --crp-breadcrumb-link: #c3b9f2;
    --crp-breadcrumb-active: #f1eef8;
    --crp-breadcrumb-hover-accent: #6fdba0;
    /* This page's "commerce / products picker" tab (Profile-v2.cshtml's
       OWN inline <style> block, "--crc-*" family - separate from "--crp-*"
       because it's a page-local, not shared, block of CSS). Solid-fill
       buttons/badges with white text (add-to-cart, the checked stock pill,
       the active filter chip, the remove-payment button) are left as
       plain hex in that file on purpose - a fully opaque brand-color fill
       reads fine in both themes, so it doesn't need a variable. */
    --crc-text-muted: #a9a4bd;
    --crc-accent: #8f86d9;
    --crc-accent-soft-bg: rgba(143, 134, 217, 0.18);
    --crc-icon-accent: #b3a8e8;
    --crc-border-soft: rgba(143, 134, 217, 0.3);
    --crc-surface-soft: #241f33;
    --crc-pill-text: #c3b9f2;
    --crc-filter-border: rgba(255, 255, 255, 0.12);
    --crc-filter-bg: #1c1828;
    --crc-tag-line-border: rgba(255, 255, 255, 0.14);
    --crc-chip-border: rgba(143, 134, 217, 0.35);
    --crc-chip-text: #c3b9f2;
    --crc-image-box-bg: #2a2440;
    --crc-image-empty-text: #6b6580;
    --crc-category-text: #b3a8e8;
    --crc-tag-text: #e8b768;
    --crc-declined-text: #e8b768;
    --crc-cart-zero-bg: rgba(183, 121, 31, 0.18);
    --crc-stock-text: #6fdba0;
    --crc-stepper-border: #8f86d9;
    --crc-divider: rgba(255, 255, 255, 0.14);
    --crc-row-divider: rgba(255, 255, 255, 0.1);
    --crc-small-muted: #a9a4bd;
    --crc-empty-text: #9691a8;
}

/* ---- 18.8 History / Today (admin) - variable-driven, same pattern as
   18.7. This page's own inline <style> block (Today.cshtml) defines all
   of its colors as "--today-*" variables; this just redeclares the dark
   values. Status pill colors reuse the same bg-tint/lightened-text
   conversion used for "--crp-status-*" (pale opaque bg + saturated text
   in light mode -> low-alpha rgba tint + lightened text in dark mode),
   kept as separate page-scoped tokens rather than reusing "--crp-status-*"
   directly so this page can be edited independently later. */
html.a11y-dark-mode {
    --today-card-bg: #201c2b;
    --today-card-border: rgba(255, 255, 255, 0.12);
    --today-card-shadow: rgba(0, 0, 0, 0.45);
    --today-queue-section-border: rgba(255, 255, 255, 0.12);
    --today-queue-section-shadow: rgba(0, 0, 0, 0.4);
    --today-thead-bg: #241f33;
    --today-empty-bg: #201c2b;
    --today-dashed-border: rgba(255, 255, 255, 0.14);
    --today-accent: #8f86d9;
    --today-accent-text: #c3b9f2;
    --today-soft-border: rgba(143, 134, 217, 0.3);
    --today-hover-bg: rgba(143, 134, 217, 0.12);
    --today-muted-text: #a9a4bd;
    --today-accent-shadow-soft: rgba(143, 134, 217, 0.35);
    --today-status-badge-border: rgba(255, 255, 255, 0.08);
    --today-purple-tint-bg: rgba(143, 134, 217, 0.18);
    --today-status-reserved-text: #cbb8f0;
    /* Sep 2026: the amber/gold family below was first shipped as a
       low-alpha tint (like the other statuses), but amber sits near-
       complementary to this page's purple card background - alpha-
       blending the two mathematically produces a muddy, unbranded brown
       rather than a clean amber, and it got worse the larger the tinted
       surface was (a whole table row, not just a small badge). Verified
       with a rendered side-by-side (Playwright screenshot) before and
       after: these need a distinctly higher alpha + more saturated
       source color than the other statuses to actually read as "amber"
       once blended, instead of quietly falling back to brown. Keep that
       in mind before reusing this same formula for another purple-themed
       page's warning/pending colors - check it doesn't muddy the same way. */
    --today-status-attended-bg: rgba(250, 135, 15, 0.45);
    --today-status-attended-text: #ffb870;
    --today-row-attended-bg: rgba(250, 135, 15, 0.22);
    --today-status-completed-bg: rgba(25, 135, 84, 0.22);
    --today-status-completed-text: #6fdba0;
    --today-status-inprogress-bg: rgba(57, 73, 171, 0.25);
    --today-status-inprogress-text: #aab8f7;
    --today-row-inprogress-bg: rgba(57, 73, 171, 0.12);
    --today-status-tocomplete-bg: rgba(240, 190, 20, 0.45);
    --today-status-tocomplete-text: #fbe08a;
    --today-row-tocomplete-bg: rgba(240, 190, 20, 0.2);
    --today-status-canceled-bg: rgba(255, 255, 255, 0.1);
    --today-status-canceled-text: #b8b4c6;
    --today-status-other-bg: rgba(255, 255, 255, 0.06);
    --today-status-other-text: #9d9bb0;
    --today-room-border: rgba(57, 73, 171, 0.4);
    --today-waiting-bg: rgba(220, 53, 69, 0.22);
    --today-waiting-text: #f28b95;
    --today-waiting-border: rgba(220, 53, 69, 0.4);
}

/* ---- 18.9 MainLayout shell (admin) - variable-driven -
   Sep 2026: root cause of "internal pages still have white gaps around
   the cards" - every page that uses MainLayout.cshtml (i.e. almost every
   admin/management page) wraps its content in ".main-content", and its
   raised ".page-header" card, both of which had their own literal light
   colors instead of using a variable. "--body-color" already existed in
   MainLayout.cshtml (also used by the sidebar's nav-link hover state) -
   only its dark value was missing. Deliberately NOT touching
   "--sidebar-bg"/"--sidebar-selected-bg-color"/"--search-*" here - the
   sidebar already renders correctly in dark mode through CSS this
   project's files don't control, so leave it alone rather than risk
   fighting with it. This is a high-leverage, page-agnostic fix: it
   improves every MainLayout page at once, not just History/Today. */
html.a11y-dark-mode {
    --body-color: #15131c;
    --page-header-bg: #201c2b;
}

/* ---- 18.10 Shared "management page" header/breadcrumb bar -
   Sep 2026: the fixed white bar at the top of History/Today (and, per
   its generic class name, likely many other admin pages) - defined once
   in Site.css and reused everywhere via ".management-page-header" /
   ".management-page-breadcrumb". It already used CSS variables for
   almost everything; this just supplies their dark values (plus the 2
   variables added alongside the literal-to-variable fixes made directly
   in Site.css for this pass). Another high-leverage, page-agnostic fix -
   check whether a future page's white top bar is already this shared
   component before writing new page-specific tokens for it. */
html.a11y-dark-mode {
    --management-header-purple: #8f86d9;
    --management-header-purple-dark: #b3a8e8;
    --management-header-green: #6fdba0;
    --management-header-border: rgba(255, 255, 255, 0.12);
    --management-header-divider: rgba(255, 255, 255, 0.14);
    --management-header-bg: #15131c;
    --management-header-text: #f1eef8;
    --management-header-muted: #a9a4bd;
    --management-header-card-bg: #201c2b;
    --management-header-card-shadow: rgba(0, 0, 0, 0.4);
}

/* ---- 18.11 Sidebar (_withSubmenuesSidebar.cshtml, rendered inside
   MainLayout.cshtml) ------------------------------------------------------
   Sep 2026, CORRECTED after a live screenshot: an earlier pass here
   assumed the sidebar's own background ("--sidebar-bg", declared in
   Site.css) and its search/active-state colors ("--sidebar-selected-bg-
   color", "--sidebar-selected-text-color", "--search-bg-color",
   "--search-input-color" - all declared in MainLayout.cshtml's own
   <style>) already rendered dark through some other CSS this project's
   files don't control, and left them untouched. The screenshot proved
   that wrong: the whole sidebar stayed light gray/white with no dark
   override at all - nobody had ever given these variables a dark value,
   there was no mystery CSS doing it. Fixed below by giving them real dark
   values, same as every other tokenized surface on the site. (The
   "unknown external CSS" caution from 18.9's note still applies to things
   actually confirmed to already render correctly - it just didn't apply
   here.)

   What this section fixes, now with real values:

   1) SIDEBAR BACKGROUND + ACTIVE STATE: "--sidebar-bg" (the whole panel)
      and "--sidebar-selected-bg-color"/"--sidebar-selected-text-color"
      (the highlighted pill behind the currently-active menu item -
      ".nav-link.active" / ".sidebar-nav .nav-item.active .nav-link") get
      real dark values here, reusing colors already established elsewhere
      on this dark theme for consistency ("--management-header-card-bg"
      family for surfaces, the accordion's own active-state purple for the
      active-item accent). The search box's "--search-bg-color"/
      "--search-input-color" are deliberately NOT given dark values here -
      see the comment directly above the CSS block below for why (a
      different, already-solved case of problem 2's class-collision
      pattern).

   2) CLASS-COLLISION BLEED-THROUGH: this sidebar's menu list is a
      Bootstrap accordion (".accordion-item"/".accordion-button"), and
      those exact class names are ALSO styled generically for every OTHER
      admin page in section 18.2 ("html.a11y-dark-mode .accordion-item,
      .accordion-button { background:#201c2b; ... }"), because generic
      Bootstrap accordions elsewhere on the site DO need that treatment.
      The sidebar has its own already-correct dark/purple look (from the
      CSS above that this project doesn't control), so that generic rule
      painted an unwanted flat-navy patch behind every single sidebar
      menu item instead of leaving the sidebar's own background alone.
      Fixed by neutralizing those properties specifically inside
      ".sidebar" - background/border go back to transparent, letting
      whatever the sidebar actually is show through, exactly as it does
      today with no ".accordion-item" override at all. This is the
      general lesson to check for on every future page too: a shared
      Bootstrap class name being styled generically elsewhere doesn't
      mean every place that class appears wants the same treatment.

   3) TEXT COLOR: this partial's nav item labels get their color from
      MainLayout.cshtml's ".nav-link { color: var(--sidebar-text-color) }"
      (a near-black light-mode color) - without a dark-mode fix they'd
      render as near-black text, illegible on the now-dark sidebar
      background from fix (1). Overridden via a scoped selector rather
      than giving "--sidebar-text-color" itself a dark value, since that
      one variable is reused as-is across several RTL/LTR sidebar rules in
      MainLayout.cshtml with no light/dark distinction needed elsewhere -
      simpler to target ".sidebar"'s consumers directly here. Set to the
      same purple already used for text on this site's other dark surfaces
      (History/Today's "--today-accent-text", the shared header's
      "--management-header-purple-dark") for visual consistency: #c3b9f2.

   Hover is a related, narrower fix: MainLayout's ".nav-link:hover" rule
   (light mode's hover - explicitly NOT touched or removed here) sets
   "background: var(--body-color)". Section 18.9 above gave
   "--body-color" a dark value for a completely different reason (the
   ".main-content" wrapper), and that value is shared - so in dark mode,
   hovering a sidebar item now shows a dark hover background too, with no
   dark-mode color rule of its own yet. Left un-fixed, that would combine
   with the near-black hover text color into an illegible dark-on-dark
   hover state. The rule below adds ONLY a hover text color for dark mode
   (no background/box-shadow touched, so the existing hover mechanic is
   fully intact in both themes) so the hover state stays legible. */
html.a11y-dark-mode {
    --sidebar-bg: #15131c;
    --sidebar-selected-bg-color: #2a2440;
    --sidebar-selected-text-color: #f1eef8;
    /* "--search-bg-color"/"--search-input-color" are NOT overridden here on
       purpose: the search box is a plain "<input type="text">", which the
       generic Bootstrap-input rule in section 18.2b already matches
       ("html.a11y-dark-mode input:not([type="checkbox"]):not([type="radio"])
       { background-color: #201c2b !important; color: #e7e5ee !important; }").
       That rule's "!important" wins over ".search-input"'s non-important
       "var(--search-bg-color)" regardless of what these two variables are
       set to, so giving them dark values here would be dead code - this is
       the same class-collision family as the accordion fix below, except
       here the generic rule's fixed color happens to already look correct,
       so nothing further is needed. Confirmed by reading the real markup:
       "<input type="text" class="search-input">" in
       "_withSubmenuesSidebar.cshtml". */
}

    html.a11y-dark-mode .sidebar .accordion-item,
    html.a11y-dark-mode .sidebar .accordion-button {
        background-color: transparent !important;
        border-color: transparent !important;
        color: #c3b9f2 !important;
    }

        html.a11y-dark-mode .sidebar .accordion-button:not(.collapsed) {
            background-color: transparent !important;
            color: #c3b9f2 !important;
        }

    html.a11y-dark-mode .sidebar .profile-name,
    html.a11y-dark-mode .sidebar .profile-role,
    html.a11y-dark-mode .sidebar .nav-link,
    html.a11y-dark-mode .sidebar-footer .exit-btn {
        color: #c3b9f2 !important;
    }

    /* ".exit-btn" is a <button>, not an <input>, so the generic input rule
   (18.2b) never touches it - its own background/border/text are literal
   MainLayout.cshtml rules ("background-color: var(--search-bg-color);
   color: var(--black);"). "--search-bg-color" is deliberately NOT given a
   dark value (see the comment above the sidebar-bg block) because the
   search INPUT already gets themed for free by the generic input rule -
   but that reasoning doesn't extend to this button, so without its own
   fix it stays a light pill. Text color is already fixed above via
   ".exit-btn"'s own color rule; this adds the missing background/border. */
    html.a11y-dark-mode .sidebar-footer .exit-btn {
        background-color: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
    }

    /* The search box's INPUT text/background are already fixed for free by the
   generic input rule above (see the long comment above) - but its
   "::placeholder" is a separate pseudo-element that generic rule can't
   reach, and ".search-input::placeholder" still points at
   "var(--sidebar-text-color)" (near-black) with no "!important" of its
   own, so it would otherwise stay illegible on the now-dark box. */
    html.a11y-dark-mode .sidebar .search-input::placeholder {
        color: rgba(231, 229, 238, 0.6) !important;
    }

    html.a11y-dark-mode .sidebar .nav-link:hover,
    html.a11y-dark-mode .sidebar .nav-item:hover .nav-link,
    html.a11y-dark-mode[dir="ltr"] .sidebar .nav-item:hover {
        color: #f1eef8 !important;
    }

    /* ---- 18.12 ClinicCommerceDashboard/Calendar.cshtml ---------------------
   Sep 2026: this page already tokenizes ITSELF, unusually well - it maps
   its own "--ccr-*" custom properties onto EXISTING Site.css variables
   (".ccr-dashboard { --ccr-card-bg: var(--white); --ccr-text: var(--dark-
   grey); --ccr-border: var(--border-gray); --ccr-muted: var(--tab-link-
   color); }") instead of hardcoding hex. "--ccr-primary"/"--ccr-secondary"
   map to "--navbar-right"/"--navbar-left", which SitePurple.css's own base
   purple skin (top of this file, outside any dark-mode block) already
   repaints to this site's brand purple in BOTH themes - no dark-mode
   change needed for those two.

   IMPORTANT DIFFERENCE FROM EVERY EARLIER SECTION: because ".ccr-
   dashboard" re-declares "--ccr-card-bg" etc. on ITSELF (not on ":root"),
   a dark override on "html.a11y-dark-mode" alone would NOT reach it -
   custom-property inheritance only fills in a value that isn't already
   set on the element, and ".ccr-dashboard" always sets its own. The
   override selector has to include ".ccr-dashboard" too, so it wins by
   being MORE specific ON THAT SAME ELEMENT, not just by being scoped to
   dark mode. **Check for this pattern on every future page: if a page's
   own "<style>" block re-maps a variable onto ANOTHER variable at a
   non-":root" selector (its own page wrapper class, typically), the dark
   override must target that SAME selector, not a bare "html.a11y-dark-
   mode".**

   Also fixed in Calendar.cshtml's own "<style>" (not here): a handful of
   rules read "var(--white)"/"var(--light-gray)" DIRECTLY instead of
   through "--ccr-card-bg"/(new) "--ccr-empty-bg" - the month-nav buttons,
   the calendar day cells, the "امروز" highlighted-cell mix, and the
   day-action buttons. Left as direct "--white"/"--light-gray" reads,
   overriding those SITE-WIDE dual-role variables here would have broken
   every other white-background-plus-dark-text usage elsewhere on the
   site (see the "dual-role variables" pitfall) - routed them through this
   page's own tokens instead, which was a one-line "var(--white)" ->
   "var(--ccr-card-bg)" swap per rule since the light-mode VALUE is
   identical either way. Every remaining "var(--white)" left in that file
   is `color: var(--white)` text-on-solid-purple-background (hover states,
   the calendar header row, the "n نفر تکمیل‌شده" pill, the finance
   button) - correctly unchanged per "What NOT to tokenize". */
    html.a11y-dark-mode .ccr-dashboard {
        --ccr-card-bg: #201c2b;
        --ccr-text: #e7e5ee;
        --ccr-border: rgba(255, 255, 255, 0.14);
        --ccr-muted: #a9a4bd;
        --ccr-empty-bg: #18151f;
    }

/* ---- 18.13 ClinicCommerceReport/Index.cshtml ---------------------------
   Sep 2026: this page declares its own "--ccrpt-*" tokens on a bare ":root"
   (same as Today.cshtml's "--today-*"), so - unlike Calendar.cshtml's
   ".ccr-dashboard"-scoped tokens (section 18.12) - the standard bare
   "html.a11y-dark-mode { --token: dark; }" override is enough here; no
   extra wrapper-class scoping needed. Reused this site's already-
   established palette everywhere a direct equivalent existed, rather than
   inventing new colors: the green/red status-text pair matches
   "--crp-status-completed-text"/"--today-status-canceled-text"'s existing
   "#6fdba0"/"#f28b95", and the ok/error badge backgrounds reuse the same
   low-alpha-rgba-tint formula as every other status pill on the site (see
   the "Status-pill color conversion pattern" note in the project doc).
   A few colors on this page were deliberately left OUTSIDE this section,
   with a comment at each explaining why, directly in the page's own
   "<style>": ".commerce-payment-label"/the filter's hover/active state
   (solid brand-purple fill, white text - unaffected by theme), and
   ".commerce-grand-total-row"/".commerce-net-profit-header" plus its two
   light-on-dark child text rules (already an intentionally dark accent
   surface with light text in LIGHT mode too, so dark mode changes
   nothing there - same pattern as MainLayout's own always-dark rows
   elsewhere on the site). This page's printable pop-up window (built
   entirely in a JS string template, opened via "window.open" for the
   physical print action) is INTENTIONALLY NOT touched here or in the
   page's own "<style>" - printed paper has no dark mode, and that
   template already hardcodes its own light print-only palette. */
html.a11y-dark-mode {
    --ccrpt-filter-bg: #201c2b;
    --ccrpt-filter-text: #c3b9f2;
    --ccrpt-table-border: rgba(255, 255, 255, 0.14);
    --ccrpt-thead-bg: #241f33;
    --ccrpt-thead-text: #f1eef8;
    --ccrpt-rownum-text: #c3b9f2;
    --ccrpt-rownum-bg: rgba(255, 255, 255, 0.04);
    --ccrpt-row-service-bg: #201c2b;
    --ccrpt-row-product-bg: #221e30;
    --ccrpt-row-payment-bg: #2a2440;
    --ccrpt-payment-summary-text: #c3b9f2;
    --ccrpt-empty-payment-text: #6f6a82;
    --ccrpt-total-row-bg: #2a2440;
    --ccrpt-total-row-text: #f1eef8;
    --ccrpt-reconciliation-row-bg: #201c2b;
    --ccrpt-diff-ok-text: #6fdba0;
    --ccrpt-diff-error-text: #f28b95;
    --ccrpt-badge-ok-bg: rgba(40, 167, 69, 0.22);
    --ccrpt-badge-ok-text: #6fdba0;
    --ccrpt-badge-error-bg: rgba(220, 53, 69, 0.22);
    --ccrpt-badge-error-text: #f28b95;
    --ccrpt-netprofit-border: rgba(255, 255, 255, 0.14);
    --ccrpt-netprofit-bg: #201c2b;
    --ccrpt-metric-border: rgba(255, 255, 255, 0.14);
    --ccrpt-metric-bg: #241f33;
    --ccrpt-metric-label-text: #a9a4bd;
    --ccrpt-metric-value-text: #6fdba0;
    --ccrpt-metric-cost-text: #f28b95;
    --ccrpt-metric-profit-border: rgba(111, 219, 160, 0.35);
    --ccrpt-metric-profit-bg: rgba(111, 219, 160, 0.08);
    --ccrpt-formula-bg: rgba(255, 255, 255, 0.05);
    --ccrpt-note-text: #a9a4bd;
}

/* ---- 18.14 Projects/Details.cshtml (public/frontend, _Layout.cshtml) ---
   Sep 2026: this is the first PUBLIC-facing (non-admin) page tokenized
   under this project - it renders under "_Layout.cshtml", not
   "MainLayout.cshtml", but the same "html.a11y-dark-mode" toggle and the
   same "declare light values on a page-local :root, override them here"
   pattern apply identically regardless of which layout a page uses.
   Two spots on this page had literal, non-variable colors that never
   changed with the theme:
   - ".project_detail_Title" (the small "Architect"/"Location"/
     "Photographer" attribute labels above the project description) had
     a hardcoded "color: black !important" - invisible/near-invisible
     against this page's dark background once dark mode repaints the
     page behind it, since nothing here ever read the theme at all.
   - ".image-fit" (the placeholder/background shown behind an image
     before it loads, or behind any letterboxed image in the project's
     photo gallery) used the shared "--light-grey" variable directly.
     "--light-grey" is also used elsewhere on the site for unrelated
     surfaces (see project doc's "dual-role variables" pitfall), so
     rather than risk giving that shared token a dark value and affecting
     those other consumers, this page's own copy of the placeholder color
     was moved to a new, page-scoped "--pd-image-placeholder-bg" token
     instead - a one-line, zero-visual-change-in-light-mode swap, exactly
     like the Calendar.cshtml "--white" -> "--ccr-card-bg" precedent. */
html.a11y-dark-mode {
    --pd-title-color: #e7e5ee;
    --pd-image-placeholder-bg: #201c2b;
}

/* ---- 18.15 Shared ".dt-toolbar"/".custom-dropdown*" table-toolbar component
   Sep 2026: this component (search/filter/pagination toolbar chrome,
   Site.css ~L2060-2153) existed in Site.css before this project touched
   it but had never actually been used by any live page yet - its first
   real consumer is "Projects/Index.cshtml"'s live-search bar (see
   "site-ui-standing-rules.md" Rule 2). Its own light-mode ":root" block
   (Site.css) declares "--dt-surface: #ffffff" / "--dt-border: #e5e7eb" /
   "--dt-text: #2c3e50" / "--dt-muted: #6b7280" with no dark override
   anywhere, so ".dt-toolbar"'s "background: var(--dt-surface)" /
   "border: 1px solid var(--dt-border)" rendered as a plain white bar with
   a light gray border sitting directly on the dark page background -
   reported by the user via a screenshot with the white gap circled.
   These are plain ":root"-declared custom properties (no page-local
   wrapper-class re-declaration involved, unlike Calendar.cshtml's
   "--ccr-*" tokens), so the standard bare override below is sufficient
   and reaches every current and future consumer of this shared component
   (".dt-toolbar", ".custom-dropdown-toggle", ".custom-dropdown-menu",
   its "aria-label"ed pagination wrapper never itself needs this fix -
   ".dt-top-pagination .pagination .page-link" already has its own
   working dark override, see section 18.2). "--dt-accent"/
   "--dt-accent-strong" (a blue focus/hover accent) are left unchanged -
   a saturated accent blue reads fine unchanged against a dark surface,
   the same "solid-fill accent, don't tokenize" case documented in the
   project doc's "What NOT to tokenize" section. */
html.a11y-dark-mode {
    --dt-surface: #201c2b;
    --dt-border: rgba(255, 255, 255, 0.14);
    --dt-text: #e7e5ee;
    --dt-muted: #a9a4bd;
}

/* ---- 18.16 Projects/Index.cshtml - table/card visual redesign --------
   Sep 2026: the user asked for this page's table to look "مانند جداول
   صفحه Today.cshtml" (like Today.cshtml's tables) after first reporting
   the plain default Bootstrap ".table" grid it had before looked heavy/
   clunky ("ضخیم") - mainly the 1.5px border width this site's own base
   purple skin sets globally for light mode (see the "Border WIDTH" note
   in section 18.0's comment above) reading as a stark, thick line with
   no rounded-card/soft-shadow treatment around it. Reused the exact dark
   values already shipped for Today.cshtml's "--today-card-border" /
   "--today-card-shadow" / "--today-thead-bg" / "--today-soft-border"
   (section 18.8) for the new page-local "--pi-*" tokens declared on this
   page's own ":root" in Index.cshtml, so the two pages stay visually
   consistent in both themes - kept as separate "--pi-*" names rather
   than reusing "--today-*" directly, per this project's standing rule
   that each page/feature gets its own independently-editable token set
   even when a color happens to match another page's. */
html.a11y-dark-mode {
    --pi-card-border: rgba(255, 255, 255, 0.12);
    --pi-card-shadow: rgba(0, 0, 0, 0.45);
    --pi-thead-bg: #241f33;
    --pi-soft-border: rgba(143, 134, 217, 0.3);
}

/* ---- 18.17 Reservation flow - Confirm_TimeSlice.cshtml -----------------
   Sep 2026: first page of the Reservation flow dark-mode pass ("این ها
   فایل های تو در تویی هستند" - nested/ajax-loaded views, no breadcrumbs
   needed per the user's explicit instruction). Page-local "--ctm-*"
   tokens declared on this page's own ":root" (Confirm_TimeSlice.cshtml),
   dark values below. The admin mobile-search row ("#adminSearchMobile")
   was deliberately left untouched structurally (per explicit request) -
   it already goes dark via the shared ".form-control"/".btn-primary"
   rules, so it needed no new token here.
   Badge colors reuse this project's established palette: green from the
   "status-pill conversion pattern" (section 18.8's reused "#6fdba0"), and
   amber/gold uses the documented EXCEPTION (higher alpha + more
   saturated hue than a normal status family, since amber desaturates
   into a muddy brown when alpha-blended on this purple-tinted dark
   surface - see the project doc's "amber/gold is the exception" note). */
html.a11y-dark-mode {
    --ctm-border: rgba(255, 255, 255, 0.12);
    --ctm-shadow: rgba(0, 0, 0, 0.45);
    --ctm-header-card-bg: rgba(111, 66, 193, 0.10);
    --ctm-header-card-border: rgba(143, 134, 217, 0.30);
    --ctm-item-border: rgba(255, 255, 255, 0.12);
    --ctm-input-border: rgba(255, 255, 255, 0.18);
    --ctm-spinner-track: rgba(255, 255, 255, 0.14);
    --ctm-admin-box-bg: rgba(111, 66, 193, 0.10);
    --ctm-admin-box-border: rgba(143, 134, 217, 0.30);
    --ctm-client-box-text: #e7e5ee;
    --ctm-table-wrap-bg: #201c2b;
    --ctm-table-wrap-shadow: rgba(0, 0, 0, 0.45);
    --ctm-table-wrap-border: rgba(255, 255, 255, 0.12);
    --ctm-row-bg: #201c2b;
    --ctm-row-border: rgba(255, 255, 255, 0.12);
    --ctm-badge-client-bg: rgba(111, 219, 160, 0.22);
    --ctm-badge-client-text: #6fdba0;
    --ctm-badge-dependent-bg: rgba(250, 135, 15, 0.45);
    --ctm-badge-dependent-text: #ffd27a;
    --ctm-auth-card-border: rgba(255, 255, 255, 0.12);
    --ctm-auth-card-bg: rgba(255, 255, 255, 0.03);
    /* "--captcha-bg-color"/"--captcha-bg-color-txt" (Site.css, shared
       site-wide - also used by "Login.cshtml") had no dark value
       anywhere, so the captcha card/input silently kept their light
       reddish tint in dark mode. Fixed once here so both this page and
       Login.cshtml (untouched, no edit needed there) pick it up. */
    --captcha-bg-color: rgba(220, 53, 69, 0.16);
    --captcha-bg-color-txt: rgba(220, 53, 69, 0.10);
}

/* ---- 18.18 Reservation flow - Get_Free_TimeSlices.cshtml --------------
   Sep 2026: only one real gap on this page - ".tr_Modal:hover" used a
   flat "lightgray", too bright/washed-out against a dark row. Everything
   else here (the "--navbar-*" brand-gradient header with white text, and
   plain cell text with no color of its own, correctly inheriting the
   dark text color from "body") already renders correctly unchanged. */
html.a11y-dark-mode {
    --gts-hover-bg: rgba(255, 255, 255, 0.08);
}

/* ---- 18.19 Reservation flow - Index_API.cshtml (service search bar) ---
   Sep 2026: this page's own tall, icon-inside pill search input
   ("--rsv-*" prefix, "rsv" = Reservation) had a hardcoded white
   background/shadow. Kept the search's shape/behavior exactly as it was
   per the user's explicit request - only its colors are tokenized here. */
html.a11y-dark-mode {
    --rsv-search-border: rgba(255, 255, 255, 0.12);
    --rsv-search-bg: #201c2b;
    --rsv-search-shadow: rgba(0, 0, 0, 0.35);
    --rsv-search-focus-shadow: rgba(0, 0, 0, 0.40);
}

/* ---- 18.20 Reservation flow - Insert_Verification_Code.cshtml --------
   Sep 2026: this page already declared its own "--verify-*" tokens on
   ":root" (a good sign this page was written with theming in mind), so
   the dark values below just extend that existing set - both the ones
   already declared (border/bg/shadow) and the ones newly split out of
   hardcoded literals this pass (message text, code input, "back" button,
   alert shadow). "--verify-primary"/"--verify-secondary"/"--verify-
   success"/"--verify-danger" are Bootstrap-semantic passthroughs and
   need no dark override here. */
html.a11y-dark-mode {
    --verify-border: rgba(255, 255, 255, 0.14);
    --verify-bg: #15131c;
    --verify-body-gradient-start: #1b1826;
    --verify-card-bg: #201c2b;
    --verify-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    --verify-message-text: #e7e5ee;
    --verify-input-bg: #15131c;
    --verify-input-text: #e7e5ee;
    --verify-input-placeholder: #8f89a8;
    --verify-back-btn-bg: #2a2440;
    --verify-alert-shadow: rgba(0, 0, 0, 0.35);
}

/* ---- 18.21 Reservation flow - Reservation_Progress_Bar.cshtml --------- */
html.a11y-dark-mode {
    --rpb-circle-inactive-bg: rgba(255, 255, 255, 0.14);
    --rpb-line-inactive: rgba(255, 193, 243, 0.35);
}

/* ---- 18.22 Reservation flow - Services_Dashboard.cshtml --------------- */
html.a11y-dark-mode {
    --svcdash-gray: #2a2440;
}

/* ---- 18.23 Reservation flow - Show_Business_Member.cshtml ------------- */
html.a11y-dark-mode {
    --sbm-card-back-bg: #2a2440;
    --sbm-card-back-hover-bg: #352d52;
}

/* ---- 18.24 Reservation flow - Show_Services.cshtml --------------------
   Sep 2026: ".card"/".card-approve" (brand-gradient / solid-green fill,
   both with light text) are the established "solid fill, don't
   tokenize" case and are left unchanged in both themes; only the
   inline-styled empty-state text needed a dark value. */
html.a11y-dark-mode {
    --ss-empty-text: #a9a4bd;
}

/* ---- 18.25 Reservation flow - Verification_Success.cshtml -------------
   Sep 2026: card/title surfaces reuse the same dark card background
   (#201c2b) and hairline border/shadow values already established for
   this Reservation flow (see 18.17/18.20 above). ".details-card",
   ".success-icon-wrap", ".exam-info-alert" and ".custom-btn-blue" all
   read "--bs-primary-rgb" as a translucent tint and already adapt for
   free; they need no entry here. "--vs-sms-*" follows the same
   status-pill green conversion used for ".client-badge.client" in
   18.17 (higher-alpha tint + lightened text, since the base #198754
   text would have weak contrast once its background darkens). */
html.a11y-dark-mode {
    --vs-page-title-bg: #201c2b;
    --vs-page-title-shadow: rgba(0, 0, 0, .45);
    --vs-body-gradient-end: rgba(21, 19, 28, .95);
    --vs-success-card-bg: #201c2b;
    --vs-success-card-shadow: rgba(0, 0, 0, .45);
    --vs-success-lead-text: #e7e5ee;
    --vs-detail-row-border: rgba(255, 255, 255, .12);
    --vs-exam-card-shadow: rgba(0, 0, 0, .45);
    --vs-btn-gray-bg: #201c2b;
    --vs-sms-text: #6fdba0;
    --vs-sms-bg: rgba(111, 219, 160, .22);
    --vs-sms-border: rgba(111, 219, 160, .35);
}

/* ---- 18.26 Reservation flow - ReservationLayout.cshtml -----------------
   Sep 2026: the shared REAL document shell for the whole Reservation
   flow - found missing from the batch above only after delivery (the
   user flagged it separately). "--body-color" needed no new entry here
   at all - it already gets a correct dark value from section 18.9
   (MainLayout.cshtml), and this layout's "body" reads that same global
   variable. ".page-header" was switched in the cshtml to read
   "var(--page-header-bg, white)" (also already dark-aware via 18.9)
   instead of a hardcoded "white", so it needs no entry here either.
   ".page-subtitle" now reads "var(--bs-secondary-color, #6c757d)"
   (already dark-aware via section 18.0), same reasoning again.
   The "--calendar-*" tokens below ARE genuinely consumed - confirmed via
   grep that "Get_Free_TimeSlices.cshtml"'s own ".Table-Max-Size" table
   (delivered in the same batch as 18.17-18.25) relies entirely on this
   layout's border/shadow/background rules for that class, so a dark
   value here reaches an already-delivered page, not just a hypothetical
   future one. "--calendar-bg-primary" (a purple/magenta accent used only
   as a decorative gradient-header/ring/hover-border, always paired with
   white text) and "--calendar-text-white"/"--calendar-spot-bg"/
   "--calendar-spot-text" (solid-fill badge + its white text) are the
   established "solid fill / decorative accent, don't tokenize" case and
   are deliberately NOT given dark values. "--calendar-bg-light" and
   "--calendar-table-header-bg"/"--calendar-table-header-border" have no
   confirmed consumer in any file seen so far (declared but apparently
   unread) - left with no dark value for the same reason a page-local
   token never gets a dark value until something is confirmed to render
   it: giving one would be inert either way, and this layout may be
   reused by reservation views this session has not seen. */
html.a11y-dark-mode {
    --calendar-border: rgba(255, 255, 255, 0.14);
    --calendar-hover-bg: rgba(255, 255, 255, 0.08);
    --calendar-today-bg: rgba(143, 134, 217, 0.18);
    --calendar-text-primary: #e7e5ee;
    --calendar-text-light: #a9a4bd;
    --calendar-table-bg: #201c2b;
    --calendar-table-border: rgba(255, 255, 255, 0.14);
    --calendar-table-cell-border: rgba(255, 255, 255, 0.10);
    --calendar-table-shadow: rgba(0, 0, 0, 0.45);
    --rl-page-header-shadow: rgba(0, 0, 0, 0.45);
    --rl-cal-mid-gradient-start: #201c2b;
    --rl-cal-mid-gradient-end: #2a2440;
    --rl-cal-mid-shadow: rgba(0, 0, 0, 0.35);
    --rl-today-gradient-end: rgba(143, 134, 217, 0.10);
}

/* ---- 18.27 History/DateReservations.cshtml ------------------------------
   Sep 2026: this page's own hardcoded colors all read Site.css shared
   variables directly ("--white"/"--light-gray"/"--dark-grey"/"--tab-link-
   color"/"--border-gray") or literal hex - none of those shared variables
   has a dark value anywhere on the site (confirmed by grep), so giving
   them one here would change every OTHER unrelated consumer of those same
   variables site-wide (the established dual-role-variable risk). Routed
   through page-local "--dr-*" tokens instead, one per light-mode value
   this page already used - see the matching ":root" block in
   DateReservations.cshtml's own <style> for the light defaults.
   The 4 status-pill colors reuse this project's already-established
   status palette exactly rather than inventing new ones: green/purple
   match "--today-status-completed-*"/the sidebar's own accent purple
   respectively, gray-neutral matches "--today-status-canceled-*" exactly,
   and amber gets the same higher-alpha/higher-saturation exception this
   dark theme needs for that hue (see "amber/gold is the exception" in
   the main progress doc) - reusing "--today-status-attended-*"'s own
   values rather than re-deriving them. */
html.a11y-dark-mode {
    --dr-card-bg: #201c2b;
    --dr-card-border: rgba(255, 255, 255, 0.12);
    --dr-heading-color: #e7e5ee;
    --dr-chip-bg: rgba(255, 255, 255, 0.06);
    --dr-chip-border: rgba(255, 255, 255, 0.14);
    --dr-chip-label-color: #a9a4bd;
    --dr-chip-value-color: #e7e5ee;
    --dr-thead-bg: #15131c;
    --dr-thead-color: #e7e5ee;
    --dr-loading-color: #a9a4bd;
    --dr-search-icon-color: #a9a4bd;
    --dr-status-attended-bg: rgba(250, 135, 15, 0.45);
    --dr-status-attended-text: #ffb870;
    --dr-status-completed-bg: rgba(111, 219, 160, 0.22);
    --dr-status-completed-text: #6fdba0;
    --dr-status-reserved-bg: rgba(195, 185, 242, 0.22);
    --dr-status-reserved-text: #c3b9f2;
    --dr-status-canceled-bg: rgba(255, 255, 255, 0.10);
    --dr-status-canceled-text: #b8b4c6;
}

    /* ---- 18.28 Manage/Menu.cshtml - ".btn-icon" icon color on the new glass
   tile background --------------------------------------------------------
   Sep 2026, alongside adding ".btn-card" to section 18.5's shared list
   above. Root cause of the reported "gradient in dark mode, unreadable"
   bug, confirmed from Site.css's own rules rather than guessed: ".btn-card"
   is (in the real markup) ALSO a plain Bootstrap ".card", so it already
   picked up section 18.2's generic dark ".card" fix - but that rule only
   sets "background-color", and ".btn-card"'s OWN Site.css rule sets the
   "background" SHORTHAND to a diagonal gradient
   ("linear-gradient(45deg, var(--light-grey) 0%, var(--bg-transparent)
   100%) !important"). A shorthand implicitly resets every sub-property it
   doesn't mention - so this rule ALSO carries an implicit "background-
   image" declaration that section 18.2's "background-color"-only override
   never touches. Net result in dark mode: a dark "background-color" (from
   18.2) with the light-grey-to-transparent diagonal "background-image"
   still painted on top of it, unchanged - opaque light-grey in one corner
   fading to transparent (revealing the dark color) in the other. That is
   the visible "gradient" - not a missing dark value, a shorthand/longhand
   interaction between two DIFFERENT rules touching the same property
   family. Fixed by making ".btn-card" reuse the SAME shared glass-purple
   recipe as ".icon-circle"/".price_div"/etc (section 18.5) instead - that
   rule uses the "background" SHORTHAND too, so it fully replaces the
   gradient (resets "background-image" back to "none") rather than only
   patching "background-color" and leaving the old gradient layered on
   top, per the user's request for a "glassy" look with no gradient.
   This section covers what 18.5's shared recipe does not: ".btn-icon"'s
   own icon color ("--navbar-right", a mid-purple - unrelated to dark mode,
   see the Calendar.cshtml entry in the main progress doc for why) would
   have read almost identically to the new glass background's own purple
   tint, making the icon nearly disappear. Given a near-white text color
   ("#f2f0fa") to match the SAME already-established glass-component
   text color from section 18.5, guaranteeing contrast against the purple
   glass regardless of which icon is used. (The user asked whether the
   sidebar's own accent purple, "#c3b9f2", would fit here instead - that
   color was designed for text sitting directly on the sidebar's plain
   dark panel; on THIS purple-tinted glass surface, section 18.5's own
   paired text color reads more reliably, so it was reused here instead,
   consistent with every other glass-family component on the site.) */
    html.a11y-dark-mode .btn-icon {
        color: #f2f0fa !important;
    }

/* ---- 18.29 Products feature - Products/Index.cshtml, Products/Details.cshtml
   -------------------------------------------------------------------------
   Sep 2026: dark-mode pass for the "Product" feature (Views/Products/*.cshtml
   - Create/Details/Edit/Index - NOT the unrelated, already-completed
   "Project" feature from sections 18.14/18.16 above; the two sound alike in
   English but are separate controllers/models). Create.cshtml and
   Edit.cshtml needed no new tokens at all - both got a breadcrumb only (see
   their own Sep 2026 header comments), and their form controls/alert/save
   button already go dark via this file's existing generic rules, same
   conclusion reached for every other admin form page in this project.

   PART A - Products/Index.cshtml's "--pri-*" table/card tokens.
   Declared on that page's own ":root" (light values), deliberately
   duplicated from the "--pi-*" family rather than reusing it directly (this
   project's standing rule - see section 18.16's own comment for the
   reasoning), because the user explicitly asked for this table to look
   "دقیقا مانند project/index" (exactly like Projects/Index) - so it gets
   the exact same dark values already shipped for "--pi-*" in section 18.16,
   keeping both pages visually identical in both themes.

   PART B - Products/Details.cshtml's "--pd-v3-*" tokens (declared in
   Site.css's own shared ":root", since this page has no page-local
   <style> block of its own - see that ":root"'s Sep 2026 comment).
   This whole "product-details-v3" redesign had zero dark-mode awareness
   before this pass. Three real, reported problems and their fixes:

   1) Carousel image corners looked square despite an 18px "border-radius"
      on ".product-carousel-img-v3". Root cause (confirmed via a Playwright
      before/after render with synthetic landscape + portrait test images,
      not guessed): that element uses "object-fit: contain" inside a fixed
      box, so any image whose aspect ratio doesn't exactly match the box is
      letterboxed with transparent gaps - and a transparent box has nothing
      visible AT its own corners for "border-radius" to clip. This is a
      layout/fit issue, not a light/dark issue, so the real fix (giving the
      image a real "--pd-v3-card" background so the rounding has a surface
      to show against) lives in Site.css itself, not here - this section
      only supplies "--pd-v3-card"'s dark value so that fix also looks
      right once dark mode repaints the page around it.
   2) The "Technical" section's spec card/list (".product-spec-card-v3",
      ".product-spec-list-v3 dt/dd") and the "no image" placeholder
      gradient (".product-empty-image-v3") were still painted with flat
      light-mode literals (translucent white card, light gradient) with no
      theme awareness at all - Site.css now reads them through new
      "--pd-v3-spec-*"/"--pd-v3-empty-bg-*" tokens (light values as their
      "var(..., fallback)" defaults, so light mode is visually unchanged),
      dark values below swap the translucent white card for a translucent
      dark one and the light gradient for a dark one.
   3) The "Related Products" card family (".related-product-card-v3",
      "-image-side-v3", "-detail-icon-v3") had the same kind of flat
      light-mode literals, same fix pattern, new "--pd-v3-related-*"/
      "--pd-v3-icon-circle-bg" tokens.

   "--pd-v3-purple" (read as TEXT/icon color throughout this page, not a
   solid opaque fill, so it does NOT qualify for this project's "solid-fill
   accents don't need tokenizing" exception) is given the SAME purple
   already established and reused for text on this site's other dark
   surfaces (section 18.10's "--management-header-purple-dark", section
   18.11's sidebar text) - "#b3a8e8" - rather than a new one-off shade.
   "--pd-v3-purple-soft"/"--pd-v3-purple-border" follow the same low-alpha
   purple-on-dark convention already established in section 18.16
   ("rgba(143, 134, 217, ...)" - that section's own purple-family base for
   translucent overlays on this dark theme). "--pd-v3-text"/"--pd-v3-muted"
   reuse this project's standard dark body/muted text pair ("#e7e5ee" /
   "#a9a4bd", used identically in sections 18.9/18.15/18.16 etc.).
   "--pd-v3-card" reuses the standard dark card surface ("#201c2b", same
   value as "--management-header-card-bg", "--dt-surface", "--pi-thead-bg"'s
   sibling family) for every "white card on dark" surface this page has.
   "--pd-v3-shadow"/"--pd-v3-soft-shadow"/"--pd-v3-radius-*" are left
   untouched here on purpose - they are decorative box-shadow/radius values,
   not reported as broken in either theme, so giving them dark values would
   be unrequested scope creep rather than a real fix. */
html.a11y-dark-mode {
    --pri-card-border: rgba(255, 255, 255, 0.12);
    --pri-card-shadow: rgba(0, 0, 0, 0.45);
    --pri-thead-bg: #241f33;
    --pri-soft-border: rgba(143, 134, 217, 0.3);
    --pd-v3-purple: #b3a8e8;
    --pd-v3-purple-soft: rgba(143, 134, 217, 0.16);
    --pd-v3-purple-border: rgba(143, 134, 217, 0.35);
    --pd-v3-text: #e7e5ee;
    --pd-v3-muted: #a9a4bd;
    --pd-v3-card: #201c2b;
    --pd-v3-spec-card-bg: rgba(32, 28, 43, 0.82);
    --pd-v3-spec-card-border: rgba(255, 255, 255, 0.12);
    --pd-v3-spec-divider: rgba(255, 255, 255, 0.14);
    --pd-v3-spec-label: #a9a4bd;
    --pd-v3-spec-value: #e7e5ee;
    --pd-v3-empty-bg-start: #241f33;
    --pd-v3-empty-bg-end: #201c2b;
    --pd-v3-related-card-bg: #201c2b;
    --pd-v3-related-card-border: rgba(255, 255, 255, 0.12);
    --pd-v3-related-image-bg: #241f33;
    --pd-v3-icon-circle-bg: #241f33;
}

    /* PART C - ".technical-description-standalone" (Products/Details.cshtml):
   this section renders "@Html.Raw(tech.Technical_Des)" - arbitrary HTML
   typed into a WYSIWYG editor and stored in the database per-product, not
   part of any file this project controls and not inspectable ahead of
   time. The user reported its background still renders light/white in
   dark mode ("متن نوشته شده در قسمت technical بک‌گراند روشن دارد"). The
   likely cause is hardcoded inline "style='background:#fff'"-type
   attributes baked into the stored HTML by whatever editor produced it -
   but since the actual literal color values inside any given product's
   stored content can't be known or enumerated (it varies per product row,
   no live screenshot or DB access available), the usual narrow "attribute-
   selector safety net" technique (matching specific literal color strings,
   see section 18.2b) is too narrow to rely on here. Instead, this treats
   the entire block as plain themed body text: every element inside it
   (the wrapper and all descendants, so nested tags the stored HTML might
   use - div/p/span/table/td/etc - are all covered regardless of their own
   inline styles) gets its background forced transparent and its text
   color forced to this page's themed dark text color. Both declarations
   use "!important" specifically so they outrank a plain (non-"!important")
   inline "style" attribute on the stored elements themselves - the same
   mechanism this project already relies on elsewhere to override literal
   inline/legacy styles. Light mode is untouched (no selector below targets
   it), since the user only reported this as a dark-mode problem. */
    html.a11y-dark-mode .technical-description-standalone,
    html.a11y-dark-mode .technical-description-standalone * {
        background-color: transparent !important;
        background-image: none !important;
        color: var(--pd-v3-text) !important;
    }

/* ---- 18.30 Carousel feature - Carousels/Index.cshtml table/card redesign
   -------------------------------------------------------------------------
   Sep 2026: dark values for Carousels/Index.cshtml's "--cri-*" ("Carousels
   Index") token set - the SAME table/card visual-redesign recipe already
   shipped for Projects/Index.cshtml ("--pi-*", section 18.16) and
   Products/Index.cshtml ("--pri-*", section 18.29), duplicated again under
   its own token names per this project's standing "separate token set per
   page even when the color matches" rule. Values copied verbatim from
   those two sections' own dark values, for the same visual consistency
   across all three list pages in both themes. Carousels/Create.cshtml and
   Carousels/Edit.cshtml needed no new tokens at all - both got a
   breadcrumb only (see their own Sep 2026 header comments), and their
   form controls/alert/save button already go dark via this file's
   existing generic rules, the same conclusion already reached for every
   other admin form page in this project. Carousels/Index.cshtml itself
   does NOT get a breadcrumb (per the user's explicit instruction), so no
   ".management-page-header" work was needed here either - only the
   table/card/search tokens below. The search icon reuses the shared,
   already-dark-value'd "--dt-muted" token (section 18.15) directly, same
   as Projects/Index.cshtml and Products/Index.cshtml - no new icon-color
   token needed. */
html.a11y-dark-mode {
    --cri-card-border: rgba(255, 255, 255, 0.12);
    --cri-card-shadow: rgba(0, 0, 0, 0.45);
    --cri-thead-bg: #241f33;
    --cri-soft-border: rgba(143, 134, 217, 0.3);
}

/* ---- 18.31 Story feature - Story/Index.cshtml table/card redesign
   -------------------------------------------------------------------------
   Sep 2026: dark values for Story/Index.cshtml's "--sti-*" ("Story Index")
   token set - the SAME table/card visual-redesign recipe already shipped
   for Projects/Index.cshtml ("--pi-*", 18.16), Products/Index.cshtml
   ("--pri-*", 18.29) and Carousels/Index.cshtml ("--cri-*", 18.30),
   duplicated a fourth time under its own token names per this project's
   standing "separate token set per page even when the color matches"
   rule. Values copied verbatim from those sections for visual consistency
   across all four list pages in both themes. Story/Create.cshtml,
   Story/CreateMemberStory.cshtml, Story/Edit.cshtml and
   Story/Edit_Mems.cshtml needed no new tokens at all - all four got a
   breadcrumb only (see their own Sep 2026 header comments); their form
   controls/alert/save button/nav-tabs already go dark via this file's
   existing generic rules, the same conclusion reached for every other
   admin form page in this project. Story/Index_mems.cshtml's own table is
   rendered by the shared "dynamic-table.js" component (not a plain
   Bootstrap ".table"), so it is out of scope for this token set - only
   its ".management-page-header" breadcrumb needed anything, already
   covered by the existing shared section 18.10. The search icon on
   Story/Index.cshtml reuses the shared, already-dark-value'd "--dt-muted"
   token (section 18.15) directly, same as every other Index page above -
   no new icon-color token needed. */
html.a11y-dark-mode {
    --sti-card-border: rgba(255, 255, 255, 0.12);
    --sti-card-shadow: rgba(0, 0, 0, 0.45);
    --sti-thead-bg: #241f33;
    --sti-soft-border: rgba(143, 134, 217, 0.3);
}

    /* Sep 2026 CORRECTION to this section's own comment above: "Story/
   Create.cshtml, Story/CreateMemberStory.cshtml, Story/Edit.cshtml and
   Story/Edit_Mems.cshtml needed no new tokens at all... their form
   controls/alert/save button/nav-tabs already go dark via this file's
   existing generic rules" turned out to be INCOMPLETE - all four pages'
   "Dashboard info"/"Body info" section-header rows use ".bg-body-
   secondary", a class this file did not yet cover (fixed in section
   18.2b above, not here - no page-local token needed for it either,
   since it is a shared Bootstrap utility class, not a "--sti-*" token).
   Flagging the correction here rather than silently rewriting the
   original claim, per this project's own established practice for
   session-to-session corrections (see e.g. the Carousels/Index.cshtml
   breadcrumb-reversal entry in the Progress section of the companion
   progress doc). */

    /* ---- 18.32 Story feature - Story/Index.cshtml Status column pill -----
   -------------------------------------------------------------------------
   Sep 2026 follow-up request: the Status column's original "<td class=
   "bg-success-subtle">"/"<td class="bg-warning-subtle">" (a flat pale
   background filling the WHOLE cell) was replaced with a small
   "rounded-pill" "<span>" - colored TEXT carries the status, the
   background is only a pale supportive tint, per the user's explicit
   request. Dark values below follow this project's established
   "status-pill color conversion pattern" (pale opaque bg + saturated
   text in light mode -> low-alpha rgba tint + lightened text in dark
   mode). The "Hidden" pill reuses this project's established amber/gold
   EXCEPTION (see e.g. Confirm_TimeSlice.cshtml/Today.cshtml in the
   companion progress doc): a plain low-alpha amber tint alpha-blends
   into a muddy brown on this site's purple-tinted dark surfaces, so it
   needs a higher alpha + a lighter/more saturated text color than the
   other status families instead of the default low-alpha formula. */
    html.a11y-dark-mode .story-status-show {
        background-color: rgba(111, 219, 160, 0.22) !important;
        color: #6fdba0 !important;
    }

    html.a11y-dark-mode .story-status-hidden {
        background-color: rgba(250, 135, 15, 0.32) !important;
        color: #ffce7a !important;
    }

/* ---- 18.33 Story feature - Story/Index_Mems.cshtml table/card redesign -
   -------------------------------------------------------------------------
   Sep 2026 (follow-up #4): Story/Index_Mems.cshtml was rewritten to stop
   using the third-party "dynamic-table.js" component and instead render
   its table with the same plain, first-party markup Story/Index.cshtml
   uses (per the user's explicit request: "same as Story/Index" - search,
   rounded corners, pagination). This is the dark-mode half of that page's
   own "--smi-*" ("Story Mems Index") token set (light values in that
   file's own <style> block) - an exact duplicate of section 18.31's
   values for "--sti-*" (Story/Index.cshtml), per this project's standing
   "separate token set per page even when the color matches" rule.

   Note: the Status pill CLASSES on this page ("story-status-show"/
   "story-status-hidden") are the same shared classes Story/Index.cshtml
   uses, and are already covered by section 18.32 above (a plain
   class-based rule, not tied to either page's tokens) - no separate pill
   rule is needed here. */
html.a11y-dark-mode {
    --smi-card-border: rgba(255, 255, 255, 0.12);
    --smi-card-shadow: rgba(0, 0, 0, 0.45);
    --smi-thead-bg: #241f33;
    --smi-soft-border: rgba(143, 134, 217, 0.3);
}

    /* ---- 18.34 Public site - shared ".project-card-footer"/".product-card-
   footer" card-footer component (Business_Member/List.cshtml + any other
   consumer) ------------------------------------------------------------
   Sep 2026: reported on Business_Member/List.cshtml ("cards below the
   photo... light in dark mode") - confirmed via grep of Site.css that
   ".project-card-footer" (background:#ffffff, ".card-title" color:#111111)
   and its "--product-footer-*" text tokens have NEVER had a dark value
   anywhere on the site. This class is SHARED (also used by
   Projects/Details.cshtml's related-product cards, previously left
   untouched there as "an intentionally light, theme-independent accent
   card" - see that entry under Progress) - fixing it ONCE here, on the
   shared class itself, benefits every consumer at once, per the user's
   own explicit "reuse general/shared classes instead of new page-specific
   ones" request, and supersedes that earlier "leave it alone" judgment
   now that a real page has reported it as broken. */
    html.a11y-dark-mode .project-card-footer {
        background: #201c2b !important;
    }

        html.a11y-dark-mode .project-card-footer .card-title {
            color: #e7e5ee !important;
        }

        html.a11y-dark-mode .project-card-footer .card-text {
            color: #a9a4bd !important;
        }

html.a11y-dark-mode {
    --product-footer-purple: #b3a8e8;
    --product-footer-text: #a9a4bd;
}

    /* ---- 18.35 Public site - ".row-align-items-center" ("card as button" row,
   used by Story/List.cshtml's + Story/List_mem.cshtml's story-title bar)
   ------------------------------------------------------------------------
   Sep 2026: the user reported the gradient bar under each story title as
   looking bad in BOTH light and dark mode ("نباید زیرش گرادینت داشته
   باشد. سالید باشد نه حالت شیشه‌ای" - should not have a gradient
   underneath, should be solid, not glassy) - this is why it looked wrong
   in EVERY theme: Site.css's own light-mode rule for ".row-align-items-
   center" was itself a diagonal light-gray-to-transparent gradient with no
   dark-mode awareness at all (same "gradient shorthand, not a flat
   background-color" shape already found and fixed once before on
   Manage/Menu.cshtml's ".btn-card" - see that entry under Progress), so it
   rendered the identical washed-out gradient regardless of theme. Fixed at
   the source in Site.css itself (flat "var(--light-gray)", no gradient -
   see that file's own comment) since the LIGHT-mode default needed to
   change, not just a dark-mode override; this dark override handles the
   theme-aware half of that same fix. */
    html.a11y-dark-mode .row-align-items-center {
        background: #241f33 !important;
    }

    /* ---- 18.36 Public site - shared ".tab-card-view-page" wrapper (Story/
   List.cshtml, Story/List_mem.cshtml, and any other page built on this
   same "tab card view" template) -----------------------------------------
   Sep 2026: "black text on black background" reported on Story/List_Mem -
   root cause confirmed via grep, not guessed: Site.css's
   ".tab-card-view-page { color: #111; }" sets a hardcoded near-black text
   color directly on the page's own OUTERMOST content wrapper (the very
   first <div> in both files' markup). Every plain, uncolored descendant
   inside it - the bio "<p>${Res.Description}</p>", the story-title pill
   text inside ".row-align-items-center" (fixed for its BACKGROUND above,
   in section 18.35, but never given its own text color), the ".dark-hover"
   "More..." link - all INHERIT this #111 directly from their nearest
   ancestor with an explicit color, and inheritance stops there: it never
   reaches all the way up to "html.a11y-dark-mode body"'s own dark text
   color fix (section 18.1), because that fix only ever applies to
   elements that don't already have a closer ancestor setting its own
   color - which ".tab-card-view-page" does. This is the text-color
   equivalent of the already-documented ".main-content masking body's
   background" bug (see the Hard constraints section above) - same
   mechanism, applied to "color" and inheritance instead of "background"
   and paint order. Fixed ONCE on this shared wrapper class, per the user's
   own established "fix shared components on the shared class" preference
   - this single rule corrects every one of the un-colored descendants
   above at once via normal inheritance, with no need to chase down each
   one individually. */
    html.a11y-dark-mode .tab-card-view-page {
        color: #e7e5ee !important;
    }

/* ---- 18.37 Translations feature - Translations/Index.cshtml table/card
   redesign ("--tli-*") --------------------------------------------------
   Sep 2026: breadcrumb added + "the table is not nice make it nice with
   border radius" - same recipe already used for Products/Index.cshtml
   ("--pri-*", 18.29), Carousels/Index.cshtml ("--cri-*", 18.30) and
   Story/Index.cshtml ("--sti-*", 18.31), duplicated here under its own
   "--tli-*" ("Translations List Index") token names per this project's
   standing rule that each page keeps its own independently editable
   tokens even when the color matches another page's. The page's own new
   ".tr-glass-btn" buttons are NOT covered here on purpose - that
   translucent rgba(88,73,139,*) fill is deliberately unscoped (applies
   identically in both themes), the same reasoning already used for
   Story/Details.cshtml's glass info-boxes, so it needs no separate dark
   value. */
html.a11y-dark-mode {
    --tli-card-border: rgba(255, 255, 255, .12);
    --tli-card-shadow: rgba(0, 0, 0, .45);
    --tli-thead-bg: #241f33;
    --tli-soft-border: rgba(143, 134, 217, .3);
}