/* ─── FORCE HAMBURGER VISIBLE ON MOBILE ─── */
@media (max-width: 768px) {

    /* Show hamburger */
    .nav-hamburger {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 10001;
    }

    /* Hide desktop nav and CTA */
    .nav-links,
    .nav-cta-group {
        display: none !important;
    }

    /* Hamburger X animation when menu is open */
    .nav-hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-hamburger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .nav-hamburger span {
        transition: all .25s;
    }
}

/* ─── MOBILE MENU DRAWER ─── */
#mobileMenu {
    display: none !important;
}

@media (max-width: 768px) {

    #mobileMenu {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: #ffffff;
        z-index: 9999;
        border-top: 1px solid rgba(26, 143, 90, .12);
        border-bottom: 2px solid rgba(26, 143, 90, .15);
        padding: 8px 5% 20px;
        box-shadow: 0 8px 30px rgba(13, 94, 63, .15);
        flex-direction: column;
    }

        #mobileMenu.open {
            display: flex !important;
        }

        #mobileMenu .nav-item {
            display: block;
            font-size: .95rem;
            font-weight: 500;
            color: #2d5a3d;
            padding: 12px 0;
            border-bottom: 1px solid rgba(26, 143, 90, .08);
            text-decoration: none;
            transition: color .2s;
        }

            #mobileMenu .nav-item:last-of-type {
                border-bottom: none;
            }

        #mobileMenu .mobile-cta {
            display: flex;
            gap: 10px;
            margin-top: 14px;
        }

            #mobileMenu .mobile-cta .btn {
                flex: 1;
                justify-content: center;
            }
}
/* ─── HERO ─── */
/* ─── HERO VISUAL FIX ─── */
@media (max-width: 1024px) {
    .hero-visual {
        display: none !important;
    }

    .hero-inner {
        grid-template-columns: 1fr !important;
    }

    .hero {
        min-height: auto;
        padding: 100px 5% 56px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .hero-btns {
        flex-direction: column;
    }

        .hero-btns .btn {
            width: 100%;
            justify-content: center;
        }
}

/* ─── SECTIONS GENERAL ─── */
@media (max-width: 768px) {
    section {
        padding: 56px 5%;
    }

    .section-title {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
    }

    .section-desc {
        font-size: .9rem;
        margin-bottom: 32px;
    }
}

/* ─── SERVICES GRID ─── */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── TREATMENTS TABS FIX ─── 
   Problem: buttons wrap in jagged lines because of variable text length.
   Fix: enforce consistent pill sizing and horizontal scroll on very small screens.
*/
@media (max-width: 768px) {
    .treatments-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 8px;
        scrollbar-width: none;
        margin-bottom: 28px;
    }

        .treatments-tabs::-webkit-scrollbar {
            display: none;
        }

    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 9px 18px;
        font-size: .82rem;
    }

    .treatment-panels > div.active {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .treatment-panel-img img {
        height: 240px;
    }
}

/* ─── HOMECARE ─── */
@media (max-width: 768px) {
    .homecare-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .homecare-img-main img {
        height: 260px;
    }

    .homecare-badge {
        bottom: -12px;
        right: 12px;
        padding: 14px 18px;
    }
}

/* ─── WHY US ─── */
@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: 1fr;
    }

    .why-right {
        display: none;
    }

    .why-items {
        gap: 14px;
    }

    .why-item {
        padding: 16px;
    }
}

/* ─── BOOKING FORM ─── 
   Problem: .booking-form-card padding:40px clips on 375px screens.
   Problem: .form-row is a 2-column grid that makes inputs ~155px wide.
*/
@media (max-width: 768px) {
    .booking-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .booking-form-card {
        padding: 24px 18px;
    }

        .booking-form-card h3 {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-methods {
        gap: 12px;
    }
}

/* ─── CLINIC ─── */
@media (max-width: 768px) {
    .clinic-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .map-wrapper {
        height: 280px;
    }

    .clinic-card {
        padding: 18px;
    }
}

/* ─── MODAL FIX ─── 
   Problem: modal padding:40px on 375px screen leaves only ~255px of usable width.
   Fix: reduce padding and ensure modal fits with margin.
*/
@media (max-width: 480px) {
    .modal-overlay {
        padding: 16px;
        align-items: flex-end;
    }

    .modal {
        padding: 24px 18px;
        border-radius: 20px 20px 0 0;
        max-width: 100%;
        transform: translateY(100%);
    }

    .modal-overlay.open .modal {
        transform: translateY(0);
    }

    .modal h3 {
        font-size: 1.25rem;
    }
}

/* ─── FLOAT BUTTONS ─── 
   Problem: floating buttons overlap booking form submit button on small screens.
   Fix: hide text labels by default on mobile and reduce size.
*/
@media (max-width: 480px) {
    .float-btns {
        bottom: 14px;
        right: 14px;
        gap: 8px;
    }

    .float-btn {
        padding: 12px 14px;
        font-size: .8rem;
    }

    .float-btn-label {
        display: none;
    }

    .float-btn i {
        font-size: 1.1rem;
    }
}

/* ─── REVIEWS ─── */
/*@media (max-width: 768px) {
    .review-card {
        min-width: 280px;
        padding: 20px;
    }

    .review-text {
        font-size: .85rem;
    }
}*/
@media(max-width:768px) {

    .review-card {
        width: 300px;
        min-width: 300px;
        min-height: 320px;
    }

    .review-text {
        font-size: .9rem;
        line-height: 1.8;
    }
}

/* ─── FOOTER ─── */
@media (max-width: 768px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-top {
        padding: 48px 5% 36px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ─── BOOKING MODAL QUICK FORM ─── 
   (The modal inside _Layout.cshtml)
*/
@media (max-width: 480px) {
    #bookModal .modal {
        padding: 22px 16px;
    }
}

/* ─── UTILITY: prevent horizontal scroll ─── */
@media (max-width: 768px) {
    .blob-bg {
        display: none;
    }

    body {
        overflow-x: hidden;
    }

    .section-inner {
        width: 100%;
        overflow-x: hidden;
    }
}

/* ─── LANDSCAPE PHONE (e.g. iPhone SE landscape) ─── */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 80px 5% 36px;
    }

    section {
        padding: 40px 5%;
    }
}