/* ============================================
   MIMINO — Site v2 (design_handoff_site_v2)
   App-like screens: home, menu, checkout, booking, success.
   Everything is scoped under body.v2-page; the file is loaded
   after page CSS so it wins over legacy rules.
   Tokens come from variables.css only.
   ============================================ */

body.v2-page {
  --v2-search-h: 56px;
  --v2-card-border: rgba(255, 255, 255, 0.06);
  --v2-input-border: rgba(255, 255, 255, 0.1);
  --v2-gold-shadow: 0 10px 30px rgba(210, 168, 87, 0.3);
}

/* --- Legacy chrome off on v2 screens ----------------------- */

/* Off at every width: v2 brings its own hero and page header, so the
   legacy header bar and the phone-only chrome would only duplicate it. */
body.v2-page .header-container,
body.v2-page .mobile-tabbar,
body.v2-page .call-fab,
body.v2-page .quick-modal,
body.v2-page .scroll-progress,
body.v2-page .scroll-to-top {
  display: none !important;
}

/* Nav and footer are switched off on phones only. The markup stays in the
   DOM on every v2 screen, so the desktop layer at the end of this file
   simply lets it render again at >=900px, where there is room for real
   site chrome — no template change, no !important battle. */
@media (max-width: 899.98px) {
  body.v2-page .main-nav,
  body.v2-page .nav-scrim,
  body.v2-page footer {
    display: none !important;
  }
}

body.v2-page .container {
  max-width: 800px;
  padding: 0;
  text-align: start;
}

/* ============================================
   Shared v2 primitives
   ============================================ */

/* Page header: brand left, status/actions right */
.v2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 10px;
}

.v2-brand {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-gold);
  text-decoration: none;
  white-space: nowrap;
}

.v2-brand:hover { color: var(--brand-gold-light); }

.v2-brand .fa-chevron-left {
  font-size: 13px;
  color: var(--text-muted);
}

html[dir="rtl"] .v2-brand .fa-chevron-left { transform: scaleX(-1); }

.v2-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.v2-open-status {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-open-status .fa-clock,
.v2-open-status .far { color: var(--text-muted); }

.v2-open-status.is-open .fa-clock,
.v2-open-status.is-open .far { color: var(--success); }

/* Section-card (checkout/booking blocks, footer card, zones) */
.v2-card {
  background: var(--bg-secondary);
  border: 1px solid var(--v2-card-border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}

.v2-card-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.v2-card-label i { color: var(--brand-gold); }

/* Primary gold CTA */
.v2-cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 15px;
  border: none;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: var(--gradient-gold);
  color: #1F1B18;
  box-shadow: var(--v2-gold-shadow);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.v2-cta:hover {
  color: #1F1B18;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(210, 168, 87, 0.4);
}

.v2-cta:disabled { opacity: 0.6; cursor: not-allowed; }

/* Secondary (dark chip) button */
.v2-btn-ghost {
  display: inline-block;
  background: var(--bg-tertiary);
  border: 1px solid var(--v2-input-border);
  color: var(--brand-gold);
  border-radius: 12px;
  padding: 11px 22px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}

.v2-btn-ghost:hover { color: var(--brand-gold-light); }

/* Inputs (16px = no iOS zoom) */
.v2-input {
  box-sizing: border-box;
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--v2-input-border);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  min-height: 44px;
}

.v2-input::placeholder { color: var(--text-muted); }

.v2-input:focus { border-color: rgba(210, 168, 87, 0.5); }

/* Money — never wraps */
.v2-money { white-space: nowrap; }

/* Phone link */
.v2-tel {
  color: var(--brand-gold);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.v2-tel:hover { color: var(--brand-gold-light); }

/* Unified toast (restyle of the legacy #siteToast) */
body.v2-page .site-toast {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(100px + var(--safe-bottom));
  transform: translateX(-50%) translateY(8px);
  width: max-content;
  max-width: min(430px, calc(100vw - 28px));
  background: var(--bg-tertiary);
  border: 1px solid rgba(210, 168, 87, 0.35);
  border-radius: 12px;
  padding: 11px 14px;
  font: 400 13px var(--font-body);
  text-align: center;
  color: var(--text-primary);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  justify-content: center;
}

body.v2-page .site-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: none;
}

body.v2-page .site-toast .check,
body.v2-page .site-toast .cart-drawer-trigger {
  display: none;
}

/* ============================================
   Cart pill (page header) + floating cart bar
   ============================================ */

.v2-cart-pill {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid rgba(210, 168, 87, 0.4);
  border-radius: 9999px;
  padding: 7px 13px;
  min-height: 34px;
  cursor: pointer;
  color: var(--text-primary);
  font: 700 12.5px var(--font-body);
}

.v2-cart-pill .fa-shopping-basket {
  color: var(--brand-gold);
  font-size: 14px;
}

.v2-pill-total { white-space: nowrap; }

.v2-pill-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -4px;
  background: var(--brand-gold);
  color: #1F1B18;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  padding: 1px 6px;
}

.v2-pill-badge[hidden] { display: none; }

.v2-cart-bar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(14px + var(--safe-bottom));
  z-index: var(--z-fab);
  background: var(--gradient-gold);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: var(--v2-gold-shadow);
  text-decoration: none;
}

.v2-cart-bar[hidden] { display: none; }

.v2-cart-bar-left,
.v2-cart-bar-right {
  font-size: 14px;
  font-weight: 700;
  color: #1F1B18;
  white-space: nowrap;
}

html[dir="rtl"] .v2-cart-bar .fa-arrow-right { transform: scaleX(-1); }

@media (min-width: 769px) {
  .v2-cart-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 28px));
    box-sizing: border-box;
  }
}

/* Плавающие фичи (FAQ-бот, a11y) приподняты над баром корзины */
body.v2-page #faq-bot-widget,
body.v2-page .a11y-fab {
  bottom: calc(84px + var(--safe-bottom));
}

body.v2-page .a11y-panel {
  bottom: calc(148px + var(--safe-bottom));
}

/* ============================================
   Compact dish card (menu + home featured)
   ============================================ */

.v2-dish {
  position: relative;
  display: flex;
  gap: 11px;
  background: var(--bg-secondary);
  border: 1px solid var(--v2-card-border);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 9px;
}

/* `display: flex` above is an author rule, so it beats the UA sheet's
   `[hidden] { display: none }`. The menu search hides non-matching cards
   with `card.hidden = true`, so without this they stay on screen. */
.v2-dish[hidden] { display: none; }

.v2-dish--featured { border-color: rgba(210, 168, 87, 0.25); }

.v2-dish-photo {
  flex: none;
  width: 74px;
  height: 74px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-tertiary);
  display: block;
  cursor: zoom-in;
}

.v2-dish-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v2-dish-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.v2-dish-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
}

.v2-dish-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.35;
  margin: 2px 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.v2-dish-desc.is-clamped { cursor: pointer; }

.v2-dish-desc.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.v2-dish-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.v2-dish-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-gold);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-dish-meta {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Round gold "+" (36px visual, 44px hit area) */
.v2-add-form { margin: 0; flex: none; }

.v2-add-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: none;
  background: var(--gradient-gold);
  color: #1F1B18;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.v2-add-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
}

.v2-add-btn:hover:not(:disabled) { transform: scale(1.06); }

.v2-add-btn:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
}

/* Stepper pill (− qty +) */
.v2-stepper {
  flex: none;
  display: flex;
  align-items: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--v2-input-border);
  border-radius: 9999px;
}

.v2-stepper[hidden] { display: none; }

.v2-step-btn {
  position: relative;
  width: 34px;
  height: 32px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.v2-step-btn::after {
  content: '';
  position: absolute;
  inset: -6px -2px;
}

.v2-step-dec { color: var(--error); }
.v2-step-inc { color: var(--success); }

.v2-step-qty {
  min-width: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
}

/* Unavailable dish — photo/description stay viewable */
body.v2-page .v2-dish.dish-unavailable {
  opacity: 0.45;
  pointer-events: none;
}

body.v2-page .v2-dish.dish-unavailable::after { display: none; }

body.v2-page .v2-dish.dish-unavailable .dish-image-link,
body.v2-page .v2-dish.dish-unavailable .v2-dish-desc,
body.v2-page .v2-dish.dish-unavailable .v2-add-btn {
  pointer-events: auto;
}

body.v2-page .v2-dish.dish-unavailable:hover {
  transform: none;
  box-shadow: none;
}

/* ============================================
   Home screen
   ============================================ */

.v2-home {
  padding: 0 16px 130px;
}

.v2-home .v2-head { padding-inline: 0; }

.v2-hero {
  background: linear-gradient(160deg, #201C19, #171412);
  border: 1px solid var(--v2-card-border);
  border-radius: 20px;
  padding: 26px 20px;
  text-align: center;
  margin-bottom: 12px;
}

.v2-hero-photo {
  height: 130px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-tertiary);
  margin-bottom: 18px;
}

.v2-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v2-hero-title {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

.v2-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 10px 0 18px;
}

.v2-hero-note {
  font-size: 11px;
  color: var(--text-muted);
  margin: 10px 0 0;
}

html[dir="rtl"] .v2-hero .fa-arrow-right,
html[dir="rtl"] .v2-quick .fa-arrow-right { transform: scaleX(-1); }

.v2-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.v2-quick {
  display: block;
  background: var(--bg-secondary);
  border: 1px solid var(--v2-card-border);
  border-radius: 14px;
  padding: 13px 8px;
  text-align: center;
  text-decoration: none;
  min-height: 44px;
}

.v2-quick > i {
  font-size: 19px;
  color: var(--brand-gold);
}

.v2-quick-name {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 6px;
}

.v2-quick-sub {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
}

.v2-zone-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 4px 0;
}

.v2-zone-cities { min-width: 0; }

.v2-zone-fee {
  color: var(--brand-gold);
  font-weight: 700;
  flex: none;
}

.v2-zone-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

.v2-featured-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 16px 0 10px;
}

.v2-home-footer {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.v2-home-footer .v2-foot-row i {
  color: var(--brand-gold);
  width: 18px;
  display: inline-block;
}

.v2-home-footer a:not(.v2-tel) {
  color: inherit;
  text-decoration: none;
}

.v2-foot-utils {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 11px;
}

.v2-lang-switch {
  display: flex;
  gap: 4px;
  margin: 0;
}

.v2-lang-switch button {
  background: none;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: var(--text-muted);
  font-size: 11px;
  padding: 6px 10px;
  cursor: pointer;
  min-height: 32px;
}

.v2-lang-switch button.active {
  color: var(--brand-gold);
  border-color: rgba(210, 168, 87, 0.4);
}

.v2-foot-orders {
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 0;
}

.v2-foot-orders:hover { color: var(--brand-gold); }

/* ============================================
   Menu screen
   ============================================ */

.v2-menu { padding: 0 0 130px; }

/* Sticky search (the only sticky part of the header area) */
.v2-search-wrap {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-primary);
  padding: 6px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.v2-search {
  box-sizing: border-box;
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  padding: 9px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  min-height: 40px;
}

.v2-search::placeholder { color: var(--text-muted); }

.v2-search:focus { border-color: rgba(210, 168, 87, 0.4); }

/* Two-column layout: category rail + dish list */
.v2-menu-layout {
  display: flex;
  align-items: flex-start;
}

.v2-rail {
  flex: none;
  width: 102px;
  box-sizing: border-box;
  position: sticky;
  top: var(--v2-search-h);
  max-height: calc(100vh - var(--v2-search-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-block: 12px;
  padding-inline: 10px 4px;
}

.v2-rail-item {
  display: block;
  padding: 9px 8px;
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--text-secondary);
  text-decoration: none;
  border-inline-start: 3px solid transparent;
  cursor: pointer;
  word-break: break-word;
}

.v2-rail-item:hover { color: var(--brand-gold-light); }

.v2-rail-item.active {
  background: var(--bg-secondary);
  color: var(--brand-gold);
  border-inline-start-color: var(--brand-gold);
  font-weight: 700;
}

/* While a search query is active, no rail item is "current" */
body.v2-searching .v2-rail-item.active {
  background: transparent;
  color: var(--text-secondary);
  border-inline-start-color: transparent;
  font-weight: 400;
}

.v2-dish-col {
  flex: 1;
  min-width: 0;
  padding-block: 12px 0;
  padding-inline: 6px 14px;
}

.v2-section {
  scroll-margin-top: calc(var(--v2-search-h) + 8px);
}

.v2-section[hidden] { display: none; }

.v2-cat-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 10px 0 10px;
}

.v2-section:first-of-type .v2-cat-title { margin-top: 2px; }

.v2-no-results {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 0;
  font-size: 13px;
}

.v2-no-results[hidden] { display: none; }

/* Desktop: same blocks centered (container is capped at 800px),
   the rail widens so full category names fit */
@media (min-width: 769px) {
  .v2-rail { width: 170px; }
  .v2-rail-item { font-size: 12.5px; padding: 10px 12px; }
  .v2-dish-col { padding-inline: 10px 0; }
}

/* ============================================
   Checkout screen (+ booking shares primitives)
   ============================================ */

.v2-checkout { padding: 10px 16px 40px; }

.v2-head--sub {
  justify-content: flex-start;
  gap: 10px;
  padding: 2px 0 14px;
}

.v2-back {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--bg-secondary);
  border: 1px solid var(--v2-input-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gold);
  text-decoration: none;
}

html[dir="rtl"] .v2-back .fa-chevron-left { transform: scaleX(-1); }

.v2-screen-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* Segmented controls (delivery/pickup, cash/card, asap/scheduled) */
.v2-seg { display: flex; gap: 7px; }

.v2-seg-btn {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 11px 4px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 44px;
}

.v2-seg-btn.active {
  background: var(--gradient-gold);
  color: #1F1B18;
  border-color: transparent;
}

.v2-seg--small { margin-top: 11px; }

.v2-seg--small .v2-seg-btn { font-size: 12.5px; padding: 9px 4px; min-height: 44px; }

.v2-field-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 7px;
}

/* Одноразовые приборы: чекбокс + степпер «на сколько человек» */
.v2-cutlery-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 44px;
}

.v2-cutlery-check {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--brand-gold);
  cursor: pointer;
}

.v2-cutlery-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-cutlery-label .fa-utensils { color: var(--brand-gold); }

.v2-cutlery-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}

.v2-cutlery-count[hidden] { display: none; }

.v2-cutlery-count .v2-field-hint { margin-top: 0; }

#v2DeliveryFields .v2-field-hint:first-child { margin: 11px 0 7px; }

.v2-hint-verified { color: var(--success); }

.v2-city-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 2px;
}

.v2-city {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--v2-card-border);
  background: var(--bg-tertiary);
  min-height: 44px;
}

.v2-city-name {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-city-fee {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-gold);
  flex: none;
}

.v2-city.active {
  background: rgba(210, 168, 87, 0.12);
  border-color: rgba(210, 168, 87, 0.5);
}

.v2-city.active .v2-city-name { color: var(--text-primary); }

.v2-row { display: flex; gap: 6px; margin-top: 8px; }

.v2-row .v2-input { min-width: 0; }

.v2-grow-1 { flex: 1; }

.v2-street-wrap { position: relative; flex: 2; min-width: 0; }

.v2-autocomplete {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  inset-inline: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--v2-input-border);
  border-radius: 10px;
  max-height: 220px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.v2-autocomplete.active { display: block; }

.v2-autocomplete-item {
  padding: 11px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.v2-autocomplete-item:hover,
.v2-autocomplete-item.selected {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.v2-pickup-line {
  margin-top: 11px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.v2-pickup-line i { color: var(--brand-gold); }

.v2-slot { margin-top: 8px; }

.v2-slot[hidden] { display: none; }

.v2-stack { margin-bottom: 6px; }

.v2-phone-wrap { position: relative; display: flex; align-items: center; gap: 6px; }

.v2-phone-wrap .v2-input { flex: 1; }

.v2-phone-check {
  position: absolute;
  inset-inline-end: 76px;
  color: var(--success);
  pointer-events: none;
}

.v2-phone-check[hidden] { display: none; }

.v2-phone-edit {
  flex: none;
  background: none;
  border: none;
  color: var(--brand-gold);
  font-size: 11px;
  cursor: pointer;
  padding: 12px 6px;
}

.v2-phone-edit[hidden] { display: none; }

textarea.v2-input { resize: vertical; min-height: 56px; }

.v2-summary { margin-bottom: 12px; }

.v2-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 2px 0;
}

.v2-sum-row[hidden] { display: none; }

.v2-sum-total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-gold);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 7px;
  padding-top: 8px;
}

.v2-sum-eta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
}

.v2-closed-note {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  border-color: rgba(217, 106, 106, 0.35);
}

.v2-closed-note i { color: var(--warning); }

/* Inline SMS card */
.v2-sms-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(210, 168, 87, 0.4);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  animation: v2PopIn 0.25s ease;
}

.v2-sms-card[hidden] { display: none; }

@keyframes v2PopIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: none; }
}

.v2-sms-note {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.v2-sms-note i { color: var(--brand-gold); }

.v2-sms-note span { color: var(--text-primary); font-weight: 600; }

.v2-code-input {
  box-sizing: border-box;
  width: 190px;
  max-width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 10px;
  color: var(--text-primary);
  font-size: 26px;
  letter-spacing: 8px;
  text-align: center;
  outline: none;
  direction: ltr;
}

.v2-code-input:focus { border-color: rgba(210, 168, 87, 0.5); }

.v2-sms-error {
  color: var(--error);
  font-size: 12px;
  margin-top: 8px;
}

.v2-sms-error[hidden] { display: none; }

.v2-sms-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 9px;
}

.v2-resend {
  background: none;
  border: none;
  color: var(--brand-gold);
  font-size: 11px;
  cursor: pointer;
  padding: 6px 2px;
}

.v2-resend:disabled { color: var(--text-muted); cursor: default; }

#v2Confirm[hidden] { display: none; }

/* ============================================
   Booking screen (chips, date row, slot grid)
   ============================================ */

.v2-chip {
  box-sizing: border-box;
  padding: 10px 4px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--v2-card-border);
  min-height: 44px;
}

.v2-chip.active {
  background: var(--gradient-gold);
  color: #1F1B18;
  border-color: transparent;
}

.v2-chip--disabled {
  color: rgba(142, 131, 116, 0.55);
}

.v2-guests-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.v2-date-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.v2-date-row::-webkit-scrollbar { display: none; }

.v2-date-chip {
  flex: none;
  padding: 9px 13px;
  font-size: 12.5px;
  white-space: nowrap;
}

.v2-date-other {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  padding: 9px 13px;
  font-size: 12.5px;
}

.v2-date-other input[type="date"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
}

.v2-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.v2-slot-chip {
  font-size: 12.5px;
  padding: 10px 4px;
  min-height: 44px;
}

.v2-slot-busy {
  text-decoration: line-through;
  color: rgba(142, 131, 116, 0.55);
}

.v2-slots-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 14px 0;
}

.v2-bk-details {
  text-align: start;
  margin: 16px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.9;
}

.v2-bk-row i {
  color: var(--brand-gold);
  width: 20px;
  display: inline-block;
}

/* ============================================
   Order success screen
   ============================================ */

.v2-success {
  padding: 40px 20px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.v2-success-circle {
  width: 74px;
  height: 74px;
  border-radius: 9999px;
  background: var(--gradient-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px auto 18px;
  color: #1F1B18;
  font-size: 36px;
  animation: v2PopIn 0.3s ease;
}

.v2-success-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.v2-success-note {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 8px 0 0;
  line-height: 1.5;
}

.v2-success-summary {
  margin: 18px 0;
  text-align: start;
}

.v2-sum-item-name { min-width: 0; }

.v2-sum-item-val {
  color: var(--text-primary);
  flex: none;
}

.v2-success-accepted {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: center;
  font-size: 12px;
  color: var(--success);
  line-height: 1.5;
  padding: 0 10px;
  margin: 0;
}

.v2-success-accepted i { margin-top: 2px; }

.v2-success-accepted span { text-align: start; }

.v2-success-actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.v2-success-orders-link {
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
  padding: 6px;
}

.v2-success-orders-link:hover { color: var(--brand-gold); }

.v2-receipt {
  text-align: start;
  margin: 0 0 18px;
}

.v2-receipt-link {
  display: inline-block;
  margin-top: 10px;
}

.v2-receipt-email { margin-top: 10px; }

.v2-receipt-email summary {
  cursor: pointer;
  color: var(--brand-gold);
  font-size: 13px;
  font-weight: 600;
}

.v2-receipt-email form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.v2-receipt-email input[type="email"] {
  flex: 1;
  min-width: 200px;
  width: auto;
}

.v2-receipt-send {
  display: inline-block;
  width: auto;
  padding: 11px 18px;
  font-size: 13px;
}

.sr-only-label {
  position: absolute;
  left: -9999px;
}

/* ============================================
   Desktop layer (>= 900px)

   The screens above are phone-first: legacy chrome is switched off and
   the container is capped at 800px, so on a monitor the page rendered as
   a narrow app column with no site navigation. Everything below only
   widens that for real desktop widths — no rule here changes what a
   phone sees, and no template markup was needed: the nav and footer are
   already in the DOM on every v2 screen.
   ============================================ */
@media (min-width: 900px) {
  /* Search bar grows, so the sticky offsets that depend on it follow. */
  body.v2-page { --v2-search-h: 73px; }

  /* --- Shell ------------------------------------------------ */
  body.v2-page .container {
    max-width: 1320px;
    padding-inline: 24px;
  }

  /* Forms and confirmations stay a readable single column — a 1180px
     wide checkout is worse than the phone one, not better. */
  body.v2-checkout-screen .container,
  body.v2-booking-screen .container,
  body.v2-booking-success-screen .container,
  body.v2-success-screen .container {
    max-width: 760px;
  }

  /* The nav carries the logo now, so the in-page brand would repeat it. */
  body.v2-page .v2-head .v2-brand { display: none; }
  body.v2-page .v2-head { padding-block: 18px 12px; }

  /* --- Menu screen ------------------------------------------ */
  .v2-search-wrap {
    top: var(--nav-height);
    padding: 14px 0;
  }

  .v2-search {
    min-height: 44px;
    max-width: 460px;
  }

  .v2-rail {
    width: 210px;
    top: calc(var(--nav-height) + var(--v2-search-h));
    max-height: calc(100vh - var(--nav-height) - var(--v2-search-h));
    padding-inline: 0 6px;
  }

  .v2-rail-item {
    font-size: 13.5px;
    padding: 11px 14px;
  }

  .v2-dish-col { padding-inline: 24px 0; }

  /* Dishes go multi-column. The section's direct children are exactly the
     title plus the cards, so the title just spans every column. */
  .v2-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
    scroll-margin-top: calc(var(--nav-height) + var(--v2-search-h) + 12px);
  }

  .v2-section[hidden] { display: none; }

  .v2-cat-title {
    grid-column: 1 / -1;
    font-size: 24px;
    margin: 22px 0 2px;
  }

  /* gap replaces the stacked-card margin */
  .v2-dish {
    margin-bottom: 0;
    padding: 14px;
    gap: 14px;
    border-radius: 16px;
  }

  .v2-dish-photo {
    width: 104px;
    height: 104px;
    border-radius: 12px;
  }

  .v2-dish-name { font-size: 17px; }
  .v2-dish-desc { font-size: 13px; }

  /* In a column the price row is narrow, and price + weight on one line
     got ellipsised down to "49 ₪…". Weight drops to its own line instead,
     so nothing is clipped. */
  .v2-dish-price {
    font-size: 17px;
    overflow: visible;
    text-overflow: clip;
  }

  .v2-dish-meta {
    display: block;
    font-size: 12px;
    margin-top: 2px;
  }

  /* --- Home screen ------------------------------------------ */
  .v2-home { padding-inline: 0; }

  .v2-hero {
    padding: 44px 36px;
    border-radius: 24px;
    margin-bottom: 18px;
  }

  .v2-hero-photo {
    height: 300px;
    border-radius: 18px;
    margin-bottom: 26px;
  }

  .v2-hero-title { font-size: 38px; }
  .v2-hero-sub { font-size: 15px; margin: 14px 0 24px; }
  .v2-hero-note { font-size: 12.5px; }

  .v2-hero .v2-cta {
    max-width: 340px;
    margin-inline: auto;
    padding: 16px 32px;
  }

  .v2-quick-grid { gap: 14px; margin-bottom: 18px; }
  .v2-quick { padding: 20px 12px; border-radius: 16px; }
  .v2-quick > i { font-size: 24px; }
  .v2-quick-name { font-size: 14px; margin-top: 9px; }
  .v2-quick-sub { font-size: 12px; }

  .v2-card { padding: 18px; border-radius: 16px; }
  .v2-zone-row { font-size: 14px; padding: 6px 0; }

  .v2-featured-title { font-size: 24px; margin: 30px 0 14px; }

  .v2-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Wide monitors fit a third column of dishes. */
@media (min-width: 1280px) {
  .v2-section,
  .v2-featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}