/* ==========================================================================
   CHOW45 SHELL & LAYOUT
   Mobile-first, responsive, app-like feel with smooth transitions
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  background-color: var(--c-bg-canvas);
  color: var(--c-text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------
   Typography Headings from User Specification
   ------------------------------------------------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 32px);
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 0px;
  color: var(--c-text-primary);
}

h2, .h2 {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 3.5vw, 27px);
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.27px;
  color: var(--c-text-primary);
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.5vw, 23px);
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.375px;
  color: var(--c-text-primary);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0px;
  color: var(--c-text-primary);
}

p, .p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  color: var(--c-text-secondary);
}

.text-headline-display {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 0px;
}

.text-headline-lg {
  font-family: var(--font-body);
  font-size: 27px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.27px;
}

.text-headline-md {
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.375px;
}

.text-body-lg, .text-body-md {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
}

.text-body-sm {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.text-label-lg {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.text-label-md {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.text-label-sm {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

/* App Viewport Container */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  max-width: 100vw;
}

/* -------------------------------------------------------------
   Top Navigation Bar (Clean Minimalist White Canvas)
   ------------------------------------------------------------- */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 246, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1.5px solid var(--c-border);
  padding: 12px var(--space-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-nav-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-width: 0;
}

/* The address is the only variable-length item in the bar, so it is the only
   one allowed to give up width (its own max-width is set below). Without this
   the bar has a hard ~884px intrinsic minimum and pushes the whole document
   sideways below 960px. */
.location-pill {
  flex: 1 1 auto;
  min-width: 0;
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background: var(--c-primary);
  color: #FFFFFF;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px rgba(0, 135, 81, 0.2);
  transition: transform var(--transition-snappy);
}
.brand-badge:hover {
  transform: scale(1.02);
}
.brand-chat-icon {
  display: flex;
  align-items: center;
  color: #E8F7EE;
}
.brand-title {
  color: #FFFFFF;
  font-weight: 800;
}
.brand-accent {
  color: #E8F7EE;
}
.brand-badge .badge-tag {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Location Selector Pill */
.location-pill {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-text-primary);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-snappy);
  max-width: 280px;
}
.location-pill:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-sm);
}
.location-pill svg {
  color: var(--c-primary);
  flex-shrink: 0;
}
.location-pill .loc-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Role Switcher Toolbar */
.role-bar {
  display: flex;
  align-items: center;
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  padding: 4px;
  border-radius: var(--radius-sm);
  gap: 4px;
}
.role-btn {
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: all var(--transition-snappy);
  display: flex;
  align-items: center;
  gap: 5px;
}
.role-btn:hover {
  color: var(--c-text-primary);
}
.role-btn.active {
  background: var(--c-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 135, 81, 0.25);
}

/* Right Nav Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.nav-auth-pill {
  border: 1px solid var(--c-border);
  background: #FFFFFF;
  color: var(--c-text-primary);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-snappy);
  white-space: nowrap;
}
.nav-auth-pill:hover {
  border-color: var(--c-primary);
  background: #E8F7EE;
  color: var(--c-primary);
  transform: translateY(-1px);
}
.nav-auth-pill.logged-in {
  background: #E8F7EE;
  border-color: rgba(0, 135, 81, 0.25);
  color: var(--c-primary);
}
.nav-auth-pill .nav-auth-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.cart-pill-btn {
  border: none;
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  color: var(--c-text-primary);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-snappy);
  position: relative;
}
.cart-pill-btn:hover {
  border-color: var(--c-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.cart-count-badge {
  background: var(--c-primary);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  min-width: 20px;
  text-align: center;
}

.landing-link-btn {
  text-decoration: none;
  background: var(--c-bg-subtle);
  color: var(--c-accent);
  border: 1.5px solid var(--c-border);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-snappy);
}
.landing-link-btn:hover {
  background: var(--c-primary-surface);
  border-color: var(--c-accent);
}


/* -------------------------------------------------------------
   Components Specified by User Design Tokens
   ------------------------------------------------------------- */
/* Primary Button from spec */
.cta-primary-btn, .button-primary, .btn-primary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 119px;
  min-height: 48px;
  background-color: #038b5c;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-display);
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--transition-snappy), transform var(--transition-snappy);
}
.cta-primary-btn:hover, .button-primary:hover, .btn-primary:hover {
  background-color: #02734c;
}
.cta-primary-btn:disabled, .button-primary:disabled, .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Secondary Button from spec */
.action-btn-secondary, .button-secondary, .btn-secondary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 119px;
  min-height: 48px;
  background-color: transparent;
  color: #00a205;
  border: 1px solid #e7eeec;
  border-radius: 9999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-display);
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--transition-snappy), background-color var(--transition-snappy);
}
.action-btn-secondary:hover, .button-secondary:hover, .btn-secondary:hover {
  border-color: #00a205;
  background-color: #f0fdf4;
}

/* Link component from spec */
a.text-link, .link-btn {
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font-display);
  text-decoration: underline;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Card component from spec: #ffffff background, 1px solid #e5e7eb, 8px radius, 16px padding, no shadow */
.card, .food-card, .dish-card, .order-card, .stat-card, .table-card {
  box-sizing: border-box;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  box-shadow: none;
}

/* -------------------------------------------------------------
   Main App Content Area & View Switcher
   ------------------------------------------------------------- */
.main-viewport {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-16);
  padding-bottom: 100px; /* offset for bottom bar on mobile */
}

/* Role Views Visibility */
.role-view {
  display: none;
}
.role-view.active {
  display: block;
  animation: fadeInView 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fadeInView {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------
   Mobile Floating Bottom Navigation Bar
   ------------------------------------------------------------- */
.bottom-nav {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 440px;
  background: rgba(252, 250, 247, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 12px;
  z-index: 120;
}

/* `display: flex` above outranks the UA `[hidden] { display: none }` rule, so
   role switching would leave both bars on screen without this. */
.bottom-nav[hidden] {
  display: none !important;
}

/* The vendor bar carries longer labels, so it needs tighter padding and
   equal columns to keep four tabs on one row down to 320px. */
.bottom-nav[data-nav-for='vendor'] {
  gap: 2px;
}

.bottom-nav[data-nav-for='vendor'] .bottom-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 4px;
  min-height: 52px;
  font-size: 0.75rem;
  white-space: normal;
  line-height: 1.15;
}

.bottom-nav[data-nav-for='vendor'] .bottom-tab svg {
  flex: none;
}

/* The desktop vendor bar only exists from 769px up. */
.vendor-topnav {
  display: none;
}

.bottom-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--c-text-muted);
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  transition: all var(--transition-snappy);
  position: relative;
}
.bottom-tab.active {
  color: var(--c-primary);
  font-weight: 700;
}
.bottom-tab.active svg {
  transform: scale(1.1);
  color: var(--c-primary);
}
.bottom-tab svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-snappy);
}
.bottom-tab .tab-badge {
  position: absolute;
  top: 2px;
  right: 12px;
  background: var(--c-secondary);
  color: white;
  font-size: 0.62rem;
  font-weight: 800;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------
   Standard Modal Overlays & Drawers
   ------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 24, 38, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth);
  padding: var(--space-16);
}
.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-sheet {
  background: var(--c-bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform var(--transition-snappy);
}
.modal-backdrop.open .modal-sheet {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-20);
  border-bottom: 1px solid var(--c-border-subtle);
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.modal-close-btn {
  background: var(--c-bg-subtle);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: background var(--transition-snappy);
}
.modal-close-btn:hover {
  background: var(--c-border);
  color: var(--c-text-primary);
}

.modal-body {
  padding: var(--space-20);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: var(--space-16) var(--space-20);
  border-top: 1px solid var(--c-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-bg-canvas);
  gap: var(--space-12);
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 84px;
  right: var(--space-20);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--c-text-primary);
  color: var(--c-text-inverse);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  box-shadow: var(--shadow-lg);
  animation: toastSlideIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  max-width: 360px;
}
.toast.success {
  background: var(--c-primary);
}
.toast.warning {
  background: #D97706;
}
.toast.error {
  background: #DC2626;
}

@keyframes toastSlideIn {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* -------------------------------------------------------------
   Responsive Breakpoints & Mobile Enhancements
   ------------------------------------------------------------- */
@media (min-width: 769px) {
  .bottom-nav {
    display: none; /* Desktop uses top navigation bar */
  }

  /* Desktop replacement for the retired five-tab vendor subnav. */
  .vendor-topnav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin-bottom: 14px;
    background: var(--c-bg-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
  }

  .vendor-topnav[hidden] {
    display: none !important;
  }

  .vnd-topnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
  }

  .vnd-topnav-btn:hover {
    background: var(--c-primary-surface);
  }

  .vnd-topnav-btn.active {
    color: var(--c-primary);
    background: var(--c-primary-surface);
    border-color: var(--c-primary);
    font-weight: 700;
  }

  .vnd-topnav-badge {
    min-width: 20px;
    padding: 1px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--c-primary);
    border-radius: 999px;
  }

  .main-viewport {
    padding-bottom: var(--space-48);
  }
}

@media (max-width: 768px) {
  .main-viewport {
    padding: var(--space-12);
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* The desktop header rules applied here while the 640px compaction had not
     kicked in, so the bar's children (brand + location + role bar + cart +
     auth + landing link) could not fit and the whole document scrolled
     sideways. Shrinking the location pill and dropping the two controls that
     already exist in the bottom dock keeps it on one line. */
  .top-nav {
    padding: 8px 12px;
  }
  .top-nav-inner {
    gap: 8px;
    min-width: 0;
  }
  /* 0.65rem renders at 10.4px. The tag is hidden entirely below 640px, but
     between 641px and 768px it is still on screen, so lift it to a size that
     is actually readable. */
  .brand-badge .badge-tag {
    font-size: 0.75rem;
  }
  .top-nav-inner > * {
    min-width: 0;
  }
  .role-bar,
  .landing-link-btn {
    display: none;
  }
  .location-pill {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    font-size: 0.8rem;
    gap: 5px;
  }
  .location-pill .loc-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-actions {
    flex-shrink: 0;
    min-width: 0;
    gap: 6px;
  }
}

/* Tablets and small laptops: the full desktop bar needs ~884px, so between
   769px and 959px it still overflowed. The Waitlist link is the only item
   that can go without losing function (it is not in the bottom dock at this
   width), and the address is allowed to shrink. */
@media (min-width: 769px) and (max-width: 959px) {
  .landing-link-btn {
    display: none;
  }
  .top-nav {
    padding: 10px 16px;
  }
  .location-pill {
    max-width: 220px;
    font-size: 0.8rem;
  }
  .badge-tag {
    font-size: 0.75rem;
  }
}

@media (max-width: 640px) {
  .top-nav {
    padding: 8px 12px;
  }
  .top-nav-inner {
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .brand-badge {
    padding: 6px 10px;
    font-size: 0.88rem;
    font-weight: 800;
    gap: 3px;
    flex-shrink: 0;
    box-shadow: none;
    border-radius: var(--radius-pill);
  }
  .brand-badge .badge-tag {
    display: none; /* Hide "Marketplace" tag on mobile to save space */
  }

  .role-bar {
    display: none; /* Handled via bottom dock on mobile */
  }

  .location-pill {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding: 7px 10px;
    font-size: 0.78rem;
    gap: 5px;
    border-radius: var(--radius-pill);
    overflow: hidden;
  }
  .location-pill .loc-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
    font-weight: 600;
  }
  .location-pill svg:first-child {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .location-pill svg:last-child {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    opacity: 0.6;
  }

  .nav-actions {
    gap: 6px;
    flex-shrink: 0;
  }

  .nav-auth-pill {
    padding: 6px 10px;
    font-size: 0.78rem;
    gap: 4px;
  }

  .desktop-only-btn {
    display: none !important; /* Orders is in bottom dock on mobile */
  }

  .cart-pill-btn {
    padding: 6px 10px;
    font-size: 0.78rem;
    gap: 4px;
    border-width: 1px;
    box-shadow: none;
  }
  .cart-pill-btn svg {
    width: 16px;
    height: 16px;
  }
  .desktop-only-text {
    display: none; /* Hide "Orders" text on mobile */
  }
  .cart-count-badge {
    font-size: 0.65rem;
    padding: 1px 4px;
    min-width: 16px;
  }

  .landing-link-btn {
    display: none; /* Keep header clean on small mobile */
  }

  /* Bottom Dock on Mobile */
  .bottom-nav {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 16px);
    max-width: 390px;
    padding: 6px 4px;
  }
  .bottom-tab {
    padding: 4px 6px;
    font-size: 0.62rem;
    gap: 2px;
  }
  .bottom-tab svg {
    width: 18px;
    height: 18px;
  }

  /* Mobile Bottom Sheet Modal Transition */
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal-sheet {
    max-width: 100%;
    max-height: 88vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    transform: translateY(100%);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
  }
  .modal-backdrop.open .modal-sheet {
    transform: translateY(0);
  }

  .modal-header {
    padding: 16px;
  }
  .modal-title {
    font-size: 1.1rem;
  }
  .modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .modal-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .toast-container {
    left: var(--space-12);
    right: var(--space-12);
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 360px) {
  .top-nav {
    padding: 6px 6px;
  }
  .top-nav-inner {
    gap: 5px;
  }
  .brand-badge {
    padding: 5px 7px;
    font-size: 0.8rem;
  }
  .location-pill {
    padding: 5px 6px;
    font-size: 0.78rem;
    gap: 3px;
  }
  .location-pill svg:last-child {
    display: none; /* Hide chevron on tiny screens */
  }
  .nav-auth-pill {
    padding: 5px 7px;
    font-size: 0.72rem;
  }
  .cart-pill-btn {
    padding: 5px 7px;
  }
  .bottom-tab span:not(.tab-badge) {
    font-size: 0.58rem;
  }
}

/* =============================================================
   TOUCH TARGETS & LEGIBILITY ON SMALL SCREENS
   Every control a finger has to hit is grown to at least 44x44
   (Apple HIG / WCAG 2.5.5) and all body copy is kept at >= 12px
   so nothing relies on zooming to be read.
   ============================================================= */
@media (max-width: 768px) {
  .brand-badge,
  .nav-auth-pill,
  .cart-pill-btn,
  .location-pill {
    min-height: 44px;
  }
  .cart-pill-btn {
    min-width: 44px;
    justify-content: center;
  }

  .modal-close-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  /* Bottom dock: 3 tabs were rendering ~33px wide with 10px labels */
  .bottom-tab {
    flex: 1 1 0;
    min-width: 56px;
    min-height: 52px;
    justify-content: center;
    font-size: 0.75rem;
  }
  .bottom-tab span:not(.tab-badge) {
    font-size: 0.75rem;
  }
  .bottom-tab .tab-badge,
  .cart-count-badge {
    font-size: 0.72rem;
  }
}

/* Touch-device sizing for the remaining controls lives at the very end of this
   stylesheet, so these declarations win over the base rules above. */

/* On a 375px screen the header had to share 351px between the wordmark, the
   address and the account button, which left the address showing ~28% of its
   text. Trimming the two flanking controls (and dropping the pin icon, since
   the pill is self-evidently a location) hands that space back to the
   address, which is the only part that changes as the user moves around. */
@media (max-width: 480px) {
  .top-nav-inner {
    gap: 6px;
  }
  .brand-badge {
    padding: 6px 8px;
    font-size: 0.8rem;
  }
  .location-pill {
    padding: 6px 8px;
  }
  .location-pill svg:first-child {
    display: none;
  }
  .nav-auth-pill {
    padding: 6px 8px;
  }
  .nav-auth-label {
    display: none;
  }
  .nav-auth-pill {
    min-width: 44px;
    justify-content: center;
  }
}

/* =============================================================
   AUTHENTICATION & ACCOUNT MODALS STYLES
   ============================================================= */
.auth-modal-sheet {
  max-width: 440px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.auth-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-back-nav-btn {
  border: none;
  background: var(--c-bg-subtle);
  color: var(--c-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-snappy);
}
.auth-back-nav-btn:hover {
  background: var(--c-primary-light);
  color: var(--c-primary-dark);
}

.auth-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-logo-badge {
  background: var(--c-primary);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: -0.02em;
}

.auth-modal-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-vendor-callout {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border-subtle);
  text-align: center;
  font-size: 0.85rem;
  color: var(--c-text-secondary);
}

.auth-vendor-link {
  background: none;
  border: none;
  color: var(--c-primary);
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 4px;
  font-size: 0.85rem;
}
.auth-vendor-link:hover {
  color: var(--c-accent);
}

.auth-use-location-btn {
  border: none;
  background: transparent;
  color: var(--c-primary);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.auth-use-location-btn:hover {
  text-decoration: underline;
}

.auth-store-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 440px) {
  .auth-store-type-grid {
    grid-template-columns: 1fr;
  }
}

.auth-type-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: #FFFFFF;
  transition: all var(--transition-snappy);
}
.auth-type-card:hover {
  border-color: var(--c-primary);
}
.auth-type-card.selected {
  border-color: var(--c-primary);
  background: #F0FDF4;
  box-shadow: 0 0 0 1px var(--c-primary);
}
.auth-type-card .type-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.auth-type-card strong {
  display: block;
  font-size: 0.84rem;
  color: var(--c-text-primary);
  margin-bottom: 2px;
}
.auth-type-card small {
  display: block;
  font-size: 0.72rem;
  color: var(--c-text-muted);
  line-height: 1.3;
}

.auth-upload-dropzone {
  border: 2px dashed var(--c-border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  background: var(--c-bg-subtle);
  cursor: pointer;
  transition: all var(--transition-snappy);
  position: relative;
  overflow: hidden;
}
.auth-upload-dropzone:hover {
  border-color: var(--c-primary);
  background: #F0FDF4;
}
.auth-dropzone-icon {
  font-size: 1.8rem;
  margin-bottom: 4px;
  line-height: 1;
}
.auth-dropzone-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-text-primary);
}
.auth-dropzone-hint {
  font-size: 0.72rem;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.auth-photo-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auth-photo-preview-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
}

.auth-tabs-bar {
  display: flex;
  padding: 6px;
  background: var(--c-bg-subtle);
  border-bottom: 1px solid var(--c-border-subtle);
  gap: 6px;
}

.auth-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: all var(--transition-snappy);
  text-align: center;
}

.auth-tab-btn:hover {
  color: var(--c-text-primary);
}

.auth-tab-btn.active {
  background: #FFFFFF;
  color: var(--c-primary);
  box-shadow: var(--shadow-xs);
  font-weight: 800;
}

.auth-modal-body {
  padding: 22px 24px;
}

.auth-panel-intro {
  margin-bottom: 18px;
}

.auth-heading {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--c-text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.auth-subheading {
  font-size: 0.84rem;
  color: var(--c-text-secondary);
  margin: 0;
  line-height: 1.45;
}

.auth-alert {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-alert.error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
}

.auth-alert.success {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #16A34A;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 12px;
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.8;
}

.auth-input {
  width: 100%;
  padding-left: 38px !important;
}

.auth-pw-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.auth-pw-toggle:hover {
  opacity: 1;
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.auth-forgot-link {
  font-size: 0.78rem;
  color: var(--c-primary);
  text-decoration: none;
  font-weight: 700;
}

.auth-forgot-link:hover {
  text-decoration: underline;
}

.auth-submit-btn {
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Google Auth Button & Divider */
.auth-google-cta-btn {
  width: 100%;
  padding: 12px 16px;
  background: #ffffff;
  color: #374151;
  border: 1.5px solid #D1D5DB;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.18s ease;
  margin-top: 14px;
}
.auth-google-cta-btn:hover {
  background: #F9FAFB;
  border-color: #9CA3AF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.auth-google-cta-btn.secondary {
  margin-top: 12px;
  background: #FAFAFA;
}
.auth-or-divider {
  display: flex;
  align-items: center;
  margin: 18px 0 14px 0;
  text-align: center;
}
.auth-or-divider::before,
.auth-or-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #E5E7EB;
}
.auth-or-divider span {
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.auth-quick-demo {
  margin-top: 14px;
  padding: 10px 12px;
  background: #F9FAFB;
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  color: var(--c-text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.demo-tag {
  background: var(--c-primary-light);
  color: var(--c-primary-dark);
  font-weight: 800;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.demo-fill-btn {
  border: none;
  background: transparent;
  color: var(--c-primary);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 0.78rem;
}

.auth-switch-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--c-text-secondary);
}

.auth-switch-link {
  border: none;
  background: transparent;
  color: var(--c-primary);
  font-weight: 800;
  cursor: pointer;
  padding: 0 4px;
  text-decoration: underline;
}

.auth-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .auth-dual-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.auth-role-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.auth-role-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: #FFFFFF;
  transition: all var(--transition-snappy);
}

.auth-role-option:hover {
  border-color: var(--c-primary);
}

.auth-role-option.selected {
  border-color: var(--c-primary);
  background: #F0FDF4;
}

.auth-role-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--c-primary);
}

.auth-role-option .role-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.auth-role-option strong {
  display: block;
  font-size: 0.82rem;
  color: var(--c-text-primary);
}

.auth-role-option small {
  display: block;
  font-size: 0.72rem;
  color: var(--c-text-muted);
  line-height: 1.25;
}

/* Account Profile Card Modal */
.account-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #F9FAFB;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  margin-bottom: 20px;
}

.account-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #FFFFFF;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(12, 81, 63, 0.2);
  flex-shrink: 0;
}

.account-details {
  flex: 1;
  min-width: 0;
}

.account-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 2px;
  color: var(--c-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-contact {
  font-size: 0.78rem;
  color: var(--c-text-secondary);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.account-badge.customer {
  background: #E8F6F0;
  color: var(--c-primary);
}

.account-badge.vendor {
  background: #FEF3C7;
  color: #B45309;
}

.account-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-snappy);
  width: 100%;
}

.account-menu-item:hover {
  border-color: var(--c-primary);
  background: #F9FAFB;
  transform: translateX(2px);
}

.account-menu-item .item-icon {
  font-size: 1.25rem;
}

.account-menu-item .item-text {
  flex: 1;
}

.account-menu-item .item-text strong {
  display: block;
  font-size: 0.86rem;
  color: var(--c-text-primary);
}

.account-menu-item .item-text small {
  display: block;
  font-size: 0.74rem;
  color: var(--c-text-muted);
}

.account-menu-item .item-arrow {
  color: var(--c-text-muted);
  font-weight: 700;
  font-size: 0.9rem;
}

.account-edit-toggle-btn:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

.account-logout-wrap {
  border-top: 1px solid var(--c-border-subtle);
  padding-top: 16px;
}

.account-logout-btn {
  width: 100%;
  padding: 11px;
  border-radius: var(--radius-md);
  border: 1.5px solid #FCA5A5;
  background: #FEF2F2;
  color: #DC2626;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition-snappy);
}

.account-logout-btn:hover {
  background: #FEE2E2;
  border-color: #EF4444;
}

/* -------------------------------------------------------------
   High-Priority Alert / Error Popup Modal
   ------------------------------------------------------------- */
.auth-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 16, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-popup-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.auth-popup-card {
  background: #fafafa;
  border: 2px solid #00B978;
  border-radius: 24px;
  padding: 26px 22px 22px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 24px 48px -12px rgba(12, 81, 63, 0.38), 0 0 0 1px rgba(0, 0, 0, 0.06);
  text-align: center;
  transform: translateY(16px) scale(0.94);
  transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.auth-popup-backdrop.open .auth-popup-card {
  transform: translateY(0) scale(1);
}

.auth-popup-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #FFFBEB;
  border: 2px solid #FDE68A;
  color: #D97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 14px;
}

.auth-popup-title {
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 800;
  color: #00a205;
  margin: 0 0 8px 0;
}

.auth-popup-message {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.5;
  margin: 0 0 20px 0;
  font-weight: 600;
  word-break: break-word;
}

.auth-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-popup-btn {
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.18s ease;
}

.auth-popup-btn.primary {
  background: #00a205;
  color: #fafafa;
}

.auth-popup-btn.primary:hover {
  background: #00B978;
  color: #00a205;
}

.auth-popup-btn-upload {
  background: #00B978;
  color: #00a205;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 185, 120, 0.35);
}

.auth-popup-btn-upload:hover {
  background: #009863;
  color: #ffffff;
}

.auth-popup-btn-dismiss {
  background: #E2E8F0;
  color: #475569;
  font-weight: 600;
}

.auth-popup-btn-dismiss:hover {
  background: #CBD5E1;
  color: #1E293B;
}

/* =============================================================
   TOUCH DEVICE SIZING (placed last so it overrides the base rules)
   Kept out of the width-based blocks above because tablets and other coarse
   pointers need these targets even when the viewport is wide.
   ============================================================= */
@media (pointer: coarse) {
  /* min-* rather than width/height: flex items are otherwise free to shrink
     below the target when the row is tight. */
  .modal-close-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  /* Text-styled buttons with no padding were only as tall as their line box. */
  .auth-vendor-link,
  .demo-fill-btn,
  .auth-use-location-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
  }

  .demo-tag,
  .account-badge {
    font-size: 0.75rem;
  }

  /* 0.74rem renders at 11.8px, just under comfortable reading size */
  .account-menu-item .item-text strong,
  .account-menu-item .item-text small {
    font-size: 0.8rem;
  }

  /* The header bar keeps its desktop proportions above 768px, which left the
     brand, address, auth and cart at 40-42px. They are the primary navigation
     on a touch tablet, so they get the same minimum as the controls below. */
  .brand-badge,
  .location-pill,
  .nav-auth-pill,
  .cart-pill-btn,
  .landing-link-btn {
    min-height: 44px;
  }
  .cart-pill-btn {
    min-width: 44px;
  }

  /* 0.65rem renders at 10.4px, which is not readable at any size. */
  .brand-badge .badge-tag {
    font-size: 0.75rem;
  }
}

/* -------------------------------------------------------------
   Mandatory Vendor Password Change Modal (Top Stacking Context)
   ------------------------------------------------------------- */
#vendor-first-setup-modal,
#vendor-first-setup-modal.modal-backdrop,
.vendor-password-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#vendor-first-setup-modal.open,
#vendor-first-setup-modal.modal-backdrop.open,
.vendor-password-overlay.open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.vendor-password-sheet {
  transform: translateY(20px) scale(0.96);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#vendor-first-setup-modal.open .vendor-password-sheet,
#vendor-first-setup-modal.modal-backdrop.open .vendor-password-sheet,
.vendor-password-overlay.open .vendor-password-sheet {
  transform: translateY(0) scale(1) !important;
}

body.vendor-password-locked {
  overflow: hidden !important;
  touch-action: none !important;
}