/* =============================================
   NAFAY MOTORS — COMPLETE MOBILE CSS
   Fixes: cards, navbar, sidebar, buttons,
   gallery, view car, homepage
============================================= */

/* ── Body ── */
body {
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* =============================================
   NAVBAR — MOBILE
============================================= */
@media (max-width: 767px) {

    .timerowup {
        font-size: 10px !important;
        padding: 4px 8px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
    .timerow {
        overflow-x: auto !important;
        white-space: nowrap !important;
        font-size: 10px !important;
    }

    /* Hide desktop nav links */
    .navli, .navbar-nav, nav ul {
        display: none !important;
    }

    /* Show hamburger menu */
    .navbar-toggler {
        display: block !important;
    }

    /* Logo size */
    .nafay-logo-col img {
        height: 38px !important;
    }

    /* Hide desktop search bar */
    .nafay-search-col {
        display: none !important;
    }

    /* Top info bar */
    .row.timerowup .col-6 {
        font-size: 10px !important;
    }
}

/* =============================================
   HOMEPAGE — MOBILE
============================================= */
@media (max-width: 767px) {

    /* Hero section */
    .hero-section {
        padding: 40px 16px !important;
        text-align: center !important;
    }
    .hero-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
    .hero-subtitle {
        font-size: 14px !important;
    }
    .hero-btns {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .btn-hero-primary,
    .btn-hero-secondary {
        width: 85% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        display: block !important;
        height: auto !important;
        min-height: unset !important;
        min-width: unset !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        position: static !important;
        font-size: 15px !important;
    }

    /* Trust bar */
    .trust-bar .row {
        flex-wrap: wrap !important;
    }
    .trust-item {
        width: 33% !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }
    .trust-item .trust-num {
        font-size: 22px !important;
    }

    /* Section titles */
    .section-title {
        font-size: 20px !important;
        text-align: center !important;
    }

    /* Homepage car cards */
    .home-car-card {
        margin-bottom: 16px !important;
    }
    .home-car-card img {
        height: 180px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
}

/* =============================================
   STOCK PAGE — MOBILE CARDS
============================================= */
@media (max-width: 767px) {

    /* Container padding */
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Row margins */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Main listing column full width */
    .col-lg-9.col-md-8.col-sm-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Sidebar goes below listing */
    .col-lg-3.col-md-4.col-sm-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 20px !important;
        padding: 0 !important;
    }

    /* Car card stacks vertically */
    .car-card {
        flex-direction: column !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        margin-bottom: 16px !important;
    }

    /* Car image full width */
    .car-img-wrap {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 210px !important;
        min-height: 210px !important;
        border-radius: 0 !important;
    }
    .car-img-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Car info section */
    .car-info {
        padding: 12px !important;
        flex-direction: column !important;
    }

    /* HIDE desktop action column */
    .car-actions,
    .car-actions.d-none.d-md-flex {
        display: none !important;
    }

    /* SHOW mobile buttons */
    .d-block.d-md-none,
    div.d-block.d-md-none {
        display: block !important;
    }

    /* Mobile button styles */
    .d-block.d-md-none a {
        display: block !important;
        width: 100% !important;
        padding: 11px 8px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        text-align: center !important;
        text-decoration: none !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }

    /* Spec pills smaller on mobile */
    .spec-pill, .spec-tag {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }

    /* Results header stacks */
    .results-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* Car title smaller */
    .car-title, .car-card h5, .car-card h4 {
        font-size: 15px !important;
    }
}

/* =============================================
   WHATSAPP BUTTONS — MOBILE
============================================= */
@media (max-width: 767px) {

    /* All WA buttons rectangular on mobile */
    a[href*="wa.me"]:not(.wa-float):not(.mob-wa-float) {
        border-radius: 8px !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-width: unset !important;
        min-height: unset !important;
        display: block !important;
        padding: 11px 8px !important;
        box-shadow: none !important;
    }

    /* Floating WA button — stays round, smaller on mobile */
    a.wa-float, .wa-float {
        padding: 10px 14px !important;
        font-size: 12px !important;
        bottom: 16px !important;
        right: 12px !important;
        border-radius: 50px !important;
        width: auto !important;
        position: fixed !important;
    }
}

/* =============================================
   SIDEBAR — MOBILE
============================================= */
@media (max-width: 767px) {

    .search-sidebar-box {
        border-radius: 10px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    .whatsapp-sidebar-box {
        border-radius: 10px !important;
        margin-top: 12px !important;
        padding: 16px !important;
    }

    /* Left make filter sidebar — hide on contact page */
    .leftsidebar {
        display: none !important;
    }
}

/* =============================================
   VIEW CAR PAGE — MOBILE
============================================= */
@media (max-width: 767px) {

    /* Full width layout */
    .col-8, .col-md-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Car gallery image */
    .col-md-6 > div:first-child img {
        width: 100% !important;
        height: 240px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    /* Car detail table */
    .cardet-table {
        font-size: 12px !important;
    }
    .cardet-table td {
        padding: 6px 8px !important;
    }

    /* Car title */
    .car-top h2, .car-top h1 {
        font-size: 18px !important;
    }

    /* Spec tags */
    .spec-tag, .spec-pill {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }

    /* Inquiry buttons full width */
    .car-detail-actions a,
    .car-detail-actions button {
        width: 100% !important;
        display: block !important;
        margin-bottom: 8px !important;
    }

    /* Similar vehicles section */
    .similar-cars .card {
        margin-bottom: 12px !important;
    }
    .similar-cars .card-img-top {
        height: 150px !important;
        object-fit: cover !important;
    }
}

/* =============================================
   FOOTER — MOBILE
============================================= */
@media (max-width: 767px) {

    .footer {
        padding: 24px 16px 16px !important;
    }
    .footer .row > div {
        margin-bottom: 16px !important;
    }
    .footer h4, .footer .span-with-bottom {
        font-size: 11px !important;
    }
    .copyright {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }
}

/* =============================================
   UTILITY — MOBILE
============================================= */
@media (max-width: 767px) {
    img { max-width: 100% !important; }

    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Fix Bootstrap grid on mobile */
    [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ── Search Bar hide on mobile ── */
@media (max-width: 767px) {
    .nafay-search-col { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    #nafay-search-input { width: 150px; }
}