/*
  Mobile optimization pass — Capetano Car Rentals.
  Injected dynamically via layout.js on every page (both portals), so this
  single file fixes navigation, forms, tables, grids, and touch targets
  everywhere at once, without editing each HTML page individually.
*/

/* ---------- Nav: hamburger menu (was fully hidden below 720px, no
   replacement — customers on phones could not navigate the site at all) ----------
   Show/hide is driven entirely by layout.css's `.nav-links.open` rule
   (higher specificity, so it always wins regardless of load order); this
   block owns the panel's box model and per-row look only. Previously this
   used `top` + `bottom: 0` with no explicit height, which Chrome does not
   reliably resolve to "fill the gap" for a `position: fixed` flex
   container — it collapsed to a ~25px sliver instead. An explicit `height`
   is the robust fix. (This block used to also gate visibility on a
   `.mobile-open` class and style a `.mobile-menu-btn` element from an
   earlier hamburger implementation — neither is produced by the current
   markup in layout.js, which uses `.nav-toggle`/`.open`; both were dead
   and have been removed rather than left to bit-rot further.) */
@media (max-width: 720px) {
  .top-nav .nav-links {
    display: none;
    position: fixed; top: var(--topbar-height, 66px); left: 0; right: 0;
    height: calc(100vh - var(--topbar-height, 66px));
    background: var(--nav-bg);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px; overflow-y: auto; z-index: 40;
  }
  .top-nav .nav-links a, .top-nav .nav-links .nav-links-row {
    padding: 14px 16px; font-size: 16px; border-bottom: 1px solid var(--nav-border);
    border-radius: 0; color: var(--nav-text);
  }
  .top-nav .nav-links a.active::after { display: none; }
  .top-nav .nav-links a.active { background: var(--nav-hover-bg); }
  .top-nav .nav-links-row {
    display: flex; width: 100%; height: auto; justify-content: flex-start;
    background: none; color: var(--nav-text);
  }
  .top-nav .nav-links-row span:last-child { display: inline; }
}

/* ---------- Touch targets: 44px minimum tap area (Apple/Google guideline) ---------- */
@media (max-width: 720px) {
  .btn, button, a.btn { min-height: 44px; }
  input, select, textarea {
    font-size: 16px; /* prevents iOS Safari auto-zoom-on-focus */
    min-height: 44px;
  }
  textarea { min-height: 88px; }
}

/* ---------- Forms: stop side-by-side fields cramming on narrow screens ---------- */
@media (max-width: 640px) {
  .field-row { flex-direction: column; gap: 0; }
  .glass-search { flex-direction: column; align-items: stretch; padding: 14px; }
  .glass-search .field { min-width: 0; }
  .glass-search .btn-primary { width: 100%; }
}

/* ---------- Vehicle grid: single column on phones, two on small tablets ---------- */
@media (max-width: 640px) { .vehicle-grid { grid-template-columns: 1fr !important; } }
@media (min-width: 641px) and (max-width: 900px) { .vehicle-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---------- Trust strip: stack on phones ---------- */
@media (max-width: 640px) { .trust-strip { grid-template-columns: 1fr !important; margin-top: -20px !important; } }

/* ---------- Tables: horizontal scroll instead of squeeze/overflow-break-layout ---------- */
@media (max-width: 720px) {
  table { display: block; }
  .table-scroll, table { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* ---------- General page padding: less wasted margin on small screens ---------- */
@media (max-width: 640px) {
  .page-wrap { padding: 20px 14px 40px; }
  .card-pad { padding: 16px; }
  h1 { font-size: 24px; }
  h2 { font-size: 18px; }
}

/* ---------- Prevent any element from forcing horizontal page scroll ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg { max-width: 100%; height: auto; }

/* ---------- Modals: full-width sheets on phones instead of centered fixed-width boxes ---------- */
@media (max-width: 640px) {
  .modal, [class*="modal-"] { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 12px 12px 0 0 !important; }
}

/* ---------- Round 2 fixes, from real mobile screenshots ---------- */

/* .search-bar (used on vehicles.html) wasn't covered by the .field-row
   rule above — different markup, same problem: fields paired 2-per-row
   via flex-wrap instead of stacking on phones. */
@media (max-width: 640px) {
  .search-bar { flex-direction: column; align-items: stretch !important; }
  .search-bar .field { min-width: 0 !important; max-width: none !important; }
  .search-bar .btn-primary { width: 100%; }
}


/* ---------- Vehicle cards: Airbnb-style 2-column grid on phones ----------
   Replaces the earlier horizontal-list attempt. Rounded photo, floating
   favorite-style corner tag, bold price at the bottom, tight 2-up grid —
   this genuinely halves scroll length vs. 1-per-row while looking like a
   real browsable gallery instead of a stacked list. */
@media (max-width: 640px) {
  .vehicle-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .vehicle-card { border: none; box-shadow: none; background: transparent; border-radius: 0; }
  .vehicle-card:hover { transform: none; box-shadow: none; }
  .vehicle-card .photo {
    height: 0; padding-bottom: 100%; /* square, like Airbnb's cards */
    border-radius: 14px; position: relative; overflow: hidden;
  }
  .vehicle-card .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .vehicle-card .photo .cat-tag {
    top: 8px; left: 8px; font-size: 9px; padding: 3px 8px;
  }
  .vehicle-card .photo .price-badge { display: none; } /* price moves below, Airbnb-style */
  .vehicle-card .body { padding: 8px 2px 0; background: transparent; }
  .vehicle-card .body::before { display: none; }
  .vehicle-card .body h3 { font-size: 13px; font-weight: 600; line-height: 1.3; }
  .vehicle-card .body .meta { font-size: 11px; margin-top: 2px; }
  .vehicle-card .body .price { margin-top: 4px; font-size: 13px; font-weight: 700; }
  .vehicle-card .body .plate { display: none; } /* not needed at a glance in a browsing grid */
  .vehicle-card .body .flex.items-center.justify-between { display: block; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .vehicle-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- User dropdown (formerly the standalone notification bell's
   #notif-dropdown, now the avatar-triggered #nav-user-dropdown): on
   phones, the trigger sits mid-screen, so a right:32px-anchored 300px
   panel extends off the left edge of the viewport -- text gets
   truncated/unreadable. Anchor to the viewport edges instead of the
   avatar's position on narrow screens. ---------- */
@media (max-width: 480px) {
  #nav-user-dropdown {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 60px !important;
    width: auto !important;
    max-width: none !important;
  }
}