:root {
            --primary: #00857C;
            --primary-dark: #006B63;
            --primary-light: #E8F5F4;
            --secondary: #F2837E;
            --accent: #FF6B6B;
            --text-dark: #1a1a1a;
            --text-muted: #6B7280;
            --bg-light: #F9FAFB;
            --border-color: #E5E7EB;
        }

        * { box-sizing: border-box; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            color: var(--text-dark);
            line-height: 1.6;
            background: #fff;
        }

        h1, h2, h3, h4, h5, h6, .navbar-brand {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
        }

        /* Navbar */
        .navbar {
            padding: 1rem 0;
            background: #fff !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--primary) !important;
            letter-spacing: -0.5px;
        }

        .navbar-brand span {
            color: var(--secondary);
        }

        .nav-link {
            font-weight: 500;
            color: var(--text-dark) !important;
            padding: 0.5rem 1rem !important;
            transition: color 0.2s;
        }

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

        /* Find Doctors Button - Emphasized */
        .find-doctors-btn {
            background: linear-gradient(135deg, var(--primary) 0%, #006560 100%) !important;
            border-radius: 25px !important;
            box-shadow: 0 4px 15px rgba(0, 133, 124, 0.4);
            animation: doctorPulse 2s 3;
            transition: all 0.3s ease !important;
        }
        .find-doctors-btn:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 133, 124, 0.5);
            animation: none;
        }
        @keyframes doctorPulse {
            0%, 100% { box-shadow: 0 4px 15px rgba(0, 133, 124, 0.4); }
            50% { box-shadow: 0 4px 25px rgba(0, 133, 124, 0.6); }
        }

        /* Buttons */
        .btn-primary {
            background: var(--primary);
            border-color: var(--primary);
            font-weight: 500;
            padding: 0.5rem 1.25rem;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            border-color: var(--primary-dark);
            transform: translateY(-1px);
        }

        .btn-outline-primary {
            color: var(--primary);
            border-color: var(--primary);
            font-weight: 500;
            border-radius: 8px;
        }

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

        .text-primary { color: var(--primary) !important; }
        .bg-primary { background-color: var(--primary) !important; }

        /* Cards */
        .card {
            border-radius: 16px;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            transition: all 0.3s ease;
        }

        .card:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }

        .card-img-top {
            border-radius: 16px 16px 0 0;
        }

        /* Worth it indicators */
        .worth-it {
            color: #059669;
            background: #D1FAE5;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .not-worth-it {
            color: #DC2626;
            background: #FEE2E2;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .rating-star { color: #F59E0B; }

        /* Search */
        .search-input {
            border: 2px solid var(--border-color);
            border-radius: 25px;
            padding: 0.5rem 1rem;
            transition: border-color 0.2s;
        }

        .search-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

        /* Tags/Badges */
        .badge-category {
            background: var(--primary-light);
            color: var(--primary);
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        /* Footer */
        footer {
            background: #111827;
            color: #9CA3AF;
        }

        footer h5, footer h6 {
            color: #fff;
            font-weight: 600;
        }

        footer a {
            color: #9CA3AF;
            text-decoration: none;
            transition: color 0.2s;
        }

        footer a:hover { color: #fff; }

        /* Section styling */
        .section-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }

        .section-subtitle {
            color: var(--text-muted);
            font-size: 1rem;
        }

        /* Avatar */
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .navbar-brand { font-size: 1.25rem; }
            .section-title { font-size: 1.5rem; }
        }

        /* Mobile Offcanvas Menu */
        .offcanvas {
            max-width: 300px;
        }
        .offcanvas-header {
            background: var(--bg-light);
        }
        .offcanvas-body .nav-link {
            color: var(--text-dark);
            font-weight: 500;
            display: flex;
            align-items: center;
        }
        .offcanvas-body .nav-link:hover {
            color: var(--primary);
            background: var(--primary-light);
        }
        .offcanvas-body .nav-link i {
            width: 24px;
            color: var(--text-muted);
        }
        .offcanvas-body .nav-link:hover i {
            color: var(--primary);
        }

        /* Lazy loading styles */
        img[loading="lazy"][data-src]:not(.loaded) {
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }
        img[loading="lazy"].loaded,
        img:not([data-src]),
        img:not([loading="lazy"]) {
            opacity: 1;
        }
        .lazy-placeholder {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        /* CLS Prevention - Aspect ratio containers */
        .aspect-ratio-16-9 {
            aspect-ratio: 16 / 9;
            overflow: hidden;
        }
        .aspect-ratio-4-3 {
            aspect-ratio: 4 / 3;
            overflow: hidden;
        }
        .aspect-ratio-1-1 {
            aspect-ratio: 1 / 1;
            overflow: hidden;
        }
        .aspect-ratio-3-4 {
            aspect-ratio: 3 / 4;
            overflow: hidden;
        }

        /* Image containers with fixed dimensions */
        .img-container {
            position: relative;
            overflow: hidden;
            background: var(--bg-light);
        }
        .img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Card image placeholders for CLS */
        .card-img-container {
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background: var(--bg-light);
        }
        .card-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Hero section image container */
        .hero-img-container {
            aspect-ratio: 16 / 9;
            max-height: 500px;
            overflow: hidden;
        }

        /* Avatar sizes with fixed dimensions */
        .avatar-sm { width: 32px; height: 32px; }
        .avatar-md { width: 48px; height: 48px; }
        .avatar-lg { width: 64px; height: 64px; }
        .avatar-xl { width: 96px; height: 96px; }

        /* Font display optimization */
        @font-face {
            font-family: 'Inter';
            font-display: swap;
        }
        @font-face {
            font-family: 'Poppins';
            font-display: swap;
        }

        /* Content placeholder skeleton */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 4px;
        }
        .skeleton-text {
            height: 1em;
            margin-bottom: 0.5em;
        }
        .skeleton-title {
            height: 1.5em;
            width: 60%;
            margin-bottom: 0.75em;
        }
        .skeleton-img {
            width: 100%;
            padding-top: 56.25%; /* 16:9 aspect ratio */
        }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Navbar Search */
    .nav-search-wrapper {
        position: relative;
    }
    .nav-search-toggle {
        color: var(--text-dark) !important;
        font-size: 1.1rem;
    }
    .nav-search-toggle:hover {
        color: var(--primary) !important;
    }
    .nav-search-form {
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .nav-search-form.active {
        display: flex !important;
    }
    @media (max-width: 991px) {
        .nav-search-form.active {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            padding: 0.5rem 1rem;
            background: #fff;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 1000;
        }
    }