/* ===== 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;
}



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;
}

.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;
}

/* ==== 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;
    }

    .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) - for Instagram, WhatsApp, Facebook, etc. */
i.fab,
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* Font Awesome Solid (fas) - most common icons */
i.fas,
.fas,
i[class*="fa-"],
[class*="fa-"] {
    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;
    background: linear-gradient(45deg, var(--light-gray) 0%,#b2b2b228 100%) !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;
}

/* 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;
        text-align: center !important;
        border-radius: 10px !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 */
i[class*="fa-"],
.fa,
.fas,
.far,
.fab,
[class*="fa-"] {
    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;
    }

.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: #ffffff !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.15rem, 1.5vw, 1.55rem) !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.product-card-footer .product-card-details {
    width: 100% !important;
    color: var(--product-footer-text) !important;
    font-size: 0.95rem !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 12px 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: 900 !important;
        white-space: nowrap !important;
    }

    .product-card-footer .product-card-detail-content span {
        color: var(--product-footer-text) !important;
        font-weight: 600 !important;
    }

.product-card-footer .product-card-pain-box {
    width: 100% !important;
    min-height: 50px !important;
    margin: 16px 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: 1.05rem !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.92rem !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: hidden;
}

.partners-title {
    color: var(--navbar-right);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2.4rem);
}

.partners-logo-strip {
    width: 100%;
    overflow: hidden;
    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.98rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    .new-products-home-section .product-card-footer .product-card-details {
        font-size: 0.78rem !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;
}

/* 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 white shell. */
.product-carousel-shell-v3 {
    width: 100% !important;
    max-width: 560px !important;
    min-height: clamp(420px, 52vw, 620px) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(230, 221, 245, 0.9) !important;
    border-radius: var(--pd-v3-radius-lg) !important;
    box-shadow: var(--pd-v3-shadow) !important;
    padding: clamp(18px, 2.2vw, 32px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !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. */
.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: #ffffff !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. */
.product-spec-image-card-v3 {
    width: 100% !important;
    min-height: clamp(320px, 42vw, 560px) !important;
    background: #ffffff !important;
    border: 1px solid var(--pd-v3-purple-border) !important;
    border-radius: var(--pd-v3-radius-lg) !important;
    box-shadow: var(--pd-v3-soft-shadow) !important;
    padding: clamp(16px, 2vw, 28px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.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;
}

/* Specification text card. */
.product-spec-card-v3 {
    width: 100% !important;
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid 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;
}

    .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 rgba(203, 213, 225, 0.70) !important;
        line-height: 1.55 !important;
    }

    .product-spec-list-v3 dt {
        color: #a9a8b7 !important;
        font-weight: 900 !important;
        font-size: 0.95rem !important;
    }

    .product-spec-list-v3 dd {
        color: #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. */
.product-empty-image-v3 {
    width: 100% !important;
    min-height: 280px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f8f5ff, #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;
    background: #ffffff !important;
    border: 1px solid 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;
    background: #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;
    background: #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;
        padding: 14px !important;
        border-radius: 24px !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;
        padding: 12px !important;
        border-radius: 22px !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);
    }



/* ======================================================================
   Client Reservation Records Profile
   Scope: Views/ClientReservationRecords/Profile.cshtml
   Bootstrap 5.3 compatible
   Additive only - does not alter existing modules
   ====================================================================== */

/* ── Page shell ───────────────────────────────────────────────────────── */

.crp-page {
    background: #f8f9fb;
    min-height: calc(100vh - 90px);
}

.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: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 18px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

/* ── Typography helpers ───────────────────────────────────────────────── */

.crp-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #2c2f3a;
    margin-bottom: 0.85rem;
}

.crp-detail-title {
    justify-content: space-between;
}

.crp-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #7b8190;
    margin-bottom: 0.18rem;
}

.crp-value {
    font-size: 0.86rem;
    font-weight: 700;
    color: #252836;
    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: #dfe3ea;
    }

/*
 * .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: rgba(13, 110, 253, 0.06);
    }

/*
 * .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: #ffffff;
    border: 3px solid #0d6efd;
}

.crp-timeline-item.active .crp-timeline-dot {
    background: #0d6efd;
}

/*
 * .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: #252836;
}

    .crp-timeline-date small {
        font-size: 0.7rem;
        font-weight: 700;
        color: #7b8190;
        margin-inline-start: 0.25rem;
    }

.crp-timeline-service {
    display: block;
    font-size: 0.74rem;
    color: #596070;
    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 #e5e7eb;
    background: #fff;
}

/* ── 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: #eef2ff;
    color: #3949ab;
}

.crp-status-completed {
    background: #e8f7ee;
    color: #198754;
}

.crp-status-reserved,
.crp-status-pending,
.crp-status-reservedprofileconditional {
    background: #fff7e6;
    color: #b7791f;
}

.crp-status-canceled,
.crp-status-cancelled {
    background: #fdecec;
    color: #dc3545;
}

/* ── Text / comment boxes ─────────────────────────────────────────────── */

.crp-comment-box {
    margin-top: 1rem;
}

.crp-text-box {
    width: 100%;
    min-height: 72px;
    padding: 0.75rem;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: #fbfbfd;
    color: #333846;
    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: #f1f3f6;
    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: #ffffff;
    background: rgba(0, 0, 0, 0.52);
}

/* ── 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 #e9ecef;
    border-radius: 12px;
    background: #fbfbfd;
    color: #333846;
    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: #0d6efd;
        color: #0d6efd;
    }

/* ── Empty state ──────────────────────────────────────────────────────── */

.crp-empty {
    color: #7b8190;
    font-size: 0.82rem;
    padding: 0.7rem;
    border-radius: 12px;
    background: #fbfbfd;
}

/* ── 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: 150px;
    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: #7b8190;
}

    .crp-save-msg.success {
        color: #198754;
    }

    .crp-save-msg.error {
        color: #dc3545;
    }

/* ── 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 #ddd;
    object-fit: cover;
    object-position: center top;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.crp-avatar-empty {
    background: #f3f4f6;
    color: #666;
    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 #e5e7eb;
    background: #fff;
}

.crp-service-img-empty {
    background: #f3f4f6;
    color: #999;
    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: rgba(248, 249, 251, 0.92);
        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;
}

.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;
    }
}



/*============================dependents=======================*/
/*=============================================================*/

/*=============================================================*/
/*=============================================================*/

/*=============================================================*/
/*=============================================================*/