/* =====================================================================
   PINDI BOYS CAR RENTAL — MOBILE APP SHELL
   Mobile-only premium "luxury car-rental app" overlay on top of style.css.
   All rules below are scoped to ≤ 900px — desktop is untouched.
   ===================================================================== */

:root {
  --pb-green:       #1dad53;
  --pb-green-2:     #25d366;
  --pb-green-glow:  rgba(29,173,83,.45);
  --pb-card-bg:     #0a0f1c;
  --pb-card-bg-2:   #0d1424;
  --pb-card-brd:    rgba(255,255,255,.07);
  --pb-card-brd-2:  rgba(212,175,55,.22);
}

/* Helpers */
.app-only { display: none; }

/* =====================================================================
   MOBILE APP SHELL — applies to ≤ 900px (covers all phones + small tablets)
   ===================================================================== */
@media (max-width: 900px) {
  .app-only { display: block; }

  /* ---------- Body — soft luxury background ----------- */
  body {
    background:
      radial-gradient(1100px 800px at 80% -10%, rgba(29,173,83,.10), transparent 55%),
      radial-gradient(900px 700px at 0% 10%, rgba(212,175,55,.10), transparent 55%),
      radial-gradient(900px 800px at 50% 110%, rgba(11,26,58,.85), transparent 60%),
      linear-gradient(180deg, #04070d 0%, #05080f 60%, #04070d 100%);
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Hide the legacy floating WhatsApp orb on phones — replaced by sticky nav */
  .wa-fab, .wa-panel { display: none !important; }

  /* Hide the legacy m-bottombar from the homepage; the new app-bottom-nav replaces it */
  .m-bottombar { display: none !important; }

  /* ---------- App-style header ---------- */
  .header.scrolled {
    background: linear-gradient(180deg, rgba(4,7,12,.92), rgba(4,7,12,.86));
    border-bottom: 1px solid rgba(212,175,55,.18);
  }
  .header .brand-logo img { height: 40px; }

  /* =====================================================================
     SEARCH + CATEGORY PILLS  — sits below the header, slides under on scroll
     ===================================================================== */
  .app-searchbar {
    position: sticky; top: var(--header-h); z-index: 50;
    padding: 12px 14px 10px;
    background: linear-gradient(180deg, rgba(4,7,12,.96), rgba(4,7,12,.86));
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .app-search {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
    border: 1px solid var(--pb-card-brd-2);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 8px 28px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .app-search svg { width: 18px; height: 18px; color: var(--gold-2); flex: none; }
  .app-search input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: none;
    color: var(--ink); font-size: .95rem; font-family: var(--font-body);
  }
  .app-search input::placeholder { color: var(--ink-mute); }
  .app-search .app-search-mic {
    width: 32px; height: 32px; border-radius: 10px;
    display: grid; place-content: center;
    background: linear-gradient(135deg, var(--pb-green), var(--pb-green-2));
    color: #04250f; box-shadow: 0 0 18px -3px var(--pb-green-glow);
  }
  .app-search .app-search-mic svg { color: #04250f; }

  /* Category pills — horizontal scroll */
  .app-cats {
    display: flex; gap: 10px; margin-top: 12px;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .app-cats::-webkit-scrollbar { display: none; }
  .app-cat {
    flex: none; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 100px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--glass-brd);
    color: var(--ink-soft);
    font-family: var(--font-head); font-weight: 600; font-size: .82rem;
    letter-spacing: .01em; white-space: nowrap;
    transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
  }
  .app-cat svg { width: 15px; height: 15px; color: var(--gold-2); }
  .app-cat:hover { transform: translateY(-2px); }
  .app-cat.is-active {
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: #1c1500; border-color: transparent;
    box-shadow: 0 0 22px -6px rgba(212,175,55,.55);
  }
  .app-cat.is-active svg { color: #1c1500; }

  /* =====================================================================
     APP HERO CARD — green/gold premium banner on the homepage
     ===================================================================== */
  .app-hero {
    margin: 14px 14px 6px;
    border-radius: 22px;
    padding: 18px 18px 16px;
    position: relative; overflow: hidden;
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(29,173,83,.32), transparent 55%),
      radial-gradient(120% 100% at 0% 100%, rgba(212,175,55,.22), transparent 55%),
      linear-gradient(160deg, #082018 0%, #06121e 100%);
    border: 1px solid rgba(212,175,55,.28);
    box-shadow: 0 24px 48px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .app-hero::after {
    content: ""; position: absolute; right: -40px; top: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,215,120,.35), transparent 70%);
    filter: blur(2px); pointer-events: none;
  }
  .app-hero .ah-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-head); font-weight: 700;
    font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--pb-green-2);
  }
  .app-hero .ah-eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--pb-green-2); box-shadow: 0 0 10px var(--pb-green-2);
  }
  .app-hero h2 {
    font-family: var(--font-head); font-weight: 800;
    font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em;
    margin: 8px 0 4px;
  }
  .app-hero h2 .gold-text { background: linear-gradient(95deg, var(--gold) 0%, var(--gold-2) 60%, #fff6da 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .app-hero p { color: var(--ink-soft); font-size: .88rem; line-height: 1.45; margin-bottom: 14px; max-width: 280px; }
  .app-hero .ah-cta { display: flex; gap: 8px; }
  .app-hero .ah-cta .btn { padding: 11px 14px; font-size: .85rem; flex: 1; }
  .app-hero .ah-cta .btn-wa {
    background: linear-gradient(120deg, var(--pb-green), var(--pb-green-2));
    color: #04250f; box-shadow: 0 0 28px -8px var(--pb-green-glow);
  }
  .app-hero .ah-cta .btn-gold {
    background: linear-gradient(120deg, var(--gold), var(--gold-2));
    color: #1c1500;
  }
  .app-hero .ah-meta {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
    font-size: .72rem; color: var(--ink-mute);
  }
  .app-hero .ah-meta b { color: var(--gold-2); font-weight: 700; }
  .app-hero .ah-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-mute); }

  /* =====================================================================
     APP SECTION HEAD (small "title + see all" row above each grid)
     ===================================================================== */
  .app-section { padding: 18px 14px 8px; }
  .app-section + .app-section { padding-top: 6px; }
  .app-sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 10px;
  }
  .app-sec-title {
    font-family: var(--font-head); font-weight: 800;
    font-size: 1.05rem; letter-spacing: -.01em;
  }
  .app-sec-title small {
    display: block; font-family: var(--font-body); font-weight: 500;
    font-size: .7rem; color: var(--ink-mute);
    text-transform: none; letter-spacing: 0;
  }
  .app-sec-all {
    font-family: var(--font-head); font-weight: 600;
    font-size: .78rem; color: var(--gold-2);
    display: inline-flex; align-items: center; gap: 4px;
  }
  .app-sec-all svg { width: 14px; height: 14px; }

  /* =====================================================================
     CAR CARDS (premium, 2-up) — applies to .car-card and .m-feat-card
     Replaces the legacy compact mobile rules with a richer, app-style card.
     ===================================================================== */
  .fleet-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .m-feat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .car-card,
  .m-feat-card {
    display: flex !important; flex-direction: column !important;
    background: linear-gradient(170deg, var(--pb-card-bg-2), var(--pb-card-bg)) !important;
    border: 1px solid var(--pb-card-brd) !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 16px 32px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04) !important;
    position: relative;
    transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
    contain-intrinsic-size: auto 340px;
  }
  .car-card:active,
  .m-feat-card:active { transform: scale(.985); }
  .car-card .media,
  .m-feat-card > a,
  .m-feat-card img {
    aspect-ratio: 4/3 !important;
    border-radius: 0 !important;
    width: 100%; display: block;
  }
  .car-card .media { padding: 0 !important; border: 0 !important; background: linear-gradient(160deg, #0a1730 0%, #04070d 100%); }
  .car-card .media img,
  .m-feat-card img { width: 100%; height: 100%; object-fit: cover; }

  /* Top-left price ribbon over the image */
  .car-card .car-body::before,
  .m-feat-card .m-feat-body::before { content: none; }

  .car-card .car-body,
  .m-feat-card .m-feat-body {
    padding: 11px 12px 12px !important;
    gap: 6px !important;
    display: flex !important; flex-direction: column !important; flex: 1 !important;
  }

  /* Name + price row */
  .car-card .car-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
  .car-card .car-name,
  .m-feat-name {
    font-family: var(--font-head); font-weight: 700 !important;
    font-size: .9rem !important; line-height: 1.18 !important; color: var(--ink);
  }
  .car-card .car-name small,
  .m-feat-name small {
    display: block !important;
    font-family: var(--font-body); font-weight: 500;
    font-size: .68rem; color: var(--ink-mute);
    margin-top: 2px;
  }

  /* Price block: daily prominent + monthly small */
  .car-card .car-price { text-align: right; }
  .car-card .car-price .now {
    font-family: var(--font-head); font-weight: 800 !important;
    font-size: 1rem !important; color: var(--gold-2);
    line-height: 1;
  }
  .car-card .car-price .per {
    display: block !important;
    font-size: .58rem !important; color: var(--ink-mute);
    margin-top: 2px; letter-spacing: .02em;
  }
  .car-card .car-price .month {
    display: block !important;
    font-size: .62rem !important; color: var(--pb-green-2) !important;
    margin-top: 3px; font-weight: 600;
  }
  .m-feat-price {
    font-family: var(--font-head); font-weight: 800;
    font-size: 1rem; color: var(--gold-2);
  }
  .m-feat-price span { font-size: .62rem; color: var(--ink-mute); }

  /* Specs row: pill-style icons (seats, fuel, transmission) */
  .car-card .specs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important; padding: 7px 0 !important;
    margin-top: 2px;
    border-block: 1px solid rgba(255,255,255,.06) !important;
  }
  .car-card .spec {
    display: flex !important; flex-direction: column;
    align-items: center; gap: 2px;
    font-size: .62rem !important; color: var(--ink-soft);
    text-align: center; line-height: 1.1;
  }
  .car-card .spec svg {
    width: 14px !important; height: 14px !important;
    color: var(--gold-2);
  }
  .car-card .rental-note { display: none !important; }

  /* Action row: Book on WhatsApp + WhatsApp icon (twin buttons) */
  .car-card .car-actions {
    display: grid !important;
    grid-template-columns: 1fr 36px !important;
    gap: 6px !important;
    margin-top: auto !important;
  }
  .car-card .car-actions .btn {
    padding: 9px 8px !important;
    font-size: .75rem !important;
    border-radius: 11px !important;
    gap: 5px !important;
    min-height: 36px;
  }
  .car-card .car-actions .btn svg {
    width: 13px !important; height: 13px !important;
  }
  .car-card .car-actions .btn-gold {
    background: linear-gradient(120deg, var(--gold), var(--gold-2)) !important;
    color: #1c1500 !important;
    box-shadow: 0 8px 18px -10px rgba(212,175,55,.7) !important;
  }
  .car-card .car-actions .btn-ghost,
  .car-card .car-actions .btn-wa {
    display: grid !important; place-content: center;
    padding: 0 !important; min-width: 36px; min-height: 36px;
    background: linear-gradient(135deg, var(--pb-green), var(--pb-green-2)) !important;
    color: #04250f !important;
    border: 0 !important;
    box-shadow: 0 8px 18px -10px var(--pb-green-glow) !important;
  }
  .car-card .car-actions .btn-ghost::after,
  .car-card .car-actions .btn-wa::after { content: ""; }
  .car-card .car-actions .btn-ghost svg,
  .car-card .car-actions .btn-wa svg {
    width: 16px !important; height: 16px !important; color: #04250f !important;
  }
  /* Make the right-side action button always show a WhatsApp icon */
  .car-card .car-actions > *:last-child {
    background: linear-gradient(135deg, var(--pb-green), var(--pb-green-2)) !important;
    color: #04250f !important;
    border: 0 !important;
    border-radius: 11px !important;
  }
  /* Reveal the .car-actions .btn label visually-hidden trick:
     if the right button is "Ask", we keep its text accessibility but display an icon */

  /* m-feat-card buttons (homepage featured) */
  .m-feat-card .btn { font-size: .72rem; padding: 8px 10px; }

  /* =====================================================================
     APP BOTTOM NAV — fixed across all pages
     ===================================================================== */
  .app-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
    display: flex; align-items: center; justify-content: space-around;
    gap: 4px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(7,10,18,.92), rgba(4,6,12,.97));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid rgba(212,175,55,.18);
    box-shadow: 0 -8px 28px -12px rgba(0,0,0,.7);
  }
  .app-bn {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 4px;
    color: var(--ink-mute);
    font-family: var(--font-body); font-weight: 600; font-size: .65rem;
    border-radius: 12px;
    transition: color .25s, background .25s, transform .25s;
    -webkit-tap-highlight-color: transparent;
  }
  .app-bn svg { width: 21px; height: 21px; }
  .app-bn:active { transform: scale(.94); }
  .app-bn.is-active { color: var(--gold-2); }
  .app-bn.is-active svg { color: var(--gold-2); }

  /* Center WhatsApp button — raised "FAB" style */
  .app-bn-wa {
    position: relative;
    flex: 0 0 56px;
    width: 56px; height: 56px;
    margin-top: -22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pb-green-2), var(--pb-green));
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(4,6,12,.95), 0 14px 30px -10px var(--pb-green-glow), 0 0 24px -6px var(--pb-green-glow);
    padding: 0;
    animation: pbpulse 2.6s var(--ease) infinite;
  }
  .app-bn-wa svg { width: 26px; height: 26px; }
  .app-bn-wa span { display: none; }
  @keyframes pbpulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(4,6,12,.95), 0 14px 30px -10px var(--pb-green-glow), 0 0 0 0 var(--pb-green-glow); }
    50%      { box-shadow: 0 0 0 4px rgba(4,6,12,.95), 0 14px 30px -10px var(--pb-green-glow), 0 0 0 14px rgba(29,173,83,0); }
  }

  /* =====================================================================
     CAR DETAIL PAGE — app-style upgrade for per-car SEO pages
     ===================================================================== */
  /* Soften the page-hero: no big image bg on mobile, just a clean intro */
  .page-hero {
    background: linear-gradient(180deg, rgba(6,8,14,.6) 0%, rgba(6,8,14,.95) 100%), linear-gradient(160deg, #0a1530, #04070d) !important;
    padding-top: calc(var(--header-h) + 14px) !important;
    padding-bottom: 18px !important;
    text-align: left !important;
  }
  .page-hero > .container { padding-inline: 16px !important; }
  .page-hero .breadcrumb { font-size: .72rem; margin-bottom: 10px; }
  .page-hero .eyebrow { font-size: .62rem; padding: 6px 12px; }
  .page-hero h1.display { font-size: 1.45rem !important; margin: 12px 0 8px !important; text-align: left; }
  .page-hero .lead { font-size: .9rem !important; margin: 0 !important; text-align: left; }
  .page-hero .hero-cta { display: none !important; }  /* Replaced by sticky CTA bar */

  /* Hero image: full-bleed, rounded — give it presence */
  .page-hero + .section .container > .media {
    margin-inline: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 48px -22px rgba(0,0,0,.85), 0 0 32px -10px rgba(212,175,55,.35) !important;
  }
  .page-hero + .section { padding-top: 12px !important; padding-bottom: 16px !important; }

  /* Detail page: rating + price strip card injected via JS */
  .car-detail-meta {
    margin: 14px 16px 4px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(170deg, var(--pb-card-bg-2), var(--pb-card-bg));
    border: 1px solid var(--pb-card-brd-2);
    box-shadow: 0 16px 32px -18px rgba(0,0,0,.7);
    display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center;
  }
  .car-detail-meta .cdm-rating {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-head); font-weight: 700; font-size: .85rem;
  }
  .car-detail-meta .cdm-rating svg { width: 16px; height: 16px; color: var(--gold-2); }
  .car-detail-meta .cdm-rating small { color: var(--ink-mute); font-weight: 500; font-size: .72rem; }
  .car-detail-meta .cdm-prices {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 8px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .car-detail-meta .cdm-price {
    padding: 10px 12px;
    background: rgba(255,255,255,.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
  }
  .car-detail-meta .cdm-price .lbl { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
  .car-detail-meta .cdm-price .val { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--gold-2); margin-top: 2px; }
  .car-detail-meta .cdm-price .val small { font-size: .62rem; color: var(--ink-mute); font-weight: 500; }

  /* The 4-feature spec strip (seats/auto/petrol/price) on detail page — compact pills */
  .page-hero + .section + .section .grid.cols-4 {
    grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important;
  }
  .page-hero + .section + .section .grid.cols-4 .card.feature {
    padding: 12px 12px !important; gap: 8px !important;
    border-radius: 14px !important;
    background: linear-gradient(170deg, var(--pb-card-bg-2), var(--pb-card-bg)) !important;
  }
  .page-hero + .section + .section .grid.cols-4 .card.feature .ic {
    width: 36px !important; height: 36px !important; border-radius: 10px !important;
  }
  .page-hero + .section + .section .grid.cols-4 .card.feature .ic svg { width: 18px !important; height: 18px !important; }
  .page-hero + .section + .section .grid.cols-4 .card.feature h3 { font-size: .92rem !important; }

  /* "Why this car" grid → 2-up */
  section.section.section--tight .grid.cols-4 {
    grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important;
  }

  /* CTA banner is fine — tighten on mobile */
  .cta-banner {
    padding: 26px 20px !important;
    border-radius: 18px !important;
    text-align: left !important;
  }
  .cta-banner h2 { text-align: left; margin: 14px 0 8px !important; font-size: 1.3rem !important; }
  .cta-banner .lead { text-align: left; margin: 0 !important; font-size: .88rem !important; }
  .cta-banner .btns { justify-content: flex-start !important; margin-top: 18px !important; }
  .cta-banner .btn { padding: 11px 16px !important; font-size: .85rem !important; }

  /* FAQ tweaks */
  .faq summary { padding: 16px 18px !important; font-size: .95rem !important; }
  .faq .a { padding: 0 18px 18px !important; font-size: .9rem !important; }

  /* =====================================================================
     STICKY BOOK-NOW BAR (per-car detail pages)
     Sits ABOVE the bottom nav. Hides itself when not on a detail page.
     ===================================================================== */
  .car-sticky-cta {
    position: fixed; left: 0; right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 125;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(8,12,20,.86), rgba(8,12,20,.98));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(212,175,55,.16);
    box-shadow: 0 -10px 26px -14px rgba(0,0,0,.7);
    transform: translateY(110%); transition: transform .35s var(--ease);
  }
  .car-sticky-cta.is-visible { transform: translateY(0); }
  .car-sticky-cta .cs-info {
    flex: 1; min-width: 0;
  }
  .car-sticky-cta .cs-name {
    font-family: var(--font-head); font-weight: 700;
    font-size: .82rem; line-height: 1.1;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .car-sticky-cta .cs-price {
    font-family: var(--font-head); font-weight: 800;
    font-size: .92rem; color: var(--gold-2);
    margin-top: 2px;
  }
  .car-sticky-cta .cs-price small {
    color: var(--ink-mute); font-weight: 500; font-size: .68rem;
  }
  .car-sticky-cta .cs-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 16px; border-radius: 12px;
    background: linear-gradient(135deg, var(--pb-green), var(--pb-green-2));
    color: #ffffff; font-family: var(--font-head); font-weight: 700; font-size: .84rem;
    box-shadow: 0 0 22px -4px var(--pb-green-glow);
    border: 0;
  }
  .car-sticky-cta .cs-btn svg { width: 16px; height: 16px; color: #ffffff; }
  .car-sticky-cta .cs-call {
    display: inline-grid; place-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, var(--pb-green), var(--pb-green-2));
    color: #fff;
    box-shadow: 0 0 16px -6px var(--pb-green-glow);
  }
  .car-sticky-cta .cs-call svg { width: 18px; height: 18px; }

  /* When sticky CTA visible, give bottom nav a translucent shoulder */
  body.has-sticky-cta { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }

  /* =====================================================================
     HOMEPAGE LEAN — hide heavy desktop blocks on mobile so the app shell
     is the first thing the user sees.
     ===================================================================== */
  /* Hide pre-existing "popular right now" featured strip — superseded by app-featured */
  .m-featured { display: none !important; }
  /* Already hidden by style.css: .hero copy + .hero-stats + .hero-visual on ≤767px;
     We keep that behaviour. */

  /* The marquee trust bar — tighter on mobile */
  .trust-bar .marquee { animation-duration: 22s; gap: 36px; padding: 14px 0; }
  .trust-bar .marquee span { font-size: .82rem; }

  /* Section paddings — slimmer */
  .section { padding-block: 28px !important; }
  .section--tight { padding-block: 22px !important; }
  #fleet.section { padding-top: 4px !important; }

  /* Fleet category headings — slim */
  .fleet-cat-head { margin-bottom: 10px !important; padding-bottom: 6px !important; }
  .fleet-cat-title { font-size: 1.1rem !important; }
  .fleet-cat-title::before { display: none !important; }
  .fleet-cat-sub { font-size: .76rem !important; }

  /* Hide login icon button in header to keep it minimal — auth modal still reachable from drawer */
  .header .nav-actions .icon-btn { display: none; }

  /* Container gutter inside fleet — line up with app-shell padding */
  #fleet > .container { padding-inline: 14px !important; }

  /* =====================================================================
     ANIMATIONS — staggered entry for cards
     ===================================================================== */
  .car-card { animation: pbCardIn .55s var(--ease) both; }
  .car-card:nth-child(2n) { animation-delay: .06s; }
  .car-card:nth-child(3n) { animation-delay: .12s; }
  @keyframes pbCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* =====================================================================
   EXTRA-SMALL PHONES (≤ 360px) — keep 2-up grid; downscale buttons
   ===================================================================== */
@media (max-width: 360px) {
  .car-card .car-actions { grid-template-columns: 1fr 32px !important; }
  .car-card .car-actions .btn { font-size: .7rem !important; padding: 8px 6px !important; }
  .car-card .car-name { font-size: .85rem !important; }
  .car-card .car-price .now { font-size: .92rem !important; }
}

/* =====================================================================
   TABLET (>= 720px && <= 900px) — 3-up cards, looser layout
   ===================================================================== */
@media (min-width: 720px) and (max-width: 900px) {
  .fleet-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .m-feat-grid { grid-template-columns: repeat(3, 1fr); }
  .app-hero { margin: 18px 24px; padding: 24px; }
  .app-section { padding: 22px 24px 12px; }
  .app-searchbar { padding: 14px 24px 12px; }
}

/* =====================================================================
   REDUCED-MOTION — respect user preference
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .car-card, .app-bn-wa { animation: none !important; }
}

/* =====================================================================
   UNIVERSAL: car-card "Ask" → small green WhatsApp icon button
   Applies at ALL viewports (desktop + mobile), beats older styles.
   ===================================================================== */
.car-card .car-actions {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
}
.car-card .car-actions .btn-block,
.car-card .car-actions .btn-gold:not(.btn-ghost) {
  flex: 1 1 auto !important;
}
.car-card .car-actions .btn-ghost,
.car-card .car-actions .btn-wa,
.car-card .car-actions .btn-ask {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #1dad53, #25d366) !important;
  color: #fff !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px -8px rgba(37,211,102,.55) !important;
  position: relative;
  overflow: hidden;
}
.car-card .car-actions .btn-ghost::before,
.car-card .car-actions .btn-wa::before,
.car-card .car-actions .btn-ask::before {
  content: "";
  width: 20px; height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2Zm0 18.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 4.54 0 8.23 3.69 8.23 8.23 0 4.54-3.69 8.24-8.23 8.24Z'/></svg>") center/contain no-repeat;
}
.car-card .car-actions .btn-ghost > *,
.car-card .car-actions .btn-wa > *,
.car-card .car-actions .btn-ask > * { display: none !important; }
.car-card .car-actions .btn-ghost:active,
.car-card .car-actions .btn-wa:active,
.car-card .car-actions .btn-ask:active { transform: scale(.94); }

/* Call button (injected by mobile-app.js) — square purple icon button */
.car-card .car-actions .btn-call {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #ffffff !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px -8px rgba(124,58,237,.55) !important;
  transition: transform .15s ease;
}
.car-card .car-actions .btn-call svg {
  width: 20px !important; height: 20px !important; color: #ffffff !important;
}
.car-card .car-actions .btn-call:active { transform: scale(.94); }