/* ============================================================
   PORTAL MODERN UI — Design System & Enhancement Layer
   Version: 2.0
   
   This CSS file enhances the existing Porto/Bootstrap theme 
   with a modern medical/SaaS aesthetic. It does NOT replace 
   the base theme — it layers on top.
   
   Structure:
   1. CSS Variables (Design Tokens)
   2. Typography Scale
   3. Spacing Utilities
   4. Section Layout System
   5. Section Headers
   6. Card System
   7. Button System
   8. Navbar Enhancements
   9. Doctors Section
   10. Footer Enhancements
   11. Component Utilities
   12. Responsive Overrides
   ============================================================ */


/* ==========================================================
   1. CSS VARIABLES — Design Tokens
   ========================================================== */
:root {
    /* ---- Color System ---- */
    --color-primary: #2563EB;          /* Trust-evoking medical blue */
    --color-primary-dark: #1D4ED8;
    --color-primary-light: #DBEAFE;
    --color-secondary: #0F172A;        /* Near-black for text emphasis */
    --color-text: #334155;             /* Body text, readable gray */
    --color-text-light: #64748B;       /* Muted / secondary text */
    --color-muted: #94A3B8;            /* Placeholders, captions */
    --color-border: #E2E8F0;
    --color-bg-white: #FFFFFF;
    --color-bg-light: #F8FAFC;        /* Alternate section background */
    --color-bg-subtle: #F1F5F9;       /* Cards on light sections */
    --color-accent: #10B981;           /* Success / positive */
    --color-shadow: rgba(15, 23, 42, 0.08);
    --color-shadow-hover: rgba(15, 23, 42, 0.14);

    /* ---- Typography ---- */
    --font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-md: 1.125rem;   /* 18px */
    --font-size-lg: 1.25rem;    /* 20px */
    --font-size-xl: 1.5rem;     /* 24px */
    --font-size-2xl: 1.875rem;  /* 30px */
    --font-size-3xl: 2.25rem;   /* 36px */
    --font-size-4xl: 3rem;      /* 48px */
    --line-height-tight: 1.25;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;

    /* ---- Spacing (8px scale) ---- */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-8: 3rem;      /* 48px */
    --space-10: 4rem;     /* 64px */
    --space-12: 5rem;     /* 80px */
    --space-16: 6rem;     /* 96px */

    /* ---- Border Radius ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 50%;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 3px var(--color-shadow);
    --shadow-md: 0 4px 12px var(--color-shadow);
    --shadow-lg: 0 8px 30px var(--color-shadow);
    --shadow-hover: 0 12px 40px var(--color-shadow-hover);

    /* ---- Transitions ---- */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}


/* ==========================================================
   2. TYPOGRAPHY SCALE
   Improvement: Clear hierarchy, better readability
   ========================================================== */

/* Load Inter font for modern feel */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family) !important;
    color: var(--color-secondary);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

h1 {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.025em;
}

h2 {
    font-size: var(--font-size-2xl);
    letter-spacing: -0.02em;
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

p {
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
}

.lead {
    font-size: var(--font-size-md) !important;
    color: var(--color-text-light) !important;
    line-height: var(--line-height-relaxed);
}

a:not(.btn) {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

a:not(.btn):hover {
    color: var(--color-primary-dark);
    text-decoration: none !important;
}


/* ==========================================================
   3. SPACING UTILITIES
   ========================================================== */
.gap-grid { gap: var(--space-5); }
.mb-section { margin-bottom: var(--space-10); }
.mt-section { margin-top: var(--space-10); }


/* ==========================================================
   4. SECTION LAYOUT SYSTEM
   Improvement: Consistent vertical rhythm, alternating BGs
   ========================================================== */
.portal-section {
    padding: var(--space-12) 0;
    position: relative;
}

.portal-section--white {
    background-color: var(--color-bg-white);
}

.portal-section--light {
    background-color: var(--color-bg-light);
}

.portal-section--subtle {
    background-color: var(--color-bg-subtle);
}

/* Better spacing for existing Porto/Bootstrap sections */
section.team,
section.section-no-border,
section.section-custom-medical {
    padding: var(--space-12) 0;
}

section.pt-4.pb-4,
section.pt-4.pb-2,
section.pt-3.pb-3 {
    padding: var(--space-12) 0 !important;
}


/* ==========================================================
   5. SECTION HEADERS
   Improvement: Consistent title + subtitle + accent bar
   ========================================================== */
.section-header {
    margin-bottom: var(--space-8);
    text-align: center;
}

.section-header h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: var(--space-3);
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    margin: var(--space-3) auto 0;
}

.section-header p,
.section-header .lead {
    color: var(--color-text-light) !important;
    max-width: 600px;
    margin: 0 auto;
    font-size: var(--font-size-md) !important;
}

/* Left-aligned section headers */
.section-header--left {
    text-align: left;
}

.section-header--left h2::after {
    margin-left: 0;
}


/* ==========================================================
   6. CARD SYSTEM
   Improvement: Soft shadows, hover effects, consistent padding
   ========================================================== */

/* Modern card base */
.portal-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.portal-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* Enhance existing Bootstrap cards */
.card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover) !important;
}

.card .card-body {
    padding: var(--space-5) !important;
}

/* Enhance existing feature-box (used in departments) */
.feature-box {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    padding: var(--space-5);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    margin-bottom: var(--space-5);
}

.feature-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.feature-box .feature-box-icon img {
    border-radius: var(--radius-sm);
}

.feature-box .feature-box-info h4 a {
    color: var(--color-secondary);
    font-weight: 600;
    transition: color var(--transition-fast);
}

.feature-box .feature-box-info h4 a:hover {
    color: var(--color-primary);
    text-decoration: none !important;
}

.feature-box .feature-box-info p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}


/* ==========================================================
   7. BUTTON SYSTEM
   Improvement: Modern rounded, proper padding, clear CTA
   ========================================================== */

/* Primary CTA */
.btn-portal-primary,
.btn.btn-outline.btn-quaternary.custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 28px !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.025em;
    border-radius: var(--radius-md) !important;
    background-color: var(--color-primary) !important;
    color: #FFF !important;
    border: 2px solid var(--color-primary) !important;
    text-transform: none !important;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-portal-primary:hover,
.btn.btn-outline.btn-quaternary.custom-button:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: #FFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    text-decoration: none !important;
}

/* Secondary / Outline button */
.btn-portal-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 28px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.025em;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    text-transform: none;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-portal-outline:hover {
    background-color: var(--color-primary);
    color: #FFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}


/* ==========================================================
   8. NAVBAR ENHANCEMENTS
   Improvement: Cleaner look, active state, better spacing
   ========================================================== */
#header .header-body {
    border: none !important;
    box-shadow: var(--shadow-sm);
    min-height: 0 !important;
}

#header .header-container {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#header .header-logo img {
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Mobile logo — slightly smaller to fit tight header */
@media (max-width: 767px) {
    #header .header-logo img {
        max-height: 42px;
        max-width: 140px;
    }
}

#header .header-top {
    background-color: var(--color-bg-light) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

#header .header-top .nav-item a {
    color: var(--color-text-light) !important;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: color var(--transition-fast);
}

#header .header-top .nav-item a:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

/* Main nav links */
#header .header-nav-main nav .nav-link,
#header .nav-bar-link-color {
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    padding: 10px 16px !important;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    letter-spacing: 0.01em;
}

#header .header-nav-main nav .nav-link:hover,
#header .nav-bar-link-color:hover {
    color: var(--color-primary) !important;
    background-color: var(--color-primary-light) !important;
    text-decoration: none !important;
}

#header .header-nav-main nav .nav-link.active,
#header .nav-bar-link-color.active {
    color: var(--color-primary) !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    position: relative;
}

#header .header-nav-main nav .nav-link.active::after,
#header .nav-bar-link-color.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 3px 3px 0 0;
}

/* Mobile hamburger */
#header .header-btn-collapse-nav {
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    border: 1px solid var(--color-border);
}


/* ==========================================================
   9. DOCTORS SECTION
   Improvement: Circular images, clear hierarchy, spacing
   ========================================================== */

/* Doctor card in carousel */
.doctor-card {
    text-align: center;
    padding: var(--space-5);
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    height: 100%;
}

.doctor-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.doctor-card__image {
    width: 140px;
    height: 140px;
    border-radius: var(--radius-full);
    object-fit: cover;
    margin: 0 auto var(--space-4);
    border: 4px solid var(--color-primary-light);
    display: block;
}

.doctor-card__name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: var(--space-1);
}

.doctor-card__department {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: var(--space-3);
    display: block;
}

.doctor-card__bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
    min-height: auto;
}

/* Override existing thumb-info for doctors (legacy support) */
.team .thumb-info {
    border: none !important;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.team .thumb-info:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.team .thumb-info-wrapper img {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    height: 280px !important;
    object-fit: cover;
}

.team .thumb-info-caption {
    background: var(--color-bg-white) !important;
}

.team .custom-thumb-info-inner {
    color: var(--color-secondary) !important;
    font-weight: 700;
}

.team .custom-thumb-info-type {
    color: var(--color-text-light) !important;
}


/* ==========================================================
   10. FOOTER ENHANCEMENTS
   Improvement: Modern dark footer, better spacing, links
   ========================================================== */
#footer {
    background-color: #0F172A !important;
    color: #CBD5E1 !important;
    padding-top: var(--space-8);
}

#footer h4 {
    color: #F8FAFC !important;
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: var(--space-5) !important;
    position: relative;
    padding-bottom: var(--space-3);
}

#footer h4::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: var(--color-primary);
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 1px;
}

#footer h6 {
    color: #E2E8F0 !important;
    font-weight: 600;
}

#footer p,
#footer .info span {
    color: #94A3B8 !important;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

#footer a {
    color: #CBD5E1 !important;
    transition: color var(--transition-fast);
}

#footer a:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

#footer .footer-copyright {
    background-color: #0A0F1A !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: var(--space-6);
}

#footer .footer-copyright p {
    color: #64748B !important;
    font-size: var(--font-size-xs);
    margin: 0;
}

/* Social media icons in footer */
#footer .social-icons li a {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-full);
    width: 38px;
    height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    color: #CBD5E1 !important;
}

#footer .social-icons li a:hover {
    background: var(--color-primary) !important;
    color: #FFF !important;
    transform: translateY(-2px);
}

#footer .social-icons li a i {
    color: inherit !important;
}


/* ==========================================================
   11. COMPONENT UTILITIES
   ========================================================== */

/* About Us info boxes (top bar on home) — reset card styles leaking in */
.section-custom-medical .medical-schedules .col-xl-3 {
    border-radius: 0;
    overflow: hidden;
}

.section-custom-medical .medical-schedules {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.section-custom-medical .medical-schedules .feature-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.section-custom-medical .medical-schedules .feature-box:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* About Us text section */
.about-content h2 {
    color: var(--color-secondary);
    margin-bottom: var(--space-4);
}

.about-content p {
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
}

.about-content img,
.mission-vision-image {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

.box-shadow-custom {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Insurance logos grid */
.content-grid-item {
    padding: var(--space-5);
    transition: transform var(--transition-normal);
}

.content-grid-item:hover {
    transform: scale(1.05);
}

.content-grid-item img {
    filter: grayscale(30%);
    opacity: 0.85;
    transition: all var(--transition-normal);
    max-height: 80px;
    object-fit: contain;
}

.content-grid-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Breadcrumb enhancement */
.breadcrumb {
    background: transparent !important;
    padding: var(--space-3) 0;
}

.breadcrumb-item a {
    color: var(--color-primary) !important;
    font-weight: 500;
}

/* Blog article cards */
.card.border-0.border-radius-0 {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border) !important;
}

.card.border-0.border-radius-0 .card-img-top {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    width: 100% !important;
    height: 200px !important;
    object-fit: cover;
}

.card-title a {
    color: var(--color-secondary) !important;
    font-weight: 700;
    transition: color var(--transition-fast);
}

.card-title a:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}


/* ==========================================================
   12. RESPONSIVE OVERRIDES
   ========================================================== */
@media (max-width: 991px) {
    :root {
        --font-size-3xl: 1.875rem;
        --font-size-2xl: 1.5rem;
    }

    .portal-section,
    section.pt-4.pb-4,
    section.pt-4.pb-2,
    section.pt-3.pb-3 {
        padding: var(--space-8) 0 !important;
    }

    .section-header {
        margin-bottom: var(--space-6);
    }

    .feature-box {
        margin-bottom: var(--space-4);
    }
}

@media (max-width: 767px) {
    :root {
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.375rem;
        --font-size-xl: 1.25rem;
    }

    .portal-section,
    section.pt-4.pb-4,
    section.pt-4.pb-2,
    section.pt-3.pb-3 {
        padding: var(--space-6) 0 !important;
    }

    .section-header h2::after {
        width: 36px;
    }

    .doctor-card__image {
        width: 110px;
        height: 110px;
    }

    .team .thumb-info-wrapper img {
        height: 220px !important;
    }

    /* Stack footer columns better on mobile */
    #footer .col-md-4,
    #footer .col-lg-3,
    #footer .col-lg-2 {
        margin-bottom: var(--space-6);
    }

    #footer h4::after {
        left: 0;
        right: auto;
    }

    /* Ensure cards don't break on mobile */
    .card,
    .portal-card,
    .feature-box {
        margin-bottom: var(--space-4);
    }
}

@media (max-width: 575px) {
    body {
        font-size: var(--font-size-sm) !important;
    }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }

    .btn-portal-primary,
    .btn.btn-outline.btn-quaternary.custom-button {
        padding: 10px 20px !important;
        font-size: var(--font-size-sm) !important;
        width: auto;
    }

    .section-custom-medical .medical-schedules .col-xl-3 {
        border-radius: var(--radius-sm);
        margin-bottom: var(--space-2);
    }
}


/* ==========================================================
   PRINT STYLES
   ========================================================== */
@media print {
    .portal-section {
        padding: 20px 0;
    }

    .card,
    .portal-card,
    .feature-box {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}


/* ==========================================================
   13. RTL (Arabic) SUPPORT
   ========================================================== */
html[lang="ar"] body,
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .section-header--left,
html[dir="rtl"] .section-header--left {
    text-align: right;
}

html[lang="ar"] .section-header--left h2::after,
html[dir="rtl"] .section-header--left h2::after {
    margin-left: auto;
    margin-right: 0;
}

html[lang="ar"] #footer h4::after,
html[dir="rtl"] #footer h4::after {
    left: auto;
    right: 0;
}

html[lang="ar"] .doctor-card__bio,
html[dir="rtl"] .doctor-card__bio {
    text-align: right;
}


/* ==========================================================
   14. SLIDER ENHANCEMENTS
   ========================================================== */
.owl-carousel-light .owl-item {
    border-radius: 0;
}

.owl-carousel-light .owl-item h1 {
    font-family: var(--font-family) !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.owl-carousel-light .owl-item h2 {
    font-family: var(--font-family) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Owl carousel navigation buttons — SVG icon approach */
.owl-carousel.show-nav-title.rounded-nav .owl-nav button[class*=owl-],
.owl-carousel.show-nav-title .owl-nav button[class*=owl-],
.owl-carousel.rounded-nav .owl-nav button[class*=owl-],
.owl-carousel .owl-nav button[class*=owl-] {
    background: var(--color-primary) !important;
    border-radius: var(--radius-full) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--transition-normal) !important;
    border: 2px solid var(--color-primary) !important;
    color: #FFF !important;
    font-size: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
}

/* Remove font-icon pseudo-elements; use SVG background instead */
.owl-carousel.show-nav-title .owl-nav button[class*=owl-]::before,
.owl-carousel.show-nav-title .owl-nav button[class*=owl-]::after,
.owl-carousel .owl-nav button[class*=owl-]::before,
.owl-carousel .owl-nav button[class*=owl-]::after {
    content: '' !important;
    display: none !important;
}

/* SVG chevron-left for prev button */
.owl-carousel.show-nav-title .owl-nav button.owl-prev[class*=owl-],
.owl-carousel .owl-nav button.owl-prev[class*=owl-] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23ffffff'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px !important;
}

/* SVG chevron-right for next button */
.owl-carousel.show-nav-title .owl-nav button.owl-next[class*=owl-],
.owl-carousel .owl-nav button.owl-next[class*=owl-] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23ffffff'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5-12.5-32.8-12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px !important;
}

/* Hover state */
.owl-carousel.show-nav-title.rounded-nav .owl-nav button[class*=owl-]:hover,
.owl-carousel.show-nav-title .owl-nav button[class*=owl-]:hover,
.owl-carousel.rounded-nav .owl-nav button[class*=owl-]:hover,
.owl-carousel .owl-nav button[class*=owl-]:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

.owl-carousel .owl-nav button span {
    display: none !important;
}


/* ==========================================================
   15. FORM ENHANCEMENTS (for Contact Us, Login)
   ========================================================== */
.form-control {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 16px !important;
    font-size: var(--font-size-sm) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.form-label {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    margin-bottom: var(--space-2);
}


/* ==========================================================
   16. SCROLLBAR STYLING (subtle)
   ========================================================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-light);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-muted);
}


/* ==========================================================
   17. DARK MODE
   Strategy: override CSS variables + component-specific rules
   Activated via [data-theme="dark"] on <html>
   ========================================================== */

/* ---- Dark palette tokens ---- */
[data-theme="dark"] {
    --color-primary:       #3B82F6;
    --color-primary-dark:  #2563EB;
    --color-primary-light: rgba(59, 130, 246, 0.15);
    --color-secondary:     #F1F5F9;
    --color-text:          #CBD5E1;
    --color-text-light:    #94A3B8;
    --color-muted:         #64748B;
    --color-border:        #334155;
    --color-bg-white:      #1E293B;
    --color-bg-light:      #0F172A;
    --color-bg-subtle:     #243044;
    --color-shadow:        rgba(0, 0, 0, 0.4);
    --color-shadow-hover:  rgba(0, 0, 0, 0.6);
}

/* ---- Base ---- */
[data-theme="dark"] body {
    background-color: #0F172A;
    color: var(--color-text);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--color-secondary);
}

[data-theme="dark"] p {
    color: var(--color-text);
}

[data-theme="dark"] a:not(.btn) {
    color: #60A5FA;
}

[data-theme="dark"] a:not(.btn):hover {
    color: #93C5FD;
}

/* ---- Scrollbar ---- */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0F172A;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* ---- Navbar / Header ---- */
[data-theme="dark"] #header .header-body {
    background-color: #1E293B !important;
    border-bottom: 1px solid #334155 !important;
}

[data-theme="dark"] #header .header-top {
    background-color: #0A0F1A !important;
    border-bottom: 1px solid #1E293B !important;
}

[data-theme="dark"] #header .header-top .nav-item a {
    color: #94A3B8 !important;
}

[data-theme="dark"] #header .header-top .nav-item a:hover {
    color: #60A5FA !important;
}

[data-theme="dark"] #header .header-nav-main nav .nav-link,
[data-theme="dark"] #header .nav-bar-link-color {
    color: #CBD5E1 !important;
}

[data-theme="dark"] #header .header-nav-main nav .nav-link:hover,
[data-theme="dark"] #header .nav-bar-link-color:hover {
    color: #60A5FA !important;
    background-color: rgba(59, 130, 246, 0.12) !important;
}

[data-theme="dark"] #header .header-nav-main nav .nav-link.active,
[data-theme="dark"] #header .nav-bar-link-color.active {
    color: #60A5FA !important;
}

[data-theme="dark"] #header .header-btn-collapse-nav {
    border-color: #334155;
    color: #CBD5E1;
}

/* Mobile nav menu panel */
[data-theme="dark"] #header .header-nav-main nav {
    background-color: #1E293B;
}

/* Sticky header */
[data-theme="dark"] #header.sticky-header-active .header-body,
[data-theme="dark"] #header.sticky-active .header-body {
    background-color: #1E293B !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.5) !important;
}

/* ---- Page sections ---- */
[data-theme="dark"] section,
[data-theme="dark"] .main {
    background-color: #0F172A;
}

[data-theme="dark"] .portal-section--white,
[data-theme="dark"] section.section-no-border,
[data-theme="dark"] section.section-custom-medical,
[data-theme="dark"] section.team,
[data-theme="dark"] section.pt-4.pb-4,
[data-theme="dark"] section.pt-4.pb-2,
[data-theme="dark"] section.pt-3.pb-3 {
    background-color: #1E293B !important;
}

[data-theme="dark"] .portal-section--light {
    background-color: #0F172A !important;
}

[data-theme="dark"] .portal-section--subtle {
    background-color: #243044 !important;
}

/* ---- Cards ---- */
[data-theme="dark"] .card {
    background-color: #1E293B !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .card .card-body,
[data-theme="dark"] .card .card-header,
[data-theme="dark"] .card .card-footer {
    background-color: transparent !important;
    color: var(--color-text);
    border-color: #334155;
}

[data-theme="dark"] .portal-card {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .feature-box {
    background: #1E293B !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .feature-box .feature-box-info h4 a {
    color: #E2E8F0 !important;
}

/* ---- Doctor cards ---- */
[data-theme="dark"] .doctor-card {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .doctor-card__name {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .team .thumb-info {
    background: #1E293B !important;
}

[data-theme="dark"] .team .thumb-info-caption {
    background: #1E293B !important;
}

[data-theme="dark"] .team .custom-thumb-info-inner {
    color: #F1F5F9 !important;
}

/* ---- Section headers ---- */
[data-theme="dark"] .section-header h2 {
    color: #F1F5F9;
}

[data-theme="dark"] .section-header p,
[data-theme="dark"] .section-header .lead {
    color: #94A3B8 !important;
}

/* ---- Forms ---- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #243044 !important;
    border-color: #334155 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    background-color: #1E293B !important;
    border-color: #3B82F6 !important;
    color: #E2E8F0 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748B !important;
}

[data-theme="dark"] .form-label {
    color: #E2E8F0;
}

/* ---- Tables ---- */
[data-theme="dark"] .table {
    color: #CBD5E1;
    border-color: #334155;
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: #334155;
    color: #CBD5E1;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .table thead th {
    border-bottom-color: #475569;
    color: #E2E8F0;
}

/* ---- Modals ---- */
[data-theme="dark"] .modal-content {
    background-color: #1E293B;
    border-color: #334155;
    color: #CBD5E1;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: #334155;
}

[data-theme="dark"] .modal-header .modal-title {
    color: #F1F5F9;
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ---- Alerts ---- */
[data-theme="dark"] .alert {
    background-color: #1E293B;
    border-color: #334155;
    color: #CBD5E1;
}

/* ---- Breadcrumb / Page Header ---- */
[data-theme="dark"] .page-header.page-header-modern {
    /* The gradient already uses --color-primary, so it adapts automatically */
}

/* ---- Breadcrumb bar items ---- */
[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a {
    color: rgba(255,255,255,0.8) !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: rgba(255,255,255,0.6) !important;
}

/* ---- List groups ---- */
[data-theme="dark"] .list-group-item {
    background-color: #1E293B;
    border-color: #334155;
    color: #CBD5E1;
}

/* ---- Badge ---- */
[data-theme="dark"] .badge.bg-light {
    background-color: #334155 !important;
    color: #E2E8F0 !important;
}

/* ---- Nav tabs / pills ---- */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: #334155;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: #94A3B8;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: #334155;
    color: #60A5FA;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: #1E293B;
    border-color: #334155 #334155 #1E293B;
    color: #60A5FA;
}

[data-theme="dark"] .tab-content {
    background-color: #1E293B;
}

/* ---- Accordion / FAQ ---- */
[data-theme="dark"] .accordion-item {
    background-color: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .accordion-button {
    background-color: #1E293B;
    color: #E2E8F0;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #243044;
    color: #60A5FA;
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

[data-theme="dark"] .accordion-body {
    background-color: #1E293B;
    color: #94A3B8;
}

/* ---- About content ---- */
[data-theme="dark"] .about-content h2 {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .about-content p {
    color: #94A3B8 !important;
}

/* ---- Medical schedules info bar ---- */
[data-theme="dark"] .section-custom-medical .medical-schedules {
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

/* ---- Footer — already dark, minimal tweaks ---- */
[data-theme="dark"] #footer {
    background-color: #060D19 !important;
}

[data-theme="dark"] #footer .footer-copyright {
    background-color: #030810 !important;
    border-top-color: rgba(255,255,255,0.05);
}

/* ---- Dark Mode Toggle Button ---- */
.dark-mode-toggle {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 15px;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
    vertical-align: middle;
}

.dark-mode-toggle:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    border-color: var(--color-border);
}

.dark-mode-toggle .icon-sun { display: none; }
.dark-mode-toggle .icon-moon { display: inline; }

[data-theme="dark"] .dark-mode-toggle {
    color: #FBB040;
}

[data-theme="dark"] .dark-mode-toggle:hover {
    color: #FCD34D;
    background-color: rgba(251, 176, 64, 0.15);
}

[data-theme="dark"] .dark-mode-toggle .icon-sun  { display: inline; }
[data-theme="dark"] .dark-mode-toggle .icon-moon { display: none; }

/* ---- Dropdown menus ---- */
[data-theme="dark"] .dropdown-menu {
    background-color: #1E293B;
    border-color: #334155;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

[data-theme="dark"] .dropdown-item {
    color: #CBD5E1;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: #243044;
    color: #60A5FA;
}

[data-theme="dark"] .dropdown-divider {
    border-color: #334155;
}

/* ---- Pagination ---- */
[data-theme="dark"] .page-item .page-link {
    background-color: #1E293B;
    border-color: #334155;
    color: #94A3B8;
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: #3B82F6;
    border-color: #3B82F6;
    color: #FFF;
}

[data-theme="dark"] .page-item:not(.active) .page-link:hover {
    background-color: #243044;
    color: #60A5FA;
}

/* ---- Owl Carousel dots ---- */
[data-theme="dark"] .owl-dots .owl-dot span {
    background: #334155 !important;
}

[data-theme="dark"] .owl-dots .owl-dot.active span {
    background: #3B82F6 !important;
}

/* ---- OWL Carousel IntersectionObserver Fix ----
   OWL sets display:none by default (anti-FOUC).
   That prevents IntersectionObserver from detecting the element.
   We use opacity:0 so the element has layout for IO detection,
   while remaining invisible until owl-loaded class is added.
---------------------------------------------------------------- */
.owl-carousel:not(.owl-loaded):not(.owl-hidden) {
    display: block;
    opacity: 0;
    pointer-events: none;
}

/* ---- Transition on theme switch ---- */
html {
    transition: background-color 0.25s ease, color 0.25s ease;
}

body,
#header .header-body,
.card,
.portal-card,
.feature-box,
.doctor-card,
.modal-content,
section {
    transition: background-color 0.25s ease, color 0.2s ease, border-color 0.25s ease;
}