/* ===== UTF-8 Character Encoding Declaration ===== */
/* This @charset rule declares that this CSS file uses UTF-8 encoding */
/* Essential for proper rendering of Persian/Farsi and Arabic text in CSS content */
/* Without this, Unicode characters in CSS (like in ::before/::after content) may display incorrectly */
@charset "UTF-8";


/* Keep Latest Projects nav link color using a CSS variable */
:root {
    --nav-latest-projects-color: var(--hero-brand-color);
}

.navbar .nav-link.nav-latest-projects,
.navbar .nav-link.nav-latest-projects:visited,
.navbar .nav-link.nav-latest-projects:active,
.navbar .nav-link.nav-latest-projects:hover,
.navbar .nav-link.nav-latest-projects:focus {
    color: var(--nav-latest-projects-color) !important;
}
/* ==== Site Theme Colors ==== */
:root {
    /* ==== #16 accordion bg transparent---bs-body-bg==== */
    --bg-transparent: #ffffff00;
    /* ==== #16 --sidebar-bg ====*/

    --sidebar-bg: #f0f0f0;
    --dark-navy: #1a237e;
    --navy-blue: #283593;
    --light-navy: #3949ab;
    --white: #ffffff;
    --golden-mat: #d4af37;
    --light-gold: #f4e4bc;
    --dark-grey: #424242;
    --light-grey: #f5f5f5;
    --black: #000000;
    --light-gray: #f8f9fa;
    --border-gray: #e0e0e0;
    --light-blue: #64b5f6;
    --bright-gold: #FFD700;
    --dark-gold-hover: #b8941f;
    --dark-navy-hover: #1e3a8a;
    /*Nav bar color */
    --navbar-right: #004080;
    --navbar-left: #004080;
    /*Nav bar font color */
    --hero-brand-color: #ffffff;
    --light-pink: #ffc1f3;
    /* Hero Section Colors */
    --hero-bg-gradient-start: #87006d; /*-- Dark Pink--*/
    --hero-bg-gradient-end: #ff7d7d; /*-- Rose Gold --*/
    /* Button Colors */
    --btn-primary-bg: #ffd700;
    --btn-primary-hover-bg: #cacaca;
    --btn-primary-hover-shadow: rgb(0, 0, 1, 0.86);
    --btn-secondary-hover-color: #667eea;
    /* Section Colors */
    --features-bg: #f8f9fa;
    /* Tab Colors */
    --tab-link-color: #6c757d;
    --tab-active-bg: var(--navbar-right);
    --tab-active-color: white;
    --tab-content-border: #dee2e6;
    --captcha-bg-color: #ff7d7d12;
    --captcha-bg-color-txt: #fbd4d458;
    /*===========*/
    --color-price-under-card-bg: #004080;
    --color-price-under-card-txt: #ffffff;
    --color-price-shadow: #36dddd;
    --color-price-btn: #ff0000;
    --card-footer-color: #442f8c;
    --navbar-left-light: #00408024;
}



body {
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--white);
    color: var(--dark-grey);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-gray) !important;
}

/* ======================================================================
   Project-wide mobile/PWA stability fix (requested Sep 2026)
   Purpose: on phones and in-app (PWA) browsers the page was drifting
   left/right when the user swiped, because html/body allowed horizontal
   overscroll/rubber-banding. This locks horizontal movement site-wide
   so the app behaves like a native screen (vertical scroll only), while
   elements that intentionally scroll sideways (e.g. .provider-table-wrap,
   .article-table-wrap) keep working because they manage their own
   overflow-x: auto internally.
   ====================================================================== */
html {
    overflow-x: hidden;
}

body {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

.body_padding_margin {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.card-footer-color {
    color: var(--card-footer-color) !important;
    font-weight: 700 !important;
}

@media(max-width: 1200px) {
    .body_padding_margin {
        padding-top: 30px !important;
        padding-bottom: 80px !important;
    }
}
/* ==== Mirror Border Radius for RTL/LTR ==== */
/* RTL: Curves on top-right and bottom-left */
html[dir="rtl"] .navbar {
    /*border-radius: 0px 100px 0px 100px !important;*/
    border-radius: 0px 0px 0px 0px !important;
}

/* LTR: Mirror to top-left and bottom-right */
html[dir="ltr"] .navbar {
    /*border-radius: 100px 0px 100px 0px !important;*/
    border-radius: 0px 0px 0px 0px !important;
}

/* ==== Navigation Bar Styling ==== */

.navbar {
    background: linear-gradient(135deg,var(--navbar-right) 0%, var(--navbar-left) 100%) !important;
    border-color: var(--dark-navy);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* RTL Navbar Gradient */
[dir="rtl"] .navbar {
    background: linear-gradient(225deg,var(--navbar-right) 0%, var(--navbar-left) 100%) !important;
}

.navbar .navbar-brand {
    color: var(--white) !important;
    font-weight: bold;
    font-size: 1.4em;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

    .navbar .navbar-brand:hover {
        color: var(--white) !important;
        text-decoration: none;
        opacity: 0.8;
    }

.navbar .navbar-nav .nav-link {
    color: var(--hero-brand-color) !important;
    transition: color 0.3s ease;
}

    .navbar .navbar-nav .nav-link:hover {
        color: var(--white) !important;
    }

.navbar .navbar-toggler {
    border-color: var(--white);
}

.navbar .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='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==== Main Content Area ==== */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    min-height: calc(100vh - 200px);
}

.main-content {
    background-color: var(--white);
    /*// padding: 40px 0;*/
    padding: 0px 0;
}

.content-section {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

    .content-section h2 {
        color: var(--dark-navy);
        font-size: 2.5em;
        margin-bottom: 20px;
        font-weight: 300;
    }

    .content-section p {
        color: var(--dark-grey);
        font-size: 1.2em;
        line-height: 1.6;
    }

/* ==== Footer Styling ==== */
.footer {
    background: linear-gradient(135deg, var(--navbar-right) 0%, var(--navbar-left) 100%);
    border-top: 3px solid var(--dark-navy);
    margin-top: 0px;
    padding: 0px 0 20px 0;
    position: relative;
}

/* RTL Footer Gradient */
[dir="rtl"] .footer {
    background: linear-gradient(225deg, var(--navbar-right) 0%, var(--navbar-left) 100%);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-left {
    flex: 1;
    min-width: 300px;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.footer-logo-icon {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    position: relative;
    overflow: hidden;
}

.logo-eye {
    color: white;
    font-size: 20px;
    z-index: 2;
    position: relative;
}

.logo-swoosh {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 4px;
    background: linear-gradient(90deg, var(--golden-mat), var(--light-gold));
    border-radius: 2px;
    z-index: 1;
}

.footer-logo-link,
.footer-logo-link:hover,
.footer-logo-link:focus,
.footer-logo-link:visited,
.footer-logo-link:active {
    color: var(--hero-brand-color);
    text-decoration: none;
}

.footer-logo-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--hero-brand-color);
}

.footer-tagline {
    color: var(--hero-brand-color);
    font-size: 0.9em;
    margin: 5px 0 20px 0;
    font-style: italic;
}

.social-media {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    /*    background-color: var(--navbar-right)!important;*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
    margin-right: 10px;
}

    .social-icon:hover {
        background-color: var(--golden-mat);
        transform: translateY(-2px);
        color: var(--white);
        text-decoration: none;
    }

    .social-icon i {
        font-size: 16px;
    }

.footer-right {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}

.footer-column h4 {
    color: var(--dark-navy);
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-column ul li {
        margin-bottom: 8px;
    }

        .footer-column ul li a {
            color: var(--hero-brand-color);
            text-decoration: none;
            font-size: 0.9em;
            transition: color 0.3s ease;
        }

            .footer-column ul li a:hover {
                color: var(--golden-mat);
                text-decoration: none;
            }

/*@* ==== #10 CRUD Story ====*@*/
/* Specific styling for main footer navigation links */
/*.footer-column a[href*="About"],
.footer-column a[href*="Reservation"],
.footer-column a[href*="Contact"] */

.footer-column {
    /*color: var(--navbar-right) !important;*/
    position: relative;
    z-index: 2;
}

    /*.footer-column a[href*="About"]:hover,
.footer-column a[href*="Reservation"]:hover,
.footer-column a[href*="Contact"]:hover */
    .footer-column:hover {
        background-color: var(--golden-mat);
        transform: translateY(-2px);
        color: var(--white);
        text-decoration: none;
    }

/* Curved background for main footer navigation columns */
/*.footer-column:has(a[href*="About"]),
.footer-column:has(a[href*="Reservation"]),
.footer-column:has(a[href*="Contact"])*/
.footer-column {
    /*background: rgba(255, 255, 255, 0.25);*/
    border-radius: 15px;
    padding: 8px;
    margin: 10px 0;
    backdrop-filter: blur(5px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    /* Center the list items within footer navigation columns */
    /*.footer-column:has(a[href*="About"]) ul,
.footer-column:has(a[href*="Reservation"]) ul,
.footer-column:has(a[href*="Contact"]) ul */
    .footer-column ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        /*.footer-column:has(a[href*="About"]) ul li,
.footer-column:has(a[href*="Reservation"]) ul li,
.footer-column:has(a[href*="Contact"]) ul li */
        .footer-column ul li {
            text-align: center !important;
            width: 100%;
            margin: 0 !important;
            padding: 0 !important;
        }

            /*.footer-column:has(a[href*="About"]) ul li a,
.footer-column:has(a[href*="Reservation"]) ul li a,
.footer-column:has(a[href*="Contact"]) ul li a */
            .footer-column ul li a {
                display: block !important;
                text-align: center !important;
                width: 100%;
            }

/* RTL Support - Keep centered */
/*[dir="rtl"] .footer-column:has(a[href*="About"]) ul,
[dir="rtl"] .footer-column:has(a[href*="Reservation"]) ul,
[dir="rtl"] .footer-column:has(a[href*="Contact"]) ul */
[dir="rtl"] .footer-column ul {
    padding: 0 !important;
    text-align: center !important;
}

    /*[dir="rtl"] .footer-column:has(a[href*="About"]) ul li,
[dir="rtl"] .footer-column:has(a[href*="Reservation"]) ul li,
[dir="rtl"] .footer-column:has(a[href*="Contact"]) ul li */
    [dir="rtl"] .footer-column ul li {
        text-align: center !important;
    }

        /*[dir="rtl"] .footer-column:has(a[href*="About"]) ul li a,
[dir="rtl"] .footer-column:has(a[href*="Reservation"]) ul li a,
[dir="rtl"] .footer-column:has(a[href*="Contact"]) ul li a*/
        [dir="rtl"] .footer-column ul li a {
            text-align: center !important;
        }
/*@* ==== #10 CRUD Story ====*@*/



.footer-bottom-fullwidth {
    width: 100% !important;
    text-align: center !important;
    margin-top: 30px !important;
    padding: 20px 0 !important;
    color: var(--black) !important;
    font-size: 0.85em !important;
    background: inherit;
}

    .footer-bottom-fullwidth p {
        text-align: center !important;
        margin: 0 auto !important;
    }

    .footer-bottom-fullwidth a {
        text-align: center !important;
        justify-content: center !important;
        margin: auto !important;
        flex-direction: row !important;
        display: flex !important;
    }


/* RTL Support for Footer Bottom - Keep centered */
[dir="rtl"] .footer-bottom-fullwidth,
[dir="rtl"] .footer-bottom-fullwidth p {
    text-align: center !important;
}

/* ==== Responsive Design ==== */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 30px;
        justify-content: center;
    }

    .footer-right {
        gap: 30px;
        justify-content: center;
    }

    .social-media {
        justify-content: center;
    }

    .footer-left {
        flex-direction: column;
        display: flex !important;
        justify-content: center !important;
    }

    .footer-logo {
        flex-direction: column;
        display: flex !important;
        justify-content: center !important;
    }

    .footer-tagline {
        display: flex !important;
        justify-content: center !important;
    }
}

/* ==== Override Bootstrap Defaults ==== */
.dl-horizontal dt {
    white-space: normal;
}

input,
select,
textarea {
    max-width: 280px;
}

/* ======================================================================
   Project-wide mobile form-control fix (requested Sep 2026)
   Purpose 1: the rule above (input, select, textarea { max-width: 280px })
   has no media query, so it caps every field's width everywhere,
   including .form-control/.form-select. On phones this stops fields
   from filling their row even when the page sets width: 100%.
   Several pages already patch around this locally (see the Education
   ".am-inline-editor-card" block and ".clinic-inventory-page" block
   below) instead of fixing it once - this block replaces the need for
   further one-off patches on mobile.
   Purpose 2: form-control font-size across the site is under 16px
   (12px globally, and even smaller on some pages). iOS Safari and
   iOS PWA/WebView auto-zoom the whole page when a field smaller than
   16px receives focus. Forcing 16px on mobile only (desktop size is
   untouched) stops that zoom without disabling pinch-zoom for
   accessibility.
   ====================================================================== */
@media (max-width: 767.98px) {
    input,
    select,
    textarea,
    .form-control,
    .form-select {
        max-width: 100% !important;
        font-size: 16px !important;
    }
}

/* ==== Hero Section Styling ==== */
.hero-section {
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--navy-blue) 50%, var(--light-blue) 100%);
    color: var(--white);
    padding: 80px 0;
    text-align: center;
    position: relative;
    /*height: 50vh;*/
    height: 70vh;
    border-radius: 0px !important;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 3.5em;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-brand {
    color: var(--bright-gold);
    font-weight: 300;
}

.hero-tagline {
    font-size: 1.3em;
    margin-bottom: 40px;
    opacity: 0.9;
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-hero {
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: 500;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-block;
}

.btn-hero-primary {
    background-color: var(--navbar-right);
    color: var(--white);
    border: 2px solid var(--navbar-right);
}

    .btn-hero-primary:hover {
        background-color: var(--white);
        color: var(--dark-navy);
        text-decoration: none;
    }

.btn-hero-secondary {
    background-color: var(--navbar-right);
    color: var(--white);
    border: 2px solid var(--navbar-right);
}

    .btn-hero-secondary:hover {
        background-color: var(--golden-mat);
        border-color: var(--golden-mat);
        text-decoration: none;
    }

/* ==== Features Section Styling ==== */
.features-section {
    background-color: var(--white);
    padding: 80px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    text-align: center;
    padding: 30px 20px;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    }

.feature-icon {
    margin-bottom: 20px;
}

.icon-circle {
    width: 60px;
    height: 60px;
    background-color: var(--navbar-left);
    background-image: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 24px;
    color: var(--white);
}

.feature-title {
    color: var(--dark-navy);
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 15px;
}

.feature-description {
    color: var(--dark-grey);
    line-height: 1.6;
}

    .feature-description p {
        margin-bottom: 10px;
    }

/* ==== #Equal-Height Package Cards (v2) ==== */
/* The 3 package cards (home_package section) had different heights        */
/* because each card's height followed its own text length, and the price  */
/* box + booking button landed at a different Y on each card.              */
/*                                                                          */
/* Fix, spelled out end to end so nothing in the chain is left to guess:    */
/*  1) .row stretches all 3 columns to the height of the tallest one.      */
/*  2) .col-md-4 is a flex container so its single .card child can be      */
/*     told to fill that stretched height (width:100% still needed too,    */
/*     because a flex item's main-axis size is NOT "stretch" by default).  */
/*  3) .card / .card-body / .feature-description form an unbroken flex     */
/*     column chain (each flex:1 1 auto) so the full card height actually  */
/*     reaches the innermost content - a single broken link here is what   */
/*     made the previous attempt equalize nothing.                         */
/*  4) min-height:0 on the flex children is required so a flex item is     */
/*     allowed to shrink/grow below its content size; without it Chrome/   */
/*     Firefox refuse to let the inner <ul> take the extra height.         */
/*  5) The <ul> itself becomes a flex column, and the LAST li              */
/*     (li.price_div, i.e. the price box) gets margin-top:auto - this      */
/*     pushes the price box itself flush to the bottom of the now-equal    */
/*     card, so the price box lines up across all 3 cards, not just the    */
/*     button below it.                                                    */
/*  6) The "وقت دهی" button keeps a small fixed margin under the price     */
/*     box (see .features-section .div_goto_arrangement further down),    */
/*     so it follows immediately after and also lines up across all 3.    */
.features-section .row.g-4 {
    align-items: stretch !important;
}

.features-section .col-md-4 {
    display: flex !important;
}

.features-section .card.feature-card-hover {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

    .features-section .card.feature-card-hover > .card-body {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }

.features-section .card-body > .feature-description {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100%;
}

.features-section .feature-description > ul {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

    /* The price box (last li) gets pushed flush to the bottom of the list */
    .features-section .feature-description > ul > li.price_div {
        margin-top: auto !important;
    }
/* ==== #End Equal-Height Package Cards (v2) ==== */

/* ==== #Package Cards Responsive Column Count ==== */
/* >= 1200px  (desktop)                 : 3 cards per row - Bootstrap's own col-md-4 rule (width: 33.333%) already does this, untouched. */
/* 768px - 1199.98px ("زیر 1200", تبلت/لپ‌تاپ کوچک) : 2 cards per row - override col-md-4's width here. */
/* < 768px    (موبایل)                  : 1 card per row - Bootstrap's default full-width column (no col-md-4 rule applies below 768px), untouched. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .features-section .col-md-4 {
        flex: 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
    }
}
/* ==== #End Package Cards Responsive Column Count ==== */

.feature-description ol {
    text-align: left;
    padding-left: 20px;
}

.feature-description li {
    margin-bottom: 5px;
    color: var(--dark-grey);
}

/* ==== Button Styling ==== */
.btn-primary {
    background-color: var(--navy-blue);
    border-color: var(--navy-blue);
}

    .btn-primary:hover {
        background-color: var(--dark-navy);
        border-color: var(--dark-navy);
    }

.btn-secondary {
    background-color: var(--golden-mat);
    border-color: var(--golden-mat);
    color: var(--white);
}

    .btn-secondary:hover {
        background-color: var(--dark-gold-hover);
        border-color: var(--dark-gold-hover);
    }

/* ==== Reservation Button Styling ==== */
.btn-reservation {
    background-color: var(--golden-mat) !important;
    border-color: var(--golden-mat) !important;
    color: var(--white) !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .btn-reservation:hover {
        background-color: var(--dark-gold-hover) !important;
        border-color: var(--dark-gold-hover) !important;
        color: var(--white) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

/* ==== Custom Border Button System ==== */
/* Base button with border - apply to all colored buttons */
.btn-bordered {
    border: 2px solid transparent;
    background-color: transparent;
    color: var(--dark-grey);
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

    /* Hover effect for all bordered buttons - colorful background, white text */
    .btn-bordered:hover {
        color: var(--white) !important;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* Color-specific button classes */
.btn-green {
    border-color: #28a745;
    color: #28a745;
}

    .btn-green:hover {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
    }

.btn-blue {
    border-color: #007bff;
    color: #007bff;
}

    .btn-blue:hover {
        background-color: #007bff !important;
        border-color: #007bff !important;
    }

.btn-gray {
    border-color: #6c757d;
    color: #6c757d;
}

    .btn-gray:hover {
        background-color: #6c757d !important;
        border-color: #6c757d !important;
    }

.btn-red {
    border-color: #dc3545;
    color: #dc3545;
}

    .btn-red:hover {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
    }

.btn-yellow {
    border-color: #ffc107;
    color: #8b6d1f;
}

    .btn-yellow:hover {
        background-color: #ffc107 !important;
        border-color: #ffc107 !important;
        color: #212529 !important;
    }

.btn-purple {
    border-color: #6f42c1;
    color: #6f42c1;
}

    .btn-purple:hover {
        background-color: #6f42c1 !important;
        border-color: #6f42c1 !important;
    }

.btn-teal {
    border-color: #20c997;
    color: #20c997;
}

    .btn-teal:hover {
        background-color: #20c997 !important;
        border-color: #20c997 !important;
    }


/* Form elements font size to match Index table */
.form-control,
.form-group label,
.btn-custom-save,
.btn-custom-success,
.btn-custom-info {
    font-size: 12px;
}

.form-control {
    border-radius: 10px;
    border-color: #d9d9d9;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

.form-group label {
    color: #003366;
    font-weight: 600;
}


/* Custom button styles according to project rules */
.btn-custom-save {
    border: 1px solid #007bff;
    background-color: transparent;
    color: #007bff;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    transition: all 0.3s;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    width: 200px;
}
/* Custom button styles according to project rules */
.btn-custom-save {
    border: 1px solid #007bff;
    background-color: transparent;
    color: #007bff;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    transition: all 0.3s;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    width: 200px;
}


    .btn-custom-save:hover {
        background-color: #007bff;
        color: white;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    }

.btn-custom-success {
    border: 1px solid #28a745;
    background-color: transparent;
    color: #28a745;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    transition: all 0.3s;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    width: 200px;
}

    .btn-custom-success:hover {
        background-color: #28a745;
        color: white;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    }

.btn-custom-info {
    border: 1px solid #17a2b8;
    background-color: transparent;
    color: #17a2b8;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    transition: all 0.3s;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    width: 200px;
}

    .btn-custom-info:hover {
        background-color: #17a2b8;
        color: white;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    }

.btn-container-center {
    text-align: center;
    width: 100%;
}

@media (max-width: 768px) {
    .btn-custom-save,
    .btn-custom-success,
    .btn-custom-info {
        width: 100%;
    }
}
/* ==== Mobile-friendly Login Button Styles ==== */
.navbar-login-btn {
    background: var(--white) !important;
    border: 2px solid var(--white) !important;
    color: var(--white) !important;
    padding: 8px 16px !important;
    border-radius: 40px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

    .navbar-login-btn:hover,
    .navbar-login-btn:focus {
        background-color: var(--black) !important;
        border-color: var(--white) !important;
        color: white !important;
        text-decoration: none !important;
    }

/* ==== Desktop navbar login button ==== */
@media (min-width: 768px) {
    .navbar-login-btn {
        margin-top: 8px !important;
        background: var(--navbar-left) !important;
    }
}

/* ==== Mobile navbar fixes (xs screens) ==== */
/* Language selector remains as dropdown but options are vertical under each other */
/* Login button is wide/full width, all elements centered */
@media (max-width: 767px) {
    .navbar-login-btn {
        margin: 5px auto !important;
        display: block !important;
        text-align: center !important;
        width: 50% !important;
        background: var(--navbar-left) !important;
    }

    /* Ensure the navbar collapse works properly */
    .navbar-collapse {
        max-height: none !important;
        text-align: center !important;
    }

    /* Fix navbar toggle button visibility */
    .navbar-toggler {
        display: block !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
    }

        .navbar-toggler:hover,
        .navbar-toggler:focus {
            background-color: rgba(255,255,255,0.1) !important;
        }

    /* Center navbar navigation items */
    .navbar-nav {
        text-align: center !important;
        width: 100% !important;
    }

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

        .navbar-nav .nav-link {
            display: block !important;
            text-align: center !important;
            padding: 8px 15px !important;
            width: 100% !important;
        }

    /* Language selector dropdown - keep as proper dropdown but ensure vertical options */
    #language-toggle {
        width: 100% !important;
        margin: 5px 0 !important;
        text-align: center !important;
    }

    #languageDropdownToggle {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Ensure dropdown options are vertical (under each other) */
    #languageDropdownMenu {
        min-width: 200px !important;
        text-align: center !important;
    }

        #languageDropdownMenu .dropdown-item {
            display: block !important;
            width: 100% !important;
            text-align: center !important;
            padding: 10px 15px !important;
            margin: 2px 0 !important;
        }

        /* Ensure proper spacing for language selector on mobile */
        /* Consistent flag positioning for all language dropdown items */
        #languageDropdownMenu .flag-icon {
            margin-left: 8px !important;
            margin-right: 0 !important;
        }
}

/* ==== Footer Logo Image Styles ==== */
.footer-logo-img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
}

/* ==== Responsive footer logo ==== */
@media (max-width: 767px) {
    .footer-logo-img {
        width: 35px !important;
        height: 35px !important;
    }
}

/*============================Start RTL Support===========================*/

/* RTL Support for Persian and Arabic languages */
[dir="rtl"] {
    text-align: right;
}

    /* ===== RTL Font Support ===== */
    /* Applies Shabnam font family to all elements in RTL (Right-to-Left) layouts */
    /* Shabnam is specifically designed for Persian/Farsi and Arabic scripts */
    /* Shabnam-FD is the Farsi Digits variant (uses Persian numerals instead of Arabic-Indic) */
    /* Fallback fonts ensure readability if Shabnam fails to load */
    [dir="rtl"] * {
        font-family: 'Shabnam-FD', 'Shabnam', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    }

/* ===== Language-Specific Font Rendering ===== */
/* Ensures proper font rendering for Persian (Fa) and Arabic (Ar) languages */
/* Applied based on html lang attribute set dynamically in _Layout.cshtml */
/* Font smoothing improves text clarity, especially important for complex scripts like Persian/Arabic */
html[lang="Fa"] *,
html[lang="Ar"] * {
    font-family: 'Shabnam-FD','Shabnam', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    -webkit-font-smoothing: antialiased; /* Smooths fonts in WebKit browsers (Chrome, Safari) */
    -moz-osx-font-smoothing: grayscale; /* Smooths fonts in Firefox on macOS */
}

/* ==== Font Awesome Icon Fix - Ensure icons work in all languages ==== */
/* Prevent font-family overrides from affecting Font Awesome icons */
/* This must come after the RTL/Language font rules to override them */

/* Font Awesome Brands (fab / fa-brands) - for Instagram, WhatsApp, Facebook, etc. */
i.fab,
.fab,
i.fa-brands,
.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* Font Awesome Solid (fas) - most common icons.
   NOTE (Sep 2026): the "[class*='fa-']" catch-all below has higher CSS
   specificity than the plain ".fab" rule above it, so without ":not(.fab)"
   it silently won and forced every brand icon (Telegram, WhatsApp,
   Instagram, ...) onto this Solid font too - which has no brand glyphs,
   so they rendered as a broken/missing-glyph box. ":not(.fa-brands)" added
   alongside ":not(.fab)" for the same reason - Manage/Menu.cshtml's
   Instagram card uses FA6's long-form "fa-brands" class (not the "fab"
   shorthand), which this catch-all was still swallowing, leaving that one
   icon blank while every ".fab" icon elsewhere on the site worked. */
i.fas,
.fas,
i[class*="fa-"]:not(.fab):not(.fa-brands),
[class*="fa-"]:not(.fab):not(.fa-brands) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* Font Awesome Regular (far) */
i.far,
.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* RTL Navigation adjustments */
[dir="rtl"] .navbar-nav {
    flex-direction: row-reverse;
}

[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: auto;
}

/* RTL Language selector adjustments */
[dir="rtl"] #language-toggle {
    margin-left: 10px !important;
    margin-right: 0 !important;
}

/* RTL Footer adjustments */
[dir="rtl"] .footer-content {
    flex-direction: row-reverse;
    direction: rtl;
}

[dir="rtl"] .footer-left {
    text-align: right;
    order: 2;
}

[dir="rtl"] .footer-right {
    text-align: right;
    order: 1;
}

[dir="rtl"] .footer-column ul {
    padding-right: 0;
    padding-left: 20px;
}

/* RTL Footer Logo adjustments */
[dir="rtl"] .footer-logo-icon {
    margin-right: 0;
    margin-left: 15px;
}

/* RTL Social Media Icons Fix */
[dir="rtl"] .social-icon {
    margin-right: 0;
    margin-left: 10px;
}

/* Fix FontAwesome icons in ALL languages (RTL and LTR) */
/* Ensure Font Awesome icons display correctly regardless of language */
.social-icon i.fab,
.social-icon i.fas,
.social-icon i.far,
.social-icon i.fa {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* RTL Form adjustments */
[dir="rtl"] .form-control {
    text-align: right;
}

[dir="rtl"] .form-group label {
    text-align: right;
}

/* ==== RTL Dropdown Select Chevron Fix ==== */
/* ==== Moves the chevron/dropdown arrow to the left side in RTL mode for better text readability ==== */
[dir="rtl"] .form-select,
[dir="rtl"] select.form-control {
    text-align: right;
    background-position: left 0.75rem center !important;
    padding-right: 0.75rem !important;
    padding-left: 2.25rem !important;
}

/* RTL Card adjustments */
[dir="rtl"] .card {
    text-align: right;
}

[dir="rtl"] .card-title,
[dir="rtl"] .card-text {
    text-align: right;
}

/* RTL Table adjustments */
[dir="rtl"] table {
    text-align: right;
}

[dir="rtl"] th,
[dir="rtl"] td {
    text-align: right;
}

/* RTL Button adjustments */
[dir="rtl"] .btn {
    text-align: center;
}

/* RTL Bootstrap dropdown adjustments */
[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
}

/* RTL Language dropdown positioning fix */
[dir="rtl"] #languageDropdownMenu.dropdown-menu-start {
    right: auto !important;
    left: 0 !important;
    transform: translateX(0) !important;
}

[dir="ltr"] #languageDropdownMenu.dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) !important;
}

/* RTL Modal adjustments */
[dir="rtl"] .modal {
    text-align: right;
}

[dir="rtl"] .modal-header .close {
    margin: -1rem auto -1rem -1rem;
}

/* RTL Alert adjustments */
[dir="rtl"] .alert {
    text-align: right;
}

.alert {
    position: relative; /* Needed for absolute positioning of the close button */
    padding-right: 30px; /* Make space for the close button */
}

.close-button {
    position: absolute;
    right: 10px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-weight: bold;
    color: inherit; /* Inherit color from parent alert */
    font-size: 1.2em; /* Adjust size as needed */
    line-height: 1;
}

/* If you want to ensure it's visible on both danger and success alerts */
.alert-danger .close-button,
.alert-success .close-button {
    color: inherit;
}

/* RTL Badge adjustments */
[dir="rtl"] .badge {
    text-align: center;
}

/* RTL Pagination adjustments */
[dir="rtl"] .pagination {
    justify-content: flex-end;
}

/* ===== Language Selector Dropdown Styles ===== */
/* Ensures proper font rendering for Persian/Farsi and Arabic text in language dropdown */
#languageDropdownMenu .dropdown-item {
    color: #333 !important;
    background-color: white !important;
    /* Force Shabnam font for proper Persian/Arabic character rendering */
    font-family: 'Shabnam-FD','Shabnam', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 14px !important;
    /* Ensure UTF-8 character rendering */
    unicode-bidi: embed;
    direction: inherit;
}

/* Apply RTL direction for Persian and Arabic language options */
/* Force consistent right-to-left layout for all language dropdown items */
#languageDropdownMenu .dropdown-item {
    direction: rtl !important;
    text-align: center !important;
}

    #languageDropdownMenu .dropdown-item:hover {
        background-color: #f8f9fa !important;
        color: #000 !important;
    }

    #languageDropdownMenu .dropdown-item.active {
        background-color: #e9ecef !important;
        color: #000 !important;
    }

/* RTL Language selector specific styles */
[dir="rtl"] #languageDropdownMenu .dropdown-item {
    text-align: right;
}


/* Ensure dropdown is visible */
.dropdown-menu {
    z-index: 1050 !important;
    position: absolute !important;
}

.navbar .dropdown-menu {
    background-color: white !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.175) !important;
}

/* RTL Navbar adjustments for mobile */
@media (max-width: 991px) {
    [dir="rtl"] .navbar-collapse {
        text-align: right;
    }

    [dir="rtl"] .navbar-nav .nav-item {
        text-align: right;
    }
}

/* ==== RTL Hero Buttons Fix ==== */
/* ==== Ensures hero buttons display correctly in RTL mode with proper borders and readable text ==== */
[dir="rtl"] .btn-hero {
    border: none !important;
    text-align: center !important;
    font-family: 'Shabnam-FD','Shabnam', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

[dir="rtl"] .btn-hero-primary {
    background-color: var(--navbar-right) !important;
    color: var(--white) !important;
    border: 2px solid var(--navbar-right) !important;
    text-decoration: none !important;
}

    [dir="rtl"] .btn-hero-primary:hover {
        background-color: var(--white) !important;
        color: var(--dark-navy) !important;
        border: 2px solid var(--white) !important;
        text-decoration: none !important;
    }

[dir="rtl"] .btn-hero-secondary {
    background-color: var(--navbar-right) !important;
    color: var(--white) !important;
    border: 2px solid var(--navbar-right) !important;
    text-decoration: none !important;
}

    [dir="rtl"] .btn-hero-secondary:hover {
        background-color: var(--golden-mat) !important;
        border-color: var(--golden-mat) !important;
        color: var(--white) !important;
        text-decoration: none !important;
    }

/* ==== Home Page Carousel Styling ==== */
#id_div_Carousel {
    width: 100%;
    margin: 0;
    padding: 0;
}

#homePageCarousel {
    width: 100%;
    height: 50vh;
    margin: 0;
    padding: 0;
}

    #homePageCarousel .carousel-inner {
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    #homePageCarousel .carousel-item {
        height: 100%;
        position: relative;
    }

        #homePageCarousel .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: 16/9;
        }

    #homePageCarousel .carousel-caption {
        background: rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        padding: 20px;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        max-width: 600px;
    }

        #homePageCarousel .carousel-caption h3 {
            color: white;
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 10px;
        }

        #homePageCarousel .carousel-caption p {
            color: white;
            font-size: 1.1rem;
            margin-bottom: 15px;
        }

        #homePageCarousel .carousel-caption .btn {
            background-color: var(--hero-brand-color);
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            font-weight: bold;
        }

    #homePageCarousel .carousel-indicators {
        bottom: 20px;
    }

        #homePageCarousel .carousel-indicators button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            border: none;
            margin: 0 5px;
        }

        #homePageCarousel .carousel-indicators .active {
            background-color: white;
        }

/* RTL Carousel Indicators */
[dir="rtl"] #homePageCarousel .carousel-indicators,
[dir="rtl"] #fullPageCarousel .carousel-indicators {
    direction: ltr; /* Keep indicators left-to-right even in RTL */
}

#homePageCarousel .carousel-control-prev,
#homePageCarousel .carousel-control-next {
    width: 5%;
    opacity: 0.8;
    z-index: 10;
}

    #homePageCarousel .carousel-control-prev:hover,
    #homePageCarousel .carousel-control-next:hover {
        opacity: 1;
    }

/* Ensure proper carousel transitions */
#homePageCarousel .carousel-item {
    transition: transform 0.6s ease-in-out;
}

/* ==== RTL Support for Home Page Carousel ==== */
/* Note: Transform transitions are handled by bootstrap.rtl.css */

[dir="rtl"] #homePageCarousel .carousel-caption {
    text-align: right;
    direction: rtl;
}

/* ==== RTL Support for Full Page Carousel (Hero Section) ==== */
/* Note: Transform transitions are handled by bootstrap.rtl.css */

[dir="rtl"] #fullPageCarousel .Carousel-Relative-Absolute {
    left: auto !important;
    right: 50px !important;
    text-align: right;
}

[dir="rtl"] #fullPageCarousel .carousel_Title,
[dir="rtl"] #fullPageCarousel .carousel_Des {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .carousel-container .hero-buttons {
    direction: rtl;
    flex-direction: row;
}

    [dir="rtl"] .carousel-container .hero-buttons .btn {
        text-align: center;
        direction: rtl;
    }

@media (max-width: 768px) {
    #homePageCarousel {
        height: 40vh;
    }

        #homePageCarousel .carousel-caption {
            width: 90%;
            padding: 15px;
        }

            #homePageCarousel .carousel-caption h3 {
                font-size: 1.5rem;
            }

            #homePageCarousel .carousel-caption p {
                font-size: 1rem;
            }
}

/* ==== RTL Hero Buttons Container ==== */
[dir="rtl"] .hero-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
}

/* ==== RTL Feature Description Ordered List Fix ==== */
/* ==== Removes gap between numbers and text in RTL mode to match LTR appearance ==== */
[dir="rtl"] .feature-description ol {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    list-style-position: inside !important;
    text-align: right !important;
    list-style-type: decimal !important;
}

[dir="rtl"] .feature-description li {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
    display: list-item !important;
    list-style-position: inside !important;
    padding-inline-start: 0 !important;
    margin-inline-start: 0 !important;
}

/*============================End RTL Support===========================*/

/*============================Start Hide item in SM screen size===========================*/
/* Responsive */
@media (max-width: 800px) {


    .Hide-md {
        display: none !important;
    }
}
/* Responsive */
@media (min-width: 801px) {


    .Hide-lg {
        display: none !important;
    }
}
/*============================End Hide item in SM screen size===========================*/

/* ==== Hero Carousel Styling ==== */
.carousel-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* 16:9 aspect ratio */
    overflow: hidden;
    /*border-radius: 173px 0px 173px 0px;*/
    border-radius: 5px 5px 5px 5px;
}

#fullPageCarousel {
    position: relative;
    inset: 0;
    width: 100%;
    height: 100%;
    /*border-radius: 173px 0px 173px 0px;*/
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}

    #fullPageCarousel .carousel-item {
        position: relative; /* needed for the absolutely-positioned text */
        width: 100%;
        height: 100%;
    }

    #fullPageCarousel .Carousel-Relative-Absolute {
        position: absolute !important;
        top: 80% !important;
        left: 50px !important;
        transform: translateY(-30%) !important;
        color: #fff !important;
        font-family: 'AvenirLTStd-Heavy' !important;
        font-weight: 900 !important;
        text-align: left !important;
    }



    #fullPageCarousel .slide-content .carousel_Title {
        font-size: 3rem !important;
        margin-bottom: 1rem !important;
        padding-inline-start: 20px;
        border-radius: 20px;
        background-color: rgb(0, 0, 0, 0.20) !important;
    }

    #fullPageCarousel .slide-content .carousel_Des {
        font-size: 1.5rem !important;
        margin-bottom: 2rem !important;
    }

    #fullPageCarousel .slide-content .btn {
        background-color: var(--hero-brand-color) !important;
        color: white !important;
        border: none !important;
        padding: 12px 24px !important;
        border-radius: 4px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        display: inline-block !important;
    }

    #fullPageCarousel .carousel-inner {
        height: 100% !important;
        /*border-radius: 173px 0px 173px 0px;*/
        border-radius: 5px 5px 5px 5px;
        position: relative;
    }

    #fullPageCarousel .carousel-item img {
        width: 100% !important;
        height: 100% !important;
        /*max-height: none !important;*/
        min-height: 900px !important;
        object-fit: cover !important;
        /*border-radius: 173px 0px 173px 0px;*/
        border-radius: 5px 5px 5px 5px;
        display: flex !important;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        overflow: auto !important;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        padding-top: 43px;
        padding-bottom: 43px;
        flex: 1 1 auto;
    }


    /* Ensure carousel controls are visible and properly positioned */
    #fullPageCarousel .carousel-control-prev,
    #fullPageCarousel .carousel-control-next {
        z-index: 5;
        width: 5%;
        opacity: 0.8;
    }

    /* ======================================================================
   Full Page Carousel Controls - Footer Position
   Purpose:
   Move Bootstrap carousel Previous/Next buttons from the vertical center
   to the footer/bottom area of the carousel.
   Related HTML: _Carousel.cshtml lines 59 and 63
   Related Bootstrap classes: .carousel-control-prev, .carousel-control-next
   ====================================================================== */

    #fullPageCarousel .carousel-control-prev,
    #fullPageCarousel .carousel-control-next {
        top: auto !important;
        bottom: 24px !important;
        width: 56px !important;
        height: 56px !important;
        opacity: 1 !important;
        z-index: 20 !important;
    }

    /* Put Previous button near the left side of carousel footer */
    #fullPageCarousel .carousel-control-prev {
        right: 24px !important;
    }

    /* Put Next button near the right side of carousel footer */
    #fullPageCarousel .carousel-control-next {
        left: 24px !important;
    }

        #fullPageCarousel .carousel-control-prev:hover,
        #fullPageCarousel .carousel-control-next:hover {
            opacity: 1;
            transform: translateY(-1px);
            box-shadow: none;
        }

    #fullPageCarousel .carousel-control-prev-icon {
        background-color: var(--navbar-right, #d81b60) !important;
        border-radius: 103px !important;
        border-top-left-radius: 103px !important;
        border-top-right-radius: 103px !important;
        border-bottom-right-radius: 103px !important;
        border-bottom-left-radius: 103px !important;
        background-image: none !important;
        background-clip: unset !important;
        -webkit-background-clip: unset !important;
        color: rgba(255, 255, 255, 1) !important;
        font-weight: 900 !important;
        font-size: 160px !important;
        line-height: 87.5px !important;
        letter-spacing: 29.5px !important;
        vertical-align: bottom !important;
        text-align: right !important;
        width: 48px !important;
        height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

        #fullPageCarousel .carousel-control-prev-icon::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 40% 40%;
        }

    #fullPageCarousel .carousel-control-next-icon {
        background-color: var(--navbar-right, #d81b60) !important;
        border-radius: 103px !important;
        border-top-left-radius: 103px !important;
        border-top-right-radius: 103px !important;
        border-bottom-right-radius: 103px !important;
        border-bottom-left-radius: 103px !important;
        background-image: none !important;
        background-clip: unset !important;
        -webkit-background-clip: unset !important;
        color: rgba(255, 255, 255, 1) !important;
        font-weight: 900 !important;
        font-size: 160px !important;
        line-height: 87.5px !important;
        letter-spacing: 29.5px !important;
        vertical-align: bottom !important;
        text-align: right !important;
        width: 48px !important;
        height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

        #fullPageCarousel .carousel-control-next-icon::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 40% 40%;
        }

}

/* Style carousel indicators */
#fullPageCarousel .carousel-indicators {
    z-index: 5;
    bottom: 20px;
    display: none !important; /* hide slide indicator dots */
}

    #fullPageCarousel .carousel-indicators button {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        border: none;
        margin: 0 5px;
    }

    #fullPageCarousel .carousel-indicators .active {
        background-color: white;
    }

.carousel-container .hero-buttons {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 20px;
    justify-content: center;
}

@media (max-width: 768px) {
    .carousel-container {
        aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio on mobile */
    }

    #fullPageCarousel .slide-content .carousel_Title {
        font-size: 2rem !important;
    }

    #fullPageCarousel .slide-content .carousel_Des {
        font-size: 1.2rem !important;
    }

    #fullPageCarousel .Carousel-Relative-Absolute {
        left: 20px !important;
        right: 20px !important;
    }

    .carousel-container .hero-buttons {
        bottom: 30px;
        gap: 15px;
    }

        .carousel-container .hero-buttons .btn {
            font-size: 14px !important;
            padding: 10px 20px !important;
        }

    /* RTL Mobile Support */
    [dir="rtl"] #fullPageCarousel .Carousel-Relative-Absolute {
        left: 20px !important;
        right: 20px !important;
        text-align: right;
    }


    [dir="rtl"] #homePageCarousel .carousel-caption {
        text-align: right;
    }
}

/* ====================================================================== */
/* Card as btn                                                            */
/* ====================================================================== */

.row-align-items-center {
    justify-content: center;
    display: flex;
    align-items: center;
    padding-top: 20px;
    /* Sep 2026: was a diagonal gradient, "var(--light-gray) 0% -> #b2b2b228
       100%" - reported by the user as looking bad/glassy in BOTH light and
       dark mode (the story-title bar on Story/List.cshtml/List_mem.cshtml,
       the only known consumer of this class - confirmed via grep, no other
       .cshtml in this session's file set uses it). Changed to a flat,
       solid color per the user's explicit "should be solid, not glassy"
       request - dark-mode value in SitePurple.css section 18.35. */
    background: var(--light-gray) !important;
    border-radius: 15px;
    margin-bottom: 15px !important;
}

.btn-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: transform 0.5s ease;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 14px !important;
    font-weight: 500;
    /* ==== #16 ==== */
    /*background: linear-gradient(45deg, var(--light-gray) 0%,var(--navbar-left) 100%) !important;*/
    background: linear-gradient(45deg, var(--light-grey) 0%,var(--bg-transparent) 100%) !important;
    max-width: 150px !important;
    max-height: 150px !important;
    cursor: pointer !important;
}




    .btn-card:hover {
        transform: translateY(-10px);
        background-color: var(--navbar-right);
        color: var(--golden-mat);
    }

        .btn-card:hover .btn-icon {
            box-shadow: 1px 1px 10px rgba(0,0,0,0.3) !important;
            transition: 1s;
        }

.btn-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navbar-right);
    background-color: transparent;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.2) !important;
}


.btn-card-footer {
    border: none;
    background: none;
    background-color: transparent;
}


/* ====================================================================== */
/* Dynamic Table Styling (Actions / Toolbar)                              */
/* ====================================================================== */
:root {
    --dt-surface: #ffffff;
    --dt-border: #e5e7eb;
    --dt-text: #2c3e50;
    --dt-muted: #6b7280;
    --dt-accent: #0d6efd;
    --dt-accent-strong: #0b5ed7;
    --dt-hover: #f3f4f6;
}

.dt-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    background: var(--dt-surface);
    border: 1px solid var(--dt-border);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.dt-pagesize {
    min-width: 90px;
    max-width: 120px;
}

.dt-actions-container {
    gap: 8px;
    flex-wrap: nowrap;
}

.dt-top-pagination .pagination {
    margin-bottom: 0;
    flex-wrap: nowrap;
}

.custom-dropdown {
    position: relative;
}

.custom-dropdown-toggle {
    background: var(--dt-surface);
    border: 1px solid var(--dt-border);
    border-radius: 10px;
    color: var(--dt-text);
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .custom-dropdown-toggle:hover,
    .custom-dropdown-toggle:focus {
        color: var(--dt-accent);
        border-color: var(--dt-accent);
    }

.custom-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 110%;
    min-width: 200px;
    background: var(--dt-surface);
    border: 1px solid var(--dt-border);
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    z-index: 1000;
}

    .custom-dropdown-menu .dropdown-item {
        padding: 10px 14px;
        color: var(--dt-text);
        transition: all 0.15s ease;
    }

        .custom-dropdown-menu .dropdown-item:hover,
        .custom-dropdown-menu .dropdown-item:focus {
            background: var(--dt-hover);
            color: var(--dt-accent-strong);
        }

    .custom-dropdown-menu .dropdown-divider {
        margin: 6px 0;
        border-top: 1px solid var(--dt-border);
    }

.dt-top-pagination .pagination {
    margin-bottom: 0;
}

/* ---- Shared "dynamic-table.js" component - remove the heavy grid border ----
   Sep 2026: every consumer of dynamic-table.js (AspNetUsers/Index,
   Business_Member_Working_Hours/Index, the History/* pages, ...) passes
   "bordered: true" in its tableConfig, which the script turns into
   Bootstrap's ".table-bordered" class. That class adds a full grid - a
   top/bottom border on every ROW (its own "> :not(caption) > *" rule) PLUS
   a left/right border on every CELL (its "> :not(caption) > * > *" rule) -
   which reads as a thick, ugly box around and through the whole table,
   reported directly by the user ("یک border احمقانه دور تمام جداول").
   First tried zeroing both rules outright, but Bootstrap's own cell rule
   is what ALSO zeroes plain ".table"'s normal per-row bottom-border as a
   side effect of its "0 var(--bs-border-width)" shorthand (top/bottom=0,
   left/right=var) - so a blind "border-width:0" on both left the table
   with literally no line anywhere, not just minus the box. Confirmed via
   an isolated render before landing this. Fixed properly below: the row
   rule is zeroed (no box), and the cell rule is replaced with a
   bottom-only border - back to the exact plain, non-bordered ".table"
   look, applied once here rather than editing the shared dynamic-table.js
   or every page's tableConfig. */
.dynamic-table-fixed.table-bordered > :not(caption) > * {
    border-width: 0;
}

.dynamic-table-fixed.table-bordered > :not(caption) > * > * {
    border-width: 0 0 var(--bs-border-width) 0;
}

/* Custom primary button styling */
.my_primary_btn {
    color: var(--navbar-right) !important;
    border: 2px solid var(--navbar-right) !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}

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

/* Member Description Display - Full Width and Responsive */
.member-description-display {
    width: 100% !important;
    /* min-height: 180px !important;*/
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    background-color: white !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    white-space: pre-wrap !important; /* Preserve line breaks */
    word-wrap: break-word !important;
}

/* Extra small screens (xs) - keep full width */
@media (max-width: 575px) {
    .member-description-display {
        font-size: 13px !important; /* Slightly smaller font on mobile */
        padding: 6px 10px !important;
    }
}

/* Section containers with borders */
.section-container {
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    background-color: #f8f9fa !important;
}

.section-title {
    background-color: var(--navbar-right) !important;
    color: white !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.section-content {
    padding: 20px !important;
    background-color: white !important;
    border-radius: 0 0 8px 8px !important;
}


/* ====================================================================== */
/* Mobile footer                             */
/* ====================================================================== */


/* ==== #16 adjust mobiles size, sync footer and sidebar  min-width:1230px*/
@media (min-width:1230px) {
    .footer .button-group {
        display: none;
    }

    .mobile-footer {
        display: none;
    }
}
/* ==== #16 adjust mobiles size, sync footer and sidebar  max-width: 1230px*/
@media (max-width: 1230px) {

    .footer .button-group {
        background: linear-gradient(135deg,var(--navbar-left) 0%, var(--navbar-right) 100%) !important;
        border-color: var(--dark-navy);
    }

    /* RTL Navbar Gradient */
    [dir="rtl"] .footer .button-group {
        background: linear-gradient(225deg,var(--navbar-left) 0%, var(--navbar-right) 100%) !important;
    }

    .mobile-footer {
        display: flex;
    }

    .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: 10px 10px 10px 10px;
        box-shadow: 0px 0px 10px #000000;
    }


    .footer .btn-middle {
        color: white;
        background: linear-gradient(225deg,var(--navbar-left) 0%, var(--navbar-right) 100%) !important;
        border: none;
        cursor: pointer;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        justify-content: center;
        line-height: 1;
        outline: none !important; /*  ==== Add !important to ensure it overrides other styles  ==== */
        font-size: 20px;
        margin-top: -20px; /*  ==== Adjust distance from other buttons  ==== */
        position: relative;
        /*box-shadow: 2px 2px 5px #000000;*/
    }

    .footer .btn {
        border: none !important;
        cursor: pointer;
        border-radius: 50%;
        /*@* ==== to make home circle btn ==== *@*/
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        outline: hidden !important;
        position: relative;
        flex-direction: column;
        /*@* ==== to add text below btns ==== *@*/
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*@* ==== underline below all footer btns ==== *@*/
    /*    .footer .underlined::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #004080;
    }*/

    /*@*==== to set fa icon in the middle of btn ==== *@*/
    .footer .fa-icon {
        display: inline-block;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*@* ==== Footer Home btn Style: ==== *@ @*to make home button larger than others*@*/
    .footer .fa-lg {
        font-size: 1.22222em;
    }


    /*@* ==== to remove the shadow and outline after clicking on btn ==== *@*/
    .footer .btn:focus {
        outline: none !important;
        box-shadow: none !important; /* ==== Remove any box shadow applied by the browser ==== */
    }

    /*@* ==== to remove the shadow and outline after clicking on btn ==== *@ */
    .footer .btn::-moz-focus-inner {
        border: 0; /* ==== Remove the inner border on Firefox ==== */
        margin: 0 !important;
        padding: 0 !important;
    }

    /*@* ==== to add text under the btn ==== *@ */
    .footer .icon {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        padding-bottom: 1px !important;
        color: var(--hero-brand-color) !important;
    }

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

    .footer .text {
        display: block;
        font-size: 12px;
        font-weight: bold;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--hero-brand-color) !important;
    }

    .footer a .btn:hover {
        transition: 1s;
    }

    .footer * {
        color: var(--hero-brand-color) !important;
    }
}

.footer * {
    color: var(--hero-brand-color) !important;
}

.search-input {
    background-color: var(--white) !important;
    background: var(--white) !important;
}


/*@* ==== all btn border radiuos ==== *@ */
.btn {
    border-radius: 8px !important;
}

.navbar-login-btn {
    border-radius: 8px !important;
}

#fullPageCarousel .carousel-control-next-icon {
    border-radius: 8px !important;
}

#fullPageCarousel .carousel-control-prev-icon {
    border-radius: 8px !important;
}


.footer-column {
    border-radius: 8px !important;
}


/* ===============  Start: Projects/ Story modern tabs and card CSS  ========================*/
/*@* ==== #10 CRUD Story ====*@*/
:root {
    --base-height-v: 40vh;
    --card-gap: 12px;
    --card-padding: 0px;
    --card-inner-padding: 8px;
    --card-shadow: 2px 2px 8px rgba(0, 0, 0, 0.06);
}

.tab-card-view-page {
    color: #111;
}

    .tab-card-view-page .page-kicker {
        font-weight: 300;
        font-size: 14px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .tab-card-view-page .page-title {
        font-weight: 800;
        font-size: clamp(26px, 3vw, 36px);
    }


/* Reusable modern tabs */
.tabs_card_view_modern {
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 12px;
    margin-top: 4px;
}

    .tabs_card_view_modern .nav {
        gap: 12px;
    }

    .tabs_card_view_modern .nav-link {
        position: relative;
        padding: 6px 14px 12px 14px;
        border: none;
        border-radius: 0;
        background: transparent;
        color: #b3b3b3;
        font-size: 1.125rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        transition: color 0.2s ease;
    }

        .tabs_card_view_modern .nav-link::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -11px;
            height: 2px;
            background: transparent;
            transition: background-color 0.2s ease;
        }

        .tabs_card_view_modern .nav-link:hover {
            color: #6c6c6c;
        }

        .tabs_card_view_modern .nav-link.active,
        .tabs_card_view_modern .nav-link.active:focus,
        .tabs_card_view_modern .nav-link.active:hover,
        .tabs_card_view_modern .nav-pills .nav-link.active {
            color: var(--tab-active-color) !important;
            font-weight: 600;
            background: var( --tab-active-bg) !important;
            border-radius: 10px 10px 0 0;
        }

            .tabs_card_view_modern .nav-link.active::after,
            .tabs_card_view_modern .nav-link.active:focus::after,
            .tabs_card_view_modern .nav-link.active:hover::after,
            .tabs_card_view_modern .nav-pills .nav-link.active::after {
                background: #b8b8b8;
            }

.tabs_card_view_hero img {
    width: 100%;
    height: clamp(260px, 55vh, 520px);
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

.tabs_card_view_masonry {
    margin-top: 28px;
}

.tabs_card_view_card {
    padding-left: var(--card-padding);
    padding-right: var(--card-padding);
    margin-bottom: var(--card-gap);
    cursor: pointer;
}

    .tabs_card_view_card .card {
        border: none;
        border-radius: 0;
        box-shadow: none;
        background-color: #fff;
        height: 100%;
        transition: background-color 0.25s ease, transform 0.25s ease;
        min-height: 100%;
        padding: var(--card-inner-padding);
    }

    .tabs_card_view_card .card-body {
        padding: 0;
    }

    .tabs_card_view_card .card-footer {
        background-color: #fff;
        border-top: 0;
        padding: 14px 0 36px 0;
    }

    .tabs_card_view_card .card-title {
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: -0.01em;
        margin: 0;
        color: #111;
        word-break: break-word;
    }

    .tabs_card_view_card .card:hover {
        background-color: transparent;
        transform: translateY(-2px);
    }

    .tabs_card_view_card img {
        width: 100%;
        object-fit: cover;
        display: block;
    }

.tabs_card_view_long-card img {
    aspect-ratio: 4 / 6;
    height: auto;
}

.tabs_card_view_short-card img {
    aspect-ratio: 4 / 4.3;
    height: auto;
}

.tabs_card_view_load-more-wrap .btn-outline-primary-custom {
    border: 1px solid #0d6efd;
    background-color: transparent;
    color: #0d6efd;
    border-radius: 0;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 24px;
    min-width: 180px;
}

    .tabs_card_view_load-more-wrap .btn-outline-primary-custom:hover {
        background-color: #0d6efd;
        color: #fff;
    }

#tabs_card_view_loadingSpinner {
    min-height: 2.5rem;
}

@media (max-width: 992px) {
    .tabs_card_view_card {
        padding-left: 12px;
        padding-right: 12px;
    }

        .tabs_card_view_card .card-title {
            font-size: 1.75rem;
        }
}

@media (max-width: 768px) {
    .tabs_card_view_hero img {
        height: 45vh;
    }

    .tabs_card_view_modern .nav-link {
        font-size: 1rem;
    }
}

@media (max-width: 575px) {
    .tabs_card_view_modern {
        padding-bottom: 8px;
    }

        .tabs_card_view_modern .nav-link {
            font-size: 0.95rem;
            padding: 4px 10px 10px 10px;
        }

    .tabs_card_view_card {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 8px;
    }

        .tabs_card_view_card .card {
            padding: var(--card-inner-padding);
        }
}

.cursor-pointer {
    cursor: pointer !important;
}

/*for only one image on each row, not for the cards*/
.row_imges_container img {
    /*transition define the length of action on hover*/
    transition: transform 0.4s ease, box-shadow 0.4s ease !important; /* Smooth transition */
    border-radius: 10px 90px !important;
    /* Ensures the image covers the area without distortion */
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
}
    /* Image hover: make shaow and a bit larger=scale(1.05) */
    .row_imges_container img:hover {
        transform: scale(1.05) !important; /* Slightly zoom in */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Add a subtle shadow */
        z-index: 1 !important; /* Bring the hovered image to the front */
    }

/* Image Container */
/* Limit the height to 50% of the viewport height */
/*hidden over folow in case the container is small*/
.row_imges_container {
    overflow: hidden !important;
    max-height: var(--base-height-v) !important; /* Limit the height to 50% of the viewport height */
}

/* hover action make it darker with padding in 0.5 sec */
.dark-hover {
    transition: 1s ease !important; /* Smooth transition */
}

    .dark-hover:hover {
        /*transform:rotate(90deg) !important;*/ /* Slightly zoom in */
        border-radius: 20px !important;
        padding: 10px !important;
        box-shadow: 5px 4px 8px rgba(0, 0, 0, 0.2) !important; /* Add a subtle shadow */
        z-index: 1 !important; /* Bring the hovered image to the front */
    }
/* ==== #10 story carousel ====*/
.story-carousel-img {
    overflow: hidden !important;
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    max-height: 50vh !important;
    /*min-height: 79vh !important;*/
    border-radius: 10px !important;
}

.story-status {
    display: inline-block;
    /* min-width: 105px;*/
    /*padding: 4px 10px;*/
    padding: 4px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.story-status-danger {
    background: #dc3545;
}

.story-status-warning {
    background: #fd7e14;
}

.story-status-success {
    background: #198754;
}
/* =====Top image full page part 1/2 ===== */
.item_detail.top_IMG_Fullpage {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
}
/* =====Top image full page part 2/2 ===== */
.top_IMG_Fullpage img {
    overflow: hidden !important;
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100vh !important;
    /*min-height: 79vh !important;*/
    border-radius: 10px !important;
}
/* =====item_detail main title ===== */
.item_detail.top_IMG_Fullpage .item_detail_overlay_text {
    /* position:absolute !important;*/
    /*    top: 30% !important;*/
    /*    left: 10% !important;
    right: 10% !important;*/
    /*   transform: translateY(-50%) !important;*/
    color: var(--white) !important;
    font-weight: 900 !important;
}

    .item_detail.top_IMG_Fullpage .item_detail_overlay_text .item_detail_topimg_line2 {
        font-size: 25px !important;
        background-color: rgb(8 8 8 / 0.4);
        padding-right: 50px !important;
        padding-left: 50px !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        text-align: center !important;
        border-radius: 18px !important;
        /* Sep 2026: the title used to stretch edge-to-edge (no side margin),
           so the border-radius above was practically invisible - the pill
           touched both screen edges and just looked like a flat bar. Adding
           a percentage-based side margin pulls it in from the edges (scales
           with viewport instead of a fixed px gap) so the rounded corners
           and shadow are actually visible, and bumping the radius from
           10px to 18px makes the rounding read clearly at this size. */
        margin: 16px 5% !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    }

/*used for: Stories images and spinner of admin dash */
.item-centre {
    display: flex;
    justify-content: center;
    text-align: center;
    vertical-align: central;
}

.item_detail.top_IMG_Fullpage .item_detail_overlay_text .item_detail_topimg_line3 {
    font-size: 15px !important;
    background-color: rgb(8 8 8 / 0.6);
    border-radius: 10px !important;
}
/*-------------------------------------Story main title-----------------------------------*/
/* Medium screens */
@media (max-width: 1200px) {

    .item_detail.top_IMG_Fullpage .item_detail_overlay_text .item_detail_topimg_line2 {
        font-size: 25px !important;
    }
    /*-------------------------------------adjusting position of title-----------------------------------*/
    .item_detail.top_IMG_Fullpage .item_detail_overlay_text {
        left: 8% !important;
        right: 8% !important;
    }
}

/* Small screens */
@media (max-width: 620px) {

    .item_detail.top_IMG_Fullpage .item_detail_overlay_text .item_detail_topimg_line2 {
        font-size: 19px !important;
    }
    /*-------------------------------------adjusting position of title-----------------------------------*/
    .item_detail.top_IMG_Fullpage .item_detail_overlay_text {
        left: 6% !important;
        right: 6% !important;
    }
}

/*  ------------------------------Line of story attributes---------------------------*/
.item_detail_topimg_line3 {
    background-color: rgb(8 8 8 / 0.6);
    padding-top: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-bottom: 2px !important;
}

    /*  ------------------------------Line of value of attributes---------------------------*/
    .item_detail_topimg_line3 .line-3-value {
        font-weight: 100 !important;
        white-space: nowrap !important; /* Prevent text wrapping */
        flex-shrink: 0 !important; /* Prevent the column from shrinking */
    }

/*--------------------------------- Flexbox layout for the row of attributes ----------*/
/*---------------------------------do not wrap if value is long, push the div to the next row-----------*/
.item_detail .row-flex {
    padding-top: 30px !important;
    display: flex !important; /* Use flexbox for the row */
    flex-wrap: wrap !important; /* Allow wrapping of columns if they don't fit */
    align-items: center !important; /* Align items vertically */
}

    /* Ensure columns behave correctly in the flex container */
    .item_detail .row-flex > div {
        flex: 1 1 auto !important; /* Allow columns to grow and shrink as needed */
    }

/*--------------------------------image container parent, to make position absolute for the title*/
.item-detail-body-image {
    /*   position: relative !important;*/
}

    .item-detail-body-image img {
        overflow: hidden !important;
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
        max-height: 100vh !important;
        /* aspect-ratio: 16/9!important;*/
        /*       min-height: 99vh !important;*/
        border-radius: 10px !important;
    }

.item-detail-body-image-title {
    /*  position:absolute !important;*/
    /*    top: 10px !important;
    left: 0px !important;*/
    color: white !important;
    background-color: rgb(1 1 1 / 0.76) !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
    font-size: 12px !important;
}


/*@* ==== #10 CRUD Story ====*@*/
/* =============== End: Projects/ Story modern tabs and card CSS ========================*/





/*@* ==== #16 mobile responsive remove padding fit size ====*@*/
.menu-card-centre {
    min-width: 150px !important;
    min-height: 119px !important;
}
/* ==== #16 remove accordin background====*/
.accordion {
    --bs-accordion-bg: var(--bg-transparent);
}

.accordion-item {
    cursor: pointer !important;
    border: none !important;
}


.accordion-body {
    padding: 0px !important;
    cursor: pointer !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--sidebar-selected-bg-color) !important;
}
/*@* ==== #16 mobile responsive remove padding fit size ====*@*/



/*@* ==== #18 Calendar start ====*@*/

:root {
    /* Base Colors */
    --primary-color: #000000;
    --secondary-color: #1a237e;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --body-color: #f5f7fa;
    /* Font Sizes */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --online-reservation-title-size: 24px;
    --service-operator-name-size: 17px;
    --selected-service-title-size: 20px;
    --selected-operator-title-size: 20px;
    /* Calendar Specific Colors */
    --calendar-bg-primary: #87006d;
    --calendar-bg-light: #ff7d7d;
    --calendar-text-primary: #004080;
    --calendar-text-light: #6c757d;
    --calendar-text-white: #ffffff;
    --calendar-border: #dee2e6;
    --calendar-hover-bg: #f8f9fa;
    --calendar-today-bg: #e9ecef;
    --calendar-spot-bg: #dc3545;
    --calendar-spot-text: #ffffff;
    /* Calendar Table Styling */
    --calendar-table-bg: #ffffff;
    --calendar-table-border: #e9ecef;
    --calendar-table-header-bg: #f8f9fa;
    --calendar-table-header-border: #dee2e6;
    --calendar-table-cell-border: #f1f3f4;
    --calendar-table-shadow: rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Shabnam-FD',Shabnam,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--body-color);
}

/* Main Content - Full width since no sidebar */
.main-content {
    /*margin-top: 120px;*/
    margin-top: 80px;
    min-height: calc(100vh - 80px);
    background: #f5f7fa;
}

.content-wrapper {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}


.page-title {
    font-size: clamp(1.1rem, 1.6vw, 1.9rem);
    font-weight: 500;
    line-height: 1.15;
    color: #2d3748;
    margin-bottom: 12px;
}

.page-subtitle {
    color: #6c757d;
    font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /*@* ==== #16 ==== *@*/
    .content-wrapper {
        padding: 0rem;
    }

    .page-header {
        padding: 1.5rem;
    }
}

/* RTL Support */
html[dir="rtl"] .navbar {
    overflow: visible !important;
}

#languageDropdownMenu {
    z-index: 9999;
}

/* ==== Progress Bar Spacing ==== */
#ID_Reservation_Progress_Bar {
    margin-bottom: 0.5rem !important;
}

    #ID_Reservation_Progress_Bar .table-container {
        margin-bottom: 0.5rem !important;
    }

    #ID_Reservation_Progress_Bar .centered-table {
        margin-bottom: 0 !important;
    }

    /* ==== Horizontal Rule under Progress Bar ==== */
    #ID_Reservation_Progress_Bar + hr {
        margin: 1rem 0;
        border: 0;
        border-top: 1px solid var(--calendar-border);
        opacity: 0.5;
    }

/* ==== Calendar Mobile Styles ==== */

/* Calendar container centering */
.Calendar-container-middle-screen {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin: 0.5rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Reduce gap between progress bar and calendar */
#ID_Reservation_Progress_Bar + * .Calendar-container-middle-screen,
#ID_Reservation_Progress_Bar ~ * .Calendar-container-middle-screen {
    margin-top: 0.5rem !important;
}

/* Calendar table max size and styling */
.Table-Max-Size {
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 4px 20px var(--calendar-table-shadow);
    overflow: hidden;
    border: 1px solid var(--calendar-table-border);
}

/* Calendar navigation header styling (month/year navigation above calendar) */
.calendar-nav-header {
    background: linear-gradient(135deg, var(--navbar-left) 0%, var(--navbar-right) 100%) !important;
    color: var(--calendar-text-white) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    /* Force dark blue background - override any inline styles */
    .calendar-nav-header,
    .calendar-nav-header table {
        background: linear-gradient(135deg,var(--navbar-right) 0%, var(--navbar-left) 100%) !important;
    }

        .calendar-nav-header tbody {
            background: transparent !important;
        }

            .calendar-nav-header tbody tr {
                background: transparent !important;
            }

            .calendar-nav-header tbody td {
                border: none !important;
                padding: 10px 12px;
                font-weight: 600;
                font-size: var(--font-size-sm);
                color: var(--calendar-text-white) !important;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
                background: transparent !important;
            }

        /* Override any opacity classes inside navigation header */
        .calendar-nav-header .opacity-75,
        .calendar-nav-header .opacity-50,
        .calendar-nav-header .opacity-25 {
            opacity: 1 !important;
            color: var(--calendar-text-white) !important;
        }

        /* Ensure all text and divs inside navigation header are white */
        .calendar-nav-header tbody td,
        .calendar-nav-header tbody td *,
        .calendar-nav-header tbody td div,
        .calendar-nav-header tbody td span,
        .calendar-nav-header tbody td p {
            color: var(--calendar-text-white) !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

            /* Remove any white backgrounds from divs inside navigation header */
            .calendar-nav-header tbody td div {
                background: transparent !important;
            }

        .calendar-nav-header td a {
            color: var(--calendar-text-white) !important;
            text-decoration: none !important;
        }

            .calendar-nav-header td a:hover {
                color: rgba(255, 255, 255, 0.9) !important;
            }

            .calendar-nav-header td a i {
                color: var(--calendar-text-white) !important;
            }

        /* Today button special styling */
        .calendar-nav-header #id_today {
            background: rgba(255, 255, 255, 0.15) !important;
            border: 2px solid rgba(255, 255, 255, 0.4) !important;
            border-radius: 6px;
            margin: 0 4px;
            transition: all 0.2s ease;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
            position: relative;
        }

            .calendar-nav-header #id_today::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
                border-radius: 4px;
                pointer-events: none;
            }

            .calendar-nav-header #id_today:hover {
                background: rgba(255, 255, 255, 0.25) !important;
                border-color: rgba(255, 255, 255, 0.6) !important;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.2);
            }

/* Calendar table header styling */
.Table-Max-Size thead {
    background: linear-gradient(135deg, var(--calendar-bg-primary) 0%, var(--calendar-bg-primary) 50%, #0056b3 100%);
    color: var(--calendar-text-white);
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

    .Table-Max-Size thead th {
        border: none !important;
        padding: 14px 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: var(--font-size-sm);
        color: var(--calendar-text-white) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        position: relative;
    }

        .Table-Max-Size thead th:last-child {
            border-right: none;
        }

/* Calendar table body styling */
.Table-Max-Size tbody {
    background: var(--calendar-table-bg);
}

    .Table-Max-Size tbody td {
        border: 1px solid var(--calendar-table-cell-border) !important;
        padding: 8px 4px;
        position: relative;
        transition: all 0.2s ease;
        height: 50px;
        vertical-align: top;
    }

/* Today cell highlight */
.today {
    background: linear-gradient(135deg, var(--calendar-today-bg) 0%, #f0f8ff 100%) !important;
    box-shadow: inset 0 0 0 2px var(--calendar-bg-primary) !important;
    position: relative !important;
}

    .today::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 64, 128, 0.05);
        pointer-events: none;
    }

/* Cell hover effects */
.cell-Hover td:hover {
    background: var(--calendar-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--calendar-bg-primary) !important;
}

/* Clickable cell cursor and positioning for absolute child elements */
.clickable-cell {
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

    .clickable-cell:hover {
        background: rgba(0, 64, 128, 0.02);
    }

/* Hidden text utility */
.text-hide {
    display: none !important;
}

/* Center item utility */
.item-centre {
    display: flex;
    justify-content: center;
    text-align: center;
    vertical-align: central;
}

/* Persian calendar specific styles */
.P_bold {
    font-weight: bold !important;
    font-size: var(--font-size-base) !important;
    color: var(--calendar-text-primary);
    display: block;
    text-align: center;
    margin-bottom: 2px;
}

/* Persian day positioning in RTL */
html[dir="rtl"] .P_bold {
    font-family: 'Shabnam-FD', Shabnam, Arial, sans-serif !important;
    color: var(--calendar-text-primary);
}

/* Gregorian date light styling */
.G_Light {
    color: var(--calendar-text-light) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: normal !important;
    position: absolute;
    bottom: 2px;
    right: 2px;
}

/* Badge location positioning */
.Badg-Location {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Spot badge styling for available slots */
.Badg-style {
    font-family: 'Shabnam-FD',Shabnam, Arial, sans-serif !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
    font-weight: bold !important;
    color: var(--calendar-spot-text) !important;
    background: linear-gradient(135deg, var(--calendar-spot-bg) 0%, #c82333 100%) !important;
    border: 2px solid var(--calendar-text-white) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin: 0px 4px 0px 0px !important;
    border-radius: 50% !important;
    text-align: center !important;
    padding: 0px !important;
    position: absolute;
    top: -2px;
    left: 2px;
    z-index: 15;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}

/* RTL adjustments for badges */
html[dir="rtl"] .Badg-style {
    margin: 0px 0px 0px 4px !important;
    left: auto;
    right: 2px;
}

/* Regular day numbers styling */
.day {
    font-size: var(--font-size-base);
    color: var(--calendar-text-primary);
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* English calendar day styling */
html[dir="ltr"] .day {
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* Responsive design for mobile */
@media (max-width: 576px) {
    .Table-Max-Size {
        max-width: 100%;
        margin: 0 10px;
    }

        .Table-Max-Size thead th {
            padding: 8px 4px;
            font-size: 11px;
        }

        .Table-Max-Size tbody td {
            padding: 6px 2px;
            height: 45px;
        }

    .Calendar-container-middle-screen {
        padding: 0.5rem;
    }

    .Badg-style {
        width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
    }
}

/* Gregorian date light styling - positioned in bottom right of td cell */
.G_Light {
    color: var(--calendar-text-light) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: normal !important;
    position: absolute;
    bottom: 2px;
    right: 2px;
    z-index: 5;
}

/* Remove underlines from calendar links */
.Calendar-container-middle-screen a,
.Calendar-container-middle-screen a:hover,
.Calendar-container-middle-screen a:focus,
.Calendar-container-middle-screen a:active {
    text-decoration: none !important;
    color: inherit !important;
}

/* Persian digits font for Farsi language */
html[dir="rtl"] {
    font-family: 'Shabnam-FD',Shabnam, Arial, sans-serif !important;
}

    /* Ensure Persian digits are used in calendar cells for Farsi */
    html[dir="rtl"] .clickable-cell,
    html[dir="rtl"] .P_bold,
    html[dir="rtl"] .Badg-style {
        font-family: 'Shabnam-FD',Shabnam, Arial, sans-serif !important;
    }

    html[dir="rtl"] .G_Light {
        font-family: Arial, sans-serif !important;
    }

html[dir="ltr"] * {
    font-family: 'Shabnam-FD',Shabnam,Arial, sans-serif !important;
}

/* ==== Font Awesome Icon Fix - Ensure icons work in all languages ==== */
/* Prevent font-family overrides from affecting Font Awesome icons.
   NOTE (Sep 2026): ".fab" (brand icons - Telegram, WhatsApp, Instagram,
   Twitter, GitHub, Pinterest, LinkedIn, ...) used to be lumped in here
   with the Solid icons below. Brand glyphs don't exist in the Solid font,
   so every .fab icon rendered as a broken/missing-glyph box. Brand icons
   are handled by their own correct rule earlier in this file (search
   "Font Awesome Brands"); they must stay out of this Solid-only list.
   Sep 2026 (2nd pass): this catch-all's "[class*='fa-']:not(.fab)" was
   STILL more specific ((0,2,1)) than the brands rule's "i.fa-brands"
   ((0,1,1)) earlier in this file, so it kept winning and forcing FA6's
   long-form "fa-brands" icons (e.g. Manage/Menu.cshtml's Instagram card)
   onto this Solid font too - the same bug as ".fab", just missed here
   the first time because this is a SEPARATE, duplicate copy of the "Font
   Awesome Icon Fix" block (search this comment title) rather than the
   same one. ":not(.fa-brands)" added alongside ":not(.fab)" for the same
   reason as the earlier block. */
i[class*="fa-"]:not(.fab):not(.fa-brands),
.fa,
.fas,
.far,
[class*="fa-"]:not(.fab):not(.fa-brands) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* Specifically fix progress bar icons */
.circle i,
.circle [class*="fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* ==== RTL Navbar Gradient Support ==== */
/* Reverse gradient direction AND color order for RTL languages */
html[dir="rtl"] .navbar {
    background: linear-gradient(135deg, var(--navbar-left) 0%, var(--navbar-right) 100%) !important;
}

html[dir="ltr"] .navbar {
    background: linear-gradient(135deg, var(--navbar-right) 0%, var(--navbar-left) 100%) !important;
}

/* ==== Fix Card Text Alignment - Force Center Alignment ==== */
/* Override RTL text-align: right from Site.css to keep cards centered */
.card,
.card-text,
.card-title,
[dir="rtl"] .card,
[dir="rtl"] .card-text,
[dir="rtl"] .card-title {
    text-align: center !important;
}

/* Ensure all card containers maintain centered alignment */
.card-container,
.Member-card-container,
[dir="rtl"] .card-container,
[dir="rtl"] .Member-card-container {
    text-align: center !important;
}


/* More specific selector */
.modal {
    padding-right: 0px !important;
}

/*bg of clicked cell of the calendar table*/
.td_clicked {
    background-color: rgba(0,0,0,0.2) !important;
}

/*@* ==== #18 Calendar end ====*@*/

/*@* ==== home - price selction ====*@*/
.price_div {
    background-color: var(--color-price-under-card-bg) !important;
    color: var(--color-price-under-card-txt) !important;
    padding: 15px !important;
    box-shadow: 5px 5px 5px var(--color-price-shadow);
    border-radius: 5px !important;
}

    .price_div strong {
        padding: 30px !important;
    }

.div_goto_arrangement {
    margin-top: 15px !important;
}

/* Inside the equal-height package cards, the price box (li.price_div, see the
   #Equal-Height Package Cards block above) is already pushed to the bottom
   of the card. The button just needs its normal small gap right under it -
   NOT margin-top:auto here, otherwise the button (not the price box) would
   be the only thing bottom-aligned and the price boxes would stay uneven. */
.features-section .div_goto_arrangement {
    margin-top: 15px !important;
    flex: 0 0 auto !important;
}

.btn_goto_arrangement {
    padding: 5px !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    background-color: var(--navbar-right);
    color: white;
    box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.30);
}

    .btn_goto_arrangement:hover {
        padding: 5px !important;
        text-decoration: none !important;
        border-radius: 13px !important;
        background-color: white;
        color: black;
        box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.40);
    }
/*@* ==== home - price selction ====*@*/


/* ====================================================================== */
/* Exam Question Dashboard - Bootstrap 5.3 compatible                     */
/* Purpose: Dashboard UI for ExExam/Question.cshtml                       */
/* Notes:                                                                 */
/* - Keep this section in Site.css.                                       */
/* - No inline CSS is required in Question.cshtml.                        */
/* - Class prefix eqd = Exam Question Dashboard.                          */
/* - Supports RTL Persian layout and responsive mobile layout.            */
/* ====================================================================== */

:root {
    --eqd-page-bg: #f6f8fb;
    --eqd-card-bg: #ffffff;
    --eqd-border: #e5e7eb;
    --eqd-text: #111827;
    --eqd-muted: #6b7280;
    --eqd-primary: #0d6efd;
    --eqd-primary-dark: #0b5ed7;
    --eqd-success: #16a34a;
    --eqd-warning: #f59e0b;
    --eqd-danger: #dc2626;
    --eqd-neutral: #f3f4f6;
    --eqd-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    --eqd-radius-lg: 18px;
    --eqd-radius-xl: 22px;
}

.exam-question-dashboard {
    background: var(--eqd-page-bg);
    color: var(--eqd-text);
    min-height: 100vh;
    padding: 18px;
    direction: rtl;
}

    .exam-question-dashboard .card {
        border-radius: var(--eqd-radius-xl) !important;
        background: var(--eqd-card-bg);
    }

.eqd-topbar {
    margin-bottom: 18px;
}

.eqd-topbar-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 82px;
}

.eqd-topbar-title-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.eqd-topbar-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid #dbeafe;
    color: var(--eqd-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #eff6ff;
}

.eqd-exam-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    color: var(--eqd-text);
}

.eqd-exam-subtitle {
    margin-top: 4px;
    color: var(--eqd-muted);
    font-size: 13px;
    font-weight: 600;
}

.eqd-timer-block {
    text-align: center;
    min-width: 140px;
}

.eqd-timer-label {
    color: var(--eqd-muted);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.eqd-timer-value {
    color: var(--eqd-text);
    font-size: 20px;
    font-weight: 800;
    direction: ltr;
}

.eqd-exit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    min-width: 150px;
    border-radius: 12px;
    border: 1px solid #fecaca;
    color: var(--eqd-danger) !important;
    background: #fff;
    font-weight: 800;
    text-decoration: none !important;
    transition: 0.2s ease;
}

    .eqd-exit-btn:hover {
        background: #fef2f2;
        transform: translateY(-1px);
    }

.eqd-sidebar {
    position: sticky;
    top: 16px;
    min-height: 720px;
}

.eqd-sidebar-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--eqd-text);
    text-align: center;
    margin-bottom: 18px;
}

.eqd-question-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 0 22px 0;
}

    .eqd-question-rail::before {
        content: "";
        position: absolute;
        top: 20px;
        bottom: 25px;
        width: 2px;
        background: #d1d5db;
        z-index: 0;
    }

.eqd-question-node {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.eqd-question-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    transition: 0.2s ease;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08);
}

.eqd-question-node:hover .eqd-question-circle {
    transform: scale(1.08);
}

.eqd-question-node.is-current .eqd-question-circle {
    background: var(--eqd-primary);
    border-color: var(--eqd-primary);
    color: #ffffff;
    box-shadow: 0 0 0 5px rgba(13, 110, 253, 0.12);
}

.eqd-question-node.is-answered .eqd-question-circle {
    background: var(--eqd-success);
    border-color: var(--eqd-success);
    color: #ffffff;
}

.eqd-question-node.is-visited .eqd-question-circle {
    background: #ffffff;
    border-color: var(--eqd-warning);
    color: var(--eqd-warning);
}

.eqd-question-node.is-delayed .eqd-question-circle {
    background: #ffffff;
    border-color: var(--eqd-danger);
    color: var(--eqd-danger);
}

.eqd-question-node.is-not-visited .eqd-question-circle {
    background: #ffffff;
    border-color: #d1d5db;
    color: #4b5563;
}

.eqd-legend {
    border-top: 1px solid var(--eqd-border);
    padding-top: 14px;
    margin-top: 8px;
}

.eqd-legend-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.eqd-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 10px;
}

    .eqd-legend-dot.is-answered {
        background: var(--eqd-success);
    }

    .eqd-legend-dot.is-current {
        background: var(--eqd-primary);
    }

    .eqd-legend-dot.is-visited {
        background: var(--eqd-warning);
    }

    .eqd-legend-dot.is-delayed {
        background: var(--eqd-danger);
    }

    .eqd-legend-dot.is-not-visited {
        background: #ffffff;
        border: 1px solid #9ca3af;
    }

.eqd-question-card {
    min-height: 720px;
}

    .eqd-question-card .card-body {
        /*padding: 42px 38px;*/
    }

.eqd-question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
}

.eqd-bookmark-btn {
    border: 1px solid var(--eqd-border);
    background: #ffffff;
    color: #374151;
    border-radius: 12px;
    padding: 11px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    transition: 0.2s ease;
}

    .eqd-bookmark-btn:hover {
        border-color: var(--eqd-primary);
        color: var(--eqd-primary);
        background: #eff6ff;
    }

.eqd-question-counter {
    color: var(--eqd-primary);
    font-weight: 900;
    font-size: 17px;
}

.eqd-progress-wrap {
    margin-bottom: 28px;
}

.eqd-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--eqd-muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 7px;
}

.eqd-progress {
    height: 9px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

    .eqd-progress .progress-bar {
        background: linear-gradient(90deg, var(--eqd-primary), #60a5fa);
    }

.eqd-question-text {
    font-size: 22px;
    line-height: 2;
    font-weight: 900;
    color: var(--eqd-text);
    margin-bottom: 28px;
    text-align: right;
}

.eqd-option-list {
    display: grid;
    gap: 8px;
}

.eqd-option-card {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--eqd-border);
    border-radius: 14px;
    background: #ffffff;
    padding: 10px 11px;
    cursor: pointer;
    min-height: 72px;
    transition: 0.2s ease;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.04);
}

    .eqd-option-card:hover {
        border-color: #93c5fd;
        background: #f8fbff;
        transform: translateY(-1px);
    }

    .eqd-option-card.selected {
        border-color: var(--eqd-primary);
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.10), 0 10px 24px rgba(13, 110, 253, 0.10);
    }

.eqd-option-radio {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    accent-color: var(--eqd-primary);
    cursor: pointer;
}

.eqd-option-text {
    color: #1f2937;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 700;
    text-align: right;
}

.eqd-autosave-status {
    min-height: 28px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 900;
}

    .eqd-autosave-status.saving {
        color: #b45309;
    }

    .eqd-autosave-status.saved {
        color: #047857;
    }

    .eqd-autosave-status.error {
        color: #b91c1c;
    }

.eqd-info-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    padding: 18px;
    border-radius: 12px;
    background: #f5f8ff;
    color: var(--eqd-primary);
    font-weight: 900;
    border: 1px solid #e0ecff;
}

    .eqd-info-alert i {
        font-size: 22px;
    }

.eqd-footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /*    margin-top: 190px;*/
}

.eqd-nav-btn {
    min-width: 140px;
    border: none;
    border-radius: 12px;
    padding: 14px 18px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none !important;
    transition: 0.2s ease;
    cursor: pointer;
}

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

.eqd-nav-secondary {
    background: #ffffff;
    border: 1px solid var(--eqd-border);
    color: #374151 !important;
}

.eqd-nav-primary {
    background: var(--eqd-primary);
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(13, 110, 253, 0.22);
}

    .eqd-nav-primary:hover {
        background: var(--eqd-primary-dark);
    }

.eqd-nav-submit {
    background: var(--eqd-success);
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.22);
}

.eqd-nav-btn.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.eqd-bottom-card {
    min-height: 168px;
}

.eqd-bottom-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--eqd-text);
    margin-bottom: 15px;
}

.eqd-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
}

    .eqd-status-grid div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .eqd-status-grid i {
        color: #6b7280;
        font-size: 28px;
    }

    .eqd-status-grid strong {
        color: var(--eqd-text);
        font-size: 16px;
        font-weight: 900;
    }

    .eqd-status-grid span {
        color: var(--eqd-muted);
        font-size: 11px;
        font-weight: 700;
    }

.eqd-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--eqd-success);
    margin-inline-start: 6px;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.eqd-clickstream-row {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding: 8px 2px 14px;
    gap: 18px;
}

.eqd-click-node {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    flex: 0 0 34px;
}

    .eqd-click-node:not(:last-child)::after {
        content: "→";
        position: absolute;
        left: -17px;
        color: #9ca3af;
        font-size: 13px;
    }

    .eqd-click-node.is-current {
        background: var(--eqd-primary);
        color: #ffffff;
    }

    .eqd-click-node.is-answered {
        background: var(--eqd-success);
        color: #ffffff;
    }

    .eqd-click-node.is-not-visited {
        background: #f3f4f6;
        color: #6b7280;
        border: 1px solid #d1d5db;
    }

.eqd-clickstream-note {
    border-top: 1px solid var(--eqd-border);
    padding-top: 10px;
    color: var(--eqd-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.eqd-ai-box {
    background: #fff7ed;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}

    .eqd-ai-box i {
        font-size: 32px;
        color: #fb923c;
        margin-bottom: 8px;
    }

    .eqd-ai-box p {
        color: #374151;
        margin-bottom: 10px;
        font-weight: 800;
    }

.eqd-ai-btn {
    border: none;
    background: #fb923c;
    color: #ffffff;
    border-radius: 10px;
    padding: 9px 13px;
    font-weight: 900;
}

.eqd-final-warning {
    margin-top: 14px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--eqd-danger);
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 900;
}

    .eqd-final-warning i {
        font-size: 24px;
    }

@media (max-width: 991px) {
    .eqd-sidebar {
        position: static;
        min-height: auto;
    }

    .eqd-question-rail {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

        .eqd-question-rail::before {
            display: none;
        }

    .eqd-question-card {
        min-height: auto;
    }

    .eqd-footer-nav {
        margin-top: 36px;
    }

    .eqd-topbar-body {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .eqd-topbar-title-block {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .exam-question-dashboard {
        padding: 10px;
    }

    .eqd-question-card .card-body {
        /*padding: 22px 16px;*/
    }

    .eqd-question-header,
    .eqd-footer-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .eqd-nav-btn,
    .eqd-exit-btn,
    .eqd-bookmark-btn {
        width: 100%;
    }

    .eqd-question-text {
        font-size: 18px;
    }

    .eqd-option-card {
        padding: 16px;
    }

    .eqd-status-grid {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================== */
/* EXAM RESULT DASHBOARD - Bootstrap 5.3 compatible                       */
/* Add this section to the END of Site.css.                               */
/* Keep all exam result CSS here. Do not put CSS inside Result.cshtml.     */
/* ====================================================================== */

:root {
    /* Result dashboard local tokens. These do not break global theme tokens. */
    --exam-result-bg: #f5f7fb;
    --exam-result-card-bg: #ffffff;
    --exam-result-border: #e5e7eb;
    --exam-result-text: #111827;
    --exam-result-muted: #6b7280;
    --exam-result-blue: #2563eb;
    --exam-result-green: #16a34a;
    --exam-result-red: #dc2626;
    --exam-result-soft-green: #eaf8f0;
    --exam-result-soft-red: #fdecec;
    --exam-result-soft-blue: #eef4ff;
    --exam-result-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

/* Main page wrapper for the result dashboard. */
.exam-result-dashboard-page {
    background: var(--exam-result-bg) !important;
    min-height: 100vh;
    color: var(--exam-result-text);
}

/* Top result card keeps the same dashboard visual language as the question page. */
.exam-result-top-card,
.exam-result-side-card,
.exam-result-main-card {
    border-radius: 18px !important;
    background: var(--exam-result-card-bg) !important;
    box-shadow: var(--exam-result-shadow) !important;
}

/* Result header icon. */
.exam-result-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--exam-result-soft-blue);
    color: var(--exam-result-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex: 0 0 auto;
}

/* Main result title. */
.exam-result-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--exam-result-text);
}

/* Small subtitle under title. */
.exam-result-subtitle {
    font-size: 13px;
    color: var(--exam-result-muted);
    font-weight: 600;
}

/* Final score pill in the top card. */
.exam-result-score-pill {
    background: var(--exam-result-soft-blue);
    color: var(--exam-result-blue);
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 800;
    white-space: nowrap;
}

/* Section title inside side panel. */
.exam-dashboard-section-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--exam-result-text);
}

/* Vertical stack for session/status/date details. */
.exam-result-status-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Row inside side panel. */
.exam-result-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--exam-result-border);
    font-size: 13px;
}

    .exam-result-info-row span {
        color: var(--exam-result-muted);
        font-weight: 700;
    }

    .exam-result-info-row strong {
        color: var(--exam-result-text);
        font-weight: 900;
        text-align: end;
    }

/* Soft divider line. */
.exam-result-soft-line {
    border-color: var(--exam-result-border) !important;
    opacity: 1;
}

/* Back to home button. */
.exam-result-home-btn {
    background: #111827 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    padding: 11px 16px !important;
    text-decoration: none !important;
}

    .exam-result-home-btn:hover,
    .exam-result-home-btn:focus {
        background: #000000 !important;
        color: #ffffff !important;
        transform: translateY(-1px);
    }

/* KPI card common style. */
.exam-result-kpi-card {
    min-height: 132px;
    border-radius: 18px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

/* Total questions card. */
.exam-result-kpi-total {
    background: #f8fafc;
    border-color: var(--exam-result-border);
}

/* Correct answers card. */
.exam-result-kpi-correct {
    background: var(--exam-result-soft-green);
    border-color: rgba(22, 163, 74, 0.12);
}

/* Wrong answers card. */
.exam-result-kpi-wrong {
    background: var(--exam-result-soft-red);
    border-color: rgba(220, 38, 38, 0.12);
}

/* KPI label text. */
.exam-result-kpi-label {
    font-size: 15px;
    font-weight: 800;
    color: var(--exam-result-muted);
    margin-bottom: 8px;
}

/* KPI numeric value. */
.exam-result-kpi-value {
    font-size: 42px;
    line-height: 1;
    font-weight: 950;
    color: var(--exam-result-text);
}

.exam-result-kpi-correct .exam-result-kpi-value {
    color: var(--exam-result-green);
}

.exam-result-kpi-wrong .exam-result-kpi-value {
    color: var(--exam-result-red);
}

/* Score panel around progress bar. */
.exam-result-score-panel {
    background: #ffffff;
    border: 1px solid var(--exam-result-border);
    border-radius: 18px;
    padding: 18px;
}

.exam-result-score-label,
.exam-result-score-value {
    font-size: 15px;
    font-weight: 900;
    color: var(--exam-result-text);
}

/* Bootstrap progress override for result page only. */
.exam-result-progress {
    height: 18px !important;
    border-radius: 999px !important;
    background: #edf2f7 !important;
    overflow: hidden !important;
}

.exam-result-progress-bar {
    background: linear-gradient(90deg, #2563eb, #16a34a) !important;
    border-radius: 999px !important;
}

/* Result detail grid under score. */
.exam-result-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Result detail item. */
.exam-result-detail-item {
    border: 1px solid var(--exam-result-border);
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .exam-result-detail-item span {
        color: var(--exam-result-muted);
        font-size: 13px;
        font-weight: 800;
    }

    .exam-result-detail-item strong {
        color: var(--exam-result-text);
        font-size: 14px;
        font-weight: 900;
        text-align: end;
    }

/* RTL spacing correction for FontAwesome icons in result page. */
[dir="rtl"] .exam-result-dashboard-page .me-1 {
    margin-left: .25rem !important;
    margin-right: 0 !important;
}

/* Responsive behavior for tablets and mobile. */
@media (max-width: 991px) {
    .exam-result-side-card {
        height: auto !important;
    }
}

@media (max-width: 768px) {
    .exam-result-title {
        font-size: 18px;
    }

    .exam-result-score-pill {
        width: 100%;
        text-align: center;
    }

    .exam-result-detail-grid {
        grid-template-columns: 1fr;
    }

    .exam-result-kpi-card {
        min-height: 110px;
    }

    .exam-result-kpi-value {
        font-size: 34px;
    }
}


/* ====================================================================== */
/* EXAM RESULT INSIDE QUESTION DASHBOARD - Bootstrap 5.3 compatible        */
/* ====================================================================== */
/* Purpose:
   - Keep the same Question dashboard shell after final submit.
   - Render result cards inside the dashboard instead of showing a blank result page.
   - No CSS should be placed inside Result.cshtml or Question.cshtml.
*/

.exam-result-in-question-dashboard .eqd-result-topbar-icon {
    background: rgba(22, 163, 74, 0.10);
    color: var(--eqd-success);
}

.exam-result-in-question-dashboard .eqd-result-score-block {
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 16px;
    padding: 8px 16px;
}

.exam-result-in-question-dashboard .eqd-result-question-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.exam-result-in-question-dashboard .eqd-timeline-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.exam-result-in-question-dashboard .eqd-result-question-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--eqd-muted);
    min-width: 54px;
}

.exam-result-in-question-dashboard .eqd-timeline-line-submitted {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.35), rgba(22, 163, 74, 0.12));
}

.exam-result-in-question-dashboard .eqd-empty-state {
    width: 100%;
    border: 1px dashed var(--eqd-border);
    background: var(--eqd-neutral);
    color: var(--eqd-muted);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.exam-result-in-question-dashboard .eqd-result-main-card {
    min-height: 620px;
}

.exam-result-in-question-dashboard .eqd-result-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.exam-result-in-question-dashboard .eqd-result-heading {
    color: var(--eqd-text);
    font-size: 24px;
    font-weight: 900;
    margin: 8px 0 6px 0;
}

.exam-result-in-question-dashboard .eqd-result-description {
    color: var(--eqd-muted);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.exam-result-in-question-dashboard .eqd-result-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 163, 74, 0.10);
    color: var(--eqd-success);
    border: 1px solid rgba(22, 163, 74, 0.18);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.exam-result-in-question-dashboard .eqd-result-score-panel {
    background: linear-gradient(135deg, #f8fbff, #eef6ff);
    border: 1px solid rgba(13, 110, 253, 0.10);
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 22px;
}

.exam-result-in-question-dashboard .eqd-result-score-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--eqd-text);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 10px;
}

    .exam-result-in-question-dashboard .eqd-result-score-meta strong {
        color: var(--eqd-primary);
        font-size: 18px;
        font-weight: 900;
    }

.exam-result-in-question-dashboard .eqd-result-progress {
    height: 14px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.exam-result-in-question-dashboard .eqd-result-progress-bar {
    width: 0%;
    background: linear-gradient(90deg, var(--eqd-primary), #60a5fa);
    border-radius: 999px;
    transition: width 0.6s ease;
}

.exam-result-in-question-dashboard .eqd-result-kpi-row {
    margin-bottom: 6px;
}

.exam-result-in-question-dashboard .eqd-result-kpi-card {
    min-height: 145px;
    border-radius: 22px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--eqd-border);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.exam-result-in-question-dashboard .eqd-result-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 18px;
}

.exam-result-in-question-dashboard .eqd-result-kpi-label {
    color: var(--eqd-muted);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
}

.exam-result-in-question-dashboard .eqd-result-kpi-value {
    color: var(--eqd-text);
    font-size: 32px;
    line-height: 1;
    font-weight: 950;
}

.exam-result-in-question-dashboard .eqd-result-kpi-total {
    background: #f8fafc;
}

    .exam-result-in-question-dashboard .eqd-result-kpi-total .eqd-result-kpi-icon {
        background: rgba(17, 24, 39, 0.06);
        color: var(--eqd-text);
    }

.exam-result-in-question-dashboard .eqd-result-kpi-correct {
    background: #ecfdf5;
}

    .exam-result-in-question-dashboard .eqd-result-kpi-correct .eqd-result-kpi-icon,
    .exam-result-in-question-dashboard .eqd-result-kpi-correct .eqd-result-kpi-value {
        color: var(--eqd-success);
    }

    .exam-result-in-question-dashboard .eqd-result-kpi-correct .eqd-result-kpi-icon {
        background: rgba(22, 163, 74, 0.12);
    }

.exam-result-in-question-dashboard .eqd-result-kpi-wrong {
    background: #fef2f2;
}

    .exam-result-in-question-dashboard .eqd-result-kpi-wrong .eqd-result-kpi-icon,
    .exam-result-in-question-dashboard .eqd-result-kpi-wrong .eqd-result-kpi-value {
        color: var(--eqd-danger);
    }

    .exam-result-in-question-dashboard .eqd-result-kpi-wrong .eqd-result-kpi-icon {
        background: rgba(220, 38, 38, 0.12);
    }

.exam-result-in-question-dashboard .eqd-result-kpi-empty {
    background: #fff7ed;
}

    .exam-result-in-question-dashboard .eqd-result-kpi-empty .eqd-result-kpi-icon,
    .exam-result-in-question-dashboard .eqd-result-kpi-empty .eqd-result-kpi-value {
        color: var(--eqd-warning);
    }

    .exam-result-in-question-dashboard .eqd-result-kpi-empty .eqd-result-kpi-icon {
        background: rgba(245, 158, 11, 0.14);
    }

.exam-result-in-question-dashboard .eqd-result-detail-row {
    margin-top: 16px;
}

.exam-result-in-question-dashboard .eqd-result-detail-card {
    min-height: 86px;
    border: 1px solid var(--eqd-border);
    background: #ffffff;
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

    .exam-result-in-question-dashboard .eqd-result-detail-card span {
        color: var(--eqd-muted);
        font-size: 14px;
        font-weight: 800;
    }

    .exam-result-in-question-dashboard .eqd-result-detail-card strong {
        color: var(--eqd-text);
        font-size: 15px;
        font-weight: 900;
        text-align: left;
    }

.exam-result-in-question-dashboard .eqd-result-footer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.exam-result-in-question-dashboard .eqd-result-home-btn {
    min-width: 160px;
    border: none !important;
    border-radius: 14px !important;
    background: var(--eqd-text) !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 900;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18);
}

    .exam-result-in-question-dashboard .eqd-result-home-btn:hover {
        transform: translateY(-1px);
        color: #ffffff !important;
        opacity: 0.94;
    }

@media (max-width: 991px) {
    .exam-result-in-question-dashboard .eqd-result-main-card {
        min-height: auto;
    }

    .exam-result-in-question-dashboard .eqd-result-card-header {
        flex-direction: column;
    }

    .exam-result-in-question-dashboard .eqd-result-status-badge {
        align-self: flex-start;
    }
}

@media (max-width: 575px) {
    .exam-result-in-question-dashboard .eqd-result-detail-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .exam-result-in-question-dashboard .eqd-result-footer-actions {
        justify-content: stretch;
    }

    .exam-result-in-question-dashboard .eqd-result-home-btn {
        width: 100%;
    }
}

/* ========================================================= */
/* EXAM QUESTION PROGRESS + CLICKSTREAM MERGED               */
/* Bootstrap 5.3 compatible. No View-level CSS required.      */
/* ========================================================= */

.eqd-question-rail-live {
    gap: 10px !important;
}

/* ========================================================= */
/* EXAM QUESTION SIDEBAR TIMELINE LINE - CIRCLES ONLY         */
/* Bootstrap 5.3 compatible.                                 */
/* Purpose: move the vertical line behind question circles    */
/* without changing question text, card layout, or buttons.   */
/* ========================================================= */

.eqd-question-rail-live {
    position: relative;
    align-items: stretch !important;
}

    .eqd-question-rail-live::before {
        content: "";
        position: absolute;
        top: 20px;
        bottom: 25px;
        right: 25px;
        width: 2px;
        background: #d1d5db;
        z-index: 0;
    }

.eqd-question-node-live {
    position: relative;
    z-index: 1;
}

    .eqd-question-node-live .eqd-question-circle {
        position: relative;
        z-index: 2;
        background: #ffffff;
    }

.eqd-question-node-live {
    width: 100% !important;
    min-height: 50px;
    border-radius: 18px;
    padding: 6px 8px;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: all 0.18s ease;
}

    .eqd-question-node-live:hover {
        /* Bootstrap 5.3 compatible hover state.
           Purpose: make each live question row slightly stronger on mouse hover
           using a soft light-blue background without changing layout size. */
        transform: translateY(-1px);
        background: #eef6ff;
        border-color: #bfdbfe;
        box-shadow: 0 8px 20px rgba(13, 110, 253, 0.10);
    }

        .eqd-question-node-live:hover .eqd-question-circle {
            /* Keep the circle visible and slightly emphasized on hover. */
            border-color: #93c5fd;
            box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.10);
        }

        .eqd-question-node-live:hover .eqd-question-live-meta strong,
        .eqd-question-node-live:hover .eqd-question-live-meta small {
            /* Make question text slightly stronger on hover without changing font size. */
            color: #0f172a;
        }

    .eqd-question-node-live .eqd-question-circle {
        flex: 0 0 auto;
    }

.eqd-question-live-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.35;
}

    .eqd-question-live-meta strong {
        font-size: 11px;
        font-weight: 800;
        color: #111827;
        white-space: nowrap;
    }

    .eqd-question-live-meta small {
        font-size: 10px;
        font-weight: 700;
        color: #6b7280;
        white-space: nowrap;
    }

.eqd-live-duration {
    color: #374151 !important;
}

.eqd-live-change-count {
    color: #b45309 !important;
}

.eqd-guide-card {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

.eqd-guide-title {
    font-size: 12px;
    font-weight: 900;
    color: #111827;
    margin-bottom: 10px;
}

.eqd-legend-dot.is-changed-many,
.eqd-question-node.is-changed-many .eqd-question-circle,
.eqd-progress-live-node.is-changed-many .eqd-progress-live-circle {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #111827 !important;
}

.eqd-question-node.is-delayed .eqd-question-circle,
.eqd-progress-live-node.is-delayed .eqd-progress-live-circle {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

.eqd-question-node.is-current .eqd-question-circle,
.eqd-progress-live-node.is-current .eqd-progress-live-circle {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.eqd-question-node.is-answered .eqd-question-circle,
.eqd-progress-live-node.is-answered .eqd-progress-live-circle {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

.eqd-question-node.is-visited .eqd-question-circle,
.eqd-progress-live-node.is-visited .eqd-progress-live-circle {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #111827 !important;
}

.eqd-question-node.is-not-visited .eqd-question-circle,
.eqd-progress-live-node.is-not-visited .eqd-progress-live-circle {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
}

.eqd-progress-live-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 4px 14px 4px;
    scrollbar-width: thin;
}

.eqd-progress-live-node {
    min-width: 74px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    position: relative;
}

    .eqd-progress-live-node:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 18px;
        left: -12px;
        width: 14px;
        border-top: 2px dashed #cbd5e1;
    }

.eqd-progress-live-circle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #d1d5db;
    font-size: 12px;
    font-weight: 900;
}

.eqd-progress-live-time,
.eqd-progress-live-duration {
    font-size: 10px;
    font-weight: 800;
    color: #6b7280;
    direction: ltr;
    white-space: nowrap;
}

.eqd-progress-live-duration {
    color: #374151;
}

.eqd-agent-modal-content {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.eqd-agent-highlight {
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18), 0 18px 40px rgba(249, 115, 22, 0.18) !important;
    border-radius: 18px;
    animation: eqdAgentPulse 1.2s ease-in-out 2;
}

@keyframes eqdAgentPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

@media (max-width: 991px) {
    .eqd-question-node-live {
        min-width: 150px;
        width: auto !important;
    }

    .eqd-question-rail-live {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .eqd-question-live-meta strong,
    .eqd-question-live-meta small {
        font-size: 10px;
    }
}

/* ====================================================================== */
/* Exam Reservation History Review Mode                                   */
/* ====================================================================== */
/* These styles support opening the final exam dashboard from Reservation  */
/* History/Edit.cshtml while keeping Question.cshtml read-only and secure. */

.exam-question-dashboard[data-review-mode="true"] .eqd-option-card {
    cursor: default !important;
}

    .exam-question-dashboard[data-review-mode="true"] .eqd-option-card.readonly {
        opacity: 0.92;
        background: #f8fafc !important;
    }

        .exam-question-dashboard[data-review-mode="true"] .eqd-option-card.readonly.selected {
            border-color: #22c55e !important;
            background: #ecfdf5 !important;
            box-shadow: 0 12px 28px rgba(34, 197, 94, 0.14) !important;
        }

.exam-question-dashboard[data-review-mode="true"] .eqd-option-radio:disabled {
    cursor: not-allowed !important;
}

.exam-question-dashboard[data-review-mode="true"] .eqd-topbar {
    border: 1px solid rgba(99, 102, 241, 0.22) !important;
}

.exam-question-dashboard[data-review-mode="true"] .eqd-info-alert {
    background: #eef2ff !important;
    color: #3730a3 !important;
    border-color: #c7d2fe !important;
}

.exam-question-dashboard[data-review-mode="true"] .eqd-result-main-card {
    animation: eqdReviewResultIn 0.22s ease-out;
}

@keyframes eqdReviewResultIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================================================================== */
/* EXAM QUESTION SIDEBAR SCROLL + CENTER TIMELINE LINE                    */
/* Ready for Question.cshtml question circles.                            */
/* Purpose:                                                               */
/* 1) Show only about 10 question nodes, then scroll vertically.           */
/* 2) Keep the vertical connector line exactly centered behind circles.    */
/* 3) Continue the connector line visually down to the last question.      */
/* 4) Keep hover behavior stable without breaking Bootstrap 5.3 layout.    */
/* ====================================================================== */

/* Main live question rail container.
   This is the parent container of all question circle rows in Question.cshtml. */
.eqd-question-rail-live {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    /* Shows about 10 questions, then enables vertical scroll. */
    max-height: 520px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Keep enough internal room for the centered vertical line and scrollbar. */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
    /* Native smooth scrolling. */
    scroll-behavior: smooth !important;
    /* Firefox scrollbar. */
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 #f8fafc !important;
}

    /* Remove the old rail line if any earlier rule created it on the parent.
   The new line is drawn with each node segment so it continues correctly
   even when the parent becomes scrollable. */
    .eqd-question-rail-live::before {
        content: none !important;
        display: none !important;
    }

    /* WebKit scrollbar styling for Chrome / Edge / Safari. */
    .eqd-question-rail-live::-webkit-scrollbar {
        width: 7px !important;
    }

    .eqd-question-rail-live::-webkit-scrollbar-track {
        background: #f8fafc !important;
        border-radius: 999px !important;
    }

    .eqd-question-rail-live::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 999px !important;
    }

        .eqd-question-rail-live::-webkit-scrollbar-thumb:hover {
            background: #93c5fd !important;
        }

/* Each live question node row.
   Important: padding-right defines the circle column position in RTL mode. */
.eqd-question-node-live {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 18px !important;
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    transition: all 0.18s ease !important;
}

    /* Vertical timeline segment for every question row.
   This keeps the line centered behind circles and lets the line continue
   correctly while the question rail is scrollable. */
    .eqd-question-node-live::before {
        content: "" !important;
        position: absolute !important;
        /* Circle is 34px wide. Row right padding is 8px.
       Center = 8px + 17px = 25px. */
        right: 25px !important;
        /* Extend through the row so the line connects from circle to circle. */
        top: -10px !important;
        bottom: -10px !important;
        width: 2px !important;
        background: linear-gradient( to bottom, #cbd5e1 0%, #94a3b8 50%, #cbd5e1 100% ) !important;
        z-index: 0 !important;
    }

    /* Start the line from the center of the first circle, not above it. */
    .eqd-question-node-live:first-child::before {
        top: 25px !important;
    }

    /* End the line at the center of the last circle, not below it. */
    .eqd-question-node-live:last-child::before {
        bottom: 25px !important;
    }

    /* Hover state for the live question row. */
    .eqd-question-node-live:hover {
        transform: translateX(-3px) !important;
        background: #eef6ff !important;
        border-color: #bfdbfe !important;
        box-shadow: 0 8px 20px rgba(13, 110, 253, 0.10) !important;
    }

    /* Circle inside each live question row.
   Keep it above the center line. */
    .eqd-question-node-live .eqd-question-circle,
    .eqd-question-circle-live {
        position: relative !important;
        z-index: 2 !important;
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 50% !important;
        border: 2px solid #d1d5db !important;
        background: #ffffff !important;
        color: #374151 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        transition: all 0.25s ease !important;
        box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08) !important;
    }

        /* Circle hover emphasis. */
        .eqd-question-node-live:hover .eqd-question-circle,
        .eqd-question-circle-live:hover {
            transform: scale(1.08) !important;
            border-color: #93c5fd !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12) !important;
        }

/* Text/meta beside each circle. */
.eqd-question-live-meta {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    line-height: 1.35 !important;
}

    .eqd-question-live-meta strong {
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #111827 !important;
        white-space: nowrap !important;
    }

    .eqd-question-live-meta small {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #6b7280 !important;
        white-space: nowrap !important;
    }

.eqd-question-node-live:hover .eqd-question-live-meta strong,
.eqd-question-node-live:hover .eqd-question-live-meta small {
    color: #0f172a !important;
}

/* Status colors - keep these after base circle rules so they win. */
.eqd-question-node.is-current .eqd-question-circle,
.eqd-question-node-live.is-current .eqd-question-circle,
.eqd-question-node-live.is-current .eqd-question-circle-live {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

.eqd-question-node.is-answered .eqd-question-circle,
.eqd-question-node-live.is-answered .eqd-question-circle,
.eqd-question-node-live.is-answered .eqd-question-circle-live {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

.eqd-question-node.is-visited .eqd-question-circle,
.eqd-question-node-live.is-visited .eqd-question-circle,
.eqd-question-node-live.is-visited .eqd-question-circle-live {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #111827 !important;
}

.eqd-question-node.is-delayed .eqd-question-circle,
.eqd-question-node-live.is-delayed .eqd-question-circle,
.eqd-question-node-live.is-delayed .eqd-question-circle-live {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14) !important;
}

.eqd-question-node.is-changed-many .eqd-question-circle,
.eqd-question-node-live.is-changed-many .eqd-question-circle,
.eqd-question-node-live.is-changed-many .eqd-question-circle-live {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #111827 !important;
}

.eqd-question-node.is-not-visited .eqd-question-circle,
.eqd-question-node-live.is-not-visited .eqd-question-circle,
.eqd-question-node-live.is-not-visited .eqd-question-circle-live {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
}

/* LTR fallback if the same dashboard is ever rendered left-to-right. */
html[dir="ltr"] .eqd-question-node-live::before {
    right: auto !important;
    left: 25px !important;
}

html[dir="ltr"] .eqd-question-node-live:hover {
    transform: translateX(3px) !important;
}

/* Tablet/mobile: show the question rail horizontally.
   In horizontal mode, vertical center line is disabled to avoid broken lines. */
@media (max-width: 991px) {
    .eqd-question-rail-live {
        flex-direction: row !important;
        align-items: center !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 8px !important;
    }

    .eqd-question-node-live {
        width: auto !important;
        min-width: 150px !important;
    }

        .eqd-question-node-live::before {
            content: none !important;
            display: none !important;
        }

    .eqd-question-live-meta strong,
    .eqd-question-live-meta small {
        font-size: 10px !important;
    }
}

/* ====================================================================== */
/* 31-05 - Page gap + Projects/List final CSS                             */
/* ====================================================================== */
/* ---------- Safe outer page gap reset ---------- */
body {
    margin: 0 !important;
    overflow-x: hidden !important;
}

.body-content,
.main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.full-width-section,
.carousel-container,
.footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
}

.container-fluid.no-page-gap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- Carousel fix ---------- */

.carousel-container,
#fullPageCarousel,
#fullPageCarousel .carousel-inner,
#fullPageCarousel .carousel-item,
#fullPageCarousel .carousel-item img {
    border-radius: 20px !important;
    overflow: hidden !important;
}

    #fullPageCarousel .carousel-item img {
        margin-top: 10px !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: block !important;
        object-fit: cover !important;
    }

/* ---------- Projects/List - Category carousel pills ---------- */

.project-category-carousel-wrapper {
    width: 100%;
    max-width: 1180px;
    margin: 26px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-bottom: 1px solid #d9d9d9;
    padding: 0 8px 18px 8px;
}

.project-category-scroll {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px;
}

    .project-category-scroll::-webkit-scrollbar {
        display: none;
    }

.project-category-pill {
    flex: 0 0 auto;
    scroll-snap-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid #d7dce2;
    background: #ffffff;
    color: #6b7280 !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
    transition: all 0.22s ease;
}

    .project-category-pill:hover,
    .project-category-pill:focus {
        color: var(--navbar-right) !important;
        border-color: var(--navbar-right);
        background: #f8fbff;
        transform: translateY(-1px);
    }

    .project-category-pill.active {
        color: #ffffff !important;
        background: var(--navbar-right);
        border-color: var(--navbar-right);
        box-shadow: 0 8px 18px rgba(0, 64, 128, 0.18);
    }

/* Strong carousel controller buttons */
.project-category-nav {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--navbar-right);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 22px rgba(0, 64, 128, 0.28);
}

    .project-category-nav i {
        color: #ffffff !important;
        font-size: 15px;
    }

    .project-category-nav:hover:not(:disabled),
    .project-category-nav:focus:not(:disabled) {
        background: var(--navbar-left);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0, 64, 128, 0.38);
    }



/* RTL correction */
html[dir="rtl"] .project-category-scroll {
    direction: rtl;
}

html[dir="rtl"] .project-category-pill {
    direction: rtl;
}

/* ---------- Projects/List - Bootstrap card grid ---------- */

.tabs-card-bootstrap-grid {
    width: 100%;
}

.project-card-link,
.project-card-link:hover,
.project-card-link:focus,
.project-card-link:active {
    text-decoration: none !important;
    color: inherit !important;
}

.project-bootstrap-card {
    border: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .project-bootstrap-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08) !important;
    }

.project-card-image-wrap {
    width: 100%;
    aspect-ratio: 6 / 8;
    overflow: hidden;
    background: #f8f9fa;
}

    .project-card-image-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }

.project-bootstrap-card .card-footer {
    background: #ffffff !important;
    border-top: 0 !important;
    padding: 14px 8px 26px 8px !important;
    text-align: center !important;
}

.project-bootstrap-card .card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #111111 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    .project-category-carousel-wrapper {
        max-width: 100%;
        justify-content: center;
        gap: 6px;
        padding-left: 6px;
        padding-right: 6px;
        padding-bottom: 12px;
    }

    .project-category-nav {
        display: inline-flex;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        box-shadow: 0 6px 16px rgba(0, 64, 128, 0.25);
    }

        .project-category-nav i {
            font-size: 13px;
        }

    .project-category-scroll {
        padding: 4px;
        gap: 8px;
    }

    .project-category-pill {
        min-height: 38px;
        padding: 8px 16px;
        font-size: 13px;
    }
}




/* ====================================================================== */
/* Education module scoped override                                       */
/* Purpose: Site.css has a global rule:                                  */
/* input, select, textarea { max-width: 280px; }                          */
/* This scoped block prevents that rule from shrinking the Education       */
/* inline Description editor and form controls.                           */
/* ====================================================================== */

.am-inline-editor-card input,
.am-inline-editor-card select,
.am-inline-editor-card textarea,
.am-inline-editor-card .form-control,
.am-inline-editor-card .form-select {
    max-width: none !important;
    width: 100% !important;
}

.am-inline-editor-card,
.am-inline-form-grid,
.am-inline-description-side,
.am-inline-description-side .am-field-block {
    max-width: none !important;
}

/* ====================================================================== */
/* Education inline form mobile viewport fix                              */
/* Purpose: override global input/select/textarea max-width on mobile too. */
/* ====================================================================== */
@media (max-width: 992px) {
    .am-inline-editor-card,
    .am-inline-form-grid,
    .am-inline-fields-side,
    .am-inline-description-side,
    .am-inline-description-side .am-field-block,
    .am-field-block {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

        .am-inline-editor-card input,
        .am-inline-editor-card select,
        .am-inline-editor-card textarea,
        .am-inline-editor-card .form-control,
        .am-inline-editor-card .form-select {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

    .am-description-textarea {
        min-height: 360px !important;
        height: 42vh !important;
        max-height: 520px !important;
    }
}

@media (max-width: 576px) {
    .am-description-textarea {
        min-height: 320px !important;
        height: 38vh !important;
        max-height: 460px !important;
    }
}

.am-description-textarea.des_admin_dash {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    min-height: 400px !important;
    height: calc(50vh - 260px) !important;
    resize: vertical;
    font-size: 1rem;
    line-height: 1.8;
    padding: 18px;
}
/* ====================================================================== */
/* Home/Index Latest Projects + Popular Products mobile card fix           */
/* Purpose:                                                               */
/* - On mobile, each project/product card fits inside viewport height.      */
/* - Card height is exactly 100vh - 135px.                                  */
/* - Image touches the card edges with no padding or gap.                   */
/* - Image always fills the full card width.                                */
/* - Image top stays fixed; extra image height is cropped from the bottom.   */
/* - Footer/title area always remains visible.                              */
/* ====================================================================== */

.project-card-column {
    min-width: 0 !important;
}

.project-card-link,
.project-card-link:hover,
.project-card-link:focus,
.project-card-link:active {
    color: inherit !important;
    text-decoration: none !important;
}

.project-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

.project-card-image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f8f9fa !important;
}

    .project-card-image-wrap img,
    .project-card .project-card-img,
    .project-card .card-img-top {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        display: block !important;
        object-fit: cover !important;
        object-position: top center !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

.project-card-image-placeholder {
    min-height: 220px !important;
}

.project-card-footer {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    border-top: 0 !important;
    padding: 12px 10px 16px 10px !important;
    margin: 0 !important;
    text-align: center !important;
}

    .project-card-footer .card-title {
        margin: 0 0 6px 0 !important;
        font-size: 1rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: #111111 !important;
    }

    .project-card-footer .card-text {
        margin: 0 !important;
        line-height: 1.35 !important;
    }

.product-card-details {
    text-align: start;
}


@media (max-width: 767.98px) {
    .project-card-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
    }

        .project-card-column .project-card {
            height: calc(100vh - 135px) !important;
            min-height: calc(100vh - 135px) !important;
            max-height: calc(100vh - 135px) !important;
        }

        .project-card-column .project-card-image-wrap {
            height: auto !important;
        }

        .project-card-column .project-card-footer {
            min-height: 82px !important;
            max-height: 110px !important;
            overflow: hidden !important;
        }

            .project-card-column .project-card-footer .card-title {
                font-size: 0.95rem !important;
            }

            .project-card-column .project-card-footer .card-text {
                font-size: 0.8rem !important;
            }
}

@media (min-width: 768px) {
    .project-card-image-wrap {
        aspect-ratio: 6 / 8 !important;
        flex: 0 0 auto !important;
    }

        .project-card-image-wrap img,
        .project-card .project-card-img,
        .project-card .card-img-top {
            height: 100% !important;
        }
}


/* ====================================================================== */
/* FINAL FIX - Latest Projects card image width-fit without horizontal crop */
/* Purpose:                                                               */
/* 1) Mobile card height stays exactly calc(100vh - 135px).               */
/* 2) Footer always remains visible at the bottom of the card.            */
/* 3) Image width always fits 100% of the card on mobile and desktop.      */
/* 4) No left/right image cropping is allowed.                            */
/* 5) If the scaled image is taller than the image area, crop only bottom. */
/* Important: do NOT use object-fit: cover here. Cover crops width.        */
/* ====================================================================== */

.project-card,
.project-bootstrap-card {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.project-card-image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f8f9fa !important;
    box-sizing: border-box !important;
}

    .project-card-image-wrap img,
    .project-card .project-card-img,
    .project-card .card-img-top,
    .project-bootstrap-card .project-card-image-wrap img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        object-fit: unset !important;
        object-position: top left !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
    }

.project-card-footer,
.project-bootstrap-card .card-footer {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    background: #d6d3d3 !important;
    border-top: 0 !important;
    text-align: center !important;
}

@media (max-width: 767.98px) {
    .project-card-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

        .project-card-column .project-card,
        .project-card-column .project-bootstrap-card {
            height: calc(100vh - 135px) !important;
            min-height: calc(100vh - 135px) !important;
            max-height: calc(100vh - 135px) !important;
        }

        .project-card-column .project-card-image-wrap {
            flex: 1 1 auto !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: hidden !important;
        }

            .project-card-column .project-card-image-wrap img,
            .project-card-column .project-card-img,
            .project-card-column .card-img-top {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                min-height: 0 !important;
                object-fit: unset !important;
                object-position: top left !important;
            }

        .project-card-column .project-card-footer {
            flex: 0 0 auto !important;
            flex-shrink: 0 !important;
            min-height: 82px !important;
            max-height: 110px !important;
            overflow: hidden !important;
        }
}

@media (min-width: 768px) {
    .project-card-image-wrap {
        aspect-ratio: 6 / 8 !important;
        flex: 0 0 auto !important;
    }

        .project-card-image-wrap img,
        .project-card .project-card-img,
        .project-card .card-img-top,
        .project-bootstrap-card .project-card-image-wrap img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            object-fit: unset !important;
            object-position: top left !important;
        }
}

/* ====================================================================== */
/* card footer rtl in Fa and ltr in En */
/* ====================================================================== */

.project-card-footer .project-product-title {
    text-align: center !important;
}

.project-card-footer .product-card-details,
.project-card-footer .product-card-detail-line {
    text-align: start !important;
}

html[dir="rtl"] .project-card-footer .product-card-details,
html[dir="rtl"] .project-card-footer .product-card-detail-line {
    text-align: right !important;
}

html[dir="ltr"] .project-card-footer .product-card-details,
html[dir="ltr"] .project-card-footer .product-card-detail-line {
    text-align: left !important;
}

/* ====================================================================== */
/* Home/Index Popular Products footer - premium medical product card style */
/* Purpose:
   - Product title stays centered, bold, and purple.
   - Product detail rows follow page language direction.
   - Each detail row has an icon.
   - Detail labels are purple and bold.
   - Pain row is centered inside a rounded lavender box.
   - Scoped to .product-card-footer so it does not break project cards.
   ====================================================================== */

:root {
    --product-footer-purple: #442f8c;
    --product-footer-purple-soft: #f4f0fb;
    --product-footer-border: #e6ddf5;
    --product-footer-text: #4b5563;
    --product-footer-icon-bg: #ffffff;
}

.project-card-footer.product-card-footer {
    padding: 18px 16px 20px 16px !important;
    background: #ffffff !important;
    border-top: 0 !important;
    text-align: center !important;
    overflow: visible !important;
}

.product-card-footer .project-product-title {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    color: var(--product-footer-purple) !important;
    font-size: clamp(1.05rem, 1.3vw, 1.55rem) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

.product-card-footer .product-card-details {
    width: 100% !important;
    color: var(--product-footer-text) !important;
    font-size: 0.70rem !important;
    line-height: 1.7 !important;
}

.product-card-footer .product-card-detail-line {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 1px 0 !important;
    color: var(--product-footer-text) !important;
    text-align: start !important;
}

.product-card-footer .product-card-detail-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    border: 2px solid var(--product-footer-border) !important;
    background: var(--product-footer-icon-bg) !important;
    color: var(--product-footer-purple) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !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 {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
}

    .product-card-footer .product-card-detail-content strong {
        color: var(--product-footer-purple) !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    .product-card-footer .product-card-detail-content span {
        color: var(--product-footer-text) !important;
        font-weight: 500 !important;
    }

.product-card-footer .product-card-pain-box {
    width: 100% !important;
    min-height: 50px !important;
    margin: 2px auto 0 auto !important;
    padding: 10px 16px !important;
    border-radius: 18px !important;
    border: 1px solid var(--product-footer-border) !important;
    background: var(--product-footer-purple-soft) !important;
    color: var(--product-footer-purple) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    font-size: 0.80rem !important;
    line-height: 1.5 !important;
    font-weight: 900 !important;
}

.product-card-footer .product-card-pain-icon {
    color: var(--product-footer-purple) !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

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

/* RTL: icon stays at the right side, text starts from the right. */
html[dir="rtl"] .product-card-footer,
html[dir="rtl"] .product-card-footer .product-card-details {
    direction: rtl !important;
}

    html[dir="rtl"] .product-card-footer .product-card-detail-line {
        flex-direction: row !important;
        text-align: right !important;
    }

    html[dir="rtl"] .product-card-footer .product-card-detail-content {
        text-align: right !important;
    }

/* LTR: icon stays at the left side, text starts from the left. */
html[dir="ltr"] .product-card-footer,
html[dir="ltr"] .product-card-footer .product-card-details {
    direction: ltr !important;
}

    html[dir="ltr"] .product-card-footer .product-card-detail-line {
        flex-direction: row !important;
        text-align: left !important;
    }

    html[dir="ltr"] .product-card-footer .product-card-detail-content {
        text-align: left !important;
    }

/* Product cards need a taller footer than project title-only cards. */
@media (max-width: 767.98px) {
    .project-card-column .project-card-footer.product-card-footer {
        min-height: 210px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .product-card-footer .project-product-title {
        font-size: 1.35rem !important;
    }

    .product-card-footer .product-card-details {
        font-size: 0.70rem !important;
    }

    .product-card-footer .product-card-pain-box {
        font-size: 1rem !important;
    }
}

@media (max-width: 380px) {
    .project-card-footer.product-card-footer {
        padding: 14px 12px 16px 12px !important;
    }

    .product-card-footer .product-card-detail-line {
        gap: 9px !important;
    }

    .product-card-footer .product-card-detail-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 14px !important;
    }
}

/* =========================================================
   Mobile Navbar Menu: vertical stacked items
   Purpose: On mobile/tablet, nav items must appear under
   each other, not in one horizontal row.
   ========================================================= */
@media (max-width: 1199.98px) {

    .navbar-collapse {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    .navbar-nav {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

        .navbar-nav .nav-item {
            width: 100% !important;
            display: block !important;
            text-align: center !important;
        }

        .navbar-nav .nav-link {
            width: 100% !important;
            display: block !important;
            text-align: center !important;
            padding: 10px 15px !important;
        }

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

    .navbar-login-btn {
        width: 80% !important;
        max-width: 420px !important;
        margin: 20px auto 10px auto !important;
        display: block !important;
        text-align: center !important;
    }
}

/* ====================================================================== */
/* Home Partners Infinite Logo Strip - Bootstrap 5.3 compatible            */
/* ====================================================================== */

.partners-section {
    background: #ffffff;
    overflow: visible;
    width: 100vw !important;
}

.partners-title {
    color: var(--navbar-right);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2.4rem);
}

.partners-logo-strip {
    width: 100vw !important;
    overflow: visible;
    position: relative;
}

.partners-logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: partnersScroll 35s linear infinite;
}

.partners-logo-strip:hover .partners-logo-track {
    animation-play-state: paused;
}

.partner-logo-item {
    flex: 0 0 auto;
    width: 290px;
    height: 210px;
    padding: 5px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.partner-logo-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 14px !important;
}

@keyframes partnersScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

html[dir="rtl"] .partners-logo-track {
    animation-name: partnersScrollRtl;
}

@keyframes partnersScrollRtl {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

@media (max-width: 768px) {
    .partner-logo-item {
        width: 150px;
        height: 90px;
        padding: 5px !important;
        margin: 0 !important;
        border: none !important;
    }

    .partner-logo-img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}


/* ======================================================================
   Home/Index Selected Projects mobile 2-column override                  
   Purpose: only Selected/Latest Projects cards show 2 cards per row on    
   mobile. Padding, margin, and card height are intentionally untouched.   
   ====================================================================== */
@media (max-width: 767.98px) {
    .latest-project-card-column {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    .project-card-column .project-card {
        height: calc(100vh - 55vh) !important;
        min-height: calc(100vh - 55vh) !important;
        max-height: calc(100vh - 55vh) !important;
    }
}

/* ======================================================================
   FINAL MOBILE ONLY FIX - Home/Index Selected Projects
   Scope: only the Latest/Selected Projects block in Home/Index.
   Requirements:
   - Mobile only.
   - Show only the first 2 project cards even if more records exist.
   - Show those 2 cards side by side in one row.
   - Each visible card image area is exactly 55vh.
   - The card footer remains under the image.
   - Show a mobile-only "View More >>" button.
   - Keep the selected projects section at least calc(100vh - 135px)
     so the remaining area is clean/blank before the next section.
   ====================================================================== */

.latest-projects-view-more-wrap {
    display: none;
}

@media (max-width: 767.98px) {

    .latest-projects-home-section {
        min-height: calc(100vh - 135px) !important;
    }

        .latest-projects-home-section .latest-project-card-column {
            width: 50% !important;
            max-width: 50% !important;
            flex: 0 0 50% !important;
        }

            .latest-projects-home-section .latest-project-card-column:nth-of-type(n+3) {
                display: none !important;
            }

            .latest-projects-home-section .latest-project-card-column .project-card,
            .latest-projects-home-section .latest-project-card-column .project-bootstrap-card {
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
            }

            .latest-projects-home-section .latest-project-card-column .project-card-image-wrap {
                height: 55vh !important;
                min-height: 55vh !important;
                max-height: 55vh !important;
                flex: 0 0 55vh !important;
                overflow: hidden !important;
            }

                .latest-projects-home-section .latest-project-card-column .project-card-image-wrap img,
                .latest-projects-home-section .latest-project-card-column .project-card-img,
                .latest-projects-home-section .latest-project-card-column .card-img-top {
                    width: 100% !important;
                    height: 100% !important;
                    max-width: 100% !important;
                    object-fit: cover !important;
                    object-position: top center !important;
                    display: block !important;
                }

            .latest-projects-home-section .latest-project-card-column .project-card-footer {
                flex: 0 0 auto !important;
                min-height: 0 !important;
                max-height: none !important;
                overflow: visible !important;
            }

    .latest-projects-view-more-wrap {
        display: block !important;
        width: 100% !important;
        margin-top: 18px !important;
        margin-bottom: 72px !important;
        padding-bottom: 18px !important;
    }

    .latest-projects-view-more-btn,
    .latest-projects-view-more-btn:visited {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: min(74vw, 340px) !important;
        min-height: 54px !important;
        padding: 12px 24px !important;
        border: 1px solid rgba(88, 73, 139, 0.18) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8f5ff 100%) !important;
        color: var(--product-footer-purple, #442f8c) !important;
        text-decoration: none !important;
        font-size: 1.05rem !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        border-radius: 999px !important;
        box-shadow: 0 10px 26px rgba(88, 73, 139, 0.14) !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
    }

        .latest-projects-view-more-btn:hover,
        .latest-projects-view-more-btn:focus,
        .latest-projects-view-more-btn:active {
            background: linear-gradient(135deg, var(--navbar-left, #988bc1) 0%, var(--navbar-right, #58498b) 100%) !important;
            color: #ffffff !important;
            border-color: transparent !important;
            text-decoration: none !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 16px 34px rgba(88, 73, 139, 0.28) !important;
        }

    .latest-projects-view-more-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(88, 73, 139, 0.10) !important;
        color: currentColor !important;
        font-size: 0.78rem !important;
        transition: background 0.22s ease, transform 0.22s ease !important;
    }

    .latest-projects-view-more-btn:hover .latest-projects-view-more-icon,
    .latest-projects-view-more-btn:focus .latest-projects-view-more-icon {
        background: rgba(255, 255, 255, 0.20) !important;
        transform: translateX(-2px) !important;
    }
}

html[dir="ltr"] .latest-projects-view-more-icon {
    transform: rotate(180deg) !important;
}

@media (max-width: 767.98px) {
    html[dir="ltr"] .latest-projects-view-more-btn:hover .latest-projects-view-more-icon,
    html[dir="ltr"] .latest-projects-view-more-btn:focus .latest-projects-view-more-icon {
        transform: rotate(180deg) translateX(-2px) !important;
    }
}


/* ======================================================================
   FINAL MOBILE ONLY FIX - Home/Index New Products horizontal cards
   Scope: only the New Products / Popular Products block in Home/Index.
   Requirements:
   - Mobile only.
   - Each product card is col-12: one card per row.
   - Convert the product card from vertical to horizontal.
   - Product image stays on one side; current footer/detail area moves to the other side.
   - Do not change global body/container/card spacing.
   - Desktop/tablet layout remains unchanged.
   ====================================================================== */
@media (max-width: 767.98px) {

    .new-products-home-section .new-products-mobile-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
    }

    .new-products-home-section .new-product-card-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    .new-products-home-section .new-product-horizontal-card {
        width: 100% !important;
        height: auto !important;
        min-height: 160px !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        direction: ltr !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 14px !important;
        background: #ffffff !important;
    }

        .new-products-home-section .new-product-horizontal-card .project-card-image-wrap {
            width: 38% !important;
            max-width: 38% !important;
            flex: 0 0 38% !important;
            height: auto !important;
            min-height: 160px !important;
            max-height: none !important;
            aspect-ratio: auto !important;
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
            background: #f8f9fa !important;
        }

            .new-products-home-section .new-product-horizontal-card .project-card-image-wrap img,
            .new-products-home-section .new-product-horizontal-card .project-card-img,
            .new-products-home-section .new-product-horizontal-card .card-img-top {
                width: 100% !important;
                height: 100% !important;
                min-height: 160px !important;
                max-height: none !important;
                object-fit: cover !important;
                object-position: center center !important;
                display: block !important;
                padding: 0 !important;
                margin: 0 !important;
                border-radius: 0 !important;
            }

        .new-products-home-section .new-product-horizontal-card .project-card-footer.product-card-footer {
            width: 62% !important;
            max-width: 62% !important;
            flex: 0 0 62% !important;
            min-height: 160px !important;
            max-height: none !important;
            overflow: visible !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: stretch !important;
            padding: 14px 14px 14px 14px !important;
            margin: 0 !important;
            direction: rtl !important;
            text-align: right !important;
            background: #ffffff !important;
            border-top: 0 !important;
        }

    html[dir="ltr"] .new-products-home-section .new-product-horizontal-card .project-card-footer.product-card-footer {
        direction: ltr !important;
        text-align: left !important;
    }

    .new-products-home-section .product-card-footer .project-product-title {
        margin: 0 0 8px 0 !important;
        font-size: 0.90rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    .new-products-home-section .product-card-footer .product-card-details {
        font-size: 0.70rem !important;
        line-height: 1.45 !important;
    }

    .new-products-home-section .product-card-footer .product-card-detail-line {
        gap: 7px !important;
        margin: 0 0 7px 0 !important;
    }

    .new-products-home-section .product-card-footer .product-card-detail-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        font-size: 12px !important;
    }

    .new-products-home-section .product-card-footer .product-card-detail-content {
        gap: 5px !important;
    }

    .new-products-home-section .product-card-footer .product-card-pain-box {
        min-height: 34px !important;
        margin: 8px auto 0 auto !important;
        padding: 6px 8px !important;
        border-radius: 14px !important;
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 380px) {
    .new-products-home-section .new-product-horizontal-card {
        min-height: 145px !important;
    }

        .new-products-home-section .new-product-horizontal-card .project-card-image-wrap,
        .new-products-home-section .new-product-horizontal-card .project-card-image-wrap img,
        .new-products-home-section .new-product-horizontal-card .project-card-img,
        .new-products-home-section .new-product-horizontal-card .card-img-top,
        .new-products-home-section .new-product-horizontal-card .project-card-footer.product-card-footer {
            min-height: 145px !important;
        }

        .new-products-home-section .new-product-horizontal-card .project-card-image-wrap {
            width: 35% !important;
            max-width: 35% !important;
            flex-basis: 35% !important;
        }

        .new-products-home-section .new-product-horizontal-card .project-card-footer.product-card-footer {
            width: 65% !important;
            max-width: 65% !important;
            flex-basis: 65% !important;
            padding: 12px 10px !important;
        }
}

/* ======================================================================
   Products/Details Related Products - premium horizontal product cards
   Scope: only the Related Products section at the bottom of Products/Details.
   Layout:
   - XL: 3 cards per row by Bootstrap col-xl-4.
   - Tablet: 2 cards per row by Bootstrap col-md-6.
   - Mobile: 1 card per row by Bootstrap col-12.
   - The card itself stays horizontal at every viewport size.
   ====================================================================== */

.related-products-detail-section {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

    .related-products-detail-section .product-related-kicker {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 8px !important;
        color: var(--product-footer-purple, #442f8c) !important;
        font-size: 0.95rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
    }

    .related-products-detail-section .product-related-title {
        margin: 0 !important;
        color: #2d2d2d !important;
        font-size: clamp(1.6rem, 2vw, 2.35rem) !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

.related-product-grid-column {
    min-width: 0 !important;
}

.related-product-link,
.related-product-link:hover,
.related-product-link:focus,
.related-product-link:active {
    text-decoration: none !important;
    color: inherit !important;
}

.related-product-horizontal-card {
    width: 100% !important;
    min-height: 220px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(88, 73, 139, 0.18) !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.10) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
    box-sizing: border-box !important;
    direction: ltr !important;
}

    .related-product-horizontal-card:hover,
    .related-product-horizontal-card:focus {
        transform: translateY(-4px) !important;
        border-color: rgba(88, 73, 139, 0.36) !important;
        box-shadow: 0 18px 44px rgba(88, 73, 139, 0.18) !important;
    }

    .related-product-horizontal-card .related-product-image-side {
        width: 42% !important;
        max-width: 42% !important;
        flex: 0 0 42% !important;
        min-height: 220px !important;
        overflow: hidden !important;
        background: #f8f9fa !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .related-product-horizontal-card .related-product-img {
        width: 100% !important;
        height: 100% !important;
        min-height: 220px !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center center !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transition: transform 0.35s ease !important;
    }

    .related-product-horizontal-card:hover .related-product-img {
        transform: scale(1.04) !important;
    }

    .related-product-horizontal-card .related-product-no-image {
        width: 100% !important;
        height: 100% !important;
        min-height: 220px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        color: #9ca3af !important;
        background: linear-gradient(135deg, #f8f9fa, #f4f0fb) !important;
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        text-align: center !important;
    }

        .related-product-horizontal-card .related-product-no-image i {
            color: var(--product-footer-purple, #442f8c) !important;
            font-size: 2rem !important;
        }

    .related-product-horizontal-card .related-product-content-side {
        width: 58% !important;
        max-width: 58% !important;
        flex: 0 0 58% !important;
        min-height: 220px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        padding: 18px 18px 18px 18px !important;
        margin: 0 !important;
        background: #ffffff !important;
        direction: rtl !important;
        text-align: right !important;
    }

html[dir="ltr"] .related-product-horizontal-card .related-product-content-side {
    direction: ltr !important;
    text-align: left !important;
}

.related-product-horizontal-card .related-product-name {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    color: var(--product-footer-purple, #442f8c) !important;
    font-size: clamp(1.15rem, 1.5vw, 1.65rem) !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    text-align: center !important;
}

.related-product-horizontal-card .related-product-details {
    width: 100% !important;
    color: var(--product-footer-text, #4b5563) !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}

.related-product-horizontal-card .related-product-detail-line {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    color: var(--product-footer-text, #4b5563) !important;
    text-align: start !important;
}

.related-product-horizontal-card .related-product-detail-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    border: 3px solid var(--product-footer-border, #e6ddf5) !important;
    background: var(--product-footer-icon-bg, #ffffff) !important;
    color: var(--product-footer-purple, #442f8c) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
}

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

.related-product-horizontal-card .related-product-detail-content {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
}

    .related-product-horizontal-card .related-product-detail-content strong {
        color: var(--product-footer-purple, #442f8c) !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }

    .related-product-horizontal-card .related-product-detail-content span {
        color: var(--product-footer-text, #4b5563) !important;
        font-weight: 700 !important;
    }

.related-product-horizontal-card .related-product-pain-box {
    width: 100% !important;
    min-height: 54px !important;
    margin: 16px auto 0 auto !important;
    padding: 10px 16px !important;
    border-radius: 24px !important;
    border: 2px solid var(--product-footer-border, #e6ddf5) !important;
    background: var(--product-footer-purple-soft, #f4f0fb) !important;
    color: var(--product-footer-purple, #442f8c) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    font-weight: 950 !important;
}

.related-product-horizontal-card .related-product-pain-icon {
    color: var(--product-footer-purple, #442f8c) !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.related-product-horizontal-card .related-product-pain-box strong,
.related-product-horizontal-card .related-product-pain-box span {
    color: var(--product-footer-purple, #442f8c) !important;
    font-weight: 950 !important;
}

/* RTL: image stays left like the Home/Index mobile product card, text stays RTL. */
html[dir="rtl"] .related-product-horizontal-card {
    direction: ltr !important;
}

    html[dir="rtl"] .related-product-horizontal-card .related-product-content-side,
    html[dir="rtl"] .related-product-horizontal-card .related-product-details {
        direction: rtl !important;
        text-align: right !important;
    }

    html[dir="rtl"] .related-product-horizontal-card .related-product-detail-line {
        flex-direction: row !important;
        text-align: right !important;
    }

    html[dir="rtl"] .related-product-horizontal-card .related-product-detail-content {
        text-align: right !important;
    }

/* LTR: image stays left, text starts from the left. */
html[dir="ltr"] .related-product-horizontal-card,
html[dir="ltr"] .related-product-horizontal-card .related-product-content-side,
html[dir="ltr"] .related-product-horizontal-card .related-product-details {
    direction: ltr !important;
    text-align: left !important;
}

    html[dir="ltr"] .related-product-horizontal-card .related-product-detail-line {
        flex-direction: row !important;
        text-align: left !important;
    }

    html[dir="ltr"] .related-product-horizontal-card .related-product-detail-content {
        text-align: left !important;
    }

@media (max-width: 1199.98px) {
    .related-product-horizontal-card {
        min-height: 210px !important;
    }

        .related-product-horizontal-card .related-product-image-side,
        .related-product-horizontal-card .related-product-img,
        .related-product-horizontal-card .related-product-no-image,
        .related-product-horizontal-card .related-product-content-side {
            min-height: 210px !important;
        }
}

@media (max-width: 767.98px) {
    .related-products-detail-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .related-product-horizontal-card {
        min-height: 165px !important;
        border-radius: 22px !important;
    }

        .related-product-horizontal-card .related-product-image-side {
            width: 38% !important;
            max-width: 38% !important;
            flex-basis: 38% !important;
            min-height: 165px !important;
        }

        .related-product-horizontal-card .related-product-img,
        .related-product-horizontal-card .related-product-no-image {
            min-height: 165px !important;
        }

        .related-product-horizontal-card .related-product-content-side {
            width: 62% !important;
            max-width: 62% !important;
            flex-basis: 62% !important;
            min-height: 165px !important;
            padding: 14px 14px !important;
        }

        .related-product-horizontal-card .related-product-name {
            margin-bottom: 8px !important;
            font-size: 1.05rem !important;
            line-height: 1.35 !important;
        }

        .related-product-horizontal-card .related-product-details {
            font-size: 0.80rem !important;
            line-height: 1.45 !important;
        }

        .related-product-horizontal-card .related-product-detail-line {
            gap: 7px !important;
            margin-bottom: 7px !important;
        }

        .related-product-horizontal-card .related-product-detail-icon {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            border-width: 2px !important;
            font-size: 12px !important;
        }

        .related-product-horizontal-card .related-product-detail-content {
            gap: 5px !important;
        }

        .related-product-horizontal-card .related-product-pain-box {
            min-height: 36px !important;
            margin-top: 8px !important;
            padding: 6px 8px !important;
            border-radius: 16px !important;
            font-size: 0.82rem !important;
            line-height: 1.35 !important;
        }
}

@media (max-width: 380px) {
    .related-product-horizontal-card {
        min-height: 150px !important;
    }

        .related-product-horizontal-card .related-product-image-side,
        .related-product-horizontal-card .related-product-img,
        .related-product-horizontal-card .related-product-no-image,
        .related-product-horizontal-card .related-product-content-side {
            min-height: 150px !important;
        }

        .related-product-horizontal-card .related-product-image-side {
            width: 35% !important;
            max-width: 35% !important;
            flex-basis: 35% !important;
        }

        .related-product-horizontal-card .related-product-content-side {
            width: 65% !important;
            max-width: 65% !important;
            flex-basis: 65% !important;
            padding: 12px 10px !important;
        }

        .related-product-horizontal-card .related-product-name {
            font-size: 0.98rem !important;
        }

        .related-product-horizontal-card .related-product-details {
            font-size: 0.74rem !important;
        }
}

/* =====================================================
   Product Technical Detail
   ===================================================== */

.product-detail-tech-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

    /* Image Column */
    .product-detail-tech-section .product-tech-image {
        width: 100%;
        height: 50vh;
        min-height: 350px;
        max-height: 600px;
        object-fit: cover;
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        display: block;
    }

/* Desktop */
@media (min-width: 992px) {

    .product-detail-tech-section > div:first-child {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .product-detail-tech-section > div:last-child {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Tablet */
@media (max-width: 991.98px) {

    .product-detail-tech-section .product-tech-image {
        height: 40vh;
        min-height: 280px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {

    .product-detail-tech-section {
        gap: 1rem;
    }

        .product-detail-tech-section .product-tech-image {
            width: 100%;
            height: 35vh;
            min-height: 220px;
            max-height: 350px;
        }

        .product-detail-tech-section > div {
            width: 100%;
            max-width: 100%;
            flex: 0 0 100%;
        }
}



/* ====================================================================== */
/* Products/Details V3 - Bootstrap 5.3 responsive redesign                 */
/* ====================================================================== */
/* Purpose:
   - Scoped redesign for Views/Products/Details.cshtml.
   - Keeps carousel and text in clean 6/6 columns on large screens.
   - Stacks all content as col-12 on tablet/mobile.
   - Does not depend on old Bootstrap 3 classes such as col-xs-*.
   - Uses unique v3 class names to avoid breaking Home, Projects, Exam,
     Reservation, Calendar, or existing cards.
*/

:root {
    --pd-v3-purple: var(--product-footer-purple, #442f8c);
    --pd-v3-purple-soft: var(--product-footer-purple-soft, #f4f0fb);
    --pd-v3-purple-border: var(--product-footer-border, #e6ddf5);
    --pd-v3-text: #252836;
    --pd-v3-muted: #747586;
    --pd-v3-bg: #fbfaff;
    --pd-v3-card: #ffffff;
    --pd-v3-shadow: 0 22px 60px rgba(88, 73, 139, 0.12);
    --pd-v3-soft-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
    --pd-v3-radius-lg: 28px;
    --pd-v3-radius-md: 20px;
    /* Sep 2026: this whole "product-details-v3" redesign had ZERO
       dark-mode awareness (no consumer of "html.a11y-dark-mode" anywhere
       below) until this pass - dark values for every "--pd-v3-*" token,
       plus the few colors below that were still hardcoded outside any
       variable, are added together in SitePurple.css section 18.29. See
       that section's own comment for the full reasoning, including why
       "--pd-v3-purple" itself (not just its "-soft"/"-border" siblings)
       needed a dark-mode value: it is read as TEXT/icon color against a
       page background that itself changes between themes, not a solid
       opaque fill, so it does not qualify for this project's
       "solid-fill accents don't need tokenizing" exception. */
}

/* Main page wrapper. */
.product-details-v3 {
    width: 100% !important;
    overflow-x: hidden !important;
    /*background: radial-gradient(circle at 12% 10%, rgba(152, 139, 193, 0.16), transparent 34%), radial-gradient(circle at 86% 22%, rgba(88, 73, 139, 0.10), transparent 30%), linear-gradient(180deg, #ffffff 0%, #fbfaff 48%, #ffffff 100%) !important;*/
    color: var(--pd-v3-text) !important;
}

/* Shared container for all product detail sections. */
.product-details-container-v3 {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(14px, 2vw, 24px) !important;
    padding-right: clamp(14px, 2vw, 24px) !important;
}

/* ====================================================================== */
/* Hero section                                                            */
/* ====================================================================== */

.product-hero-v3 {
    padding-top: clamp(36px, 5vw, 86px) !important;
    padding-bottom: clamp(36px, 5vw, 86px) !important;
}

.product-hero-row-v3 {
    min-height: clamp(520px, 68vh, 780px) !important;
}

/* Keeps the media column visually centered inside its own 6-column side. */
.product-hero-media-col-v3 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
}

/* Keeps the text column on the opposite side and prevents it from touching carousel. */
.product-hero-text-col-v3 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
}

/* Product carousel shell (Sep 2026: no more white card - fully transparent,
   no border/background/padding of its own. The shell only sizes/centers the
   carousel; the "card" look now lives on the image itself, see
   ".product-carousel-img-v3" below. overflow is "visible" (was "hidden")
   so the image's own drop-shadow isn't clipped at the shell's edge. */
.product-carousel-shell-v3 {
    width: 100% !important;
    max-width: 560px !important;
    min-height: clamp(420px, 52vw, 620px) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* Carousel itself fills the shell, not the whole page. */
.product-carousel-v3,
.product-carousel-inner-v3,
.product-carousel-item-v3 {
    width: 100% !important;
    height: 100% !important;
    min-height: clamp(360px, 45vw, 540px) !important;
}

/* Important:
   object-fit: contain is intentional.
   Technical/grid/product drawings must not be cropped.

   Sep 2026: dropped the white card behind this image (see
   ".product-carousel-shell-v3" above) - now it's just the picture, tightly
   fit, transparent everywhere else, with rounded corners and its own drop
   shadow doing the "card" look instead of a background box. */
/* Sep 2026: was "background: transparent !important" - with
   "object-fit: contain", any image whose aspect ratio doesn't exactly
   match this box's own width/height is letterboxed, leaving empty,
   fully transparent space between the actual photographed pixels and
   this element's own rounded corners. A transparent box has nothing
   visible AT those corners for "border-radius" to round, so in
   practice the image looked completely square regardless of the
   18px radius above - confirmed by rendering both a landscape and a
   portrait test image through this exact CSS before/after. Filling the
   box with "--pd-v3-card" (the light "card" surface color everywhere
   else on this page, dark-value'd in SitePurple.css 18.29) restores a
   real visible surface behind the letterboxed picture, so the rounded
   corners actually show, in both themes, regardless of the image's own
   aspect ratio. */
.product-carousel-img-v3 {
    width: 100% !important;
    height: clamp(360px, 45vw, 540px) !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 18px !important;
    background: var(--pd-v3-card) !important;
    box-shadow: var(--pd-v3-shadow) !important;
}

/* Carousel control buttons. */
.product-carousel-control-v3 {
    top: 50% !important;
    bottom: auto !important;
    width: 48px !important;
    height: 48px !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    background: rgba(88, 73, 139, 0.92) !important;
    box-shadow: 0 10px 22px rgba(88, 73, 139, 0.22) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

    .product-carousel-control-v3:hover,
    .product-carousel-control-v3:focus {
        background: var(--pd-v3-purple) !important;
        transform: translateY(-50%) scale(1.06) !important;
    }

.product-carousel-control-prev-v3 {
    left: 18px !important;
}

.product-carousel-control-next-v3 {
    right: 18px !important;
}

.product-carousel-control-v3 .carousel-control-prev-icon,
.product-carousel-control-v3 .carousel-control-next-icon {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
}

/* Carousel dots. */
.product-carousel-indicators-v3 {
    bottom: 12px !important;
    margin-bottom: 0 !important;
}

    .product-carousel-indicators-v3 [data-bs-target] {
        width: 11px !important;
        height: 11px !important;
        border-radius: 50% !important;
        border: 0 !important;
        background-color: rgba(88, 73, 139, 0.36) !important;
        opacity: 1 !important;
    }

    .product-carousel-indicators-v3 .active {
        background-color: var(--pd-v3-purple) !important;
    }

/* Product text card. */
.product-hero-content-v3 {
    width: 100% !important;
    max-width: 560px !important;
    padding: clamp(18px, 2vw, 28px) !important;
}

.product-kicker-v3,
.product-section-kicker-v3 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    background: var(--pd-v3-purple-soft) !important;
    border: 1px solid var(--pd-v3-purple-border) !important;
    color: var(--pd-v3-purple) !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.product-title-v3 {
    margin: 18px 0 0 0 !important;
    color: var(--pd-v3-text) !important;
    font-size: clamp(1.6rem, 7vw, 2.8rem) !important;
    line-height: 0.96 !important;
    font-weight: 950 !important;
    letter-spacing: -0.06em !important;
}

.product-description-v3 {
    max-width: 520px !important;
    margin: 26px 0 0 0 !important;
    color: var(--pd-v3-muted) !important;
    font-size: clamp(1.05rem, 1.4vw, 1.35rem) !important;
    line-height: 1.9 !important;
    font-weight: 650 !important;
}

.product-action-row-v3 {
    margin-top: 28px !important;
}

.product-download-btn-v3 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--navbar-left, #988bc1), var(--navbar-right, #58498b)) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 26px rgba(88, 73, 139, 0.24) !important;
}

    .product-download-btn-v3:hover,
    .product-download-btn-v3:focus {
        color: #ffffff !important;
        transform: translateY(-2px) !important;
    }

/* ====================================================================== */
/* General and Technical specification sections                            */
/* ====================================================================== */

.product-spec-section-v3,
.related-products-detail-section-v3 {
    padding-top: clamp(38px, 5vw, 76px) !important;
    padding-bottom: clamp(38px, 5vw, 76px) !important;
}

.product-section-header-v3 {
    margin-bottom: clamp(24px, 4vw, 42px) !important;
}

.product-section-title-v3 {
    margin: 14px 0 0 0 !important;
    color: var(--pd-v3-text) !important;
    font-size: clamp(2rem, 4vw, 3.6rem) !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
    font-size: 20px !important;
}

.product-spec-row-v3 {
    margin-bottom: clamp(28px, 4vw, 52px) !important;
}

/* Specification image card (Sep 2026: same "no card, just the picture" look
   as ".product-carousel-shell-v3" above - transparent, no border, no
   padding, no shadow of its own; overflow is "visible" so the image's own
   drop-shadow below isn't clipped). */
.product-spec-image-card-v3 {
    width: 100% !important;
    min-height: clamp(320px, 42vw, 560px) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* Sep 2026: added "background: var(--pd-v3-card)" - same
   letterboxed-corners fix as ".product-carousel-img-v3" above, needed
   here for the same reason (this image also uses "object-fit: contain",
   currently only reachable from the live Technical section - the
   General section this also serves is force-hidden with "d-none" in
   Details.cshtml, see that file's own comment). */
.product-spec-img-v3 {
    width: 100% !important;
    height: clamp(280px, 38vw, 500px) !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 16px !important;
    background: var(--pd-v3-card) !important;
    box-shadow: var(--pd-v3-soft-shadow) !important;
}

/* Specification text card.
   Sep 2026: "background"/"border" here used to be literal colors, not
   variables - this is the exact spot the user reported as "the text in
   the Technical section has a light background" in dark mode (this card
   wraps the Technical dt/dl list below). Routed through 2 new page-local
   tokens, dark values in SitePurple.css 18.29. */
.product-spec-card-v3 {
    width: 100% !important;
    background: var(--pd-v3-spec-card-bg, rgba(255,255,255,0.82)) !important;
    border: 1px solid var(--pd-v3-spec-card-border, rgba(230, 221, 245, 0.72)) !important;
    border-radius: var(--pd-v3-radius-lg) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05) !important;
    padding: clamp(18px, 2.2vw, 30px) !important;
}

/* Definition-list grid.
   Each pair is rendered as:
   dt = label
   dd = value */
.product-spec-list-v3 {
    display: grid !important;
    grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.1fr) !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

    /* Sep 2026: "border-bottom"/"dt"/"dd" colors here used to be literal
       hex, not variables - part of the same "Technical section has a
       light background/unreadable text" gap as ".product-spec-card-v3"
       above (the "dd" value color especially: #151827 is near-black,
       effectively invisible on this page's dark background once the
       card behind it is fixed). Dark values in SitePurple.css 18.29. */
    .product-spec-list-v3 dt,
    .product-spec-list-v3 dd {
        min-height: 48px !important;
        margin: 0 !important;
        padding: 13px 0 !important;
        border-bottom: 1px solid var(--pd-v3-spec-divider, rgba(203, 213, 225, 0.70)) !important;
        line-height: 1.55 !important;
    }

    .product-spec-list-v3 dt {
        color: var(--pd-v3-spec-label, #a9a8b7) !important;
        font-weight: 900 !important;
        font-size: 0.95rem !important;
    }

    .product-spec-list-v3 dd {
        color: var(--pd-v3-spec-value, #151827) !important;
        font-weight: 800 !important;
        font-size: 1rem !important;
        word-break: break-word !important;
    }

/* Technical image keeps square/grid drawings readable. */
.product-technical-image-card-v3 {
    min-height: clamp(320px, 40vw, 560px) !important;
}

.product-technical-img-v3 {
    object-fit: contain !important;
}

/* Empty image placeholder.
   Sep 2026: "background" here used to be a literal light lavender-to-
   white gradient, not a variable - shown whenever a product/related
   product has no image at all. Routed through 2 new page-local tokens
   (a gradient needs 2 stops, so 1 token each), dark values in
   SitePurple.css 18.29. */
.product-empty-image-v3 {
    width: 100% !important;
    min-height: 280px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, var(--pd-v3-empty-bg-start, #f8f5ff), var(--pd-v3-empty-bg-end, #ffffff)) !important;
    color: var(--pd-v3-purple) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    text-align: center !important;
}

    .product-empty-image-v3 i {
        font-size: 2rem !important;
        color: var(--pd-v3-purple) !important;
    }

/* ====================================================================== */
/* Related Products                                                        */
/* ====================================================================== */

.related-product-card-v3 {
    width: 100% !important;
    min-height: 190px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    /* Sep 2026: tokenized so the dark theme (SitePurple.css 18.29) can
       override this card's surface/border - same pattern as the
       .product-spec-card-v3 fix above. Fallback keeps the original
       light-mode literal unchanged when no dark override is active. */
    background: var(--pd-v3-related-card-bg, #ffffff) !important;
    border: 1px solid var(--pd-v3-related-card-border, rgba(230, 221, 245, 0.90)) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08) !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

    .related-product-card-v3:hover,
    .related-product-card-v3:focus {
        transform: translateY(-4px) !important;
        box-shadow: 0 22px 45px rgba(88, 73, 139, 0.18) !important;
        color: inherit !important;
        text-decoration: none !important;
    }

.related-product-image-side-v3 {
    width: 40% !important;
    flex: 0 0 40% !important;
    min-height: 190px !important;
    /* Sep 2026: tokenized - same dark-mode reasoning as the card bg above. */
    background: var(--pd-v3-related-image-bg, #f5f1fb) !important;
    overflow: hidden !important;
}

.related-product-img-v3 {
    width: 100% !important;
    height: 100% !important;
    min-height: 190px !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

.related-product-no-image-v3 {
    width: 100% !important;
    height: 100% !important;
    min-height: 190px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--pd-v3-purple) !important;
    font-size: 1.8rem !important;
}

.related-product-content-side-v3 {
    width: 60% !important;
    flex: 0 0 60% !important;
    padding: 18px 18px 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.related-product-name-v3 {
    margin: 0 0 12px 0 !important;
    color: var(--pd-v3-purple) !important;
    font-size: 1.2rem !important;
    font-weight: 950 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

.related-product-details-v3 {
    width: 100% !important;
}

.related-product-detail-line-v3 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px 0 !important;
}

.related-product-detail-icon-v3 {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    border: 2px solid var(--pd-v3-purple-border) !important;
    /* Sep 2026: tokenized - small circular icon badge, same reasoning
       as the other related-product surfaces above. */
    background: var(--pd-v3-icon-circle-bg, #ffffff) !important;
    color: var(--pd-v3-purple) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .related-product-detail-icon-v3 i,
    .related-product-pain-icon-v3 i {
        color: var(--pd-v3-purple) !important;
    }

.related-product-detail-content-v3 {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
}

    .related-product-detail-content-v3 strong {
        color: var(--pd-v3-purple) !important;
        font-weight: 950 !important;
    }

    .related-product-detail-content-v3 span {
        color: var(--pd-v3-muted) !important;
        font-weight: 700 !important;
    }

.related-product-pain-box-v3 {
    width: 100% !important;
    min-height: 42px !important;
    margin-top: 8px !important;
    padding: 8px 12px !important;
    border-radius: 18px !important;
    border: 1px solid var(--pd-v3-purple-border) !important;
    background: var(--pd-v3-purple-soft) !important;
    color: var(--pd-v3-purple) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    text-align: center !important;
}

/* RTL related product behavior. */
html[dir="rtl"] .related-product-card-v3,
html[dir="rtl"] .related-product-content-side-v3,
html[dir="rtl"] .related-product-details-v3 {
    direction: rtl !important;
}

html[dir="rtl"] .related-product-detail-line-v3 {
    flex-direction: row !important;
    text-align: right !important;
}

/* LTR related product behavior. */
html[dir="ltr"] .related-product-card-v3,
html[dir="ltr"] .related-product-content-side-v3,
html[dir="ltr"] .related-product-details-v3 {
    direction: ltr !important;
}

html[dir="ltr"] .related-product-detail-line-v3 {
    flex-direction: row !important;
    text-align: left !important;
}

/* ====================================================================== */
/* Responsive behavior                                                     */
/* ====================================================================== */

/* Tablet and below. */
@media (max-width: 991.98px) {
    .product-hero-row-v3 {
        min-height: auto !important;
    }

    .product-carousel-shell-v3,
    .product-hero-content-v3 {
        max-width: 100% !important;
    }

    .product-hero-content-v3 {
        text-align: center !important;
    }

    .product-description-v3 {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .product-spec-card-v3 {
        margin-top: 0 !important;
    }
}

/* Mobile. */
@media (max-width: 767.98px) {
    .product-hero-v3 {
        padding-top: 22px !important;
        padding-bottom: 32px !important;
    }

    .product-carousel-shell-v3 {
        min-height: 360px !important;
    }

    .product-carousel-v3,
    .product-carousel-inner-v3,
    .product-carousel-item-v3 {
        min-height: 320px !important;
    }

    .product-carousel-img-v3 {
        height: 320px !important;
    }

    .product-carousel-control-v3 {
        width: 42px !important;
        height: 42px !important;
    }

    .product-carousel-control-prev-v3 {
        left: 10px !important;
    }

    .product-carousel-control-next-v3 {
        right: 10px !important;
    }

    .product-title-v3 {
        font-size: clamp(1.4rem, 18vw, 1.2rem) !important;
        letter-spacing: -0.045em !important;
    }

    .product-description-v3 {
        font-size: 1rem !important;
        line-height: 1.8 !important;
    }

    .product-spec-list-v3 {
        grid-template-columns: 1fr !important;
    }

        .product-spec-list-v3 dt {
            min-height: 0 !important;
            padding: 12px 0 3px 0 !important;
            border-bottom: 0 !important;
        }

        .product-spec-list-v3 dd {
            min-height: 0 !important;
            padding: 3px 0 12px 0 !important;
        }

    .product-spec-image-card-v3,
    .product-technical-image-card-v3 {
        min-height: 300px !important;
    }

    .product-spec-img-v3,
    .product-technical-img-v3 {
        height: auto !important;
        max-height: 420px !important;
    }

    .related-products-detail-section-v3 {
        padding-bottom: 90px !important;
    }

    .related-product-card-v3 {
        min-height: 160px !important;
        border-radius: 20px !important;
    }

    .related-product-image-side-v3,
    .related-product-img-v3,
    .related-product-no-image-v3 {
        min-height: 160px !important;
    }

    .related-product-content-side-v3 {
        padding: 14px 12px !important;
    }

    .related-product-name-v3 {
        font-size: 1rem !important;
        margin-bottom: 9px !important;
    }

    .related-product-detail-icon-v3 {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 0.8rem !important;
    }

    .related-product-detail-content-v3 {
        font-size: 0.78rem !important;
        gap: 5px !important;
    }

    .related-product-pain-box-v3 {
        min-height: 36px !important;
        padding: 6px 8px !important;
        font-size: 0.78rem !important;
    }
}

/* Very small mobile. */
@media (max-width: 380px) {
    .product-details-container-v3 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .product-carousel-shell-v3 {
        min-height: 320px !important;
    }

    .product-carousel-v3,
    .product-carousel-inner-v3,
    .product-carousel-item-v3 {
        min-height: 280px !important;
    }

    .product-carousel-img-v3 {
        height: 280px !important;
    }

    .related-product-image-side-v3 {
        width: 36% !important;
        flex-basis: 36% !important;
    }

    .related-product-content-side-v3 {
        width: 64% !important;
        flex-basis: 64% !important;
    }
}

/* =========================================================
   Product Details V3 - Carousel controller separation fix
   Purpose:
   - Prevent previous/next buttons from overlapping.
   - Keep one button on the left and one on the right.
   ========================================================= */

.product-details-v2 .carousel-control-prev,
.product-details-v2 .pdv3-carousel-control-prev {
    left: 22px !important;
    right: auto !important;
}

.product-details-v2 .carousel-control-next,
.product-details-v2 .pdv3-carousel-control-next {
    right: 22px !important;
    left: auto !important;
}

.product-details-v2 .carousel-control-prev,
.product-details-v2 .carousel-control-next {
    width: 56px !important;
    height: 56px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
}

@media (max-width: 767.98px) {
    .product-details-v2 .carousel-control-prev,
    .product-details-v2 .pdv3-carousel-control-prev {
        left: 10px !important;
        right: auto !important;
    }

    .product-details-v2 .carousel-control-next,
    .product-details-v2 .pdv3-carousel-control-next {
        right: 10px !important;
        left: auto !important;
    }
}

/* ====================================================================== */
/* End Products/Details V3                                                */
/* ====================================================================== */

/* FINAL FIX - Product Details V3 carousel buttons */

#productDetailsCarouselV3 {
    position: relative !important;
}

    #productDetailsCarouselV3 .product-carousel-control-v3 {
        position: absolute !important;
        top: 50% !important;
        bottom: auto !important;
        width: 48px !important;
        height: 48px !important;
        transform: translateY(-50%) !important;
        opacity: 1 !important;
        z-index: 20 !important;
    }

    /* Previous button: LEFT side */
    #productDetailsCarouselV3 .product-carousel-control-prev-v3 {
        left: 18px !important;
        right: auto !important;
    }

    /* Next button: RIGHT side */
    #productDetailsCarouselV3 .product-carousel-control-next-v3 {
        right: 18px !important;
        left: auto !important;
    }

/* Mobile spacing */
@media (max-width: 767.98px) {
    #productDetailsCarouselV3 .product-carousel-control-prev-v3 {
        left: 10px !important;
        right: auto !important;
    }

    #productDetailsCarouselV3 .product-carousel-control-next-v3 {
        right: 10px !important;
        left: auto !important;
    }
}

/* Fixed Reservation Button */
.reservation-tab {
    position: fixed;
    left: 0;
    bottom: 50px;
    z-index: 99999;
    background: #988bc196;
    color: #fff !important;
    width: 60px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    /* فقط سمت راست گرد */
    border-radius: 0 20px 20px 0;
    box-shadow: 0 8px 25px rgba(0,0,0,.50);
    font-weight: 700;
    font-size: 18px;
    transition: all .3s ease;
    /* متن عمودی */
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

    .reservation-tab:hover {
        color: #fff !important;
        transform: translateX(5px);
    }

/* Fixed Contact Icons Button (SMS / Call / Telegram)
   Mirrors .reservation-tab on the opposite edge: same width, height,
   purple translucent fill, shadow and hover slide, but holds a column of
   round icon buttons instead of a single vertical text line - so the two
   read as a matched pair on either side of the screen. */
.sms-tab {
    position: fixed;
    right: 0;
    bottom: 50px;
    z-index: 99999;
    background: #988bc196;
    width: 60px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    /* فقط سمت چپ گرد */
    border-radius: 20px 0 0 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,.50);
    transition: all .3s ease;
}

    .sms-tab:hover {
        transform: translateX(-5px);
    }

    .sms-tab .contact-action {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,0.16);
        color: #fff !important;
        font-size: 17px;
        text-decoration: none;
        transition: all .25s ease;
    }

        .sms-tab .contact-action:hover,
        .sms-tab .contact-action:focus {
            background: #ffffff;
            color: #58498b !important;
            transform: scale(1.1);
        }

@media (max-width: 400px) {
    .sms-tab {
        width: 52px;
        height: 156px;
        gap: 8px;
    }

        .sms-tab .contact-action {
            width: 34px;
            height: 34px;
            font-size: 15px;
        }
}



/* ======================================================================
   Client Reservation Records Profile
   Scope: Views/ClientReservationRecords/Profile.cshtml
   Bootstrap 5.3 compatible
   Additive only - does not alter existing modules
   ====================================================================== */


/* ------------------------------------------------------------------------
   Color tokens (dark-mode ready) - every color used below is a var() that
   reads from this block, so there is no hardcoded hex/rgba left in this
   section. Dark-mode values for these exact variable names are defined in
   SitePurple.css under "html.a11y-dark-mode" - override them there, not
   here, and this whole component recolors itself automatically.
   ------------------------------------------------------------------------ */
:root {
    --crp-page-bg: #f8f9fb;
    --crp-card-bg: #ffffff;
    --crp-card-border: #e9ecef;
    --crp-card-shadow: rgba(15, 23, 42, 0.06);
    --crp-accent: #0d6efd;
    --crp-accent-soft: rgba(13, 110, 253, 0.06);
    --crp-text-heading: #2c2f3a;
    --crp-text-value: #252836;
    --crp-text-muted: #7b8190;
    --crp-text-body: #333846;
    --crp-text-service: #596070;
    --crp-text-faint: #666;
    --crp-text-placeholder: #999;
    --crp-timeline-line: #dfe3ea;
    --crp-surface-soft: #fbfbfd;
    --crp-surface-muted: #f3f4f6;
    --crp-surface-image: #f1f3f6;
    --crp-service-img-border: #e5e7eb;
    --crp-avatar-border: #ddd;
    --crp-avatar-shadow: rgba(0, 0, 0, 0.25);
    --crp-badge-overlay-bg: rgba(0, 0, 0, 0.52);
    --crp-badge-overlay-text: #ffffff;
    --crp-status-info-bg: #eef2ff;
    --crp-status-info-text: #3949ab;
    --crp-status-completed-bg: #e8f7ee;
    --crp-status-completed-text: #198754;
    --crp-status-pending-bg: #fff7e6;
    --crp-status-pending-text: #b7791f;
    --crp-status-canceled-bg: #fdecec;
    --crp-status-canceled-text: #dc3545;
    --crp-mobile-actions-bg: rgba(248, 249, 251, 0.92);
}

/* ── Page shell ───────────────────────────────────────────────────────── */

.crp-page {
    background: var(--crp-page-bg);
    min-height: calc(100vh - 90px);
}

/* Used by the "Images and Doc" upload partial (Imgs/ClientReservationRecords_profile.cshtml) -
   was a hardcoded inline "background: #ffffff" before Sep 2026. */
.crp-upload-card {
    background: var(--crp-card-bg);
}

.crp-shell {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(310px, 0.82fr) minmax(0, 1.85fr);
    gap: 1rem;
    align-items: start;
}

.crp-left,
.crp-right {
    min-width: 0;
}

/* ── Card ─────────────────────────────────────────────────────────────── */

.crp-card {
    background: var(--crp-card-bg);
    border: 1px solid var(--crp-card-border);
    border-radius: 18px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 28px var(--crp-card-shadow);
}

/* ── Typography helpers ───────────────────────────────────────────────── */

.crp-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--crp-text-heading);
    margin-bottom: 0.85rem;
}

.crp-detail-title {
    justify-content: space-between;
}

.crp-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--crp-text-muted);
    margin-bottom: 0.18rem;
}

.crp-value {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--crp-text-value);
    word-break: break-word;
}

/* ── Grids ────────────────────────────────────────────────────────────── */

.crp-profile-grid,
.crp-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

/* ── Timeline ─────────────────────────────────────────────────────────── */

.crp-timeline {
    position: relative;
    padding-inline-start: 0.55rem;
}

    .crp-timeline::before {
        content: "";
        position: absolute;
        top: 0.4rem;
        bottom: 0.4rem;
        inset-inline-start: 0.82rem;
        width: 2px;
        background: var(--crp-timeline-line);
    }

/*
 * .crp-timeline-item
 * Merged from three declarations. The "FINAL FIX" values win in the
 * original file (via !important); they are now the single source of truth.
 * The !important annotations are kept only where the original relied on
 * them to beat an intermediate rule — now that there is no intermediate
 * rule they are dropped, keeping the specificity clean.
 */
.crp-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
    padding: 0.55rem 0;
    border-radius: 12px;
    min-height: 76px;
    overflow: visible;
}

    .crp-timeline-item:hover,
    .crp-timeline-item.active {
        background: var(--crp-accent-soft);
    }

/*
 * .crp-timeline-dot
 * Original used absolute positioning; the FINAL FIX reset it back to
 * relative/in-flow. Merged result keeps the in-flow version (matches
 * current behaviour).
 */
.crp-timeline-dot {
    position: relative;
    z-index: 2;
    width: 0.72rem;
    height: 0.72rem;
    margin-top: 0.28rem;
    flex: 0 0 0.72rem;
    border-radius: 50%;
    background: var(--crp-card-bg);
    border: 3px solid var(--crp-accent);
}

.crp-timeline-item.active .crp-timeline-dot {
    background: var(--crp-accent);
}

/*
 * .crp-timeline-content
 * Merged from two declarations.
 */
.crp-timeline-content {
    min-width: 0;
    max-width: calc(100% - 1.5rem);
    display: block;
}

.crp-timeline-date {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--crp-text-value);
}

    .crp-timeline-date small {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--crp-text-muted);
        margin-inline-start: 0.25rem;
    }

.crp-timeline-service {
    display: block;
    font-size: 0.74rem;
    color: var(--crp-text-service);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Timeline service image ───────────────────────────────────────────── */

/*
 * .crp-timeline-service-image-box
 * Three declarations collapsed into one.
 * The FINAL FIX placed it at inset-inline-end: 14px, top: 50%.
 * The intermediate html[dir="ltr"] override set inset-inline-end and
 * cleared inset-inline-start — that behaviour is now the default here
 * because the FINAL FIX already nullified the RTL-first positioning.
 */
.crp-timeline-service-image-box {
    position: absolute;
    inset-inline-end: 14px;
    inset-inline-start: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/*
 * .crp-timeline-service-image
 * Two declarations collapsed into one (values were identical).
 */
.crp-timeline-service-image {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--crp-service-img-border);
    background: var(--crp-card-bg);
}

/* ── Status badges ────────────────────────────────────────────────────── */

.crp-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    padding: 0.16rem 0.5rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    font-size: 0.68rem;
    line-height: 1.3;
    font-weight: 800;
    background: var(--crp-status-info-bg);
    color: var(--crp-status-info-text);
}

.crp-status-completed {
    background: var(--crp-status-completed-bg);
    color: var(--crp-status-completed-text);
}

.crp-status-reserved,
.crp-status-pending,
.crp-status-reservedprofileconditional {
    background: var(--crp-status-pending-bg);
    color: var(--crp-status-pending-text);
}

.crp-status-canceled,
.crp-status-cancelled {
    background: var(--crp-status-canceled-bg);
    color: var(--crp-status-canceled-text);
}

/* ── Text / comment boxes ─────────────────────────────────────────────── */

.crp-comment-box {
    margin-top: 1rem;
}

.crp-text-box {
    width: 100%;
    min-height: 72px;
    padding: 0.75rem;
    border: 1px solid var(--crp-card-border);
    border-radius: 12px;
    background: var(--crp-surface-soft);
    color: var(--crp-text-body);
    font-size: 0.84rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.crp-comment-textarea {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    font-size: 0.84rem !important;
    line-height: 1.6 !important;
    resize: vertical;
}

/* ── Images ───────────────────────────────────────────────────────────── */

.crp-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.crp-image-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--crp-surface-image);
    aspect-ratio: 4 / 3;
}

    .crp-image-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.crp-image-badge {
    position: absolute;
    top: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 2;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--crp-badge-overlay-text);
    background: var(--crp-badge-overlay-bg);
}

/* ── File list ────────────────────────────────────────────────────────── */

.crp-file-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.crp-file-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--crp-card-border);
    border-radius: 12px;
    background: var(--crp-surface-soft);
    color: var(--crp-text-body);
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 0;
}

    .crp-file-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .crp-file-item:hover {
        border-color: var(--crp-accent);
        color: var(--crp-accent);
    }

/* ── Empty state ──────────────────────────────────────────────────────── */

.crp-empty {
    color: var(--crp-text-muted);
    font-size: 0.82rem;
    padding: 0.7rem;
    border-radius: 12px;
    background: var(--crp-surface-soft);
}

/* ── Action bars ──────────────────────────────────────────────────────── */

.crp-desktop-actions,
.crp-mobile-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.crp-mobile-actions {
    display: none;
}

.crp-action-btn {
    min-width: 100px;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
}

.crp-save-msg {
    margin-top: 0.45rem;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--crp-text-muted);
}

    .crp-save-msg.success {
        color: var(--crp-status-completed-text);
    }

    .crp-save-msg.error {
        color: var(--crp-status-canceled-text);
    }

/* ── Avatar & service images ──────────────────────────────────────────── */

.crp-flex {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crp-avatar,
.crp-avatar-empty {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.crp-avatar {
    border: 1px solid var(--crp-avatar-border);
    object-fit: cover;
    object-position: center top;
    box-shadow: 0 4px 10px var(--crp-avatar-shadow);
}

.crp-avatar-empty {
    background: var(--crp-surface-muted);
    color: var(--crp-text-faint);
    font-size: 16px;
}

.crp-timeline-img-wrap {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 10px;
}

.crp-service-img,
.crp-service-img-empty,
.crp-selected-service-img {
    width: 100px;
    height: 100px;
    min-width: 100px;
    border-radius: 14px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.crp-service-img,
.crp-selected-service-img {
    border: 1px solid var(--crp-service-img-border);
    background: var(--crp-card-bg);
}

.crp-service-img-empty {
    background: var(--crp-surface-muted);
    color: var(--crp-text-placeholder);
    font-size: 18px;
}

/*
 * .crp-selected-service-img
 * Two declarations merged. The second added margin-inline-start: auto and
 * a box-shadow and dropped margin-inline-end; both sets of properties are
 * preserved here.
 */
.crp-selected-service-img {
    margin-inline-end: 12px;
    margin-inline-start: auto;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* ── Responsive — Desktop wide ────────────────────────────────────────── */

@media (min-width: 1200px) {
    .crp-shell {
        grid-template-columns: minmax(330px, 0.72fr) minmax(0, 2fr);
        gap: 1.25rem;
    }

    .crp-card {
        padding: 1.15rem;
    }
}

/* ── Responsive — Tablet ──────────────────────────────────────────────── */

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

    .crp-left,
    .crp-right {
        width: 100%;
    }

    .crp-desktop-actions {
        display: none;
    }

    .crp-mobile-actions {
        display: flex;
        position: sticky;
        bottom: 60px;
        z-index: 20;
        background: var(--crp-mobile-actions-bg);
        backdrop-filter: blur(8px);
        padding: 0.55rem 0;
    }
}

/* ── Responsive — Mobile ──────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .crp-page {
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
        padding-bottom: 4.5rem !important;
    }

    .crp-shell {
        gap: 0.65rem;
    }

    .crp-card {
        border-radius: 14px;
        padding: 0.72rem;
        margin-bottom: 0.65rem;
    }

    .crp-section-title {
        font-size: 0.78rem;
        margin-bottom: 0.55rem;
    }

    .crp-profile-grid,
    .crp-detail-grid {
        gap: 0.45rem;
    }

    .crp-label {
        font-size: 0.62rem;
    }

    .crp-value {
        font-size: 0.72rem;
    }

    .crp-timeline-card {
        max-height: 38vh;
        overflow-y: auto;
    }

    .crp-timeline-item {
        padding-top: 0.42rem;
        padding-bottom: 0.42rem;
    }

    .crp-timeline-date {
        font-size: 0.68rem;
    }

        .crp-timeline-date small {
            font-size: 0.62rem;
        }

    .crp-timeline-service {
        font-size: 0.64rem;
    }

    .crp-status {
        font-size: 0.58rem;
        padding: 0.12rem 0.42rem;
    }

    .crp-text-box,
    .crp-comment-textarea {
        font-size: 0.7rem !important;
        min-height: 62px;
    }

    .crp-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .crp-image-item {
        border-radius: 12px;
        aspect-ratio: 1 / 1;
    }

    .crp-file-list {
        grid-template-columns: 1fr;
    }

    .crp-file-item {
        font-size: 0.68rem;
        padding: 0.55rem;
    }

    .crp-action-btn {
        flex: 1 1 0;
        min-width: 0;
        font-size: 0.68rem !important;
        padding: 0.48rem 0.35rem !important;
    }

    .crp-empty {
        font-size: 0.68rem;
        padding: 0.55rem;
    }
}

/* ── RTL / LTR support ────────────────────────────────────────────────── */

html[dir="rtl"] .crp-page,
html[dir="rtl"] .crp-card,
html[dir="rtl"] .crp-value,
html[dir="rtl"] .crp-label {
    direction: rtl;
    text-align: right;
}

html[dir="ltr"] .crp-page {
    direction: ltr;
}

/*=============================================================*/
/*=============================================================*/
/*======================= Inventory ===========================*/
/* ======================================================================
   Clinic Inventory - Dr Hoda Purple UI
   Bootstrap 5.3 / MVC 4.8 / RTL
   Put this at the END of SitePurple.css
   ====================================================================== */

:root {
    --ci-purple-main: #58498b;
    --ci-purple-light: #988bc1;
    --ci-purple-soft: #f7f3ff;
    --ci-purple-border: #e6ddf5;
    --ci-purple-muted: #6f5b84;
    --ci-gold: #d4af37;
    --ci-text: #2b2b2b;
    --ci-muted: #6b7280;
    --ci-bg: #f8f6fc;
    --ci-white: #ffffff;
    --ci-radius-sm: 10px;
    --ci-radius-md: 14px;
    --ci-radius-lg: 20px;
    --ci-shadow: 0 10px 28px rgba(88, 73, 139, 0.14);
}

/* Page wrapper */
.clinic-inventory-page {
    direction: rtl !important;
    text-align: right !important;
    font-family: 'Shabnam-FD', Shabnam, Tahoma, Arial, sans-serif !important;
    background: var(--ci-bg);
    min-height: calc(100vh - 80px);
    padding: 28px 16px 90px 16px;
    color: var(--ci-text);
}

    /* Fix global Site.css problems */
    .clinic-inventory-page *,
    .clinic-inventory-page .card,
    .clinic-inventory-page .card-title,
    .clinic-inventory-page .card-text {
        text-align: right !important;
    }

    .clinic-inventory-page input,
    .clinic-inventory-page select,
    .clinic-inventory-page textarea,
    .clinic-inventory-page .form-control,
    .clinic-inventory-page .form-select {
        max-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

/* Main shell */
.clinic-inventory-shell {
    max-width: 1220px;
    margin: 0 auto;
}

/* Header */
.ci-page-header {
    background: linear-gradient(135deg, var(--ci-purple-main), var(--ci-purple-light));
    color: #ffffff;
    border-radius: var(--ci-radius-lg);
    padding: 18px 22px;
    box-shadow: var(--ci-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.ci-page-header-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ci-page-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex: 0 0 46px;
}

.ci-page-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 900;
    line-height: 1.5;
}

.ci-page-subtitle {
    margin: 4px 0 0 0;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 600;
}

/* Cards */
.ci-card {
    border: 0 !important;
    border-radius: var(--ci-radius-lg) !important;
    background: #ffffff !important;
    box-shadow: var(--ci-shadow) !important;
    overflow: hidden;
}

.ci-card-body {
    padding: 24px !important;
}

/* Form */
.ci-form-grid {
    row-gap: 18px;
}

.ci-field label,
.ci-label {
    display: block;
    color: var(--ci-purple-main);
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 7px;
    text-align: right !important;
}

.clinic-inventory-page .form-control,
.clinic-inventory-page .form-select {
    height: 42px;
    min-height: 42px;
    border-radius: 12px !important;
    border: 1px solid var(--ci-purple-border) !important;
    background-color: #ffffff !important;
    color: var(--ci-text) !important;
    font-size: 13px !important;
    font-weight: 600;
    padding: 8px 12px !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* This page sets font-size: 13px !important above, which beats the new
   global mobile 16px rule on specificity, so it still zoomed on focus.
   Same fix, scoped to this page, so it actually wins. */
@media (max-width: 767.98px) {
    .clinic-inventory-page .form-control,
    .clinic-inventory-page .form-select {
        font-size: 16px !important;
    }
}

.clinic-inventory-page textarea.form-control {
    height: auto !important;
    min-height: 92px !important;
    resize: vertical;
    line-height: 1.8;
}

.clinic-inventory-page .form-control:focus,
.clinic-inventory-page .form-select:focus {
    border-color: var(--ci-purple-main) !important;
    box-shadow: 0 0 0 .18rem rgba(88, 73, 139, 0.13) !important;
    background-color: #ffffff !important;
}

/* Select arrow RTL */
html[dir="rtl"] .clinic-inventory-page .form-select {
    background-position: left .75rem center !important;
    padding-right: 12px !important;
    padding-left: 36px !important;
}

/* Hint */
.ci-hint-box {
    background: #fff8e8;
    border: 1px solid #f1d58a;
    color: #7c5b09;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

/* Buttons */
.ci-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--ci-purple-border);
}

.ci-btn-primary {
    background: linear-gradient(135deg, var(--ci-purple-main), var(--ci-purple-light)) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    min-width: 140px;
    height: 42px;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(88, 73, 139, 0.22);
}

    .ci-btn-primary:hover {
        color: #ffffff !important;
        opacity: .92;
        transform: translateY(-1px);
    }

.ci-btn-secondary {
    background: #ffffff !important;
    color: var(--ci-muted) !important;
    border: 1px solid #9ca3af !important;
    border-radius: 12px !important;
    min-width: 110px;
    height: 42px;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

    .ci-btn-secondary:hover {
        background: #f8f9fa !important;
        color: var(--ci-text) !important;
    }

/* Table */
.ci-table-card {
    border: 0 !important;
    border-radius: var(--ci-radius-lg) !important;
    box-shadow: var(--ci-shadow) !important;
    overflow: hidden;
}

.ci-table {
    margin-bottom: 0 !important;
    font-size: 13px;
}

    .ci-table thead th {
        background: var(--ci-purple-main) !important;
        color: #ffffff !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap;
        font-weight: 900;
        padding: 12px 10px !important;
    }

    .ci-table tbody td {
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap;
        padding: 10px !important;
    }

    .ci-table tbody tr:nth-child(even) {
        background: var(--ci-purple-soft) !important;
    }

    .ci-table tbody tr:hover {
        background: #efe9fb !important;
    }

/* Badges */
.ci-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.ci-badge-approved {
    background: #e8f7ee;
    color: #198754;
}

.ci-badge-pending {
    background: #fff8e8;
    color: #9a6a00;
}

.ci-badge-rejected {
    background: #fdecec;
    color: #dc3545;
}

/* Small action buttons */
.ci-action-btn {
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 5px 10px !important;
}

/* Mobile */
@media (max-width: 768px) {
    .clinic-inventory-page {
        padding: 18px 10px 80px 10px;
    }

    .ci-page-header {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .ci-page-header-content {
        justify-content: flex-start;
    }

    .ci-card-body {
        padding: 16px !important;
    }

    .ci-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ci-btn-primary,
    .ci-btn-secondary {
        width: 100%;
    }
}

.ci-btn-header {
    background: #ffffff !important;
    color: var(--ci-purple-main) !important;
    border: 0 !important;
    border-radius: 12px !important;
    min-width: 150px;
    height: 42px;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 16px rgba(255,255,255,0.16);
}

    .ci-btn-header:hover {
        background: #fff8e8 !important;
        color: var(--ci-purple-main) !important;
    }

.ci-alert {
    border: 1px solid var(--ci-purple-border) !important;
    background: #ffffff !important;
    color: var(--ci-purple-main) !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    margin-bottom: 16px;
}

.ci-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

    .ci-table-toolbar strong {
        display: block;
        color: var(--ci-purple-main);
        font-size: 15px;
        font-weight: 900;
    }

    .ci-table-toolbar span {
        display: block;
        color: var(--ci-muted);
        font-size: 12px;
        font-weight: 700;
        margin-top: 3px;
    }

.ci-table-wrap {
    border-radius: 16px;
    border: 1px solid var(--ci-purple-border);
    overflow-x: auto;
}

.ci-qty-positive {
    color: #198754 !important;
    font-weight: 900 !important;
}

.ci-qty-negative {
    color: #dc3545 !important;
    font-weight: 900 !important;
}

.ci-stock {
    color: var(--ci-purple-main) !important;
    font-weight: 900 !important;
}

.ci-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.ci-delete-form {
    display: inline-block;
    margin: 0 !important;
}

.ci-action-edit,
.ci-action-delete {
    border-radius: 10px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    min-width: 64px;
}

.ci-action-edit {
    background: #ffffff !important;
    color: var(--ci-purple-main) !important;
    border: 1px solid var(--ci-purple-main) !important;
}

    .ci-action-edit:hover {
        background: var(--ci-purple-main) !important;
        color: #ffffff !important;
    }

.ci-action-delete {
    background: #ffffff !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
}

    .ci-action-delete:hover {
        background: #dc3545 !important;
        color: #ffffff !important;
    }
/*=============================================================*/
/*=============================================================*/


/*=============================================================*/
/*============================Dependents===================*/
/* ====================================================================== */
/* Dependents Tab - AspNetUsers_Details/Edit + Edit_By_Admin              */
/* ====================================================================== */

.dependent-card {
    background: #ffffff;
    border: 1px solid #eee8fb;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(88, 73, 139, 0.12);
    overflow: hidden;
}

.dependent-card-header {
    background: linear-gradient(135deg, var(--navbar-right, #58498b), var(--navbar-left, #988bc1));
    color: #ffffff;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 900;
}

    .dependent-card-header i {
        color: #ffffff !important;
    }

.dependent-card-body {
    padding: 20px;
}

.dependent-input {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 10px !important;
}

.dependent-table {
    margin-bottom: 0;
}

    .dependent-table thead th {
        background: #f4f0fb;
        color: #58498b;
        font-size: 13px;
        font-weight: 900;
        text-align: center;
        vertical-align: middle;
    }

    .dependent-table tbody td {
        font-size: 13px;
        font-weight: 700;
        text-align: center;
        vertical-align: middle;
    }

@media (max-width: 767.98px) {
    .dependent-card-body {
        padding: 14px;
    }

    .dependent-table thead th,
    .dependent-table tbody td {
        font-size: 12px;
        white-space: nowrap;
    }
}



/*============================bread crumbs and fixed admin top=======================*/
/*====================================================================================*/
/* Shared management-page header
   Append this file to Content/site.css (or bundle it after site.css). */
/* Shared management-page header
   Append this file to Content/site.css (or bundle it after site.css). */
:root {
    --management-header-purple: #60449a;
    --management-header-purple-dark: #422b75;
    --management-header-green: #20a447;
    --management-header-border: #e2dce8;
    --management-header-divider: #d8d1df;
    --management-header-bg: #f5f7fa;
    --management-header-text: #302b38;
    --management-header-muted: #706679;
    --management-header-card-bg: #ffffff;
    --management-header-card-shadow: rgba(61, 39, 105, .05);
}

.management-page-header,
.management-page-header * {
    box-sizing: border-box;
}

/*
    Sep 2026: this used to size itself with "width: stretch !important" plus
    a one-sided "margin-right: -32px !important" hack meant to compensate
    for the padded main-content column it sits inside. That only cancels
    the padding on ONE side and only by exactly 32px - on pages/breakpoints
    where the surrounding padding differs (notably mobile/tablet), the bar
    fell short of the true viewport edge on one side, covering roughly half
    the screen instead of the full width ("breadcrumbs cover half the page
    and ignore width:100% on mobile/tablet" - reported against
    ProcurementInvoices and others, while ClientReservationRecords/Profile-
    v2's OWN separate ".crp-fixed-page-header" - which never had this bug -
    already used the fix below).

    "left: 0; right: 0" on a position:fixed element is anchored to the
    viewport itself, independent of any ancestor's padding/margin, so it
    always spans edge-to-edge exactly - no per-page/per-breakpoint tuning
    needed, and no margin hack at all.
*/
.management-page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--management-header-bg);
    color: var(--management-header-text);
    font-family: Shabnam, Vazirmatn, Tahoma, Arial, sans-serif;
    padding: 0px !important;
    padding-top: 2px !important;
}

/*
    Sep 2026: the spacer's job is to reserve exactly the fixed header's
    real height, so page content never slides underneath the
    position:fixed header - that is NOT optional, it's what stops a
    button/tab from disappearing behind the breadcrumb bar.

    This used to be measured live via ResizeObserver (each page had its
    own "syncXxxFrozenHeader()" script writing the real measured height
    into a CSS variable the spacer read). That was replaced with the
    fixed px values below, on request, for simplicity - so any per-page
    "syncXxxFrozenHeader()" script is now dead code and should be
    deleted wherever it's still found (it does nothing useful and, once
    the "js-management-page-header" class is removed from the markup as
    it was here, it throws a JS error - ResizeObserver.observe(null) -
    on every page load).

    Because the height is now a flat number instead of a live
    measurement, it MUST be checked against the real header height
    whenever the breadcrumb/back-button markup or its CSS changes -
    Playwright-measured real header height with the current CSS:
    ~50px desktop/tablet, ~44px mobile. The value below is that real
    height plus a small (~6px) safety cushion, same margin used
    elsewhere on this page. The previous 45px desktop value was BELOW
    the real 50px header height, causing content to render 5px
    underneath the fixed header - fixed here.
*/
.management-page-header-spacer {
    height: 56px !important;
}

@media (max-width: 768px) {
    .management-page-header-spacer {
        height: 50px !important;
    }
}

/*
    Sep 2026: the 56px/50px above was Playwright-measured against a header
    with ONLY the breadcrumb row - it never accounted for
    ".management-page-actions" (the "+"/action-button row some pages add
    right under the breadcrumb). That row adds its own ~48px/44px
    (min-height, border-box) on top, so on every page that actually puts
    something in ".management-page-actions" (Providers, ClinicServices,
    ProcurementProducts, ProcurementInvoices, Translations, Carousels,
    Manage/AllClients, AspNetUsers_Details/Edit_By_Admin, ...) the fixed
    header is really ~92px/86px tall, not 56px/50px - the spacer fell short
    by roughly that same ~48px/44px everywhere, and page content (a title,
    a tab bar, ...) rendered underneath the header by that amount. Reported
    against Edit_By_Admin.cshtml, but ":has()" targets every other page
    with a populated actions row too, not just that one.
    ".management-page-actions:empty" is already hidden entirely (see its
    own rule above) on pages that don't use it, so ":not(:empty)" here
    correctly leaves THOSE pages' spacer at the shorter single-row height.
*/
.management-page-header:has(.management-page-actions:not(:empty)) + .management-page-header-spacer {
    height: 108px !important;
}

@media (max-width: 768px) {
    .management-page-header:has(.management-page-actions:not(:empty)) + .management-page-header-spacer {
        height: 98px !important;
    }
}

.management-page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 7px 11px;
    border: 1px solid var(--management-header-border);
    border-radius: 10px;
    background: var(--management-header-card-bg);
    box-shadow: 0 4px 14px var(--management-header-card-shadow);
}

    .management-page-breadcrumb .breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0;
        margin: 0;
        padding: 0;
        background: transparent;
        font-size: 13px;
        line-height: 1.5;
    }

    .management-page-breadcrumb .breadcrumb-item {
        color: var(--management-header-muted);
    }

        .management-page-breadcrumb .breadcrumb-item a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--management-header-purple);
            font-weight: 700;
            text-decoration: none;
        }

            .management-page-breadcrumb .breadcrumb-item a:hover {
                color: var(--management-header-purple-dark);
                text-decoration: underline;
            }

        .management-page-breadcrumb .breadcrumb-item.active {
            color: var(--management-header-text);
            font-weight: 800;
        }

.management-page-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: transparent !important;
    color: var(--management-header-purple) !important;
    font-size: 19px;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: color .18s ease, transform .18s ease;
}

    .management-page-back:hover,
    .management-page-back:focus {
        border: 0 !important;
        background: transparent !important;
        color: var(--management-header-green) !important;
        box-shadow: none !important;
        transform: translateX(-2px);
    }

.management-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 48px;
    padding: 6px 0;
    border-bottom: 1px solid var(--management-header-divider);
}

    /*
    Sep 2026: when a page has no action button/link to put inside
    ".management-page-actions", the div still rendered as an empty bar
    (min-height + padding + a visible border-bottom divider) - pure wasted
    vertical space on every page that doesn't need it. This collapses it
    to nothing automatically. The moment a page puts a real button/link
    inside it (see Providers/Index.cshtml, ClinicServices/Index.cshtml,
    ProcurementInvoices/Index.cshtml, ProcurementProducts/Index.cshtml for
    existing examples), ":empty" no longer matches and the bar reappears
    with its normal spacing/divider - nothing else needs to change per page.
    Every page's own frozen-header sync script re-measures the header's
    real height via ResizeObserver, so the spacer below the fixed header
    shrinks/grows automatically with this - no page-specific JS change
    needed. NOTE: ":empty" requires the div to have literally zero child
    nodes, including whitespace - "<div class="management-page-actions">
    </div>" with a newline inside is NOT ":empty". When touching a page
    that still has that fixed-but-empty bar despite this rule, check for
    stray whitespace between the tags and remove it.
*/
    .management-page-actions:empty {
        display: none;
    }

.management-page-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 124px;
    min-height: 38px !important;
    padding: 5px 12px;
    border: 2px solid var(--management-header-green) !important;
    border-radius: 10px;
    background: transparent !important;
    color: var(--management-header-green) !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none !important;
    box-shadow: none;
}

    .management-page-create:hover,
    .management-page-create:focus {
        border-color: var(--management-header-green) !important;
        background: var(--management-header-green) !important;
        color: #fff !important;
        text-decoration: none !important;
        box-shadow: 0 7px 16px rgba(32, 164, 71, .2);
    }

.management-page-create-sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--management-header-green);
    font-family: Arial, sans-serif !important;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
}

.management-page-create:hover .management-page-create-sign,
.management-page-create:focus .management-page-create-sign {
    color: #fff;
}

.management-page-divider {
    display: none;
}

@media (max-width: 767.98px) {
    .management-page-header {
        padding: 0px !important;
    }

    .management-page-breadcrumb {
        padding: 6px 9px;
    }

        .management-page-breadcrumb .breadcrumb {
            font-size: 11px;
        }

    .management-page-back {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    .management-page-actions {
        min-height: 44px;
        gap: 8px;
        padding: 5px 0;
    }

    .management-page-create {
        min-width: 112px;
        min-height: 36px !important;
        padding: 4px 10px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .management-page-back,
    .management-page-create {
        transition: none;
    }
}

/*=============================================================*/
/*=============================================================*/

/*=============================================================*/
/*=============================================================*/
/*=============================================================*/
/*=============================================================*/

/*=============================================================*/
/*=============================================================*/



/* ======================================================================
   Home/Index - Project & Product image hover: gradient + sliding title
   Scope: .project-card-image-wrap inside any .project-card (covers both
   the "Latest Projects" cards and the "New Products" cards - both use
   the .project-card class on their outer <div class="card ..."> wrapper).
   Appended at the end of the file on purpose so it wins the cascade over
   the many earlier !important image/wrap rules above (none of them set
   position/content, so there is no real conflict - this is just a safety
   margin).

   Behaviour:
   - Default: a dark gradient sits over the bottom of the image, fading to
     fully transparent by 80% of the image height (top 20% stays clear).
   - On hover (:hover on the whole card): the gradient flips to a top-down
     direction (same 80% fade, now from the top), and the card title -
     pulled from data-hover-title via CSS attr(), so nothing is duplicated
     in the DOM - slides down (in white) from above the image and settles
     with its top edge at 30% of the image height, over 1s.
   ====================================================================== */

.project-card-image-wrap {
    position: relative !important;
}

    /* Gradient overlay */
    .project-card-image-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
        transition: background 1s ease;
    }

.project-card:hover .project-card-image-wrap::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 80%);
}

/* Sliding title overlay - text comes from the data-hover-title attribute */
.project-card-image-wrap::after {
    content: attr(data-hover-title);
    position: absolute;
    left: 0;
    right: 0;
    top: -40%;
    z-index: 3;
    padding: 0 16px;
    opacity: 0;
    color: #ffffff;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    transition: top 1s ease, opacity 1s ease;
}

.project-card:hover .project-card-image-wrap::after {
    top: 30%;
    opacity: 1;
}

/* Placeholder (no-image) cards have no picture to shade/slide over. */
.project-card-image-wrap.project-card-image-placeholder::before,
.project-card-image-wrap.project-card-image-placeholder::after {
    content: none;
}

/*=============================================================*/
/* Procurement invoice / provider payment modal: cancel the global
   "input, select, textarea { max-width: 280px; }" rule (see the
   "Project-wide mobile form-control fix" comment above) so fields
   fill their grid column/row instead of shrinking to 280px. Same
   pattern already used for .am-inline-editor-card and
   .clinic-inventory-page - this page just never had it applied.
   Scoped to .form-control/.form-select only (NOT bare input/select/
   textarea) so it never touches the #isActive checkbox switch,
   which relies on its own small fixed width. */
/*=============================================================*/
.invoice-page .form-control,
.invoice-page .form-select,
.provider-payment-modal .form-control,
.provider-payment-modal .form-select {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/*=============================================================*/
/* Procurement invoice editor: preferred-payment-method field.
   - "Quick create" button restyled green (matches the header's
     +New Record button) with an explicit plus icon.
   - Field + the quick-create box that expands below it share a
     connecting border while open, so the relationship reads clearly. */
/*=============================================================*/
.invoice-quick-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid var(--management-header-green, #20a447) !important;
    background: transparent !important;
    color: var(--management-header-green, #20a447) !important;
    font-weight: 700 !important;
}

    .invoice-quick-create-btn:hover,
    .invoice-quick-create-btn:focus {
        border-color: var(--management-header-green, #20a447) !important;
        background: var(--management-header-green, #20a447) !important;
        color: #fff !important;
        box-shadow: 0 7px 16px rgba(32, 164, 71, .2);
    }

.invoice-quick-create-sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif !important;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.invoice-connect-field {
    padding: 7px 8px 8px;
    border: 1.5px solid transparent;
    border-bottom: none;
    border-radius: 14px;
    transition: border-color .18s ease, background-color .18s ease, padding .18s ease;
}

    /* Keep the select + quick-create button the same width as a normal
   field (e.g. Invoice_Received_Date) instead of stretching across
   the whole full-width row now that this field sits on its own line.
   100% here is the full row width (label spans it too), so dividing
   by the grid's column count/gap reproduces one column's width. */
    .invoice-connect-field .input-group {
        max-width: calc((100% - 40px) / 3);
    }

@media (max-width: 991.98px) {
    .invoice-connect-field .input-group {
        max-width: calc((100% - 16px) / 2);
    }
}

@media (max-width: 767.98px) {
    .invoice-connect-field .input-group {
        max-width: 100%;
    }
}

.invoice-connect-field.is-quick-open {
    border-color: var(--management-header-green, #20a447);
    background: rgba(32, 164, 71, .05);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -16px;
}

/* The quick-create box sits flush under the field above (no gap, no
   closing border on its own bottom edge) so the two read as one
   continuous panel instead of two separate boxes. Matches the
   invoice-editor-grid's responsive gap (20px / 16px / 15px). */
.invoice-connect-box {
    margin-top: 0 !important;
    margin-bottom: -20px !important;
}

@media (max-width: 991.98px) {
    .invoice-connect-box {
        margin-bottom: -16px !important;
    }
}

@media (max-width: 767.98px) {
    .invoice-connect-box {
        margin-bottom: -15px !important;
    }
}

.invoice-connect-box-inner {
    border: 1.5px solid var(--management-header-green, #20a447) !important;
    border-top: none !important;
    border-radius: 14px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    background: rgba(32, 164, 71, .05) !important;
    padding-bottom: 18px !important;
}