/* ═══════════════════════════════════════════════
   SWIFT — SHARED MOBILE CSS
   Add <link rel="stylesheet" href="swift-mobile.css"/>
   AFTER your existing <style> block on every page.
   ═══════════════════════════════════════════════ */

/* ── GLOBAL TOUCH IMPROVEMENTS ─────────────────────────── */
@media (max-width: 768px) {
  /* Prevent horizontal scroll site-wide */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Make all tap targets at least 44px tall */
  button, .btn, .btn-sm, .nav-btn, .btn-main,
  .btn-accent, .btn-ghost, .save-btn, .action-btn,
  .promote-btn, .tier-cta, .modal-btn, .panel-btn,
  .pay-btn, .btn-checkout, .btn-submit, .cta-primary,
  .cta-secondary, .cta-light, .cta-outline,
  .btn-cart, .btn-quote, .btn-place, .add-cart-btn,
  .btn-approve, .btn-deny, .btn-accent, .btn-blue, .btn-ghost,
  .confirm-btn, .filter-btn, .loc-btn {
    min-height: 44px;
    font-size: 14px !important;
  }

  input, select, textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    min-height: 44px;
  }

  /* ── NAV (all pages) ──────────────────────────────────── */
  .nav {
    padding: 0 14px !important;
    gap: 10px !important;
    flex-wrap: nowrap;
    height: 56px !important;
  }

  .nav-logo { font-size: 18px !important; }
  .nav-logo .bolt { width: 28px !important; height: 28px !important; font-size: 14px !important; }

  .nav-search {
    flex: 1 !important;
    min-width: 0;
    max-width: none !important;
  }

  .nav-search input { padding: 8px 12px !important; font-size: 14px !important; }
  .nav-search button { padding: 8px 14px !important; font-size: 12px !important; white-space: nowrap; }

  .nav-right {
    gap: 6px !important;
    flex-shrink: 0;
  }

  /* Hide less-essential nav buttons on mobile, keep cart + profile */
  .nav-btn-ghost:not(:last-of-type) { display: none !important; }

  /* ── CATEGORY BAR ─────────────────────────────────────── */
  .cat-bar { padding: 0 10px !important; }
  .cat-pill { padding: 10px 12px !important; font-size: 12px !important; }

  /* ── MAIN CONTENT AREAS ───────────────────────────────── */
  main { padding: 16px 14px 80px !important; margin: 0 auto !important; }

  /* ── PRODUCT GRID ─────────────────────────────────────── */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .product-card { border-radius: 10px !important; }
  .product-img { padding: 10px !important; }
  .product-info { padding: 10px !important; }
  .product-name { font-size: 12px !important; }
  .product-price { font-size: 14px !important; }
  .product-store { font-size: 10px !important; }

  /* ── HOT DEALS SECTION ────────────────────────────────── */
  .hot-section { padding: 16px !important; border-radius: 14px !important; }
  .sec-title { font-size: 16px !important; }
  .sec-link { font-size: 12px !important; }

  /* ── CAROUSEL ─────────────────────────────────────────── */
  .carousel { aspect-ratio: 16/7 !important; }
  .carousel-slide { padding: 20px 22px !important; }
  .slide-title { font-size: 20px !important; }
  .slide-sub { font-size: 12px !important; display: none; }
  .slide-cta { padding: 9px 18px !important; font-size: 12px !important; }
  .carousel-wrap { border-radius: 12px !important; margin-bottom: 18px !important; }

  /* ── CATEGORY CARDS ───────────────────────────────────── */
  .categories-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .cat-card { height: 90px !important; }
  .cat-card div[style*="font-size:52px"] { font-size: 28px !important; }
  .cat-name { font-size: 10px !important; padding: 8px !important; }

  /* ── BANNER ROW ───────────────────────────────────────── */
  .banner-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }
  .banner-card { padding: 20px !important; }
  .banner-title { font-size: 16px !important; }
  .banner-sub { font-size: 12px !important; }
  .banner-img { font-size: 40px !important; right: 12px !important; opacity: .15; }

  /* ── PRODUCT PAGE ─────────────────────────────────────── */
  .product-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .gallery { flex-direction: column !important; }
  .gallery-thumbs {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 6px !important;
    max-height: none !important;
    width: 100% !important;
  }
  .gallery-thumb { width: 56px !important; height: 56px !important; flex-shrink: 0 !important; }
  .gallery-main {
    width: 100% !important;
    height: 300px !important;
    aspect-ratio: unset !important;
    position: static !important;
  }
  .gallery-main img { padding: 14px !important; }
  .product-title { font-size: 20px !important; }
  .price-main { font-size: 26px !important; }
  .btn-primary, .btn-secondary { font-size: 14px !important; padding: 12px !important; }

  /* ── CART ─────────────────────────────────────────────── */
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .cart-card { padding: 14px !important; gap: 10px !important; }
  .cart-img { width: 64px !important; height: 64px !important; }
  .cart-name { font-size: 13px !important; }
  .summary-card { position: static !important; }

  /* ── CHECKOUT ─────────────────────────────────────────── */
  .checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pay-methods {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .pay-opt { padding: 10px 6px !important; }
  .pay-opt .icon { font-size: 22px !important; }
  .pay-opt .label { font-size: 10px !important; }
  .section-card { padding: 18px !important; }
  #deliveryMap { height: 200px !important; }

  /* ── SEARCH PAGE ──────────────────────────────────────── */
  .layout {
    flex-direction: column !important;
    padding: 14px !important;
    gap: 14px !important;
  }
  .filters {
    width: 100% !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .filter-card { margin-bottom: 0 !important; padding: 14px !important; }
  .filter-title { font-size: 12px !important; margin-bottom: 10px !important; }
  .filter-option { font-size: 12px !important; }
  .price-input { width: 70px !important; padding: 6px 8px !important; }
  .results-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .results-title { font-size: 17px !important; }

  /* ── FOREIGN FINDS PAGE ───────────────────────────────── */
  .hero { padding: 80px 16px 40px !important; }
  .hero h1 { font-size: 40px !important; letter-spacing: -2px !important; }
  .hero-sub { font-size: 14px !important; }
  .hero-search { max-width: 100% !important; border-radius: 10px !important; }
  .hero-search input { padding: 12px 14px !important; }
  .hero-search button { padding: 12px 16px !important; }
  .hero-stats { gap: 20px !important; margin-top: 32px !important; flex-wrap: wrap; }
  .hero-stat-num { font-size: 22px !important; }
  .ff-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ff-title { font-size: 32px !important; }

  /* ── FOREIGN PRODUCT PAGE ─────────────────────────────── */
  .product-layout { grid-template-columns: 1fr !important; }
  .img-gallery { flex-direction: column !important; }
  .img-thumbs { flex-direction: row !important; overflow-x: auto; }
  .img-thumb { width: 56px !important; height: 56px !important; flex-shrink: 0; }
  .h1, h1 { font-size: 20px !important; }
  .price-main { font-size: 26px !important; }
  .btn-cart, .btn-quote { font-size: 14px !important; padding: 12px !important; }

  /* ── PROFILE PAGE ─────────────────────────────────────── */
  .profile-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  .profile-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    gap: 8px !important;
    width: 100%;
  }
  .profile-actions .btn { flex: 1 1 140px !important; font-size: 12px !important; }
  .tabs { overflow-x: auto !important; white-space: nowrap; }
  .tab { padding: 10px 14px !important; font-size: 12px !important; }
  .addr-card { flex-direction: column !important; gap: 10px !important; }
  .addr-actions { flex-direction: row !important; }
  .order-header { flex-direction: column !important; gap: 6px !important; }

  /* ── SELLER DASHBOARD ─────────────────────────────────── */
  .layout .sidebar { display: none !important; } /* hide sidebar, use topbar tabs on mobile */
  .topbar { padding: 0 14px !important; gap: 8px !important; height: 54px !important; }
  .topbar-store { display: none !important; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .metric-card { padding: 14px !important; }
  .metric-val { font-size: 20px !important; }
  .product-grid.seller { grid-template-columns: repeat(2, 1fr) !important; }
  .orders-table { font-size: 12px !important; }
  .orders-table th, .orders-table td { padding: 10px 8px !important; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }

  /* ── ADMIN PANEL ──────────────────────────────────────── */
  .layout .main { padding: 16px !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .rev-grid { grid-template-columns: 1fr !important; }
  .mini-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .analytics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .tier-grid { grid-template-columns: 1fr !important; }
  .slide-panel { width: 100vw !important; }
  table { font-size: 12px !important; }
  th, td { padding: 10px 8px !important; }

  /* ── AUTH PAGES (login/register) ──────────────────────── */
  .auth-card {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh !important;
    padding: 32px 20px !important;
    box-shadow: none !important;
  }

  /* ── BECOME SELLER ────────────────────────────────────── */
  .hero[style*="min-height:100vh"] { padding: 80px 16px 40px !important; }
  .perks { grid-template-columns: 1fr !important; gap: 10px !important; }
  .steps-grid { grid-template-columns: 1fr !important; border-radius: 12px !important; }
  .buyers-grid { grid-template-columns: 1fr !important; }
  .pay-grid { grid-template-columns: 1fr !important; }
  .tiers-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .faq-cols { grid-template-columns: 1fr !important; gap: 24px !important; }
  .commission-table { font-size: 12px !important; }
  .commission-table th, .commission-table td { padding: 10px 8px !important; }
  .referral-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .referral-amounts { flex-direction: column !important; gap: 12px !important; }
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* ── LANDING PAGE ─────────────────────────────────────── */
  nav { padding: 0 14px !important; height: 58px !important; }
  .nav-links { display: none !important; }
  .nav-right { gap: 8px !important; }

  /* ── MODALS ───────────────────────────────────────────── */
  .pay-modal { max-width: 100% !important; width: 100% !important; margin: 0 !important; border-radius: 16px 16px 0 0 !important; position: fixed !important; bottom: 0 !important; }
  .pay-modal-overlay { align-items: flex-end !important; }
  .modal { max-width: 100% !important; width: 100% !important; margin: 0 !important; border-radius: 16px 16px 0 0 !important; max-height: 85vh !important; }
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }

  /* ── DISPATCH / BOOST / PROMO / EDIT MODALS ───────────── */
  #dispatchModal > div,
  #boostModal > div,
  #promoModal > div,
  #editModal > div,
  #costModal > div,
  #orderDetailModal > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 24px 18px 32px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  #dispatchModal,
  #boostModal,
  #promoModal,
  #editModal,
  #costModal,
  #orderDetailModal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* ── SLIDE PANELS ─────────────────────────────────────── */
  .slide-panel {
    width: 100vw !important;
    top: auto !important;
    bottom: 0 !important;
    height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    transform: translateY(100%) !important;
  }
  .slide-panel.open { transform: translateY(0) !important; }

  /* ── SELLER DASHBOARD MOBILE NAV ──────────────────────── */
  .seller-mobile-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e8e8f0;
    z-index: 200;
    height: 60px;
  }
  .seller-mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #9090a0;
    cursor: pointer;
    gap: 2px;
    padding: 4px 0;
  }
  .seller-mobile-nav-item .mnav-icon { font-size: 20px; }
  .seller-mobile-nav-item.active { color: #ff4500; }

  /* ── TOPBAR RIGHT (seller) ────────────────────────────── */
  .topbar-right > a:not(:last-child) { display: none !important; }

  /* ── HIDE SIDEBAR ON MOBILE (seller + admin) ──────────── */
  .sidebar { display: none !important; }
  /* Give content full width */
  .content, .main { padding-bottom: 80px !important; }

  /* ── FORMS ────────────────────────────────────────────── */
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .foreign-form-grid { grid-template-columns: 1fr !important; }

  /* ── BOOST OPTIONS ────────────────────────────────────── */
  .boost-option > div { flex-direction: column !important; gap: 8px !important; }

  /* ── PROMO CARD ───────────────────────────────────────── */
  .promote-card { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .promote-btn { width: 100% !important; }

  /* ── ADMIN STORES PRODUCT GRID ────────────────────────── */
  #storeProducts_,
  [id^="storeProducts_"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ── STORE ANALYTICS ──────────────────────────────────── */
  .revenue-chart { height: 180px !important; }

  /* ── FOREIGN FINDS SIDEBAR FILTERS ───────────────────── */
  .sidebar.filters-sidebar {
    display: block !important;
    width: 100% !important;
    position: static !important;
    height: auto !important;
  }

  /* ── SCROLL IMPROVEMENTS ──────────────────────────────── */
  .orders-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ── QUOTE CARD ───────────────────────────────────────── */
  .quote-card { flex-direction: column !important; gap: 10px !important; }
  .quote-actions { flex-wrap: wrap !important; }

  /* ── SECTION HEADERS ──────────────────────────────────── */
  .section-hd { font-size: 17px !important; flex-wrap: wrap; gap: 8px !important; }

  /* ── BREADCRUMB ───────────────────────────────────────── */
  .breadcrumb { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ── FOREIGN FINDS LAYOUT ─────────────────────────────── */
  /* Stack sidebar + content vertically */
  .layout:has(.sidebar):has(.content) {
    flex-direction: column !important;
    padding: 12px !important;
  }
  .layout > .sidebar {
    display: block !important;   /* override the hide for FF sidebar specifically */
    width: 100% !important;
    position: static !important;
    height: auto !important;
    border: none !important;
    padding: 0 !important;
  }
  /* But keep seller/admin sidebar hidden */
  .layout:has(.content):not(:has(.filter-card)) > .sidebar {
    display: none !important;
  }

  /* FF filters: horizontal scrollable chips on mobile */
  .flags-row { padding: 0 10px !important; }
  .flag-pill { padding: 8px 12px !important; font-size: 11px !important; }

  /* FF product grid: 2 columns */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .product-img-wrap { height: 160px !important; }

  /* Hero title smaller */
  .hero-title { font-size: 30px !important; line-height: 1.1 !important; }

  /* FF filter sidebar: horizontal scroll 2-col grid */
  .sidebar > .filter-card {
    display: inline-flex !important;
    flex-direction: column !important;
  }
  .filter-card .range-inputs { gap: 4px !important; }
  .range-input { padding: 6px 8px !important; font-size: 13px !important; }

  /* ── INDEX PAGE PRODUCT GRID ──────────────────────────── */
  #productGrid, #hotGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ── SELLER ADD PRODUCT FORM ──────────────────────────── */
  #variantBuilder { padding: 12px !important; }
  .img-upload-zone { padding: 16px !important; }
  .img-previews { gap: 6px !important; }

  /* ── ORDER DETAIL MODAL FULL SCREEN ───────────────────── */
  #orderDetailModal > div {
    max-height: 95vh !important;
    padding: 20px 16px 40px !important;
  }
  #od_mini_map { height: 140px !important; }

  /* ── CHECKOUT MAP ─────────────────────────────────────── */
  #deliveryMap { height: 180px !important; }

  /* ── PROFILE ORDERS ───────────────────────────────────── */
  .order-card { padding: 14px !important; }
  .order-item-thumb { width: 38px !important; height: 38px !important; }

  /* ── BOTTOM SAFE AREA (iPhone home bar) ───────────────── */
  .seller-mobile-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .content, .main { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── SMALL PHONE (≤390px) ───────────────────────────────── */
@media (max-width: 390px) {
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tiers-grid { grid-template-columns: 1fr !important; }
  .categories-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .hero h1, .hero-title { font-size: 26px !important; }
  .slide-title { font-size: 17px !important; }
  .product-img-wrap { height: 140px !important; }
}

/* ── SMALL PHONE (≤390px) ───────────────────────────────── */
@media (max-width: 390px) {
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tiers-grid { grid-template-columns: 1fr !important; }
  .categories-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .hero h1 { font-size: 32px !important; }
  .slide-title { font-size: 17px !important; }
}