/* ── MOBILE HERO: compact slider ── */
@media (max-width: 767px) {

    /* Shrink the slide height */

    #hero {
        min-height: 100vw;
        max-height: 460px;
        height: 152vw;
    }


    /* Compact content inside */
    .hero-content {
        padding: 10px 16px;
    }

    .hero-content h1 {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
        margin-bottom: 8px;
    }

    .hero-badge {
        font-size: 0.65rem;
        padding: 2px 10px;
        margin-bottom: 6px;
    }

    .hero-btns {
        gap: 6px;
    }

    #bookingWidget {
        position: absolute;
        bottom: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        max-width: 900px;
        z-index: 10;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 6px 14px;
        font-size: 0.75rem;
    }

    /* Booking widget: stack on mobile */
    #bookingWidget .booking-card {
            border-radius: 10px;
        padding: 10px 12px;
        box-shadow: none;
    }

    #bookingWidget .booking-fields {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 6px;
        align-items: center;
    }

    #bookingWidget .field-group {
        flex: 1;
        min-width: 0;
        width: 100%;
    }

    #bookingWidget .field-group:last-of-type {
        /* display: none; */
        /* hide partner logo */
    }

    .btn-search-hotels {
        padding: 8px 12px;
        font-size: 0.78rem;
        white-space: nowrap;
        width: 100%;
    }

    /* Fix hero swiper height too */
    .hero-swiper,
    .hero-swiper .swiper-wrapper {
      height: 58vw;
        max-height: 420px;
    }

    #stats {
        display: none;
    }

}