/* ════════════════════════════════════════════════════════════════
   DriveX — UI/UX Improvements (2026-06-13)
   Loaded LAST (after dx-audit-fixes) so it overrides earlier sheets.
   Scope: presentation only. No business logic / markup behaviour changed.

     1. "Submit Listing" button — modern, prominent, touch states
     2. (Promo banner close fix is JS — see front-page.php)
     3. Sticky mobile header (logo + Sign In + Post Your Ad)
     4. Centre major headings on mobile
     5. Footer DriveX description — mobile spacing / wrapping
     6. Vehicle for Sale — single-row quick search bar + modern filters
   ════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   1. SUBMIT LISTING BUTTON  (post-vehicle form footer)
   Uses the site's gold gradient so branding stays consistent with the
   other primary buttons, but adds depth, a hover sheen, real active
   feedback and a full-width comfortable tap target on mobile.
   ───────────────────────────────────────────────────────────────── */
.al-form-footer .al-btn-primary.al-btn-lg {
  background: var(--grad-gold);
  color: #0a0c0f;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 15px;
  border: none;
  box-shadow: 0 6px 22px rgba(249,115,22,.42);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.al-form-footer .al-btn-primary.al-btn-lg i { font-size: 17px; }
/* moving sheen */
.al-form-footer .al-btn-primary.al-btn-lg::after {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.al-form-footer .al-btn-primary.al-btn-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(249,115,22,.58);
  filter: brightness(1.04);
}
.al-form-footer .al-btn-primary.al-btn-lg:hover::after { left: 135%; }
.al-form-footer .al-btn-primary.al-btn-lg:active {
  transform: translateY(0) scale(.985);
  box-shadow: 0 4px 14px rgba(249,115,22,.45);
}
.al-form-footer .al-btn-primary.al-btn-lg:disabled {
  opacity: .6; cursor: not-allowed; transform: none; filter: none;
}
@media (max-width: 768px) {
  .al-form-footer { flex-direction: column; align-items: stretch; gap: 14px; }
  .al-form-footer .al-btn-primary.al-btn-lg {
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
  }
  /* touch devices: drop the hover lift, keep a clear pressed state */
  .al-form-footer .al-btn-primary.al-btn-lg:hover { transform: none; }
  .al-form-footer .al-btn-primary.al-btn-lg:active { filter: brightness(.96); transform: scale(.99); }
}


/* ─────────────────────────────────────────────────────────────────
   3. STICKY MOBILE HEADER
   The nav is position:sticky already, but `html, body { overflow-x:hidden }`
   (the mobile horizontal-overflow safety net in dx-audit-fixes.css) turns
   the body into a scroll container, which breaks sticky on mobile browsers.
   Switching to position:fixed on phones sidesteps that entirely; a matching
   body padding-top reserves the space so content never hides underneath.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .al-nav {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 1000;
  }
  /* !important: LiteSpeed CSS-combine was dropping the plain rule, leaving the
     fixed nav with no reserved space so the hero/search hid underneath it. */
  body { padding-top: 60px !important; }            /* nav is 60px tall < 768px */
  /* keep the fixed nav below the WP admin bar for logged-in users */
  body.admin-bar { padding-top: 60px !important; }
}
@media (max-width: 768px) and (max-width: 600px) {
  body.admin-bar .al-nav { top: 0; }     /* mobile admin bar is absolute, not fixed */
}


/* ─────────────────────────────────────────────────────────────────
   4. CENTRE MAJOR HEADINGS ON MOBILE
   Desktop layout is untouched. On phones the section titles (e.g.
   "Vehicle Rentals") and their sub-text centre, and the flex header row
   that holds them stacks + centres so the "View all" link sits neatly
   beneath the centred title.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .al-section-title,
  .al-section-sub { text-align: center !important; }

  /* homepage section header rows: <container> > <flex header> > <title block> */
  .al-section .al-container > div:has(.al-section-title) {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .al-section .al-container > div:has(.al-section-title) > div { width: 100%; }

  /* archive results header ("Vehicles for Sale", count) */
  .al-browse-layout h1 { text-align: center; }
  .al-browse-layout > div > div:has(> div > h1) {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }
  .al-browse-layout > div > div:has(> div > h1) > div { width: 100%; }
}


/* ─────────────────────────────────────────────────────────────────
   5. FOOTER — DRIVEX DESCRIPTION ON MOBILE
   The description had a fixed 280px max-width that left it cramped and
   unbalanced once the brand block went full-width on phones. Let it use
   the available width with comfortable line-height; on small phones the
   footer collapses to a single, centred, balanced column.
   ───────────────────────────────────────────────────────────────── */
/* ── Mobile footer redesign — see the dedicated block near the end of
   this file (compact, accordion). Desktop footer is untouched. ── */


/* ─────────────────────────────────────────────────────────────────
   6. VEHICLE FOR SALE — CATEGORY SEARCH BAR
   The Vehicles archive now uses the SAME shared .dx-search-form system
   as Rentals / Taxi / Wedding (see section 9–12 below) so every
   category search bar is visually identical. The old bespoke
   .dx-quicksearch styles were removed to avoid divergence.
   ───────────────────────────────────────────────────────────────── */

/* Modernise the existing sidebar filter inputs (focus accent ring) */
.al-browse-sidebar input:focus,
.al-browse-sidebar select:focus {
  border-color: var(--accent, #f97316) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 249,115,22), .14);
}
.al-browse-sidebar input[type="radio"] { accent-color: var(--accent, #f97316); }


/* ════════════════════════════════════════════════════════════════
   ADDITIONAL FIXES (2026-06-13 · batch 2)
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   7. HOME PAGE AD TITLE OVERFLOW
   Long titles previously wrapped unbounded (uneven card heights on
   desktop) or were clipped by the card's overflow:hidden on mobile.
   Clamp every listing-card title to 2 lines with a tidy ellipsis, and
   on desktop reserve those 2 lines so 1-line and 2-line cards stay
   perfectly aligned in the grid.
   ───────────────────────────────────────────────────────────────── */
.al-vcard-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
@media (min-width: 769px) {
  .al-vehicles-grid .al-vcard-name,
  .al-rental-card .al-vcard-name { min-height: 2.6em; }
}


/* ─────────────────────────────────────────────────────────────────
   8. PAGE HEADING ALIGNMENT ON MOBILE
   Centre the main page headings (Rental Car, Airport Taxi, etc.) on
   phones for consistency with the homepage section titles. Desktop
   alignment is untouched.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dx-page-head,
  .dx-page-head h1,
  .dx-page-head > div,
  .al-section-header > div,
  .al-section-header h1 { text-align: center !important; }
  /* .al-section-header becomes a column on mobile (align-items:flex-start in
     main.css), so the cross-axis is align-items — set that to center, not
     justify-content, otherwise the heading stays left. */
  .al-section-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .al-section-header > div { width: 100%; }
}


/* ─────────────────────────────────────────────────────────────────
   9–12. RENTAL & AIRPORT-TAXI SEARCH FORMS
   A shared, modern search-form system: gradient card, labelled fields
   with accent icons, accent focus rings, and a branded search button.
   Fully responsive (single row → 2-col → 1-col).
   ───────────────────────────────────────────────────────────────── */
.dx-search-form {
  /* Refined, integrated card: sits cleanly under the category heading and
     above the listings — same width (inside .al-container), tighter spacing,
     softer depth so it reads as part of the section, not a floating box. */
  background: linear-gradient(135deg, var(--card2, #0f1829) 0%, var(--card, #0a1120) 100%);
  border: 1px solid var(--border2, #1e2d40);
  border-radius: 14px;
  padding: 14px;
  margin: 0 0 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.dx-search-row { display: grid; gap: 12px; align-items: end; }
.dx-search-row.dx-sr-vehicle { grid-template-columns: 1.6fr 1fr 1fr 1fr auto; }
.dx-search-row.dx-sr-rental { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
.dx-search-row.dx-sr-taxi   { grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto; }

.dx-sf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dx-sf-field > label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text2, #94a3b8);
  display: flex; align-items: center; gap: 5px;
}
.dx-sf-field > label i { color: var(--accent, #f97316); font-size: 13px; }

.dx-sf-control {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg3, #0d1929);
  border: 1px solid var(--border, #1a2336);
  border-radius: 10px; padding: 0 12px; height: 46px; min-width: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dx-sf-control:focus-within {
  border-color: var(--accent, #f97316);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 249,115,22), .16);
}
.dx-sf-control > i { color: var(--accent, #f97316); font-size: 16px; flex-shrink: 0; }
.dx-sf-control select,
.dx-sf-control input {
  flex: 1; min-width: 0; width: 100%; height: 100%;
  background: transparent; border: none; outline: none;
  color: var(--text, #fff); font-size: 13.5px; font-family: inherit;
  appearance: none; -webkit-appearance: none;
}
.dx-sf-control select { cursor: pointer; }
.dx-sf-control select option { background: var(--card, #0a1120); color: var(--text, #fff); }
.dx-sf-control input[type="date"] { cursor: pointer; }
.dx-sf-control input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.7); cursor: pointer; margin-left: auto;
}
.dx-sf-control input::placeholder { color: var(--text3, #64748b); }

.dx-sf-btn {
  height: 46px; padding: 0 24px; border: none; cursor: pointer;
  background: var(--grad-gold); color: #0a0c0f; font-weight: 800; font-size: 14px;
  border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap; box-shadow: 0 4px 16px rgba(249,115,22,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dx-sf-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(249,115,22,.5); filter: brightness(1.03); }
.dx-sf-btn:active { transform: translateY(0) scale(.99); }

/* Search-form responsiveness */
@media (max-width: 1024px) {
  .dx-search-row.dx-sr-vehicle,
  .dx-search-row.dx-sr-rental,
  .dx-search-row.dx-sr-taxi { grid-template-columns: 1fr 1fr !important; }
  .dx-search-row .dx-sf-btn { grid-column: 1 / -1; width: 100%; }
  /* Keyword search spans the full width on tablet for a clean two-row layout. */
  .dx-search-row.dx-sr-vehicle .dx-sf-grow { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .dx-search-row.dx-sr-vehicle,
  .dx-search-row.dx-sr-rental,
  .dx-search-row.dx-sr-taxi { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════════════════════
   ADDITIONAL FIXES (2026-06-13 · batch 3)
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   15. AD TITLE CROPPING (mobile horizontal cards)
   The 2-line clamp is in place, but on phones the compact horizontal
   card had a hard max-height:110px + overflow:hidden that physically
   cut long titles (e.g. "BMW 7 Series – Luxury Wedding Car…"). Let the
   card grow to fit its (still clamped) 2-line title, price and footer.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .al-vcard { max-height: none !important; }
  .al-vcard-img { min-height: 110px; }
  body.home .al-section .al-vcard-body { overflow: visible !important; }
  /* keep the title to 2 tidy lines so card heights stay consistent */
  .al-vcard-name { -webkit-line-clamp: 2; }
}
/* Rental & wedding archive cards have longer, descriptive titles — give them
   up to 3 lines before truncating, and reserve that height so the grid stays
   aligned (vertical cards have the room for it). */
.al-rental-card .al-vcard-name { -webkit-line-clamp: 3; }
@media (min-width: 769px) {
  .al-rental-card .al-vcard-name { min-height: 3.75em; }
}


/* ─────────────────────────────────────────────────────────────────
   20 & 21. SEARCH FORM READABILITY
   Larger, more legible text across every search form. On mobile the
   16px floor also stops iOS Safari from auto-zooming on field focus.
   ───────────────────────────────────────────────────────────────── */
.dx-search-form .dx-sf-field > label { font-size: 12px; }
.dx-search-form .dx-sf-control select,
.dx-search-form .dx-sf-control input { font-size: 15px; }

.al-search-box .al-field label { font-size: 12px !important; letter-spacing: .3px; }
.al-search-box .al-field select,
.al-search-box .al-field input { font-size: 15px !important; }

.al-browse-sidebar select,
.al-browse-sidebar input[type="search"],
.al-browse-sidebar input[type="number"] { font-size: 14px !important; }

@media (max-width: 768px) {
  .dx-search-form .dx-sf-control select,
  .dx-search-form .dx-sf-control input,
  .al-search-box .al-field select,
  .al-search-box .al-field input,
  .al-browse-sidebar select,
  .al-browse-sidebar input[type="search"],
  .al-browse-sidebar input[type="number"] { font-size: 16px !important; }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE FOOTER REDESIGN (2026-06-13 · batch 4)  —  MOBILE ONLY
   Desktop footer is deliberately left 100% untouched (every rule below
   is inside a max-width:768px query, and footer.php markup is unchanged).
   Compact, accordion layout: brand + short blurb stay visible; the three
   link columns collapse to tappable rows, cutting footer height ~55%.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .al-footer { padding: 26px 0 16px !important; }

  /* Stack: brand on top, then the 3 link columns as accordion rows */
  .al-footer-grid {
    display: block !important;
    gap: 0 !important;
  }

  /* ── Brand: compact, centred, 2-line blurb ── */
  .al-footer-brand {
    max-width: 100% !important;
    text-align: center;
    margin: 0 0 6px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .al-footer-logo { margin-bottom: 8px !important; }
  .al-footer-desc {
    max-width: 320px !important;
    margin: 0 auto 14px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .al-footer-socials { justify-content: center !important; gap: 10px; }
  .al-social-btn { width: 36px !important; height: 36px !important; }

  /* ── Accordion rows: every grid child except the brand ── */
  .al-footer-grid > div:not(.al-footer-brand) {
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .al-footer-grid > div:not(.al-footer-brand) .al-footer-col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 15px 2px !important;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .al-footer-grid > div:not(.al-footer-brand) .al-footer-col-title::after {
    content: '\2304';                       /* ⌄ chevron */
    font-size: 20px;
    line-height: 1;
    color: var(--text3);
    transition: transform .25s ease;
    transform: translateY(-3px);
  }
  .al-footer-grid > div:not(.al-footer-brand).open .al-footer-col-title::after {
    transform: translateY(1px) rotate(180deg);
  }
  .al-footer-grid > div:not(.al-footer-brand) .al-footer-links {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }
  .al-footer-grid > div:not(.al-footer-brand).open .al-footer-links {
    max-height: 360px;
    padding-bottom: 10px;
  }
  .al-footer-link {
    padding: 8px 2px !important;
    font-size: 13.5px !important;
  }

  /* ── Bottom bar: tight ── */
  .al-footer-bottom {
    margin-top: 14px !important;
    padding-top: 14px !important;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .al-footer-copy { font-size: 11.5px; }
  .al-footer-bottom-links { gap: 16px; justify-content: center; }
}

/* ============================================================
   PHASE 2 — Batch 3: Homepage mobile compaction (item 10)
   Cuts vertical space on mobile for "How DriveX Works" and
   "Why DriveX" without touching the desktop layout.
   ============================================================ */
@media (max-width: 768px) {
  /* "How DriveX Works" — compact 2x2 grid (was 1-per-row = too tall).
     A normal grid is used (not a scroll container) so the step-number
     badges that sit above each card are never clipped. */
  .dx-step-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 10px !important;
  }
  .dx-step-card { padding: 16px 11px !important; border-radius: 14px !important; }
  .dx-step-card .dx-step-icon {
    width: 44px !important; height: 44px !important;
    font-size: 20px !important; margin: 6px auto 10px !important;
  }
  .dx-step-card .dx-step-num { top: -10px !important; left: 12px !important; width: 24px !important; height: 24px !important; }
  .dx-step-card .dx-step-title { font-size: 13.5px !important; }
  .dx-step-card .dx-step-desc { font-size: 11.5px !important; line-height: 1.45 !important; }
  /* "Why DriveX" — compact 2-up grid instead of one card per row */
  .dx-feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .dx-feature-card { padding: 14px 12px !important; }
  .dx-feature-card .dx-feature-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
  }
}

/* ============================================================
   FIX (2026-06-14): Desktop homepage hero search dropdowns
   were clipped / hidden behind following sections.
   Root cause: body.home .al-hero has overflow:hidden (to frame the
   blurred background orbs). That clipped the absolutely-positioned
   Brand/District filter dropdowns the moment they extended below
   the hero, and the search box's backdrop-filter stacking context
   let later sections paint over the panel.
   Fix: ONLY while a hero dropdown is actually open (.dxss-wrap.open),
   let the hero overflow show and lift its stacking above the
   following sections. When nothing is open the hero is completely
   unchanged — so it never covers/dims the Trust Bar below it. The
   orbs stay clipped by .al-hero-orbs{overflow:hidden}. Desktop only;
   mobile & tablet untouched. :has() is supported in all current
   Chrome, Safari, Edge & Firefox.
   ============================================================ */
@media (min-width: 1025px) {
  body.home .al-hero:has(.dxss-wrap.open) { overflow: visible !important; z-index: 30 !important; }
}

/* ===============================================================
   Searchable picker (dxss) — mobile bottom-sheet (Issues: city
   dropdown positioning/scroll + unified mobile picker for all
   long selects). On phones the panel docks to the bottom of the
   viewport like a native picker, so it can never be clipped or
   mis-positioned, and the list scrolls cleanly inside it.
   =============================================================== */
@media (max-width: 640px) {
  .dxss-wrap.open .dxss-panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.55), 0 -10px 34px rgba(0,0,0,.5) !important;
    z-index: 100000 !important;
    max-height: 74vh;
    animation: dxssSheetUp .22s ease;
  }
  .dxss-wrap.open .dxss-list { max-height: 58vh !important; }
  .dxss-wrap.open .dxss-search-row { padding: 14px 16px !important; }
  .dxss-wrap.open .dxss-search { font-size: 16px !important; }   /* no iOS zoom */
  .dxss-wrap.open .dxss-opt { padding: 14px 16px !important; font-size: 15px !important; }
  .dxss-wrap.open .dxss-panel::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 99px;
    background: #475569; margin: 9px auto 2px;   /* grab handle */
  }
}
@keyframes dxssSheetUp { from { transform: translateY(100%); } to { transform: none; } }

/* ===============================================================
   Footer compaction (desktop) — was padding:60px 0 28px, too tall.
   Scoped to >=769px so the mobile accordion footer is untouched.
   =============================================================== */
@media (min-width: 769px) {
  /* Tighter desktop footer — ~40% shorter than before, modern marketplace feel. */
  .al-footer { padding: 20px 0 12px !important; margin-top: 0 !important; }
  .al-footer-grid { gap: 10px 36px !important; margin-bottom: 8px !important; grid-template-columns: 2.4fr 1fr 1fr 1.1fr !important; }
  .al-footer-brand { max-width: 320px !important; }
  .al-footer-logo { margin-bottom: 6px !important; }
  .al-footer-desc { margin-bottom: 8px !important; font-size: 12px !important; line-height: 1.45 !important; }
  .al-footer-col-title { margin-bottom: 7px !important; font-size: 12px !important; }
  .al-footer-links { gap: 4px !important; }
  .al-footer-link { font-size: 12px !important; line-height: 1.3 !important; }
  .al-footer-socials { gap: 7px !important; margin-top: 8px !important; }
  .al-footer-socials .al-social-btn { width: 32px !important; height: 32px !important; }
  .al-footer-bottom { padding-top: 10px !important; margin-top: 4px !important; }
}

/* ===============================================================
   AUTONOMOUS QA — global mobile alignment & overflow safeguards
   (2026-06-24) Appended last so it wins where appropriate. Kept
   conservative: no layout rewrites, only guards against the most
   common mobile defects — horizontal overflow, oversized media,
   iOS input zoom, and unwrapped action rows.
   =============================================================== */
@media (max-width: 768px) {
  /* 1. Never allow a stray wide element to create a horizontal scrollbar. */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* 2. Media can never exceed its container. */
  img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }

  /* 3. Kill iOS auto-zoom: form controls must be >=16px on focus. */
  input[type="text"], input[type="tel"], input[type="number"],
  input[type="email"], input[type="password"], input[type="search"],
  input[type="url"], select, textarea, .al-modal-input {
    font-size: 16px !important;
  }

  /* 4. Footer social row + any flex action rows should wrap, not overflow. */
  .al-footer-socials { flex-wrap: wrap; }

  /* 5. Long words / URLs (emails, links) wrap instead of pushing width. */
  .al-container p, .al-footer-desc, .dx-taxi-route span { overflow-wrap: anywhere; }
}

/* 6. Wide data tables scroll within their own box on small screens
      rather than stretching the page. Scoped to admin/report tables. */
@media (max-width: 680px) {
  .al-admin-table, .wp-list-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Note: the custom searchable-select picker was removed in favour of the
   native OS picker site-wide (see functions.php). The remaining .dxss-* rules
   in dx-audit-fixes.css are inert (no .dxss markup is generated). */

/* ═══════════════════════════════════════════════════════════════════
   OPT-IN SEARCHABLE PICKER STYLING (2026-06-25)
   Applies ONLY where data-searchable is set: the Airport Taxi search
   form (desktop), the homepage Airport-Taxi From/To City pickers, and the
   taxi listing City fields. Everywhere else stays the native OS picker.
   ═══════════════════════════════════════════════════════════════════ */

/* A0) Homepage Airport-Taxi From/To — searchable City picker that matches the
       hero's other fields (translucent fill, rounded, same height). */
body.home .al-field .dxss-trigger {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
}
body.home .al-field .dxss-trigger:hover,
body.home .al-field .dxss-wrap.open .dxss-trigger {
  border-color: rgba(249,115,22,0.5);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.1);
}

/* A) Taxi listing City fields — match the surrounding post-form inputs. */
.al-form-field .dxss-trigger {
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  min-height: 44px;
  font-size: 13.5px;
}

/* B) Airport Taxi search — the trigger blends into the .dx-sf-control box
      (which supplies the border + leading accent icon), so the searchable
      field looks identical to the native one it replaced. */
.dx-sf-control .dxss-wrap { flex: 1; width: auto; min-width: 0; }
.dx-sf-control .dxss-trigger {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 0; min-height: 0; height: 100%; font-size: 15px; color: var(--text);
}
.dx-sf-control .dxss-trigger:hover { border: none; }
.dx-sf-control .dxss-panel { left: -12px; right: -12px; }

/* C) Improve the desktop Airport Taxi search layout: give the From/To
      location pickers a touch more room than the short Vehicle/Time selects. */
@media (min-width: 1025px) {
  .dx-search-row.dx-sr-taxi { grid-template-columns: 1.25fr 1.25fr 1fr 1fr 1fr auto; }
}

/* Homepage Airport-Taxi: the District selector is a MOBILE-ONLY helper that
   narrows the City list (desktop uses the searchable City picker instead). */
.dxh-mobile-dist { display: none; }
@media (max-width: 768px) {
  .dxh-mobile-dist { display: block; width: 100%; margin-bottom: 7px; }
}

/* ═══════════════════════════════════════════════════════════════════
   BROWSE BY CATEGORY — COMPACT DESKTOP (2026-06-25)
   Shorter cards + tighter grid so the section takes ~35-40% less height
   and more content sits above the fold. Mobile layout unchanged.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .hp-cat-section { padding-top: 26px !important; padding-bottom: 26px !important; }
  .hp-cat-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important; margin-top: 14px !important; }
  .hp-cat-card { aspect-ratio: 2 / 1 !important; border-radius: 13px !important; }
  .hp-cat-card:hover { transform: translateY(-3px) scale(1.015) !important; }
  .hp-cat-content { padding: 11px 12px !important; }
  .hp-cat-icon { width: 30px !important; height: 30px !important; font-size: 15px !important; margin-bottom: 5px !important; border-radius: 8px !important; }
  .hp-cat-name { font-size: 13px !important; }
  .hp-cat-count { font-size: 10.5px !important; }
  /* keep the section header tight too */
  .hp-cat-section .al-container > div:first-child { margin-bottom: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE TAXI LISTINGS (2026-06-25)
   Desktop: 4-up cards. MOBILE: a distinct, app-like horizontal "booking"
   card (thumbnail + route + fare + Book CTA) so taxis read differently
   from vehicle-sale listings.
   ═══════════════════════════════════════════════════════════════════ */
.dx-hp-taxi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dx-hp-taxi-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.dx-hp-taxi-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.dx-hp-taxi-media {
  height: 132px; position: relative; background: var(--bg3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.dx-hp-taxi-media > i { font-size: 36px; color: var(--text3); }
.dx-hp-taxi-type {
  position: absolute; top: 8px; left: 8px;
  background: rgba(249,115,22,.92); color: #0a0c0f; font-weight: 700;
  border-radius: 99px; padding: 3px 10px; font-size: 10px;
  display: inline-flex; align-items: center; gap: 4px;
}
.dx-hp-taxi-body { padding: 12px; display: flex; flex-direction: column; flex: 1; }
.dx-hp-taxi-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
.dx-hp-taxi-route {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(249,115,22,.07); border: 1px solid rgba(249,115,22,.18);
  border-radius: 8px; padding: 6px 9px; margin-bottom: 10px;
  font-size: 11px; color: var(--text2); font-weight: 600;
}
.dx-hp-taxi-route .ti-map-pin, .dx-hp-taxi-route .ti-plane-arrival { color: var(--accent); font-size: 12px; }
.dx-hp-taxi-arrow { color: var(--text3); font-size: 13px; }
.dx-hp-taxi-loc { display: inline-flex; align-items: center; gap: 3px; }
.dx-hp-taxi-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.dx-hp-taxi-price { font-size: 15px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.dx-hp-taxi-price span { font-size: 10px; color: var(--text3); font-weight: 500; }
.dx-hp-taxi-pax { font-style: normal; font-size: 11px; color: var(--text3); font-weight: 500; margin-left: 4px; }
.dx-hp-taxi-cta {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.3);
  color: var(--accent); border-radius: 8px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; flex-shrink: 0; transition: background .15s, color .15s;
}
.dx-hp-taxi-card:hover .dx-hp-taxi-cta { background: var(--accent); color: #0a0c0f; }

@media (max-width: 900px) { .dx-hp-taxi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  /* MOBILE app-like horizontal booking cards */
  .dx-hp-taxi-grid { grid-template-columns: 1fr; gap: 10px; }
  .dx-hp-taxi-card { flex-direction: row; align-items: stretch; border-radius: 14px; }
  .dx-hp-taxi-media { height: auto; width: 104px; min-height: 112px; flex-shrink: 0; }
  .dx-hp-taxi-type { top: 6px; left: 6px; padding: 2px 7px; font-size: 9px; }
  .dx-hp-taxi-body { width: auto; flex: 1; padding: 10px 12px; min-width: 0; }
  .dx-hp-taxi-title { font-size: 13.5px; -webkit-line-clamp: 2; margin-bottom: 6px; }
  .dx-hp-taxi-route { margin-bottom: 8px; padding: 5px 8px; }
  .dx-hp-taxi-route span.dx-hp-taxi-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42%; }
  .dx-hp-taxi-cta { padding: 7px 14px; }
}

/* Homepage RENTAL cards reuse the .dx-hp-taxi-* card (same app-like mobile
   design); this is the rental-specific info row (location + driver status). */
.dx-hp-rent-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 11.5px; color: var(--text2); font-weight: 600;
}
.dx-hp-rent-meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.dx-hp-rent-meta .ti { color: var(--accent); font-size: 12px; flex-shrink: 0; }
@media (max-width: 768px) {
  .dx-hp-rent-meta { margin-bottom: 8px; gap: 8px; }
  .dx-hp-rent-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   DriveX Upgrade-17 — card image display + collapsible benchmark
   ============================================================ */

/* 1) Listing card images — show the whole vehicle (avoid hard cropping) */
.al-vcard-img { background: var(--bg3); }
.al-vcard-img img { object-fit: contain !important; }
.al-vcard:hover .al-vcard-img img { transform: scale(1.03); }
.al-rental-img { background: var(--bg3); }
.al-rental-img img { object-fit: contain !important; }
.dx-taxi-card-media { background: var(--bg3); }
.dx-taxi-card-media img { object-fit: contain !important; }

/* 2) Collapsible Price Benchmark box */
.dx-bm-wrap { margin-bottom: 16px; }
.dx-bm-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, rgba(155,109,255,.10), rgba(249,115,22,.06));
  border: 1px solid rgba(155,109,255,.28);
  color: var(--text);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.dx-bm-toggle:hover { border-color: rgba(155,109,255,.5); box-shadow: 0 0 0 1px rgba(155,109,255,.15); }
.dx-bm-toggle-label { display: inline-flex; align-items: center; gap: 8px; color: rgba(155,109,255,.95); }
.dx-bm-toggle .dx-bm-caret { font-size: 18px; color: rgba(155,109,255,.8); transition: transform .3s ease; }
.dx-bm-toggle.open .dx-bm-caret { transform: rotate(180deg); }

.dx-bm-collapse {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .38s ease, opacity .3s ease;
}
.dx-bm-collapse.open { opacity: 1; }
.dx-bm-inner { padding-top: 10px; }

.dx-bm-loading {
  display: flex; align-items: center; gap: 8px;
  color: var(--text3); font-size: 13px; font-weight: 600;
  padding: 18px; justify-content: center;
}
.dx-bm-spin { animation: dxBmSpin 1s linear infinite; display: inline-block; }
@keyframes dxBmSpin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
  .dx-bm-toggle { font-size: 13.5px; padding: 13px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — compact favourite button (2026-08-01)
   dx-premium.css sets .al-fav-btn to 38x38 with a 12px inset and no media
   query, so it also won on phones (overriding dx-redesign's mobile rule,
   since dx-premium loads later). On a 2-up mobile grid the card image is
   only ~150-170px wide, so a 38px disc 12px in from the corner sat well
   inside the photo and covered the vehicle.

   Smaller, tucked into the corner, still a comfortable tap target.
   The homepage keeps its own treatment — body.home .al-section .al-fav-btn
   is more specific and continues to win there.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .al-fav-btn {
    top: 6px !important;
    right: 6px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 15px !important;
    background: rgba(0,0,0,.42) !important;
    border-color: rgba(255,255,255,.14) !important;
    backdrop-filter: blur(6px);
  }
  /* No hover on touch — the scale transform just leaves it stuck enlarged. */
  .al-fav-btn:hover { transform: none !important; }
}

@media (max-width: 420px) {
  .al-fav-btn {
    top: 5px !important;
    right: 5px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 14px !important;
  }
}