@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Barlow+Condensed:wght@500;600;700;800;900&family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS — Industrial Dark + Electric Teal
═══════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg:      #080a0f;
  --bg2:     #0d1018;
  --bg3:     #131720;
  --card:    #0f1319;
  --glass:   rgba(255,255,255,0.045);

  /* Borders */
  --border:  rgba(255,255,255,0.09);
  --border2: rgba(255,255,255,0.15);

  /* Brand */
  --accent:    #00f2a8;
  --accent-d:  #00c988;
  --accent-glow: rgba(0,242,168,0.18);
  --accent2:   #4d7cfe;
  --red:       #f23557;
  --green:     #00f2a8;
  --yellow:    #f2c84b;
  --orange:    #f28a3c;

  /* Text */
  --text:    #e8eaf2;
  --text2:   #6e7a94;
  --text3:   #3a4255;

  /* Effects */
  --shadow:  0 20px 60px rgba(0,0,0,0.7);
  --shadow-sm: 0 4px 20px rgba(0,0,0,0.4);
  --glow:    0 0 30px rgba(0,242,168,0.15);

  /* Shape */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);

  /* Fonts */
  --font-display: 'Barlow Condensed', 'Cairo', sans-serif;
  --font-body:    'Barlow', 'Cairo', sans-serif;
  --font-mono:    'Space Grotesk', monospace;
}

[data-theme="light"] {
  --bg:     #f4f6fb;
  --bg2:    #ebeef7;
  --bg3:    #e0e5f2;
  --card:   #ffffff;
  --glass:  rgba(0,0,0,0.02);
  --border:  rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.14);
  --text:   #0a0d16;
  --text2:  #4a5270;
  --text3:  #8c95b0;
  --shadow: 0 8px 40px rgba(0,0,0,0.1);
  --glow:   0 0 20px rgba(0,242,168,0.1);
}

/* ═══ RESET ═════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  line-height: 1.6;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-lang="ar"] body,
[data-lang="ar"] * { font-family: 'Cairo', sans-serif !important; }

/* ═══ SCROLLBAR ═════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ═══ TOAST ══════════════════════════════════════════ */
#toast-container {
  position: fixed; top: 80px; right: 20px;
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; max-width: 340px;
  width: calc(100vw - 40px);
}
[data-lang="ar"] #toast-container { right: auto; left: 20px; }

.toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  pointer-events: all;
  animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
  position: relative; overflow: hidden;
  backdrop-filter: blur(12px);
}
.toast.removing { animation: toastOut 0.25s ease forwards; }
.toast-bar {
  position: absolute; bottom: 0; left: 0; height: 2px;
  animation: toastBar 3.5s linear forwards;
}
.toast-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 700; font-size: 12px; margin-bottom: 2px; letter-spacing: 0.5px; text-transform: uppercase; }
.toast-msg { font-size: 13px; color: var(--text2); line-height: 1.45; }
.toast-close {
  background: none; border: none; color: var(--text3); cursor: pointer;
  font-size: 14px; padding: 0; line-height: 1; flex-shrink: 0;
  transition: color var(--transition);
}
.toast-close:hover { color: var(--text); }

.toast.success .toast-bar { background: var(--green); }
.toast.success .toast-title { color: var(--green); }
.toast.error   .toast-bar { background: var(--red); }
.toast.error   .toast-title { color: var(--red); }
.toast.info    .toast-bar { background: var(--accent2); }
.toast.info    .toast-title { color: var(--accent2); }
.toast.warning .toast-bar { background: var(--yellow); }
.toast.warning .toast-title { color: var(--yellow); }

@keyframes toastIn  { from { opacity:0; transform: translateX(24px) scale(0.95); } to { opacity:1; transform: none; } }
[data-lang="ar"] .toast { animation-name: toastInAr; }
@keyframes toastInAr { from { opacity:0; transform: translateX(-24px) scale(0.95); } to { opacity:1; transform: none; } }
@keyframes toastOut  { to { opacity:0; transform: scale(0.92); max-height:0; padding:0; margin:0; } }
@keyframes toastBar  { from{width:100%} to{width:0%} }

/* ═══ NAVBAR ════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: 62px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: rgba(8,10,15,0.8);
  backdrop-filter: blur(32px) saturate(200%);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .navbar { background: rgba(244,246,251,0.9); }

/* ═══ LOGO ══════════════════════════════════════════ */
.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer; user-select: none;
}
.logo-mark { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.logo-mark svg { width: 36px; height: 36px; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name {
  font-family: var(--font-display);
  font-weight: 900; font-size: 1.15rem;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text);
}
.logo-name span { color: var(--accent); }
.logo-tagline {
  font-size: 9px; color: var(--text3);
  letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}

/* ═══ NAV ACTIONS ═══════════════════════════════════ */
.nav-actions {
  display: flex;
  flex-direction: row;           /* always left→right order regardless of dir */
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.nav-btn {
  /* Uniform size for ALL nav buttons */
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2); cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  transition: all var(--transition); white-space: nowrap;
  letter-spacing: 0.3px;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
.nav-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.nav-btn.primary {
  background: var(--accent); color: #000;
  border-color: var(--accent); font-weight: 700;
}
.nav-btn.primary:hover { background: var(--accent-d); border-color: var(--accent-d); }
/* Icon buttons: strictly fixed square — immune to font/content size changes */
.nav-btn.icon-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  font-size: 15px;
  line-height: 1;
  overflow: hidden;
  flex-shrink: 0;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif !important;
}

/* ═══ FORMS ══════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label {
  font-size: 11px; font-weight: 700; color: var(--text2);
  letter-spacing: 1px; text-transform: uppercase;
}
.form-label .req { color: var(--red); margin-inline-start: 3px; }
.form-input {
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  background: rgba(13,16,24,0.7);
  border: 1px solid var(--border2);
  color: var(--text);
  /* Safari fix: minimum 16px prevents auto-zoom on focus */
  font-size: 16px;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
  /* Safari fixes: remove default styling, ensure box model is correct */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  /* Safari: backdrop-filter can break layout inside forms — use solid bg instead */
  background-color: var(--bg3);
  /* Prevent text overflow on resize */
  overflow: hidden;
}
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 16px rgba(0,242,168,0.08);
}
.form-input::placeholder { color: var(--text3); }
.form-input:disabled { opacity: 0.4; cursor: not-allowed; }
/* textarea specific Safari fixes */
textarea.form-input {
  overflow: auto;        /* Safari needs this for textarea scroll */
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ═══ BUTTONS ════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; font-family: inherit; letter-spacing: 0.4px;
  cursor: pointer; transition: all var(--transition); border: none;
  text-transform: uppercase;
}
.btn-primary {
  background: var(--accent); color: #000; border: none;
}
.btn-primary:hover { background: var(--accent-d); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,242,168,0.3), 0 0 0 1px rgba(0,242,168,0.15); }
.btn-primary:active { transform: translateY(0); }
.btn-outline {
  background: transparent; color: var(--text); border: 1px solid var(--border2);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.btn-danger {
  background: rgba(242,53,87,0.1); color: var(--red); border: 1px solid rgba(242,53,87,0.25);
}
.btn-danger:hover { background: rgba(242,53,87,0.18); }
.btn.w-full { width: 100%; }
.btn.loading { opacity: 0.65; pointer-events: none; }
.btn .spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(0,0,0,0.25); border-top-color: #000;
  border-radius: 50%; animation: spin 0.65s linear infinite;
}
[data-theme="light"] .btn .spinner { border-top-color: #000; border-color: rgba(0,0,0,0.15); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ CARD ═══════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}

/* ═══ BADGES ════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
}
.badge-green  { background: rgba(0,242,168,0.1); color: var(--green); border: 1px solid rgba(0,242,168,0.2); }
.badge-red    { background: rgba(242,53,87,0.1);  color: var(--red);   border: 1px solid rgba(242,53,87,0.2); }
.badge-blue   { background: rgba(77,124,254,0.1); color: var(--accent2); border: 1px solid rgba(77,124,254,0.2); }
.badge-yellow { background: rgba(242,200,75,0.1); color: var(--yellow); border: 1px solid rgba(242,200,75,0.2); }

/* ═══ UTILITIES ══════════════════════════════════════ */
.hidden       { display: none !important; }
.text-accent  { color: var(--accent); }
.text-muted   { color: var(--text2); }
.text-sm      { font-size: 13px; }
.text-center  { text-align: center; }
.mt-2  { margin-top: 8px; }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mb-4  { margin-bottom: 16px; }
.flex  { display: flex; align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.w-full { width: 100%; }
hr.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ═══ RADIO OPTS ═════════════════════════════════════ */
.radio-group { display: flex; gap: 8px; }
.radio-opt {
  flex: 1; border: 1px solid var(--border2);
  border-radius: var(--radius-sm); padding: 11px;
  cursor: pointer; text-align: center;
  font-size: 13px; font-weight: 600;
  transition: all var(--transition); background: var(--bg2);
  color: var(--text2);
}
.radio-opt:hover { border-color: var(--accent); color: var(--text); }
.radio-opt.selected {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}

/* ═══ SECTION LABELS ════════════════════════════════ */
.section-label {
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent);
  font-weight: 700; margin-bottom: 12px;
  font-family: var(--font-mono);
}
.section-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.5px; line-height: 1.08;
  margin-bottom: 14px; text-transform: uppercase;
}
.section-sub {
  color: var(--text2); font-size: 1rem;
  line-height: 1.8; max-width: 520px;
}


/* ═══ PAGE WRAPPER ═══════════════════════════════════ */
.page-body { padding-top: 62px; min-height: 100vh; }
/* ═══ RESPONSIVE ════════════════════════════════════ */
@media (max-width: 640px) {
  .navbar { padding: 0 14px; }
  .form-row { grid-template-columns: 1fr; }

  /* Buttons full-width on mobile */
  .hero-cta .btn { width: 100%; min-width: unset; }

  /* Section padding smaller */
  .features-section,
  .how-section,
  .map-section,
  .pricing-section,
  .cta-section { padding: 60px 16px; }

  /* Section title smaller */
  .section-title { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }

  /* Card padding */
  .card { padding: 16px; }

  /* CTA box */
  .cta-box { padding: 40px 20px; }

  /* Plan card */
  .plan-card { padding: 28px 20px; }

  /* Map legend wrap */
  .map-legend { gap: 12px; }

  /* Mini slots smaller on mobile */
  .mini-slot { width: 36px; height: 28px; }

  /* Hero stats stacked */
  .hero-stats { max-width: 100%; }
}

@media (max-width: 480px) {
  html { font-size: 15px; }
  .section-sub { font-size: 0.9rem; }
}

/* ── Show/hide nav buttons on mobile ─────────────────
   Rule: always show icon-btn (lang/theme), primary (Get Started), [data-signin] (Sign In)
   Hide anything else (future extra links etc.)
*/
@media (max-width: 640px) {
  /* Force sign-in button visible always — even after JS rebuild */
  .nav-btn[data-signin] {
    display: inline-flex !important;
    height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }
}

/* ═══ USER DROPDOWN ══════════════════════════════════ */
.user-menu-wrap { position: relative; }
.user-avatar-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 40px;
  padding: 5px 12px 5px 6px;
  cursor: pointer; font-family: inherit;
  transition: all var(--transition); color: var(--text);
}
.user-avatar-btn:hover { border-color: var(--accent); background: var(--accent-glow); }
.user-avatar-circle {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: #000; flex-shrink: 0;
}
.user-name-nav { display: flex; flex-direction: column; text-align: start; line-height: 1.2; }
.user-display-name { font-size: 12px; font-weight: 700; color: var(--text); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-cat-badge { font-size: 9px; color: var(--accent); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.user-chevron { font-size: 10px; color: var(--text3); transition: transform var(--transition); }
.user-dropdown {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  background: var(--card); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  min-width: 180px; padding: 5px;
  opacity: 0; transform: translateY(-6px) scale(0.97);
  pointer-events: none; transition: all 0.18s ease; z-index: 999;
}
.user-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.user-dd-item {
  width: 100%; text-align: start;
  background: transparent; border: none;
  padding: 9px 12px; border-radius: var(--radius-xs);
  font-size: 12px; font-weight: 600; font-family: inherit; color: var(--text);
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: background var(--transition); letter-spacing: 0.3px;
}
.user-dd-item:hover { background: var(--bg2); }
.user-dd-item.danger { color: var(--red); }
.user-dd-item.danger:hover { background: rgba(242,53,87,0.08); }
.user-dd-divider { height: 1px; background: var(--border); margin: 4px 0; }

@media (max-width: 500px) {
  .user-name-nav { display: none; }
  .user-avatar-btn { padding: 5px; }
  .user-chevron { display: none; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE FIXES — Complete Responsive Overhaul
═══════════════════════════════════════════════════════ */

/* ── NAVBAR MOBILE ──────────────────────────────────── */
@media (max-width: 640px) {
  .navbar { padding: 0 12px; }
  .logo-tagline { display: none; }
  .logo-name { font-size: 1rem; }
  .nav-actions { gap: 4px; }
  /* Shrink all buttons on mobile equally */
  .nav-btn { height: 32px; padding: 0 10px; font-size: 11px; }
  /* Icon buttons: fixed square, emoji font immune to Cairo override */
  .nav-btn.icon-btn {
    width: 32px; height: 32px; padding: 0; font-size: 15px; line-height: 1;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif !important;
  }
  /* Hide any extra text links — keep icon-btn, primary, data-signin */
  .nav-btn:not(.icon-btn):not(.primary):not([data-signin]) { display: none; }
  .user-avatar-btn { padding: 4px 8px; }
  .user-display-name { max-width: 70px; font-size: 11px; }
}

/* ── DASHBOARD LAYOUT MOBILE ─────────────────────────── */
@media (max-width: 900px) {
  /* Bottom bar exists — add padding so content doesn't hide behind it */
  .dash-main { padding-bottom: 80px !important; }
  .page-body { padding-bottom: 0; }
}

@media (max-width: 640px) {
  .dash-main { padding: 14px 10px 80px !important; }

  /* Stats grid — 2 columns on mobile */
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 18px !important; }
  .stat-card { padding: 14px 12px !important; }
  .stat-card-value { font-size: 1.4rem !important; }
  .stat-card-label { font-size: 10px !important; }
  .stat-card-sub { font-size: 11px !important; }

  /* Section headings */
  .section-heading { flex-wrap: wrap; gap: 8px; margin-bottom: 14px !important; }
  .section-heading h3 { font-size: 1rem !important; }
  .section-title { font-size: 1.2rem !important; margin-bottom: 10px !important; }

  /* Map wrap */
  .map-wrap { padding: 14px 10px !important; margin-bottom: 16px !important; }
  .map-legend { gap: 8px !important; margin-bottom: 12px !important; flex-wrap: wrap; }
  .legend-item { font-size: 11px !important; }

  /* Parking grid — scrollable horizontally on tiny screens */
  .parking-rows { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .parking-row { flex-wrap: nowrap !important; gap: 4px !important; }
  .slots-wrap { flex-wrap: nowrap !important; gap: 4px !important; }
  .slot { width: 38px !important; height: 32px !important; border-radius: 5px !important; flex-shrink: 0; }
  .slot::before { font-size: 13px !important; }
  .slot.occ::before, .slot.doc::before, .slot.res::before { font-size: 14px !important; }
  .slot.my::before { font-size: 14px !important; }
  .slot.avail::after { width: 16px !important; height: 10px !important; }
  .slot-num { font-size: 7px !important; }
  .row-label { width: 14px !important; font-size: 9px !important; }

  /* Reservations table — scrollable */
  .res-table th, .res-table td { padding: 10px 10px !important; font-size: 12px !important; }
  .res-table th { font-size: 9px !important; }

  /* Vehicle items */
  .vehicle-item { padding: 12px 14px !important; flex-wrap: wrap; }
  .vehicle-plate { font-size: 0.9rem !important; }

  /* Subscription cards */
  .sub-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
  .sub-card { padding: 22px 16px !important; }
  .sub-card-price { font-size: 1.6rem !important; }

  /* Profile grid */
  .profile-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .profile-avatar-row { padding: 14px !important; gap: 14px !important; flex-wrap: wrap; }
  .profile-avatar-circle { width: 52px !important; height: 52px !important; font-size: 22px !important; }

  /* Active booking banner */
  .active-booking-banner { flex-direction: column !important; align-items: flex-start !important; padding: 14px !important; }
  .active-booking-actions { flex-wrap: wrap !important; gap: 6px !important; }
  .active-booking-actions .btn { flex: 1; min-width: 100px; font-size: 11px !important; padding: 9px 10px !important; }

  /* Modal */
  .modal-box { padding: 22px 14px !important; max-height: 88vh !important; }
  .modal-title { font-size: 1rem !important; margin-bottom: 14px !important; }
  .modal-actions { gap: 8px !important; margin-top: 14px !important; }
  .radio-group { flex-wrap: wrap !important; gap: 6px !important; }
  .radio-opt { flex: 1 1 auto !important; min-width: 80px !important; padding: 9px 8px !important; font-size: 11px !important; }

  /* Card payment fields */
  .card-fields .form-group { margin-bottom: 10px !important; }

  /* Payment grid inside modal */
  .card-fields [style*="grid-template-columns:1fr 1fr"] { 
    grid-template-columns: 1fr 1fr !important; 
    gap: 8px !important;
  }

  /* Wallet card in profile */
  [style*="justify-content:space-between"] { flex-wrap: wrap !important; gap: 10px !important; }
}

/* ── ADMIN MOBILE ────────────────────────────────────── */
@media (max-width: 860px) {
  .admin-wrap { grid-template-columns: 1fr !important; }
  .admin-sidebar { display: none !important; }
  .admin-main { padding: 14px 10px !important; }

  /* Mobile admin bottom nav */
  .admin-mobile-nav {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg2); border-top: 1px solid var(--border);
    z-index: 300; padding: 6px 0 10px; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }
  .admin-main { padding-bottom: 72px !important; }
}

/* Admin mobile nav — hidden on desktop */
.admin-mobile-nav {
  display: none;
}

@media (max-width: 860px) {
  .admin-mobile-nav { display: flex !important; }

  /* Admin stats */
  .admin-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 18px !important; }
  .admin-stat { padding: 14px !important; }
  .admin-stat-val { font-size: 1.4rem !important; }
  .admin-page-header { flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 18px !important; padding-bottom: 14px !important; }
  .admin-page-title { font-size: 1.2rem !important; }

  /* Users table — scrollable */
  .admin-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .admin-table { min-width: 520px !important; }
  .admin-table th { font-size: 9px !important; padding: 8px 10px !important; }
  .admin-table td { padding: 10px !important; font-size: 12px !important; }

  /* Action buttons in table */
  .action-btns { flex-wrap: wrap !important; gap: 4px !important; }
  .act-btn { padding: 5px 9px !important; font-size: 10px !important; }

  /* Wallets section */
  .admin-tab [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Search bar */
  .search-bar { flex-wrap: wrap !important; }
  .search-bar input { min-width: 100% !important; }
  .filter-btn { font-size: 11px !important; padding: 8px 12px !important; }

  /* Wallet user results */
  #wallet-user-results { max-height: 140px !important; }

  /* Edit modal */
  .modal-box { padding: 20px 14px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* Admin mobile nav tab button */
.admin-mob-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; color: var(--text3);
  cursor: pointer; padding: 4px 10px; min-width: 56px;
  background: transparent; border: none; font-family: inherit;
  transition: color var(--transition); white-space: nowrap; letter-spacing: 0.3px;
  text-transform: uppercase;
}
.admin-mob-tab.active { color: var(--accent); }
.admin-mob-tab-icon { font-size: 18px; }

/* ── HOME PAGE MOBILE ────────────────────────────────── */
@media (max-width: 640px) {
  /* Hero section */
  .hero-section { padding: 60px 16px 50px !important; }
  /* Fix: column layout stays centered regardless of RTL/LTR */
  .hero-cta { flex-direction: column !important; gap: 10px !important; align-items: center !important; }
  .hero-cta .btn { width: 100% !important; max-width: 320px !important; padding: 14px !important; }

  /* Features grid */
  .features-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Steps */
  .steps-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Map section preview */
  .mini-map-preview { overflow-x: auto !important; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .plan-card { padding: 24px 18px !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-links-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── FORM MOBILE FIXES ───────────────────────────────── */
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr !important; }
  .form-input { font-size: 16px !important; } /* prevents iOS zoom */
  .auth-card { padding: 26px 16px !important; }
  .auth-title { font-size: 1.5rem !important; }
  .tab-bar { margin-bottom: 14px !important; }
  .demo-row { flex-direction: column !important; }
  .demo-btn { padding: 12px !important; }
}

/* ── PREVENT OVERFLOW EVERYWHERE ────────────────────── */
* { max-width: 100%; }
img, video, iframe, table { max-width: 100%; }

/* Tables that need to scroll */
.card [style*="overflow-x:auto"],
.card > table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fix z-index issues — map/content overlap */
.map-wrap { position: relative; z-index: 1; }
.parking-rows { position: relative; z-index: 1; }
.modal-overlay { z-index: 800 !important; }
.navbar { z-index: 500 !important; }
.mobile-tab-bar { z-index: 300 !important; }
.admin-mobile-nav { z-index: 300 !important; }

/* ── TOUCH IMPROVEMENTS ─────────────────────────────── */
@media (max-width: 900px) {
  .btn, .nav-btn, .sidebar-item, .mob-tab, .admin-mob-tab,
  .filter-btn, .act-btn, .slot, .radio-opt, .sub-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  /* Minimum tap target 44px */
  .btn { min-height: 44px; }
  .mob-tab { min-width: 44px; min-height: 44px; }
  .admin-mob-tab { min-height: 44px; }
}

/* ── IOS SAFE AREA ──────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-tab-bar, .admin-mobile-nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  @media (max-width: 900px) {
    .dash-main { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
    .admin-main { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
  }
}