/* ═══════════════════════════════════════════════════════════════════
   NRI Outpost — mobile.css
   Shared mobile responsive layer across homepage, wizard, cities.
   Breakpoints: 920px (tablet/landscape), 640px (phone), 480px (small phone)
   ═══════════════════════════════════════════════════════════════════ */

/* === HAMBURGER MENU BUTTON === */
.mob-menu-btn {
  display: none;
  position: fixed;
  top: 14px; left: 16px;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--rule);
  cursor: pointer;
  z-index: 80;
  font-size: 18px;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}
.mob-menu-btn span {
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 1px;
}

/* === DRAWER === */
.mob-drawer-bg {
  position: fixed; inset: 0;
  background: rgba(26, 20, 16, 0.5);
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.mob-drawer-bg.open { opacity: 1; pointer-events: auto; }

.mob-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 84vw; max-width: 320px;
  background: var(--paper);
  z-index: 121;
  transform: translateX(-100%);
  transition: transform 0.25s ease-out;
  overflow-y: auto;
  border-right: 1px solid var(--rule);
  box-shadow: 0 28px 60px -16px rgba(26, 20, 16, 0.3);
  display: flex;
  flex-direction: column;
}
.mob-drawer.open { transform: translateX(0); }
.mob-drawer-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
}
.mob-drawer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: "Instrument Serif", serif; font-size: 22px;
}
.mob-drawer-brand .brand-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--saffron);
  display: grid; place-items: center;
  color: #fff8ec; font-family: "Instrument Serif", serif;
  font-style: italic; font-size: 17px;
}
.mob-drawer-brand .brand-mark::after { content: "न"; }
.mob-drawer-brand em { font-style: italic; }
.mob-drawer-close {
  background: none; border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--ink-3);
  cursor: pointer;
}
.mob-drawer-close:hover { background: var(--paper-2); color: var(--ink); }
.mob-drawer-nav {
  padding: 12px 0;
  flex: 1;
}
.mob-drawer-section {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 16px 20px 8px;
  font-weight: 700;
}
.mob-drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.mob-drawer-link:hover { background: var(--paper-2); }
.mob-drawer-link.active {
  border-left-color: var(--saffron);
  background: var(--card);
}
.mob-drawer-link-icon {
  font-family: "Instrument Serif", serif;
  font-size: 18px;
  color: var(--saffron);
  width: 24px;
}
.mob-drawer-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--ink-3);
}

/* === BOTTOM TAB BAR === */
.mob-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: color-mix(in oklab, var(--paper) 95%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  z-index: 70;
  padding: 8px 6px calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.mob-tabbar-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.mob-tab {
  background: none; border: none;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
}
.mob-tab.active { color: var(--saffron); }
.mob-tab-icon {
  font-family: "Instrument Serif", serif;
  font-size: 22px;
  line-height: 1;
}
.mob-tab.active .mob-tab-icon { color: var(--saffron); }

/* === MOBILE BREAKPOINTS === */
@media (max-width: 920px) {
  /* Show mobile chrome */
  .mob-menu-btn { display: flex; }
}

@media (max-width: 640px) {
  /* Prevent horizontal scroll from any oversized child (safety net) */
  html, body { overflow-x: hidden; max-width: 100vw; }
  /* Bottom tab bar appears */
  .mob-tabbar { display: block; }
  /* Add body padding so content isn't hidden behind tab bar; honour iOS safe area too */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Hamburger must sit above the sticky desktop nav (z-index 50). 80 is safe. */
  .mob-menu-btn { z-index: 100; }
  /* Hide existing desktop nav inner links — only brand stays.
     Uses !important because the page's inline <style> defines these rules
     and is loaded AFTER mobile.css, so it would otherwise win the cascade. */
  .topbar-right { display: none !important; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; } /* Join newsletter pill — drawer footer has it */
  /* Re-center brand */
  .nav-inner, .topbar-inner {
    justify-content: center;
    padding: 14px 32px 14px 64px;
  }
  /* Hero adjustments */
  .hero, .hero-search { padding: 40px 0 40px; }
  h1.hero-title { font-size: clamp(34px, 9vw, 52px) !important; }
  .hero-sub { font-size: 15px; }
  .search-box { padding: 4px 4px 4px 14px; }
  .search-box input { font-size: 15px; padding: 12px 0; }
  .search-go { padding: 10px 16px; font-size: 12px; }
  /* Quickjump hidden on phones — bottom tab bar replaces it */
  .hero-quickjump { display: none; }
  .search-chips { gap: 6px; }
  .chip { font-size: 11px; padding: 5px 11px; }
  /* Section padding shrinks */
  section { padding: 60px 0; }
  .section-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 36px;
  }
  .section-intro { max-width: 100%; }
  /* Container padding */
  .container, .container-tight { padding: 0 18px; }
  /* Tables → cards transformation */
  .ins-row,
  .remit-row,
  .airport-row,
  .list-row {
    display: block !important;
    padding: 16px 18px;
    border-bottom: 1px solid var(--rule);
  }
  .ins-row.header, .remit-row.header, .list-row.header { display: none !important; }
  .airport-row {
    display: grid !important;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: center;
  }
  .airport-row .airport-features,
  .airport-row .airport-rating,
  .airport-row .airport-badge {
    grid-column: 2;
  }
  .remit-row > div,
  .ins-row > div,
  .list-row > div {
    margin-bottom: 6px;
  }
  .remit-row .remit-rate::before { content: "Rate: "; color: var(--ink-3); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500; }
  .remit-row .remit-fee::before { content: "Fee: "; color: var(--ink-3); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500; }
  .list-row .list-meta { font-size: 11px; padding-top: 4px; }
  /* Wizard tweaks */
  .dash-hero { grid-template-columns: 1fr !important; gap: 24px; }
  .day-counter { padding: 24px; min-height: auto; }
  .dc-number { font-size: 80px; }
  .today-card { min-height: auto; }
  /* Cards generally shrink padding */
  .health-card, .visa-card, .grocery-card, .comm-card, .nbhd, .rest, .svc-card, .fin-card, .tip {
    padding: 18px;
  }
  .city-name { font-size: clamp(40px, 11vw, 60px) !important; }
  /* Profile chip simpler */
  .profile-chip-meta { display: none !important; }
  .profile-chip { font-size: 12px; }
  /* Chat panel becomes bottom-sheet */
  .chat-panel {
    width: 100vw !important;
    max-width: none !important;
    height: 80vh !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    transform: translateY(100%);
    transition: transform 0.28s ease-out;
    display: flex !important;
  }
  .chat-panel:not(.open) { transform: translateY(100%); pointer-events: none; }
  .chat-panel.open { transform: translateY(0); }
  .chat-panel::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: var(--rule);
    border-radius: 2px;
  }
  .chat-head { padding-top: 24px; }
  .chat-btn {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    right: 14px !important;
    width: 52px !important;
    height: 52px !important;
  }
  /* Hide the floating chat button on phones — bottom tab bar already has a Chat tab.
     Two chat triggers in the same corner cause visual overlap and confusion. */
  .chat-btn { display: none !important; }
  /* Hide the Tweaks pill on phones — it floats at bottom-left, covering hero
     search content + bottom tab bar area, with no real value on a phone
     (palette switching is a desktop nice-to-have). */
  #tweaks-toggle, #tweaks-panel { display: none !important; }
  /* City tabs — horizontal scroll with snap */
  .city-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .city-tab { scroll-snap-align: start; padding: 14px 18px; font-size: 13px; }
  /* Cross-border tabs scrollable */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { white-space: nowrap; padding: 12px 16px; }
  .ins-tabs, .rest-toolbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ins-tab, .rest-tab { white-space: nowrap; }
  /* Currency converter, health estimator, budget tool — pad less */
  .converter, .health-estimator, .budget-tool, .day-counter, .layover { padding: 24px; }
  .conv-input { font-size: 32px !important; }
  /* Restaurant grids */
  .rest-grid, .svc-grid, .community-grid, .grocery-grid, .today-grid { grid-template-columns: 1fr !important; }
  /* Wizard week tabs vertical */
  .week-tabs { flex-direction: column; }
  /* Drawer in wizard task detail becomes bottom-sheet */
  .drawer {
    width: 100vw !important;
    height: 88vh;
    top: auto !important;
    bottom: 0;
    right: 0;
    border-radius: 20px 20px 0 0;
    border-left: none;
    transform: translateY(100%);
  }
  .drawer.open { transform: translateY(0); }
  /* Setup wizard form */
  .step-title { font-size: 36px !important; }
  .choice-grid.cols-2, .choice-grid.cols-3 { grid-template-columns: 1fr !important; }
  /* Footer — single column */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Disable horizontal overflow */
  html, body { overflow-x: hidden; }
}

@media (max-width: 480px) {
  .mob-tab-icon { font-size: 20px; }
  .mob-tab { font-size: 9px; }
  h1.hero-title { font-size: clamp(28px, 10vw, 40px) !important; }
  .day-counter::before { width: 200px; height: 200px; bottom: -90px; right: -50px; }
  .dc-number { font-size: 64px; }
  .greeting { font-size: clamp(28px, 9vw, 40px) !important; }
  .section-title { font-size: clamp(28px, 8vw, 36px) !important; }
  .modal { padding: 22px !important; }
  .legal-modal-body { padding: 20px 22px !important; }
  /* Reduce city stat font */
  .city-stat-value { font-size: 19px; }
  /* Choice cards in wizard */
  .choice { padding: 16px; }
}

/* Visibility helpers */
@media (max-width: 920px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 921px) {
  .mobile-only { display: none !important; }
}