/* =============================================
   NAFAY MOTORS — PROFESSIONAL REDESIGN 2026
   Fixed version: WA buttons, mobile, contact
============================================= */

/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- ROOT VARIABLES --- */
:root {
    --primary:      #FE5214;
    --primary-dark: #d94510;
    --dark:         #0F0F0F;
    --dark2:        #1A1A1A;
    --grey:         #F5F5F5;
    --grey2:        #E8E8E8;
    --text:         #222222;
    --text-light:   #666666;
    --white:        #FFFFFF;
    --radius:       12px;
    --shadow:       0 4px 24px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 32px rgba(254,82,20,0.18);
    --transition:   all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* --- BASE --- */
* { box-sizing: border-box; }
body {
    font-family: 'Inter', sans-serif !important;
    background: #F8F8F8 !important;
    color: var(--text) !important;
    line-height: 1.6;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* =============================================
   TOP BAR
============================================= */
.timerowup, .timerow {
    background: var(--dark2) !important;
    font-size: 12px !important;
    color: #ccc !important;
    padding: 6px 20px !important;
}

/* =============================================
   NAVBAR
============================================= */
.navbar, .bgtp {
    background: var(--primary) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.10) !important;
}
nav a, .nav-link, .navli a {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
}
nav a:hover, .navli a:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

/* =============================================
   SECTION HEADERS — fixed display issue
============================================= */
h2, h3, .section-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    /* REMOVED display:inline-block — was breaking contact page */
}

/* =============================================
   SEARCH BAR
============================================= */
input[type="text"]:not([style]),
input[name="search"] {
    width: 100% !important;
    padding: 12px 18px !important;
    border: 2px solid var(--grey2) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    outline: none !important;
    background: white !important;
    color: var(--text) !important;
}
input[type="text"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(254,82,20,0.10) !important;
}

/* =============================================
   CAR CARDS
============================================= */
.car-card {
    background: var(--white) !important;
    border-radius: var(--radius) !important;
    border: none !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
    transition: var(--transition) !important;
    margin-bottom: 20px !important;
}
.car-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-hover) !important;
}
.home-car-card {
    background: var(--white) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
    transition: var(--transition) !important;
    margin-bottom: 20px !important;
}
.home-car-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-hover) !important;
}

/* =============================================
   SPEC PILLS
============================================= */
.spec-pill, .spec-tag, .home-spec, .mob-spec-pill {
    background: var(--grey) !important;
    color: var(--text) !important;
    border: 1px solid var(--grey2) !important;
    border-radius: 6px !important;
    padding: 3px 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 2px !important;
}

/* =============================================
   BUTTONS — VIEW DETAILS
============================================= */
a.btn-view-detail,
.btn-view-detail {
    display: block !important;
    width: 100% !important;
    background: #1a1a1a !important;
    color: #fff !important;
    text-align: center !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    height: auto !important;
    margin-bottom: 8px !important;
}
a.btn-view-detail:hover, .btn-view-detail:hover {
    background: #333 !important;
    color: #fff !important;
}
a.btn-home-view, .btn-home-view {
    display: block !important;
    background: #1a1a1a !important;
    color: #fff !important;
    text-align: center !important;
    padding: 9px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    height: auto !important;
}
a.btn-mob-detail, .btn-mob-detail {
    display: block !important;
    background: #1a1a1a !important;
    color: #fff !important;
    text-align: center !important;
    padding: 10px 4px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    height: auto !important;
    width: auto !important;
}

/* =============================================
   WHATSAPP BUTTONS — ALL FIXED AS RECTANGLES
   *** KEY FIX: no more circles ***
============================================= */

/* Remove the old universal a[href*="wa.me"] circle rule entirely */
/* Only the floating button gets circle treatment */

/* All WA buttons that are card/inline buttons */
a.btn-whatsapp-price,
.btn-whatsapp-price,
a.btn-home-wa,
.btn-home-wa,
a.btn-mob-whatsapp,
.btn-mob-whatsapp,
a.btn-wa-sidebar,
.btn-wa-sidebar,
.car-actions a[href*="wa.me"],
.mob-car-actions a[href*="wa.me"],
.home-car-body a[href*="wa.me"],
.mob-car-body a[href*="wa.me"],
.whatsapp-sidebar-box a[href*="wa.me"] {
    background: #25D366 !important;
    color: #fff !important;
    border-radius: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    min-width: unset !important;
    display: block !important;
    text-align: center !important;
    padding: 10px 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    position: static !important;
    bottom: unset !important;
    right: unset !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}
a.btn-whatsapp-price:hover,
a.btn-home-wa:hover,
a.btn-mob-whatsapp:hover {
    background: #128C7E !important;
    color: #fff !important;
}

/* Inline WA buttons (inside d-md-none divs — mobile card buttons) */
.d-md-none a[href*="wa.me"],
.d-block.d-md-none a[href*="wa.me"] {
    background: #25D366 !important;
    color: #fff !important;
    border-radius: 8px !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    min-height: unset !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    position: static !important;
}

/* =============================================
   WHATSAPP FLOATING BUTTON — ONLY THIS IS ROUND
============================================= */
a.wa-float,
.wa-float,
a.mob-wa-float,
.mob-wa-float {
    position: fixed !important;
    bottom: 24px !important;
    right: 20px !important;
    background: #25D366 !important;
    color: #fff !important;
    border-radius: 50px !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    min-height: unset !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: var(--transition) !important;
}
a.wa-float:hover, .wa-float:hover {
    background: #128C7E !important;
    transform: scale(1.05) !important;
}

/* =============================================
   SIDEBAR — RIGHT (Search Stock)
============================================= */
.search-sidebar-box {
    background: #1a1a1a !important;
    border-radius: var(--radius) !important;
    padding: 18px 16px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.sb-select, .sb-input {
    width: 100% !important;
    background: #2a2a2a !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}
.btn-sidebar-search {
    display: block !important;
    width: 100% !important;
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 11px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    cursor: pointer !important;
}
.btn-sidebar-search:hover {
    background: var(--primary-dark) !important;
}

/* WhatsApp sidebar box */
.whatsapp-sidebar-box {
    background: #25D366 !important;
    border-radius: var(--radius) !important;
    padding: 16px !important;
    margin-top: 16px !important;
    text-align: center !important;
    color: #fff !important;
}
.btn-wa-sidebar {
    display: inline-block !important;
    background: #fff !important;
    color: #25D366 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 9px 20px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    box-shadow: none !important;
}

/* =============================================
   CONTACT PAGE — fixed sidebar overlap
============================================= */
/* The left sidebar make-filter was overlapping contact form */
.leftsidebar {
    background: #fff !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* =============================================
   FOOTER
============================================= */
.footer {
    background: var(--dark2) !important;
    color: #bbb !important;
    padding: 40px 20px 20px !important;
}
.footer a { color: var(--primary) !important; text-decoration: none !important; }
.footer h4, .footer .span-with-bottom {
    color: white !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
    border-bottom: 2px solid var(--primary) !important;
    padding-bottom: 6px !important;
    display: block !important;
}
.copyright {
    background: var(--primary) !important;
    color: #fff !important;
    text-align: center !important;
    padding: 8px !important;
    font-size: 12px !important;
}

/* =============================================
   CONTACT FORM
============================================= */
input[name="name"], input[name="email"],
input[name="whatsapp"], input[name="country"],
textarea[name="message"] {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 2px solid var(--grey2) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--text) !important;
    background: var(--grey) !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
}
input[name="name"]:focus, textarea:focus {
    border-color: var(--primary) !important;
    background: white !important;
    outline: none !important;
}

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

    /* Body */
    body { font-size: 14px !important; }

    /* Hero */
    .hero-title { font-size: 24px !important; }
    .hero-subtitle { font-size: 14px !important; }
    .hero-btns { flex-direction: column !important; align-items: center !important; }
    .btn-hero-primary, .btn-hero-secondary {
        width: 90% !important;
        text-align: center !important;
        padding: 12px 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;
    }

    /* Trust bar */
    .trust-item .trust-num { font-size: 20px !important; }

    /* Stock page cards stack vertically */
    .car-card { flex-direction: column !important; }
    .car-img-wrap {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 200px !important;
        min-height: 200px !important;
    }
    .car-info { padding: 12px !important; }

    /* Hide desktop action column on mobile */
    .car-actions { display: none !important; }

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

    /* Sidebar below listing on mobile */
    .col-lg-3.col-md-4 { margin-top: 20px !important; }

    /* Prevent horizontal overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

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

    /* Footer */
    .footer .row > div { margin-bottom: 16px !important; }

    /* Floating WA smaller on mobile */
    a.wa-float, .wa-float {
        padding: 10px 14px !important;
        font-size: 12px !important;
        bottom: 16px !important;
        right: 12px !important;
    }

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

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

    /* Results header stack */
    .results-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

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

    /* View car page */
    .car-top { margin-left: 0 !important; }
    .cardet-table { font-size: 12px !important; }
    .gallery { max-width: 100% !important; }

    /* Contact form sidebar */
    .leftsidebar { display: none !important; }
}

/* =============================================
   UTILITY
============================================= */
html { scroll-behavior: smooth; }
img { max-width: 100%; }

/* ── Search Bar ── */
.nafay-search-col {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-left: auto;
}
#nafay-search-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 25px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
#nafay-search-input {
    border: none;
    outline: none;
    padding: 7px 14px;
    font-size: 14px;
    width: 220px;
    background: transparent;
    color: #222;
}
#nafay-search-input::placeholder { color: #999; }
#nafay-search-btn {
    background: #c73e00;
    border: none;
    padding: 7px 14px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
#nafay-search-btn:hover { background: #a33200; }
@media (max-width: 767px) {
    .nafay-search-col { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    #nafay-search-input { width: 150px; }
}