/* ================================================
   WEDVEN MOBILE - PRECISE FIXES
   Based on actual index.html source code
   All class names verified from real HTML
   ================================================ */

@media (max-width: 576px) {

    /* ===== 1. HERO SEARCH CARD - fix 1000px width ===== */
    /* The inline style sets width:1000px which overflows on mobile */
    .hero-search-card {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    /* Search grid - single column */
    .search-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Form group labels - fix left cutoff */
    .search-grid .form-group label,
    .hero-search-card label {
        display: block !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #444 !important;
        margin-bottom: 4px !important;
        padding-left: 0 !important;
    }

    /* Inputs and selects inside search */
    .search-grid input,
    .search-grid select {
        width: 100% !important;
        height: 44px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        border: 1px solid #ddd !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Search button - full width */
    .hero-search-button {
        width: 100% !important;
        height: 46px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        margin-top: 10px !important;
    }

    /* ===== 2. POPULAR LOCATIONS - horizontal scroll ===== */
    
#popularLocationsContainer,
.location-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    justify-content: flex-start !important;
}

#popularLocationsContainer button,
.location-buttons button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    background: #f4edf7 !important;
    color: #6A2D76 !important;
    border: 1px solid #e0c8f0 !important;
    font-weight: 500 !important;
}

/* Popular locations section layout */
section.popular-locations {
    padding: 20px 16px 16px !important;
    background: #fff !important;
}

.popular-locations.d-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

.popular-locations h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin-bottom: 12px !important;
    margin-right: 0 !important;
}

    /* Individual city buttons */
    #popularLocationsContainer button,
    .location-buttons button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 5px 14px !important;
    }

    /* Popular locations section layout */
    section.popular-locations {
        padding: 16px 12px !important;
    }

    .popular-locations.d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .popular-locations h4 {
        margin-right: 0 !important;
        margin-bottom: 8px !important;
    }

    /* Features bar - EMI / Venues / Bookings */
    section.popular-locations > .features {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 10px 8px !important;
        margin-top: 12px !important;
    }

    .features-options {
        font-size: 10px !important;
        text-align: center !important;
        flex: 1 !important;
        line-height: 1.4 !important;
    }

    /* Shrink the big purple dot */
    .features-options span[style*="font-size: 30px"] {
        font-size: 14px !important;
        display: block !important;
    }

    /* ===== 3. POPULAR VENUES ===== */
    /* Explore All button - fix 300px fixed width */
    .text-center > .search-button,
    button.search-button[onclick*="search_venue"] {
        width: 85% !important;
        font-size: 13px !important;
    }

    /* Venue cards injected by JS - using .venue-card class */
    .venue-card {
        border-radius: 16px !important;
        overflow: hidden !important;
        margin-bottom: 16px !important;
    }

    .venue-card-media {
        height: 160px !important;
        flex-basis: 160px !important;
    }
    .venue-card-media img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        inset: 0 !important;
    }

    .venue-card-body {
        padding: 14px !important;
    }

    .venue-name {
        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .price {
        font-size: 28px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
    }

    .old-price {
        font-size: 13px !important;
        margin-left: 6px !important;
    }

    .venue-location,
    .venue-capacity {
        font-size: 12px !important;
    }

    .btn-view,
    .btn-book {
        font-size: 13px !important;
        padding: 8px 0 !important;
    }

    /* ===== 4. PARTNER SECTION ===== */
    section.partner-section {
        padding: 28px 16px !important;
        text-align: center !important;
    }

    .partner-btn {
        width: 100% !important;
        max-width: 280px !important;
        font-size: 14px !important;
        padding: 12px 0 !important;
    }

    /* ===== 5. NEWSLETTER ===== */
    section.newsletter-section {
        padding: 28px 16px !important;
    }

    .newsletter-content {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .newsletter-text {
        width: 100% !important;
    }

    .newsletter-form {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100% !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
    }

    /* ===== 6. FAQ + BACK TO TOP - stop overlapping ===== */
    /* Back to top - sits above FAQ button */
    a[href="#top"],
    .back-to-top {
        bottom: 88px !important;
        right: 16px !important;
        z-index: 998 !important;
    }

    /* FAQ fab - stays at bottom */
    .faq-fab {
        bottom: 20px !important;
        right: 16px !important;
    }

    /* Hide FAQ label text on mobile - just show the button */
    .faq-fab-label {
        display: none !important;
    }

    /* ===== 7. SECTION HEADINGS ===== */
    .container-xxl .text-center h1 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .container-xxl .text-center p.mb-5 {
        margin-bottom: 20px !important;
        font-size: 13px !important;
    }

    /* ===== 8. FOOTER ===== */
    .wedven-footer .col-lg-4,
    .wedven-footer .col-md-6 {
        margin-bottom: 24px !important;
        padding-bottom: 16px !important;
    }

    .footer-links {
        padding-left: 0 !important;
        list-style: none !important;
    }

    .footer-links li {
        margin-bottom: 8px !important;
    }

    .footer-links a {
        font-size: 13px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
        padding-bottom: 24px !important;
    }

    .footer-policy {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .footer-policy a,
    .footer-bottom p {
        font-size: 12px !important;
    }

    /* Vendor login button - stop floating over content */
    .vendor-btn {
        position: relative !important;
        display: inline-block !important;
        right: auto !important;
        top: auto !important;
        margin-top: 14px !important;
    }
}
/* Fix empty white space after carousel */
.container-fluid.p-0.mb-5 {
    margin-bottom: 0 !important;
}

@media (max-width: 640px) {

    /* About page banner fix */
    .banner .container {
        flex-direction: column !important;
        padding: 16px !important;
    }

    .banner-text {
        max-width: 100% !important;
        margin-bottom: 16px !important;
    }

    .banner-text h2 {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }

    .banner-text p {
        font-size: 13px !important;
        margin-bottom: 14px !important;
    }

    .banner .img-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }

    .banner .img-wrapper img {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    .banner {
        margin: 12px !important;
        border-radius: 16px !important;
        padding: 20px !important;
    }

    /* About section */
    .about-section {
        margin: 12px !important;
        border-radius: 16px !important;
        padding: 20px !important;
    }

    .about-section h2 {
        font-size: 20px !important;
    }

    .about-section h4 {
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }

    .about-section p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    /* What Makes Us Different cards */
    .make-us-section {
        margin: 12px !important;
        border-radius: 16px !important;
        padding: 20px !important;
    }

    .make-us-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .make-us-card {
        max-width: 100% !important;
        width: 100% !important;
        min-width: unset !important;
        border-radius: 12px !important;
        padding: 16px !important;
    }

    .make-us-card h4 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .make-us-card p {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    /* Back to top - round */
    .back-to-top {
        border-radius: 50% !important;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        bottom: 88px !important;
        right: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
@media (max-width: 991px) {

    /* Mobile menu - clean and compact */
    .navbar-collapse .navbar-nav {
        text-align: center !important;
        padding: 4px 0 !important;
    }

    .navbar-collapse .navbar-nav .nav-link {
        padding: 8px 16px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .navbar-collapse .navbar-nav .nav-link:last-child {
        border-bottom: none !important;
    }

    /* Icons row - compact */
   .navbar-collapse .header-right-actions {
    justify-content: center !important;
    padding: 8px 0 6px !important;
    border: none !important;
    margin-top: 4px !important;
    gap: 10px !important;
}
}
@media (max-width: 991px) {

    /* Remove hover highlight from mobile menu nav links (active pill is handled in site-header.css) */
    .navbar-collapse .navbar-nav .nav-link:hover {
        background: transparent !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        color: #ffffff !important;
    }

    /* Keep consistent styling for all links */
    .navbar-collapse .navbar-nav .nav-link {
    background: transparent !important;
    color: rgba(255,255,255,0.9) !important;
    text-align: center !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 0 !important;
}
}
@media (max-width: 991px) {
    .navbar-dark .navbar-nav .nav-link:focus,
    .navbar-dark .navbar-nav .nav-link:hover {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        color: #ffffff !important;
        box-shadow: none !important;
        outline: none !important;
    }
}
.navbar-collapse .header-right-actions {
    justify-content: center !important;
    padding: 8px 0 6px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    margin-top: 4px !important;
    gap: 10px !important;
}