/* ==========================================================================
   AL-AMAL — MASTER RESPONSIVE STYLESHEET v9.0
   Mobile-First | All PDF Issues Fixed
   ========================================================================== */

/* ════════════════════════════════════════
   GLOBAL RESET & OVERFLOW PREVENTION
   ════════════════════════════════════════ */
html, body {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
}
* { box-sizing: border-box !important; }
img, video, iframe, embed, object { max-width: 100% !important; height: auto; }

/* Base Container */
.container {
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ════════════════════════════════════════
   Large Desktop (1401px+)
   ════════════════════════════════════════ */
@media (min-width: 1401px) {
    .container { max-width: 1320px; }
    .grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .hospital-grid-v4 { grid-template-columns: repeat(4, 1fr) !important; }
    .specialty-grid-v4 { grid-template-columns: repeat(4, 1fr) !important; }
    .services-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .grid-sidebar-layout { grid-template-columns: 1fr 360px !important; }
    .home-panel-wrapper > div > section { padding: 100px 0 !important; }
}

/* ════════════════════════════════════════
   DESKTOP SPACING FIX (min-width 769px)
   Reduces excessive gaps on ALL pages — hero top/bottom + sections
   Does NOT affect mobile (uses min-width so mobile is untouched)
   ════════════════════════════════════════ */
@media (min-width: 769px) {
    /* ─── HERO SECTIONS: reduce top AND bottom on all pages ─── */
    .hero-v8,
    .hosp-hero-container,
    .bannerInner.hero-v8 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        text-align: center;
    }

    /* ─── SECTION SPACING: reduce between sections on all pages ─── */
    .section-pad {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    .home-panel-wrapper > div > section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    .looking_exprt.section-pad,
    .need-help-section.section-pad {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

/* ════════════════════════════════════════
   Desktop (max 1400px)
   ════════════════════════════════════════ */
@media (max-width: 1400px) {
    .container { max-width: 1140px; }
    .grid-4 { grid-template-columns: repeat(3, 1fr) !important; }
    .footer-top.grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .hospital-grid-v4 { grid-template-columns: repeat(3, 1fr) !important; }
    .specialty-grid-v4 { grid-template-columns: repeat(3, 1fr) !important; }
    .services-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .grid-sidebar-layout { grid-template-columns: 1fr 320px !important; }
    .home-panel-wrapper > div > section { padding: 60px 0 !important; }
    .section-pad { padding-top: 50px !important; padding-bottom: 50px !important; }
}

/* ════════════════════════════════════════
   Large Laptop (max 1200px)
   ════════════════════════════════════════ */
@media (max-width: 1200px) {
    .container { max-width: 960px; }
    .nav-menu-list { gap: 0.75rem !important; }
    .menu-item a { font-size: 0.95rem !important; padding: 0.5rem 0.2rem !important; }
    .header-actions { gap: 0.5rem !important; }
    .header-actions .btn { padding: 10px 20px !important; font-size: 0.9rem !important; }
    .whatsapp-btn { width: 38px !important; height: 38px !important; font-size: 1.25rem !important; }
    .main-logo { height: 38px !important; }
    .footer-top.grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .home-panel-wrapper > div > section { padding: 55px 0 !important; }
    .section-pad { padding-top: 45px !important; padding-bottom: 45px !important; }
}

/* ════════════════════════════════════════
   Laptop / Large Tablet (max 1024px)
   ════════════════════════════════════════ */
@media (max-width: 1024px) {
    .top-bar { display: none !important; }
    .nav-menu-wrap { display: none !important; }
    .mobile-toggle { display: flex !important; align-items: center; justify-content: center; font-size: 1.7rem; }
    .header-actions .btn, .header-actions .btn-primary { display: none !important; }
    .main-logo { height: 36px !important; }

    .grid-sidebar-layout { grid-template-columns: 1fr !important; }
    .sticky-sidebar { position: static !important; }
    .doctor-layout, .hospital-layout { grid-template-columns: 1fr !important; }

    .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .doctors-grid, .grid-3.mt-5 { grid-template-columns: repeat(2, 1fr) !important; }
    .hospital-grid-v4 { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
    .specialty-grid-v4 { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
    .services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
    .blog-grid, .blog-grid-v5 { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
    .treatments-grid, .treatment-archive-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
    .stories-archive-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }

    .footer-top.grid-4, .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }
    .home-panel-wrapper > div > section { padding: 70px 0 !important; }

    .hosp-nav-sticky {
        top: 58px !important;
        transition: top 0.3s ease-in-out;
    }
    body.header-hidden .hosp-nav-sticky {
        top: 0 !important;
    }
}

/* ════════════════════════════════════════
   Tablet (max 992px) — PDF FIXES START HERE
   ════════════════════════════════════════ */
@media (max-width: 992px) {
    .container { max-width: 740px; padding-left: 16px; padding-right: 16px; }

    /* Typography */
    h1 { font-size: clamp(2rem, 5vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.6rem, 4vw, 2rem) !important; }

    /* ─── CTA PANELS: all pages — single column, no overflow ─── */
    /* Targets: archive-doctor, archive-hospital, archive-treatment,
       single-hospital, single-patient_story, page-medical-visa,
       page-packages, page-patient-stories */
    .glass-premium.doc-cta-panel,
    .glass-premium.cta-premium-grid,
    .glass-premium.cta-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 24px 20px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    .glass-premium.doc-cta-panel > *,
    .glass-premium.cta-premium-grid > *,
    .glass-premium.cta-grid > * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .cta-content { padding: 0 4px !important; }
    .cta-actions { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
    .cta-actions .btn { width: 100% !important; justify-content: center !important; text-align: center !important; }
    .doc-cta-heading { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; }
    .cta-title { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; }

    .hero-v8 { padding: 72px 0 18px !important; min-height: auto !important; }
    .hero-v8-pill { margin-top: 0 !important; margin-bottom: 0.85rem !important; }
    .hero-v8-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .hero-v8-right { display: none !important; }
    .hero-v8-title { font-size: 2rem !important; line-height: 1.2 !important; }

    /* Search bar: icon + input on first row, button full-width on second row */
    .hero-v8-search {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .v8-search-icon {
        display: flex !important;
        align-items: center !important;
        padding: 0 12px !important;
        flex-shrink: 0 !important;
    }
    .hero-v8-search input {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 14px 10px !important;
    }
    .v8-search-btn {
        width: 100% !important;
        justify-content: center !important;
        border-radius: 0 0 10px 10px !important;
        padding: 12px 16px !important;
        margin: 0 !important;
    }

    /* Hero stats: stay in row (handled by 480px breakpoint) */
    .hero-v8-stats { gap: 1rem !important; }
    .v8-stat-num { font-size: 1.2rem !important; }

    /* ─── STATS BAR — single row horizontal scroll ─── */
    .stats-bar-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 1.5rem !important;
        padding: 1.25rem 1rem !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    .stats-bar-inner::-webkit-scrollbar { display: none !important; }
    .stats-bar-item { flex: 0 0 auto !important; min-width: max-content !important; }
    .stats-bar-item:last-child { grid-column: unset !important; justify-self: unset !important; }
    .stats-bar-divider { display: none !important; }

    /* ─── NEED HELP SECTION (Page 4 Fix) — No horizontal scroll ─── */
    .need-help-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .need-help-section { overflow-x: hidden !important; }
    .need-help-form-wrap { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
    .need-help-form-card { padding: 20px !important; }
    .form-age-country-row { grid-template-columns: 1fr !important; }

    /* ─── SECTION HEADER FLEX — Left align on tablet & mobile ─── */
    .section-header-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 1rem !important;
    }
    .section-header-flex .section-header {
        text-align: left !important;
        max-width: 100% !important;
    }
    .section-header-flex .header-action-v4 {
        width: auto !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    /* ─── HOSPITALS SECTION (Page 10 Fix) — Hide grid, show carousel ─── */
    .hosp-grid-desktop { display: none !important; }
    .hosp-carousel-mobile { display: block !important; }
    .hosp-header-desktop { display: none !important; }
    .hosp-header-mobile { display: block !important; }
    .hosp-view-all-mobile { display: block !important; }

    /* ─── DOCTORS SECTION (Page 12 Fix) — Hide grid, show carousel ─── */
    .doc-grid-desktop { display: none !important; }
    .doc-carousel-mobile { display: block !important; }
    .doc-header-desktop { display: none !important; }
    .doc-header-mobile { display: block !important; }
    .doc-view-all-mobile { display: block !important; }

    /* ─── PROCESS STEPS - HOW WE WORK (Page 14 Fix) ─── */
    .process-timeline-v5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin-top: 40px !important;
    }
    .process-svg-path { display: none !important; }
    /* Remove offset — prevents 1,3,5 appearance */
    .card-offset-down { margin-top: 0 !important; }
    /* Button: hide from header, show below */
    .process-btn-desktop { display: none !important; }
    .process-btn-mobile { display: block !important; }

    /* ─── PLAN TRAVEL STEPS (Page 14 Fix) ─── */
    .travel-timeline-v5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin-top: 40px !important;
    }
    .travel-svg-path { display: none !important; }
    /* Remove margin offset — prevents 02/04 from disappearing */
    .travel-offset-down { margin-top: 0 !important; display: block !important; }
    /* 5th step: center it */
    .travel-step-v5:last-child {
        grid-column: 1 / -1 !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* ─── PROFESSIONALS SECTION (Page 16 Fix) — Hide image ─── */
    .professionals-image { display: none !important; }
    .professionals-grid { grid-template-columns: 1fr !important; }

    /* ─── PATIENT STORIES / EXPERT SECTION (Page 20 Fix) ─── */
    .expert-stories-wrap > div:first-child { display: none !important; }
    .expert-stories-wrap { grid-template-columns: 1fr !important; }
    .patient-stories-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    /* ─── BLOG SECTION — Left align like all other sections ─── */
    .blog-v5 .section-header-flex {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        text-align: left !important;
        gap: 0.35rem 0.75rem !important;
    }
    .blog-v5 .section-header { display: contents !important; }
    .blog-v5 .badge-v2 { order: 1 !important; flex: 0 0 auto !important; }
    .blog-v5 .header-action-v4 { order: 2 !important; flex: 0 0 auto !important; margin-left: auto !important; width: auto !important; }
    .blog-v5 h2 { order: 3 !important; flex: 0 0 100% !important; text-align: left !important; }
    .blog-v5 .section-header-flex > p { order: 4 !important; flex: 0 0 100% !important; text-align: left !important; }
    .btn-blog-view {
        padding: 0.3rem 0.8rem !important;
        font-size: 0.7rem !important;
    }

    /* Buttons overall */
    .btn, .btn-primary, .btn-premium-outline {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }

    /* Sidebars and layout */
    .grid-sidebar-layout { grid-template-columns: 1fr !important; }
    .sticky-sidebar { position: static !important; }

    /* Panels — consistent standard section spacing */
    .home-panel-wrapper > div > section { padding: 48px 0 !important; }
    .section-header { margin-bottom: 1.5rem !important; }
    .section-header h2 { margin-bottom: 0.5rem !important; }
}

/* ════════════════════════════════════════
   Large Tablet / Small Tablet (max 768px)
   ════════════════════════════════════════ */
@media (max-width: 768px) {
    .container { max-width: 100%; padding-left: 15px; padding-right: 15px; }

    body { font-size: 15px !important; }
    h1 { font-size: clamp(1.8rem, 6vw, 2.2rem) !important; line-height: 1.2 !important; }
    h2 { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; line-height: 1.25 !important; }

    .swiper-button-next, .swiper-button-prev { display: none !important; }
    .swiper-pagination { margin-top: 1rem !important; }

    .form-row-2col, .need-help-form-card .grid-2 { grid-template-columns: 1fr !important; }

    .d-none-mobile { display: none !important; }
    .text-center-mobile { text-align: center !important; }
    
    /* Live Search Title font weight on mobile */
    .ls-title { font-weight: 600 !important; }

    .stories-grid, .patient-stories-grid, .grid-3.stories { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }

    .home-panel-wrapper > div > section { padding: 40px 0 !important; }
    .site-footer { padding-top: 25px !important; padding-bottom: env(safe-area-inset-bottom, 1rem) !important; }
    .pagination, .pkg-pagination { margin-top: 1rem !important; }

    /* ─── BANNER / BREADCRUMB OVERRIDES (MOBILE) ─── */
    html body .hero-v8 h1,
    html body .hero-v8-title, 
    html body h1.page-title, 
    html body .archive-header h1,
    html body .archive-title,
    html body .visa-section-title,
    html body .hosp-name,
    html body .hosp-hero-container h1,
    html body .hosp-hero-container h2,
    html body .pkg-hero-section h1,
    html body .hero-title-mobile,
    html body .about-hero-title,
    html body .contact-h1 {
        font-size: 21px !important;
        line-height: 1.3 !important;
    }
    
    html body .hero-v8-pill,
    html body .ps-badge,
    html body .badge-v2,
    html body .archive-badge,
    html body .visa-badge {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
    html body .hero-v8-pill span:not(.pill-dot) {
        font-size: 10px !important;
    }
    
    html body .hero-v8,
    html body .hosp-hero-container,
    html body .archive-header,
    html body .page-header,
    html body .visa-hero-v2,
    html body .pkg-hero-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
        min-height: auto !important;
        text-align: left;
    }
    
    /* ─── CARD TITLE OVERRIDES (MOBILE) ─── */
    html body .doc-title,
    /* html body .hosp-name-v4, */
    html body .ps-card-title,
    html body .blog-card-v5 h3,
    html body .blog-card-v5 h4,
    html body .blog-card-v5 h3 a,
    html body .blog-card-v5 h4 a,
    html body .service-card-v2 h4,
    html body .specialty-card h3,
    html body .country-card h3,
    html body article.card h3,
    html body article.card h4,
    html body article.card h3 a,
    html body article.card h4 a {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    
    /* ─── STATS COUNTER OVERRIDES (MOBILE) ─── */
    html body div span.v8-stat-num,
    html body div .v8-stat-num,
    html body div .stat-number,
    html body .stats-grid-mobile span.v8-stat-num {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
    
    html body div span.v8-stat-label,
    html body div .v8-stat-label,
    html body div .stat-label,
    html body .stats-grid-mobile span.v8-stat-label {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    /* ─── BANNER PARAGRAPH GAP OVERRIDES (MOBILE) ─── */
    /* html body .hero-v8 p, */
    html body .hosp-hero-container p,
    html body .archive-header p,
    html body .pkg-hero-section p,
    html body .visa-hero-v2 p,
    html body .page-header p {
        margin-bottom: 0rem !important;
    }

    /* html body .hero-v8 p {
        margin: 0 !important;
    } */
    
    /* ─── BADGE TO TITLE GAP OVERRIDES (MOBILE) ─── */
    html body .badge,
    html body .badge-v2,
    html body .ps-badge,
    html body .archive-badge,
    html body .visa-badge,
    html body .hero-v8-pill,
    html body .v8-tag,
    html body .badge-pill {
        margin-bottom: 8px !important;
    }

    p {
    margin-bottom: 0.8rem !important;
    }
    
    /* ─── FONT WEIGHT OVERRIDES (MOBILE) ─── */
    /* Target anything explicitly 900 and make it 700 */
    html body [style*="font-weight:900"],
    html body [style*="font-weight: 900"],
    html body .about-section-title,
    html body .hero-title-mobile,
    html body .content-title-mobile,
    html body .visa-section-title,
    html body h1.page-title {
        font-weight: 700 !important;
    }

    /* Target anything else bold (>600) and make it 600 */
    html body [style*="font-weight:800"],
    html body [style*="font-weight: 800"],
    html body [style*="font-weight:700"],
    html body [style*="font-weight: 700"],
    html body .fw-bold,
    html body .fw-bolder,
    html body h1,
    html body h2,
    html body h3,
    html body h4,
    html body h5,
    html body h6 {
        font-weight: 600 !important;
    }

    /* ─── TAB BUTTONS HORIZONTAL SCROLL (MOBILE) ─── */
    html body .tab, 
    html body .services-tabs-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 10px !important;
        padding-bottom: 5px !important;
        justify-content: flex-start !important;
        margin-bottom: 0px !important;
    }
    html body .tab::-webkit-scrollbar,
    html body .services-tabs-mobile::-webkit-scrollbar {
        display: none !important;
    }
    html body .tab .tablinks,
    html body .services-tabs-mobile .tablinks {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin-bottom: 0 !important;
    }
    
    /* ─── PACKAGE PRICE CARD OVERRIDES (MOBILE) ─── */
    html body .pkg-hero-content-wrap {
        gap: 15px !important;
    }
    html body .pkg-price-card {
        padding: 20px !important;
        min-width: 100% !important;
        margin-top: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    html body .pkg-price-amount {
        font-size: 32px !important;
        font-weight: 700 !important;
    }
    html body .pkg-price-label {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }
    html body .pkg-price-badge {
        font-size: 9px !important;
        padding: 3px 10px !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
    }
    html body .pkg-price-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    /* ─── PACKAGE TIMELINE OVERRIDES (MOBILE) ─── */
    html body .pkg-timeline-num {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }
    html body .pkg-timeline-line {
        left: 15px !important;
        top: 36px !important;
    }
    html body .pkg-timeline-row {
        gap: 12px !important;
    }

    .btn, .btn-primary, .btn-premium-outline {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    /* Shrink large inline CTA buttons globally on mobile */
    html body a[style*="padding:14px"],
    html body a[style*="padding: 14px"] {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    /* ─── UNIVERSAL SECTION SPACING (MOBILE) ─── */
    /* Use high specificity (html body) to override inline <style> blocks in PHP files */
    html body section, 
    html body .section-pad, 
    html body .doctor-faqs-section, 
    html body .process-v5, 
    html body .travel-v5, 
    html body .related-doctors-section {
        padding-top: 25px !important;
        padding-bottom: 16px !important;
    }
    html body .section-header { margin-bottom: 24px !important; }
    html body .mt-5, html body .my-5 { margin-top: 24px !important; }
    html body .mb-5, html body .my-5 { margin-bottom: 24px !important; }
    
    /* Reduce internal gaps (e.g., between header and cards) */
    html body .section-header-flex + .grid-2,
    html body .section-header + .grid-2,
    html body .section-header-flex + .grid-3,
    html body .section-header + .grid-3,
    html body [style*="margin-top:50px;"] {
        margin-top: 16px !important;
    }

    html body .process-timeline-v5, 
    html body .travel-timeline-v5 {
        margin-top: 24px !important;
    }
    html body .faq-grid {
        margin-top: 24px !important;
    }
    html body .ps-mobile-swiper {
        padding-bottom: 16px !important;
    }



    /* ─── SECTION HEADERS & BADGES (Mobile Left Alignment) ─── */
    .section-header.text-center { text-align: left !important; }
    .section-header h2, .section-header .badge-v2 { text-align: left !important; align-self: flex-start !important; }
    
    /* ─── FAQ GRID (Single Column Mobile) ─── */
    .faq-grid, .doctor-faqs-section .faq-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ─── FORM CARD: Reduced padding on mobile (all pages) ─── */
    .need-help-form-card,
    .inquiry-form-card,
    .pkg-form-card {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }
    .form-card-header { margin-bottom: 1rem !important; }
    .form-card-header i { font-size: 1.8rem !important; margin-bottom: 0.5rem !important; }
    .form-card-header h3 { font-size: 16px !important; margin-bottom: 0.25rem !important; }
    .form-card-header p { font-size: 12px !important; }

    .need-help-form .form-group,
    .need-help-form-card .form-group {
        margin-bottom: 0.65rem !important;
    }
    /* CTA grid: reduce internal gap on mobile */
    .cta-grid {
        gap: 16px !important;
        padding: 20px 14px !important;
    }


    /* ─── SECTION HEADER: BADGE LEFT + BUTTON RIGHT on same row ─── */
    /* Flatten .section-header so its children (badge, h2, p) become
       direct flex items of .section-header-flex — CSS display:contents trick */
    .section-header-flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.35rem 0.75rem !important;
        text-align: left !important;
    }
    .section-header-flex .section-header {
        display: contents !important; /* children become flex items */
    }
    /* Badge: row 1, left */
    .section-header-flex .badge-v2,
    .badge-v2 {
        order: 1 !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        display: inline-block !important;
        font-size: 0.62rem !important;
        padding: 0.25rem 0.75rem !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Button: row 1, right (push to end) */
    .section-header-flex .header-action-v4 {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        width: auto !important;
        align-self: center !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    .header-action-v4 .btn-premium-outline,
    .header-action-v4 a.btn-premium-outline,
    .header-action-v4 > a {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.8rem !important;
        width: auto !important;
        display: inline-flex !important;
        white-space: nowrap !important;
    }
    /* H2: row 2, full width */
    .section-header-flex h2 {
        order: 3 !important;
        flex: 0 0 100% !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.2rem !important;
        text-align: left !important;
        font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
    }
    /* P: row 3, full width */
    .section-header-flex p {
        order: 4 !important;
        flex: 0 0 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        text-align: left !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    h2 { font-size: clamp(1.2rem, 5vw, 1.55rem) !important; }

    /* ═══════════════════════════════════════════════════════
       GLOBAL 21px CAP — All section/panel titles on mobile
       Overrides any inline font-size style on h2/h3/h4/div.title
       ═══════════════════════════════════════════════════════ */
    h2, h3.no-reveal,
    .section-header h2,
    .section-header-flex h2,
    .visa-section-title,
    .svc-section-title,
    .content-title-mobile,
    .cta-title,
    .ps-section-title,
    .hosp-section-title {
        font-size: 21px !important;
        line-height: 1.25 !important;
    }
    /* Inline-styled headings inside panels & CTA blocks
       NOTE: Do NOT add broad div selectors here — they match form dropdowns too! */
    .glass-premium h2,
    .glass-premium .cta-title,
    .looking_exprt h2,
    .medical_visa_sec h2,
    .svc-value-box h3,
    .visa-value-box h3,
    section h2,
    section h3 {
        font-size: 21px !important;
        line-height: 1.25 !important;
    }
    /* Doctor/hospital card names inside sliders */
    .swiper-wrapper h3,
    .doctor-card h3,
    .doc-card h3,
    .hosp-card-v4 h3,
    .specialty-card-v4 h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    /* ═══════════════════════════════════════════════════════
       GLOBAL FORM DROPDOWN FIX — ALL pages, ALL forms
       Placed AFTER the 21px cap with higher specificity to win!
       ═══════════════════════════════════════════════════════ */
    .treatment-options-list .treatment-option,
    .country-options-list .country-option,
    .code-options-list .code-option,
    .glass-premium .treatment-options-list .treatment-option,
    .glass-premium .country-options-list .country-option,
    .need-help-form-card .treatment-option,
    .need-help-form-card .country-option,
    .need-help-form-card .code-option {
        font-size: 13px !important;
        line-height: 1.4 !important;
        padding: 8px 10px !important;
    }
    .treatment-select-trigger,
    .custom-select-trigger,
    .code-select-trigger {
        font-size: 13px !important;
    }
    .treatment-search-input,
    .country-search-input {
        font-size: 13px !important;
    }
    .treatment-select-dropdown,
    .custom-select-dropdown,
    .code-select-dropdown {
        -webkit-text-size-adjust: none !important;
        text-size-adjust: none !important;
        font-size: 13px !important;
    }
    /* Trigger buttons (trigger shows selected value) */
    .selected-treatment-text,
    .selected-country-text,
    .selected-code,
    .selected-flag {
        font-size: 13px !important;
    }
}


/* ════════════════════════════════════════
   Large Mobile (max 576px)
   ════════════════════════════════════════ */
@media (max-width: 576px) {
    .container { max-width: 100%; padding-left: 12px; padding-right: 12px; }

    /* Single column everything */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .hospital-grid-v4, .specialty-grid-v4, .doctors-grid, .grid-3.mt-5,
    .services-grid, .blog-grid, .blog-grid-v5, .treatments-grid,
    .treatment-archive-grid, .stories-archive-grid,
    .stories-grid, .patient-stories-grid, .grid-3.stories {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Process steps: two columns on mobile */
    .process-timeline-v5, .how-we-work-grid, .steps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .travel-timeline-v5 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .travel-step-v5:last-child {
        grid-column: auto !important;
        max-width: 100% !important;
    }

    /* Hero stats horizontal scroll */
    .hero-v8-stats { display: flex !important; align-items: flex-start !important; justify-content: start; gap: 1rem !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 5px !important; scrollbar-width: none !important; animation: none !important; grid-template-columns: repeat(3, 1fr) !important;}
    .hero-v8-stats::-webkit-scrollbar { display: none !important; }
    .v8-stat { flex: 0 0 auto !important; text-align: center; }
    .v8-stat-divider { display: none !important; }

    /* Search bar stays proper on small mobile */
    .hero-v8-search {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    .v8-search-icon {
        display: flex !important;
        align-items: center !important;
        padding: 0 10px !important;
    }
    .hero-v8-search input {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
    }
    .v8-search-btn {
        width: 100% !important;
        justify-content: center !important;
        border-radius: 0 0 10px 10px !important;
        padding: 11px !important;
    }

    /* Stats bar on mobile — single row scroll, no cut-off */
    .stats-bar-inner {
        gap: 1.25rem !important;
        padding: 0 !important;
    }
    .stats-bar-item:first-child { padding-left: 0 !important; }
    .stats-bar-icon { width: 40px !important; height: 40px !important; font-size: 1.2rem !important; }
    .stats-bar-text strong { font-size: 1.1rem !important; }
    .stats-bar-text span { font-size: 0.7rem !important; }

    /* Footer */
    .footer-top.grid-4, .footer-grid, .footer-col-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .footer-bottom-inner { flex-direction: column !important; text-align: center !important; gap: 0.75rem !important; }
    .footer-col:first-child { text-align: center !important; }

    /* CTA sections */
    .glass-premium { grid-template-columns: 1fr !important; gap: 30px !important; padding: 30px 20px !important; }
    .cta-content { padding: 0 !important; text-align: left !important; }
    .cta-actions { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
    .benefits-grid { grid-template-columns: 1fr !important; }

    /* Layout grids */
    .lq-grid, .quote-grid, .plan-travel-grid, .travel-grid, .professionals-grid, .diff-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .step-connector { display: none !important; }

    /* Doctor filter */
    .doctor-filter-bar-v4 { flex-direction: column !important; padding: 1rem !important; }
    .doctor-filter-bar-v4 .filter-select-group, .filter-select-v4 { width: 100% !important; }

    /* Doctor profile */
    .doctor-profile-hero { flex-direction: column !important; text-align: center !important; }
    .doctor-img-hero { width: 110px !important; height: 110px !important; margin: 0 auto !important; }

    .home-panel-wrapper > div > section { padding: 36px 0 !important; }

    /* Need help form */
    .need-help-form-card { padding: 16px !important; border-radius: 16px !important; }
    .form-age-country-row { grid-template-columns: 1fr !important; }

    .doc-location {
        margin-bottom: 0.5rem !important;
    }

    .doc-footer {
        padding-top: 0.5rem !important;
    }

    .treatment-stats-grid > div:nth-last-child(-n+3) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    .mobile-justify-start {
        justify-content: start !important;
    }

    html body .hero-v8 {
        text-align: start;
    }
}

/* ════════════════════════════════════════
   Mobile (max 480px)
   ════════════════════════════════════════ */
@media (max-width: 480px) {
    body { font-size: 14px !important; }

    h1 { font-size: clamp(1.6rem, 8vw, 2rem) !important; }
    h2 { font-size: clamp(1.3rem, 6vw, 1.6rem) !important; }
    p { font-size: 0.88rem !important; line-height: 1.5 !important; }

    .mobile-drawer { width: 100% !important; max-width: 100% !important; }

    .inquiry-input-field { padding: 0.75rem !important; font-size: 0.85rem !important; }

    /* Sticky buttons */
    .float-whatsapp { display: none !important; }
    .back-to-top-btn { bottom: 1rem !important; left: 1rem !important; width: 40px !important; height: 40px !important; }

    .home-panel-wrapper > div > section { padding: 28px 0 !important; }
    .section-header { margin-bottom: 0.85rem !important; }
}

/* ════════════════════════════════════════
   Large Mobile (max 425px)
   ════════════════════════════════════════ */
@media (max-width: 425px) {
    .hero-v8 { padding: 22px 0 12px !important; }

    .specialty-card-v4 { height: auto !important; padding: 1.25rem !important; }
    .hosp-body-v4 { padding: 0.85rem !important; }
    .blog-body { padding: 1rem !important; }
    .service-card-v2 { padding: 1rem !important; }

    .hosp-media { height: 160px !important; }
    .blog-img-wrap { height: 160px !important; }

    .home-panel-wrapper > div > section { padding: 28px 0 !important; }

    /* Stats bar: compact */
    .stats-bar-icon { width: 42px !important; height: 42px !important; font-size: 1.3rem !important; }
    .stats-bar-text strong { font-size: 1.2rem !important; }
    .stats-bar-text span { font-size: 0.7rem !important; }
}

/* ════════════════════════════════════════
   Small Mobile (max 375px)
   ════════════════════════════════════════ */
@media (max-width: 375px) {
    h1 { font-size: clamp(1.3rem, 7vw, 1.6rem) !important; line-height: 1.2 !important; }
    h2 { font-size: clamp(1.1rem, 6vw, 1.4rem) !important; line-height: 1.25 !important; }
    h3 { font-size: 1rem !important; }

    .doc-name { font-size: 0.85rem !important; }

    .faq-question { padding: 0.7rem 1rem !important; }

    .home-panel-wrapper > div > section { padding: 24px 0 !important; }

    .btn, .btn-primary, .btn-premium-outline {
        padding: 10px 14px !important;
        font-size: 0.8rem !important;
    }
}

/* ════════════════════════════════════════
   Extra Small (max 320px)
   ════════════════════════════════════════ */
@media (max-width: 320px) {
    body { font-size: 13px !important; }
    .blog-img-wrap { height: 140px !important; }
    .hosp-media { height: 140px !important; }
    .footer-desc { font-size: 0.8rem !important; }
    .footer-links a { font-size: 0.75rem !important; }
    .home-panel-wrapper > div > section { padding: 20px 0 !important; }
    .inquiry-input-field { padding: 0.6rem !important; font-size: 0.8rem !important; }
}