/**
 * ZappTrip — mobile-first layout layer (load after custom.css / customer.css).
 * Touch-friendly chrome, vertical stacking helpers, safe-area padding.
 */

:root {
  --zapp-touch-min: 44px;
}

/* ── Safe horizontal inset on edge-to-edge chrome ── */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 991.98px) {
  /* Collapsed navbar — WCAG-friendly tap targets */
  .zapp-navbar .navbar-collapse .nav-link.zapp-nav-link {
    min-height: var(--zapp-touch-min);
    display: inline-flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
  }

  .zapp-navbar .navbar-collapse .dropdown-menu .dropdown-item {
    min-height: var(--zapp-touch-min);
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .zapp-mobile-menu-toggle.navbar-toggler {
    min-width: var(--zapp-touch-min);
    min-height: var(--zapp-touch-min);
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .zapp-mobile-topbar-actions .zapp-profile-trigger {
    min-width: var(--zapp-touch-min);
    min-height: var(--zapp-touch-min);
    justify-content: center;
  }

  .zapp-mobile-utility-card {
    min-height: var(--zapp-touch-min);
  }

  .zapp-navbar .zapp-nav-signup,
  .zapp-navbar .zapp-nav-btn-solid {
    min-height: var(--zapp-touch-min);
  }
}

/* Profile / account dropdown (mobile) */
@media (max-width: 575.98px) {
  .zpd-item,
  .zpd-signout {
    min-height: var(--zapp-touch-min);
    align-items: center;
  }

  .zpd-tile {
    min-height: 72px;
    justify-content: center;
  }
}

/* Footer link rows */
@media (max-width: 575.98px) {
  .footer .zapp-footer-links a,
  .footer .zapp-footer-contact a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .footer .zapp-social-links a {
    min-width: var(--zapp-touch-min);
    min-height: var(--zapp-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .footer .zapp-app-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .footer .zapp-store-btn {
    min-height: var(--zapp-touch-min);
    justify-content: center;
  }

  .footer .zapp-trust-list {
    gap: 8px;
  }
}

/* Modals on narrow viewports */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
  }

  .modal-content {
    border-radius: 16px;
  }
}

/* Auth — safe bottom inset on notched phones */
@media (max-width: 768px) {
  body.auth-body .auth-right {
    padding-bottom: max(40px, calc(24px + env(safe-area-inset-bottom, 0px)));
  }

  body.auth-body .auth-back {
    min-height: var(--zapp-touch-min);
    align-items: center;
  }
}

/* Slightly tighter vertical rhythm between stacked sections */
@media (max-width: 575.98px) {
  main .container > .row.g-4,
  main .container > .row.g-xl-5 {
    --bs-gutter-y: 0.875rem;
  }
}

/* Login / signup modal — larger tap targets on phones */
@media (max-width: 575.98px) {
  #loginSignupModal .lsm-close {
    min-width: var(--zapp-touch-min);
    min-height: var(--zapp-touch-min);
    padding: 10px;
    top: 10px;
    right: 12px;
  }

  #loginSignupModal .lsm-auth-tab {
    min-height: var(--zapp-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
  }

  #loginSignupModal .lsm-cta-btn {
    min-height: var(--zapp-touch-min);
  }
}