/* ===== 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: #007bff;
    --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-size:700!important;
}
@media(max-width: 1200px) {
    .body_padding_margin {
        padding-top: 20px !important;
        padding-bottom: 40px !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', 'Shabnam-FD', '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', 'Shabnam-FD', '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', 'Shabnam-FD', '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', 'Shabnam-FD', '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: 50% !important;
        left: 50px !important;
        transform: translateY(-50%) !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;
    }

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

        #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: #000000 !important;
            font-weight: 600;
            background: transparent !important;
        }

            .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;
}
/* =====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,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: 5px !important;
    box-shadow: 5px 5px 5px var(--color-price-shadow);
    border-radius: 5px !important;
}

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

.btn_goto_arrangement {
    padding: 5px !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    background-color: black;
    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: 4 / 6;
    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;
    }
}

/* ====================================================================== */
/* 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: 4 / 5 !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: 4 / 6 !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;
    }
}