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

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

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


/* ======================================================================
   1) Purple theme tokens
   ====================================================================== */
:root {
    --bs-nav-tabs-border-color: #58498b !important;
    --bs-border-width: 1.5px !important;
    /* Main purple brand colors */
    --navbar-right: #58498b;
    --navbar-left: #988bc1;
    /* Navbar text colors */
    --hero-brand-color: #58498b;
    --nav-latest-projects-color: #656565;
    /* Purple navbar control */
    --purple-navbar-inner-bg: #ffffff;
    --purple-navbar-text: #656565;
    --purple-navbar-hover: #d4af37;
    --purple-navbar-toggler: #656565;
    --purple-navbar-radius: 0 0 50px 50px;
    --purple-navbar-inner-radius: 50px;
    /* Footer colors */
    --purple-footer-start: #fbfaff;
    --purple-footer-end: var(--navbar-left);
    --purple-footer-text: #58498b;
    --purple-footer-hover: #d4af37;
    /* Common radius */
    --purple-radius-sm: 8px;
    --purple-radius-md: 12px;
    --purple-radius-lg: 15px;
    /* Product/footer card purple */
    --product-footer-purple: #442f8c;
    --product-footer-purple-soft: #f4f0fb;
    --product-footer-border: #e6ddf5;
    --product-footer-text: #4b5563;
    --product-footer-icon-bg: #ffffff;
}


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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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


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


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


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

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

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


/* ======================================================================
   7) Footer purple theme
   ====================================================================== */
.footer {
    background: linear-gradient(135deg, var(--purple-footer-start) 0%, var(--purple-footer-end) 100%) !important;
    border-top: 3px solid var(--navbar-right) !important;
}

html[dir="rtl"] .footer {
    background: linear-gradient(225deg, var(--purple-footer-start) 0%, var(--purple-footer-end) 100%) !important;
}

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

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

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

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

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


/* ======================================================================
   8) Mobile footer purple theme
   ====================================================================== */
@media (max-width: 1230px) {
    .footer .button-group {
        /*background: linear-gradient(135deg, var(--navbar-left) 0%, #fbfaff 100%) !important;*/
        background: #c6bbeb !important;
        border-color: var(--navbar-right) !important;
    }

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

    .footer .btn-middle {
        background: linear-gradient(225deg, var(--navbar-left) 0%, var(--navbar-right) 100%) !important;
        color: #ffffff !important;
    }

    .footer .button-group {
        display: flex;
        justify-content: space-around;
        margin: 0 !important;
        padding: 0 !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100% !important;
        padding: 5px;
        text-align: center;
        z-index: 1000;
        height: 50px;
        border-radius: 0px;
        box-shadow: 0px 0px 0px #51252500;
    }

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


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

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

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

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

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


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

.price_div {
    background-color: var(--navbar-right) !important;
    color: #ffffff !important;
    box-shadow: 5px 5px 5px rgba(88, 73, 139, 0.25) !important;
}

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

.project-category-pill.active,
.project-category-nav {
    background: var(--navbar-right) !important;
    border-color: var(--navbar-right) !important;
}

    .project-category-nav:hover:not(:disabled),
    .project-category-nav:focus:not(:disabled) {
        background: var(--navbar-left) !important;
    }


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

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

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

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

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

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

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

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


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

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

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


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

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

    .carousel-container {
        aspect-ratio: auto !important;
        height: calc(100vh - 170px) !important;
        min-height: 620px !important;
    }

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

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

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

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

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

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

    background-color: transparent;
}

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

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

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: var( --navbar-left);
    color: white !important;
}






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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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