/* ─────────────────────────────────────────────────────────── */
/* ReggeliGO — styles.css                                       */
/* Brand: reggeligo.hu · Inter · #E4002B                        */
/* ─────────────────────────────────────────────────────────── */

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --content-w:    1120px;
  --red:          #E4002B;
  --red-dark:     #C30024;
  --red-bg:       rgba(228,0,43,0.06);
  --red-ring:     rgba(228,0,43,0.18);
  --green:        #16a34a;
  --green-bg:     rgba(22,163,74,0.08);
  --green-ring:   rgba(22,163,74,0.20);

  --bg:           #f6f7f9;
  --surface:      #FFFFFF;
  --surface-2:    #F9F9FB;

  --border:       rgba(17,17,17,0.09);
  --border-md:    rgba(17,17,17,0.14);
  --focus:        var(--red);

  --text:         #111111;
  --text-2:       #444444;
  --text-3:       #888888;
  --text-4:       #BBBBBB;

  --bg-2:         #f0f0f0;

  --opacity-disabled: 0.40;

  --r-sm:         10px;
  --r:            14px;
  --r-lg:         20px;
  --r-pill:       12px;

  --sh-xs:        0 1px 4px rgba(0,0,0,0.06);
  --sh-sm:        0 2px 10px rgba(0,0,0,0.07);
  --sh:           0 8px 28px rgba(0,0,0,0.10);
  --sh-lg:        0 16px 48px rgba(0,0,0,0.13);
  --sh-red:       inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.15);

  --header-h:     72px; /* fallback; JS overrides with real height */
}

/* ── BASE ────────────────────────────────────────────────── */
html { height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--red); }

/* ── APP SHELL ───────────────────────────────────────────── */
#app { min-height: 100vh; background: var(--bg); }


/* ═══════════════════════════════════════════════════════════ */
/* HERO                                                         */
/* ═══════════════════════════════════════════════════════════ */
.rgo-hero {
  padding: 90px 0 30px;
}

.rgo-hero-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 0.4fr 1.6fr;
  gap: 48px;
  align-items: center;
}

/* Left: text */
.rgo-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.rgo-hero-left {
  max-width: 420px;
}

.rgo-hero-logo img {
  height: 26px;
  margin-bottom: 16px;
  opacity: 0.9;
}

.rgo-hero-title {
  font-size: 52px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--text);
  white-space: pre-line;
  transition: opacity 0.5s ease;
}
.rgo-hero-title span { color: #E4002B; display: inline-block; }

.rgo-hero-desc {
  font-size: 16px;
  color: var(--text-2);
  max-width: 420px;
  transition: opacity 0.5s ease;
}

/* Right: image */
.rgo-hero-right {
  display: flex;
  justify-content: flex-end;
}

.rgo-hero-img {
  width: 100%;
  max-width: none;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  height: 420px;
  object-fit: cover;
  transition: transform 0.4s ease, box-shadow 0.3s ease, opacity 0.5s ease;
}
.rgo-hero-img:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 30px 60px rgba(0,0,0,0.18);
}

/* Mobile */
@media (max-width: 900px) {
  .rgo-hero {
    padding: 70px 0 20px;
  }
  .rgo-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .rgo-hero-right {
    justify-content: center;
  }
  .rgo-hero-title { font-size: 34px; }
  .rgo-hero-desc { max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════ */
/* PAGE LAYOUT                                                  */
/* ═══════════════════════════════════════════════════════════ */
.rgo-page {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  overflow: visible; /* 🔥 EZ KÖTELEZŐ */
}

@media (min-width: 900px) {
  .rgo-page {
    grid-template-columns: minmax(0, 1180px) 340px;
    gap: 24px; /* kisebb gap = közelebb kerül */
  }
}

/* ── Main column ─────────────────────────────────────────── */
.rgo-main {
  display: flex;
  flex-direction: column;
  gap: 14px;

 max-width: var(--content-w);   /* 🔥 EZ A KULCS */
  width: 100%;
}

@media (min-width: 900px) {
  .rgo-main { gap: 14px; }
}

/* ── Cart column ─────────────────────────────────────────── */
.rgo-cart-col {
  display: none;
}

@media (min-width: 900px) {
  .rgo-cart-col {
    display: block;
    position: relative;   /* 🔥 fontos */
    overflow: visible;    /* 🔥 fontos */
  }
}

@media (min-width: 900px) {
  .rgo-cart-col {
    display: block;
  }
}

/* Cart sticky panel */
.rgo-cart-panel {
  position: sticky;
  top: var(--dlv-sticky-total, var(--header-h));
  align-self: start;

  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;

  box-shadow: 0 8px 24px rgba(0,0,0,0.06);

  width: 100%;
  max-width: 100%; /* ✅ FONTOS */
}

@media (max-width: 900px) {
  .rgo-cart-panel { position: static; }
}

.rgo-cart-header {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.rgo-cart-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-3);
}

#slot-summary {
  padding: 8px 20px 4px;
}

.rgo-cart-total.basket-bar {
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: 14px 20px;
  box-shadow: none;
}
.basket-bar-left  { font-size: 13px; color: var(--text-3); font-weight: 600; }
.basket-bar-right {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* Cart order footer */
.rgo-order-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

/* on desktop: static inside cart */
@media (min-width: 900px) {
  .rgo-order-footer {
    padding: 16px 20px;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* STICKY BOOKING HEADER                                        */
/* ═══════════════════════════════════════════════════════════ */
.rgo-booking-header {
  position: sticky;
  top: 0;
  z-index: 1000;  /* L4 — Booking header */
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.rgo-booking-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Mobile language mount — hidden on desktop (lives in .rgo-booking-right) */
#rgo-lang-mount-mobile { display: none; }
@media (max-width: 768px) {
  #rgo-lang-mount-mobile { display: flex; align-items: center; }
}

/* Fields + countdown row */
.rgo-booking-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

/* Fields grid */
.rgo-booking-left {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.rgo-booking-left .ctx-field { min-width: 0; }

/* Countdown + language */
.rgo-booking-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.rgo-countdown {
  background: linear-gradient(135deg, #1a1f2e, #0f172a);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  min-width: 220px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.countdown-label {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 2px;
}
.countdown-time {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* MOBILE <900px */
@media (max-width: 900px) {
  .rgo-booking-inner { padding: 10px 16px; gap: 6px; }
  .rgo-booking-main  { grid-template-columns: 1fr; gap: 8px; }
  .rgo-booking-left  { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rgo-booking-right { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .rgo-countdown { min-width: 0; padding: 6px 12px; }
  .countdown-time  { font-size: 16px; }
  .countdown-label { font-size: 10px; }
}

/* Compact field overrides scoped to the booking header */
.rgo-booking-inner .ctx-field  { gap: 2px; }
.rgo-booking-inner .ctx-label  { font-size: 10px; opacity: 0.7; }
.rgo-booking-inner .ctx-control {
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════ */
/* SELECTOR STRIPS (location / stay)                           */
/* ═══════════════════════════════════════════════════════════ */
.rgo-selector-strip {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 14px 16px 16px;
  box-shadow: var(--sh-xs);
}

@media (min-width: 900px) {
  .rgo-selector-strip { padding: 16px 22px 18px; }
}

.ctx-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 12px;
}

.ctx-inline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stay-bar .ctx-inline-grid { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 599px) {
  .ctx-inline-grid,
  .stay-bar .ctx-inline-grid { grid-template-columns: 1fr; }
}

.ctx-field { display: flex; flex-direction: column; gap: 4px; }

.ctx-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  padding-left: 2px;
}

.ctx-control {
  width: 100%;
  padding: 9px 28px 9px 11px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.ctx-control[type="date"] { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: 11px; }
.ctx-control:focus { border-color: var(--red); box-shadow: 0 0 0 1.5px var(--red-ring); }
.ctx-control:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
/* Departure field highlight — applied after arrival is selected to guide the user. */
.rgo-date-next-target { border-color: #2563eb !important; box-shadow: 0 0 0 1.5px rgba(37,99,235,.18); transition: border-color .2s ease, box-shadow .2s ease; }

/* Date placeholder overlay — mobile only, hidden when input has value */
.ctx-date-ph { display: none; }
@media (max-width: 899px) {
  .ctx-field { position: relative; }
  .ctx-date-ph {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 44px;
    line-height: 44px;
    padding-left: 12px;
    font-size: 14px;
    color: var(--text-3, #999);
    pointer-events: none;
    z-index: 1;
  }
  /* label takes ~16px + 2px margin; offset the overlay below it */
  .rgo-booking-inner .ctx-date-ph { top: 18px; }
  .ctx-control.has-value ~ .ctx-date-ph { display: none; }
}

.field-err { font-size: 12px; color: #dc2626; display: none; }
.field-err.visible { display: block; }


/* ═══════════════════════════════════════════════════════════ */
/* FLOW SECTIONS                                                */
/* ═══════════════════════════════════════════════════════════ */
.rgo-flow-section {
  scroll-margin-top: calc(var(--dlv-sticky-total, var(--header-h)) + 12px);
  width: 100%;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 18px 20px;
  box-shadow: var(--sh-xs);
}

@media (min-width: 900px) {
  .rgo-flow-section { padding: 20px 24px; box-shadow: var(--sh-sm); }
}

/* Flow head (number badge + title) */
.rgo-flow-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.rgo-flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.rgo-flow-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (min-width: 900px) {
  .rgo-flow-title { font-size: 16px; }
}

/* Primary flow highlight — strongest visual on page */
.primary-flow {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(228,0,43,0.10), 0 2px 8px rgba(0,0,0,0.06);
}

/* ── SELECTORS ROW: days + slots side-by-side on desktop ─────────────────── */
.rgo-selectors-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* desktop finomhangolás megtartva */
@media (min-width: 900px) {
  .rgo-selectors-row {
    gap: 18px;
    align-items: stretch;
  }
}

.rgo-flow-section--days,
.rgo-flow-section--slots {
  max-width: 100%;
  height: 100%;
}


/* ═══════════════════════════════════════════════════════════ */
/* STEP 1 — DAY PILLS                                          */
/* ═══════════════════════════════════════════════════════════ */
.rgo-flow-section--days .active-day-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 0;
  min-height: 0;
}

.mobile-days {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
  gap: 10px;
  padding: 4px 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  position: relative;
}
.mobile-days::-webkit-scrollbar { display: none; }
.mobile-days::before,
.mobile-days::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
}
.mobile-days::before {
  left: 0;
  background: linear-gradient(to right, #f6f7f9, transparent);
}
.mobile-days::after {
  right: 0;
  background: linear-gradient(to left, #f6f7f9, transparent);
}

/* Day carousel arrows */
.day-carousel {
  position: relative;
  display: flex;
  align-items: center;
}

.day-nav {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.day-nav:hover {
  border-color: var(--red);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.day-nav-left { margin-right: 6px; }
.day-nav-right { margin-left: 6px; }

.day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 0 0 auto;
  width: 88px;
  height: 64px;
  scroll-snap-align: center;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}
.day-pill:hover:not(.active) {
  border-color: var(--red);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.day-pill.active {
  border-color: var(--red-dark);
  background: var(--red-dark);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.12);
}
.day-pill-slot { font-size: 10px; font-weight: 600; opacity: 0.75; }
.day-pill.active .day-pill-slot { opacity: 1; }
.day-pill--error { border-color: #dc2626 !important; background: #fef2f2 !important; color: #991b1b !important; box-shadow: 0 0 0 2px rgba(220,38,38,0.15) !important; }
.day-pill--error.active { background: #dc2626 !important; color: #fff !important; }
.mb-day-pill.day-pill--error { border-color: #dc2626 !important; background: #fef2f2 !important; color: #991b1b !important; }
.mb-stk-day-pill.day-pill--error { border-color: #dc2626 !important; background: #fef2f2 !important; color: #991b1b !important; }


/* Context bar — hidden: info already in sticky booking header */
.context-bar { display: none; }
.context-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: none;
  color: var(--text);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
.context-item .ctx-ico { color: var(--text-3); flex-shrink: 0; }
.context-item.missing { color: var(--text-3); }
.context-item.qr-hint { color: var(--green); width: 100%; font-size: 11px; }

/* ── Collapsed booking summary bar (mobile ORDER MODE) ────────────────────── */
/* Hidden by default. Shown inside .rgo-booking-inner when all context is set. */
/* Mobile CSS (≤899px) makes it visible via body.rgo-booking-collapsed.        */
.rgo-ctx-summary {
  display: none;
}
.rgo-ctx-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  flex: 1;
  min-width: 0;
  align-items: center;
  overflow: hidden;
}
.rgo-ctx-edit {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.rgo-ctx-edit:hover,
.rgo-ctx-edit:active {
  border-color: var(--text-3);
  color: var(--text);
}


/* ═══════════════════════════════════════════════════════════ */
/* STEP 2 — SLOT TILES                                         */
/* ═══════════════════════════════════════════════════════════ */
.rgo-flow-section--slots {
  position: relative;
  overflow: hidden;
}
.rgo-flow-section--slots::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(228,0,43,0.035) 0%, transparent 50%);
  pointer-events: none;
}

.slots-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

@media (min-width: 900px) {
  .slots-grid {
    max-width: 860px;
    gap: 10px;
    justify-content: center;
  }
  .slots-grid .slot-tile {
    width: 132px;
    flex: 0 0 132px;
  }
  .slots-grid .slot-tile:nth-child(7) {
    flex-basis: 100%;
    max-width: 132px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }
}

.slot-tile {
  /* Size */
  width: 132px;
  height: 58px;
  padding: 0;

  /* Layout */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  text-align: center;
  position: relative;

  /* Look */
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;

  /* Type */
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  font-family: inherit;
  line-height: 1.25;
  white-space: nowrap;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: all 0.18s ease;
}
.slot-tile span { text-align: center; line-height: 1.2; }
.slot-tile:hover:not(:disabled):not(.selected) {
  border-color: var(--red);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.slot-tile.selected {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.12);
}
.slot-tile:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  transform: none;
}
.slot-tile.is-full {
  background: #fafafa;
  border-color: #e5e7eb;
  color: #aaa;
  opacity: var(--opacity-disabled);
  pointer-events: none;
}
.slot-tile.is-limited {
  border-color: rgba(245,158,11,0.5);
  background: rgba(245,158,11,0.08);
}
.slot-tile.almost-full { border-color: rgba(217,119,6,0.4); }
.slot-tile.is-recommended {
  border-color: rgba(22,163,74,0.35);
  background: rgba(22,163,74,0.06);
  box-shadow: 0 4px 16px rgba(22,163,74,0.12);
}

/* .slot-btn — alias style matching slot-tile for any future refactor */
.slot-btn {
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.slot-btn:hover {
  border-color: var(--red);
  transform: translateY(-1px);
}
.slot-btn.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* Capacity label */
.slot-cap {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 2px;
}
.slot-cap--full    { color: var(--red); }
.slot-cap--almost  { color: #b45309; font-weight: 800; font-size: 10px; }
.slot-cap--popular { color: #6d28d9; font-weight: 600; font-size: 10px; }
.slot-cap--ok      { color: var(--text-3); font-weight: 500; }
.slot-cap--unlimited { color: var(--green); }

/* Badge (NOW / SOON) */
.slot-badge {
  position: absolute;
  top: 5px; right: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  line-height: 1.4;
  pointer-events: none;
}
.slot-badge.now     { background: var(--red-bg); color: var(--red); }
.slot-badge.soon    { background: rgba(245,158,11,0.13); color: #b45309; }
.slot-badge.urgent  { background: rgba(245,158,11,0.13); color: #b45309; }
.slot-badge.popular { background: rgba(109,40,217,0.10); color: #6d28d9; }
.slot-tile.selected .slot-badge.now { background: var(--red-bg); color: var(--red); }
.slot-tile.selected .slot-badge.urgent,
.slot-tile.selected .slot-badge.popular { background: rgba(255,255,255,0.2); color: #fff; }

/* Unified chip system */
.rgo-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  border-radius: 12px;
  padding: 12px 18px;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
}
.rgo-chip:hover {
  border-color: var(--red);
  transform: translateY(-1px);
}
.rgo-chip.selected {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.rgo-chip--slot { min-width: 110px; }

/* Day chip typography */
.rgo-chip-day-title { font-weight: 600; font-size: 14px; }
.rgo-chip-day-sub   { font-size: 12px; opacity: 0.65; }

/* Slot chip typography */
.rgo-chip-slot-time { font-weight: 800; font-size: 14px; letter-spacing: -0.01em; }
.rgo-chip-slot-meta { font-size: 11px; opacity: 0.6; margin-top: 2px; }

/* Recommended badge (chip variant) */
.rgo-badge-reco,
.badge-recommended {
  position: absolute;
  top: -8px;
  left: 8px;
  transform: none;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
}

/* Grid layouts */
.rgo-days-grid,
.rgo-slots-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

/* Removed/redundant containers — fully collapsed, no layout footprint */
.slot-selected-info,
.rgo-selection-summary,
.rgo-context-row,
.rgo-info-bar,
.rgo-divider { display: none !important; }

/* Warning chip — almost-full slots */
.rgo-chip-warning,
.slot-tile.almost-full,
.slot-tile.is-limited {
  border-color: #f59e0b;
}
.rgo-chip-warning .rgo-chip-slot-meta,
.slot-tile.almost-full .slot-cap,
.slot-tile.is-limited .slot-cap {
  color: #f59e0b;
  font-weight: 600;
}

/* Slot lock info */
.slots-lock-info {
  font-size: 13px;
  color: var(--text-2);
  background: var(--red-bg);
  border: 1px solid var(--red-ring);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Empty state */
.slots-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  padding: 28px 0;
}

/* Slot label inside slot section */
.slot-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}

/* Slot summary in cart */
.slot-summary { font-size: 13px; color: var(--text-3); text-align: center; padding: 6px 0 4px; min-height: 22px; }
.slot-summary strong { color: var(--text); font-weight: 700; }

/* Summary day row in cart */
.summary-day-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.summary-day-row:last-of-type { border-bottom: none; }
.summary-day-name { color: var(--text); font-weight: 600; }
.summary-day-slot { font-size: 12px; color: var(--text-3); }
.summary-day-slot.missing { color: var(--red); font-weight: 600; }
.summary-slot-warning {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--red-bg);
  border: 1px solid var(--red-ring);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--red);
  line-height: 1.5;
}
.summary-scroll-btn {
  background: none; border: none; padding: 0;
  font-size: 12px; font-weight: 700; color: var(--red);
  cursor: pointer; font-family: inherit; text-decoration: underline;
}
.summary-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text-3); padding: 2px 0;
}
.summary-line.total {
  border-top: 1px solid var(--border); margin-top: 5px; padding-top: 6px;
  color: var(--text); font-weight: 700; font-size: 14px;
}

/* Active day header in days section */
.active-day-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  line-height: 1.3;
}
.active-day-header:empty { display: none; }


/* ═══════════════════════════════════════════════════════════ */
/* INLINE PRODUCT SECTION (inside slot section)               */
/* ═══════════════════════════════════════════════════════════ */
.product-section {
  margin-top: 20px;
  padding-top: 18px;
}
.product-section:empty { display: none; }
.section-divider { height: 1px; background: var(--border); margin: 18px 0 14px; }

.slot-product-row {
  display: flex;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.slot-product-row:last-child { border-bottom: none; }

.slot-product-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  transition: color 0.12s, font-weight 0.12s;
  line-height: 1.3;
}
.slot-product-row.has-qty .slot-product-name { color: var(--text); font-weight: 700; }

.slot-qty-control { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.slot-qty-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border-md);
  background: var(--surface);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.1s, background 0.1s, color 0.1s;
}
.slot-qty-btn.plus { border-color: var(--green); color: var(--green); }
.slot-qty-btn.plus:hover:not(:disabled) { background: var(--green); color: #fff; }
.slot-qty-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.slot-qty-val {
  font-size: 15px;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
  color: var(--text);
}


/* ═══════════════════════════════════════════════════════════ */
/* CATEGORY BAR                                                */
/* ═══════════════════════════════════════════════════════════ */
.rgo-cats-strip {
  max-width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}

.cat-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 14px;
  flex-wrap: nowrap;
}
.cat-bar::-webkit-scrollbar { display: none; }

.cat-btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1.5px solid var(--border-md);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.cat-btn:hover { border-color: var(--red); background: var(--red-bg); color: var(--red-dark); }
.cat-btn.active { background: var(--red-dark); border-color: var(--red-dark); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }


/* ═══════════════════════════════════════════════════════════ */

/* STEP 3 — PRODUCT CARDS                                      */
/* ═══════════════════════════════════════════════════════════ */
.rgo-flow-section--products { background: var(--surface); }

/* Products container */
.rgo-products-grid {
  display: block;
  max-width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
}

/* Product day label */
.products-day-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.products-day-label strong { color: var(--text); }
.date-label { font-size: 13px; color: var(--text-3); margin-bottom: 12px; min-height: 18px; }
.date-label strong { color: var(--text); }

/* Catalog sections */
.catalog-section { width: 100%; margin-bottom: 32px; }

.catalog-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  margin: 18px 0 10px;
}
.catalog-group-label:first-child { margin-top: 0; }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 520px) {
  .catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* Product card */
.product-card,
.rgo-product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.18s ease;
  cursor: default;
  overflow: hidden;
}

/* Box products — subtle accent only, same dimensions as all cards */
.product-card[data-product-type="box"] {
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.product-card:hover,
.rgo-product-card:hover {
  border-color: rgba(0,0,0,0.13);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.product-card.selected,
.product-card.has-qty,
.rgo-product-card.selected,
.rgo-product-card.has-qty {
  border-color: var(--red);
  background: var(--red-bg);
}
.product-card.is-locked {
  opacity: var(--opacity-disabled);
  filter: grayscale(30%);
}
.product-card.addon-locked { opacity: var(--opacity-disabled); position: relative; }
.product-card.addon-locked::after {
  content: "Csak box mellé rendelhető";
  position: absolute;
  bottom: 8px; left: 14px;
  font-size: 11px; color: var(--red);
}
/* Phase 57: non-orderable status overlay ─────────────────────────────────── */
/* Card stays clickable — only qty controls are disabled/hidden.             */
/* The overlay covers the image area only; text + detail link stay clear.    */
.product-card.not-orderable,
.mb-product-card.not-orderable {
  position: relative;
}
.product-card.not-orderable .qty-control,
.mb-product-card.not-orderable .mb-qty-control {
  display: none;
}

/* Badge — top-right corner pill */
.status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.status-badge.status-coming_soon {
  background: rgba(255, 255, 255, 0.88);
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.18);
}
.status-badge.status-paused {
  background: rgba(255, 255, 255, 0.88);
  color: #6b7280;
  border: 1px solid rgba(107, 114, 128, 0.18);
}

/* Overlay — covers image area only, not the text/link area.                */
/* Uses pointer-events:none so clicks pass through to the card for sheet.   */
.status-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;          /* matches .card-image width on desktop */
  height: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  border-radius: inherit;
  text-align: center;
  padding: 12px 8px;
  pointer-events: none;
}
.status-overlay-title {
  color: var(--text, #111);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.65;
}
.status-overlay-msg {
  color: var(--text-3, #666);
  font-size: 11px;
  margin-top: 3px;
  opacity: 0.7;
}
/* Mobile cards are vertical (image on top) — overlay covers the hero area */
.mb-product-card.not-orderable > .status-overlay {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;  /* matches .mb-card-hero aspect ratio */
}

.product-card.added { animation: cardPulse 0.15s ease; }
@keyframes cardPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

/* Card inner layout — horizontal with large image */
.card-inner {
  display: flex;
  gap: 0;
  align-items: stretch;
  flex: 1;
}

/* Product image — prominent, ~45% of card width */
.card-image {
  width: 45%;
  min-height: 140px;
  flex-shrink: 0;
  background: var(--bg, #f2f2f7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder logo for products without image */
.card-placeholder-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-4);
  opacity: 0.22;
}

/* Card content — right side, flex-col with bottom pinned */
.card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
}
.card-text {
  flex: 1;
  min-width: 0;
}
.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.card-desc,
.product-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Single highlight badge under title */
.card-highlight {
  margin-top: 3px;
}
.card-highlight .product-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
/* Price + detail CTA row */
.card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.card-detail-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}
.card-detail-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.box-contains {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.box-contains-title {
  font-weight: 700;
  color: var(--text-2, var(--text));
  margin-bottom: 2px;
}
.box-contains ul {
  margin: 0 0 4px 0;
  padding-left: 16px;
  line-height: 1.5;
}
.box-contains ul li {
  list-style: disc;
}
.box-allergens {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
.box-allergens .tag {
  display: inline-block;
  background: var(--bg-2, #f0f0f0);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2, #555);
}

/* Shared allergen chip row — desktop cards + mobile cards */
.product-allergens {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.allergen-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(--bg, #f2f2f7);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-2);
  cursor: default;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Product badge system ─────────────────────────────────── */
.product-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.product-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge--commercial {
  background: rgba(217, 119, 6, 0.10);
  color: #92400e;
}
.badge--limited {
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
}
.badge--hospitality {
  background: rgba(5, 150, 105, 0.09);
  color: #065f46;
}
.badge--dietary {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-2);
}

.card-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
}
.price {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Qty controls — large, thumb-friendly */
.qty-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.qty-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-family: inherit;
  transition: border-color 0.1s, background 0.1s, color 0.1s, box-shadow 0.1s;
  flex-shrink: 0;
}
.qty-btn.plus { background: var(--red); border-color: var(--red); color: #fff; }
.qty-btn.plus:hover:not(:disabled)  { background: var(--red-dark); border-color: var(--red-dark); }
.qty-btn.minus:hover:not(:disabled) { border-color: rgba(0,0,0,0.30); background: var(--bg); }
.qty-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.qty-btn:active:not(:disabled) { box-shadow: none; }

.qty-value {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  min-width: 24px;
  text-align: center;
}

/* Lock message — instructs user clearly what to do next */
.catalog-hint {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  border: 1.5px dashed var(--border-md);
}
.catalog-hint::before {
  content: '👆';
  font-size: 28px;
  display: block;
  margin-bottom: 2px;
}
.catalog-lock-msg {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  padding: 10px 0 14px;
}


/* ═══════════════════════════════════════════════════════════ */
/* BUTTONS                                                      */
/* ═══════════════════════════════════════════════════════════ */
.btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s, opacity 0.15s;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.btn:active:not(:disabled) { transform: scale(0.975); }

.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.15);
}
.btn-primary:hover:not(:disabled) {
  background: var(--red-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 8px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.btn-primary:disabled {
  background: #E0E0E0;
  color: #AAAAAA;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border-md);
  box-shadow: var(--sh-xs);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }

/* Barion button — primary red, strongest CTA */
.btn-barion {
  background: var(--red);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.15);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.btn-barion:hover:not(:disabled) {
  background: var(--red-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 8px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.btn-barion:active:not(:disabled) { transform: scale(0.977); }
.btn-barion:disabled {
  background: #E0E0E0;
  color: #AAAAAA;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.barion-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.barion-lock { flex-shrink: 0; opacity: 0.8; }


/* ═══════════════════════════════════════════════════════════ */
/* BASKET BAR (shared)                                         */
/* ═══════════════════════════════════════════════════════════ */
.basket-bar {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  box-shadow: var(--sh-xs);
}


/* ═══════════════════════════════════════════════════════════ */
/* SCREENS (fixed overlays)                                    */
/* ═══════════════════════════════════════════════════════════ */
/* Step 1 — hide booking header when checkout overlay is open */
body.checkout-open .rgo-booking-header {
  display: none;
}
/* Category sticky only belongs to the product browsing step. */
/* Hide it on checkout / payment / success / any overlay.     */
body.checkout-open #mb-sticky-cats {
  display: none;
}

/* Step 2 — premium overlay backdrop */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;  /* L5 — Checkout overlays */
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.screen.active { display: flex !important; }

/* Step 3 — premium modal card */
.screen-body-wrapper {
  width: 100%;
  max-width: 980px;
  max-height: 92vh;
  background: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 40px 120px rgba(0,0,0,0.25),
    0 0 0 1px rgba(255,255,255,0.06);
}

/* Card wrapper — success screen */
.success-wrap {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: var(--surface);
  border-radius: 16px;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
}

/* ── Top bar ─────────────────────────────────────────────── */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}
.top-bar-back {
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.top-bar-back:hover { background: var(--bg); }
.top-bar-title { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.top-bar-space { width: 40px; }

/* ── Progress bar ────────────────────────────────────────── */
.progress-bar-wrap {
  height: 3px;
  background: var(--border);
  position: sticky;
  top: 56px;
  z-index: 19;
  flex-shrink: 0;
}
.progress-bar-fill {
  height: 100%;
  background: var(--red);
  transition: width 0.3s ease;
}

/* ── Screen body ─────────────────────────────────────────── */
.screen-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  -webkit-overflow-scrolling: touch;
}

/* ── Screen footer (Barion button) — Step 7 ─────────────── */
.screen-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, #fff 70%, transparent);
  border-top: none;
  z-index: 20;
}

.barion-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════ */
/* CHECKOUT — FORM ELEMENTS                                     */
/* ═══════════════════════════════════════════════════════════ */
.checkout-section-head { margin-bottom: 16px; }
.checkout-section-head .section-eyebrow { margin-bottom: 4px; }
.checkout-section-head .section-title { font-size: 18px; margin-bottom: 0; }

.section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.section-sub {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.55;
  margin-bottom: 24px;
}

.field-stack { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.field-required { color: var(--red); }
/* Step 8 — clean form inputs */
.field-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: #f9fafb;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--sh-xs);
}
.field-control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 1.5px var(--red-ring);
}
.field-control.has-error { border-color: #dc2626; }
.field-control:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; box-shadow: none; }
.field-hint { font-size: 12px; color: var(--text-3); }
.field-err  { font-size: 12px; color: #dc2626; display: none; }
.field-err.visible { display: block; }
.link-btn {
  background: none; border: none; padding: 0;
  color: var(--red); font-weight: 600; font-size: inherit; font-family: inherit;
  text-decoration: underline; cursor: pointer;
  touch-action: manipulation;
}

.checkout-legal {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.6;
  margin-top: 24px;
}

/* ── Checkout consent checkboxes (Barion compliance) ──── */
.checkout-consent {
  margin-top: 24px;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.checkout-consent-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  cursor: pointer;
  padding: 6px 0;
}
.checkout-consent-item a {
  color: var(--red);
  text-decoration: underline;
}
.checkout-consent-cb {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--red);
}
.checkout-consent-err {
  font-size: 11px;
  color: #dc2626;
  margin-top: 8px;
  font-weight: 600;
}

/* ── Checkout 2-column layout ────────────────────────────── */
/* Step 4 — checkout grid */
.rgo-checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

/* Step 4 — right column sticky */
.rgo-checkout-right {
  position: sticky;
  top: 0;
  align-self: start;
}

/* Step 5 — summary card visual anchor */
#checkout-summary {
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  border-radius: 18px;
  padding: 20px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.12),
    0 0 0 1px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
  .screen-body-wrapper {
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .rgo-checkout {
    grid-template-columns: 1fr;
  }

  .rgo-checkout-right {
    position: static;
    max-height: none;
    margin-top: 16px;
  }
}

/* Company invoice toggle */
.company-toggle {
  display: flex;
  align-items: center;
  padding: 14px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.company-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.company-toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
  cursor: pointer;
  flex-shrink: 0;
}

/* Company fields (shown when céges számla checked) */
.company-fields {
  background: var(--surface-2, #f8f8f8);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.company-fields .field { margin-bottom: 12px; }
.company-fields .field:last-child { margin-bottom: 0; }

/* Empty cart state in checkout summary */
.co-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  border: 1px dashed var(--border-md);
  border-radius: var(--r);
  margin-bottom: 12px;
}

/* ── Checkout order summary — grouped by date + time slot ── */
.co-summary { margin-bottom: 20px; }

/* Group card: one card per delivery_date + time_window combination */
.checkout-day {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 12px;
  background: var(--surface);
  box-shadow: var(--sh-xs);
}
.checkout-day:last-of-type { margin-bottom: 4px; }

/* Group header: bold date label (e.g. "Szerda (05.20)") */
.checkout-day-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 2px;
  color: var(--text);
}

/* Time slot sub-label (e.g. "07:00–07:30") */
.checkout-slot {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Item list */
.checkout-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checkout-items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  color: var(--text-2);
}

.checkout-items li:first-child {
  border-top: none;
}

/* Left side */
.item-name {
  flex: 1;
  line-height: 1.3;
}

/* Right side (qty + price) */
.item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  margin-left: 10px;
  font-weight: 700;
  color: var(--text);
}

/* Price (secondary emphasis) */
.item-price {
  font-weight: 500;
  color: var(--text-2);
}

/* Step 6 — strong total block */
.co-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border-md);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--sh-xs);
}
.co-total-label { font-size: 13px; font-weight: 700; color: var(--text-3); }
.co-total-value { font-size: 24px; font-weight: 900; color: var(--text); letter-spacing: -0.02em; }

.co-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--red-bg);
  border: 1px solid var(--red-ring);
  border-radius: var(--r);
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  margin-bottom: 10px;
}

.co-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--sh-xs);
}
.co-day-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.co-day-name { font-size: 14px; font-weight: 700; color: var(--text); }
.co-day-date { font-size: 13px; font-weight: 400; color: var(--text-3); }
.co-slot {
  font-size: 12px; font-weight: 700; color: var(--text-3);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap;
}
.co-slot--missing { color: var(--red); background: var(--red-bg); border-color: var(--red-ring); }
.co-item {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 5px 0; border-top: 1px solid var(--border);
}
.co-item-name { color: var(--text-2); }
.co-item-qty { font-weight: 700; color: var(--text); min-width: 28px; text-align: right; }


/* ═══════════════════════════════════════════════════════════ */
/* SUCCESS SCREEN                                               */
/* ═══════════════════════════════════════════════════════════ */

/* Full-viewport takeover: center the card, sit above everything */
#screen-success {
  align-items:      center;
  justify-content:  center;
  z-index:          2000;  /* L5 — Checkout overlays (same layer as .screen) */
  background:       rgba(0, 0, 0, 0.4);
}

/* White card that contains all success content */
.success-card {
  width:         100%;
  max-width:     420px;
  background:    #fff;
  border-radius: 16px;
  padding:       24px 24px 32px;
  box-shadow:    0 12px 48px rgba(0, 0, 0, 0.22);
  overflow-y:    auto;
  max-height:    90vh;
}

/* Action buttons row at the bottom of the success card */
.success-actions {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     8px;
}
.success-btn-primary {
  width:         100%;
  padding:       14px 0;
  background:    var(--red);
  color:         #fff;
  border:        none;
  border-radius: 10px;
  font-size:     15px;
  font-weight:   700;
  cursor:        pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action:  manipulation;
  transition:    background 0.15s;
}
.success-btn-primary:hover { background: var(--red-dark); }
.success-btn-primary:active { transform: scale(0.975); }
.success-btn-secondary {
  width:         100%;
  padding:       13px 0;
  background:    transparent;
  color:         var(--text-3, #64748b);
  border:        1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-size:     15px;
  font-weight:   600;
  cursor:        pointer;
}

.success-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0 0;
  text-align: center;
}
.success-icon-wrap { margin-bottom: 24px; }
.success-circle {
  width: 88px; height: 88px;
  background: var(--green-bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-size: 44px;
  box-shadow: 0 0 0 16px var(--green-ring);
  color: var(--green);
  font-weight: 900;
}
.success-title {
  font-size: 30px; font-weight: 900; color: var(--text);
  margin-bottom: 10px; letter-spacing: -0.03em;
}
.success-sub {
  font-size: 15px; color: var(--text-3); line-height: 1.65;
  margin-bottom: 36px; max-width: 280px;
}
.success-detail {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh);
  text-align: left;
  margin-bottom: 32px;
}
.success-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.success-row:last-child { border-bottom: none; }
.success-row-label { color: var(--text-3); }
.success-row-value { font-weight: 700; color: var(--text); text-align: right; }
.success-logo { opacity: 0.4; margin-top: 8px; }


/* ═══════════════════════════════════════════════════════════ */
/* FULFILLMENT (delivery mode)                                  */
/* ═══════════════════════════════════════════════════════════ */
.fulfillment-cards { display: flex; flex-direction: column; gap: 12px; }
.fulfillment-card {
  background: var(--surface);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-lg);
  padding: 18px 16px;
  cursor: pointer;
  display: flex; align-items: flex-start; gap: 14px;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--sh-xs);
}
.fulfillment-card:hover { box-shadow: var(--sh-sm); }
.fulfillment-card.selected { border-color: var(--red); background: var(--red-bg); box-shadow: 0 0 0 1.5px var(--red-ring); }
.fulfillment-card-icon { font-size: 34px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.fulfillment-card-body { flex: 1; }
.fulfillment-card-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.fulfillment-card.selected .fulfillment-card-title { color: var(--red); }
.fulfillment-card-desc { font-size: 13px; color: var(--text-3); line-height: 1.5; }
.fulfillment-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border-md); flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.fulfillment-card.selected .fulfillment-radio { background: var(--red); border-color: var(--red); }
.fulfillment-radio::after { content: ''; display: none; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
.fulfillment-card.selected .fulfillment-radio::after { display: block; }
.fulfillment-loading { color: var(--text-3); font-size: 14px; padding: 20px 0; text-align: center; }
.fulfillment-error { background: #fff3cd; color: #7c5b00; border: 1px solid #f5c542; border-radius: var(--r); padding: 14px; font-size: 14px; }
.fulfillment-info { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; }
.fulfillment-info-icon { font-size: 28px; flex-shrink: 0; }
.fulfillment-info-text { font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.5; }
.fulfillment-warning { background: #fff8e1; border: 1px solid #ffe082; border-radius: var(--r); padding: 14px; font-size: 14px; color: #5d4037; line-height: 1.6; margin-bottom: 16px; }
.fulfillment-slots-label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.fulfillment-personal-slots { display: flex; flex-direction: column; gap: 8px; }
.fulfillment-slot-btn {
  width: 100%; text-align: left; padding: 12px 16px;
  background: var(--surface); border: 2px solid var(--border-md);
  border-radius: var(--r); font-size: 15px; font-weight: 500;
  color: var(--text); cursor: pointer; transition: border-color 0.15s;
  font-family: inherit;
}
.fulfillment-slot-btn:hover { border-color: var(--red); }
.fulfillment-slot-btn.selected { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.fulfillment-no-slots { font-size: 14px; color: var(--text-3); padding: 8px 0; }


/* ═══════════════════════════════════════════════════════════ */
/* REVIEW CARDS                                                 */
/* ═══════════════════════════════════════════════════════════ */
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 12px; box-shadow: var(--sh-xs); }
.review-card-head { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.review-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
.review-edit { font-size: 13px; font-weight: 700; color: var(--red); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.review-card-body { padding: 12px 16px; }
.review-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; padding: 5px 0; }
.review-row + .review-row { border-top: 1px solid var(--border); }
.review-row-label { color: var(--text-3); }
.review-row-value { font-weight: 600; color: var(--text); text-align: right; max-width: 55%; }
.review-total-card { background: var(--red); border-radius: var(--r-lg); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; box-shadow: var(--sh-red); }
.review-total-label { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.7); }
.review-total-value { font-size: 26px; font-weight: 900; color: #fff; }
.review-legal { font-size: 12px; color: var(--text-3); text-align: center; line-height: 1.5; margin-top: 4px; margin-bottom: 8px; }


/* ═══════════════════════════════════════════════════════════ */
/* MOBILE CART BAR (fixed bottom — info only)                  */
/* ═══════════════════════════════════════════════════════════ */
#mobile-cart-bar {
  display: none;
}


/* Mobile checkout CTA button */
.mcb-cta {
  flex-shrink: 0;
  padding: 0 20px;
  height: 44px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.15);
}
.mcb-cta:hover:not(:disabled) { background: var(--red-dark); }
.mcb-cta:active:not(:disabled) { transform: scale(0.96); }
.mcb-cta:disabled {
  background: #E0E0E0;
  color: #AAAAAA;
  cursor: not-allowed;
  box-shadow: none;
}

/* Success email note */
.success-email-note {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  text-align: center;
  padding: 10px 16px 4px;
  margin-bottom: 16px;
}


/* ═══════════════════════════════════════════════════════════ */
/* NO CONTEXT SCREEN                                           */
/* ═══════════════════════════════════════════════════════════ */
#screen-nocontext {
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  min-height: 100vh;
}
.nocontext-logo { font-size: 28px; font-weight: 900; color: var(--red); letter-spacing: -0.5px; margin-bottom: 32px; text-align: center; }
.nocontext-logo span { color: var(--text); }
.nocontext-icon { font-size: 52px; text-align: center; margin-bottom: 16px; }
.nocontext-title { font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 8px; }
.nocontext-sub { font-size: 14px; color: var(--text-3); text-align: center; line-height: 1.6; margin-bottom: 36px; max-width: 320px; }
.nocontext-demo { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh); }
.demo-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 14px; }


/* ═══════════════════════════════════════════════════════════ */
/* WELCOME SCREEN                                               */
/* ═══════════════════════════════════════════════════════════ */
.welcome-hero { display: flex; align-items: flex-start; gap: 16px; padding: 32px 20px 24px; }
.welcome-hero-left { flex: 1; min-width: 0; }
.welcome-hero-right { flex-shrink: 0; width: 100px; }
.welcome-hero-img { width: 100px; height: 100px; border-radius: var(--r-lg); background: var(--red-bg); display: flex; align-items: center; justify-content: center; font-size: 42px; }
.welcome-logo { font-size: 24px; font-weight: 900; color: var(--red); letter-spacing: -0.5px; margin-bottom: 8px; }
.welcome-logo span { color: var(--text); }
.welcome-greeting { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 4px; line-height: 1.2; }
.welcome-property { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 4px; }
.welcome-city { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.welcome-stay-dates { display: inline-block; margin-top: 10px; padding: 3px 10px; background: var(--red-bg); color: var(--red); font-size: 12px; font-weight: 600; border-radius: 20px; }
.ctx-card { margin: 0 0 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-xs); }
.ctx-row { display: flex; gap: 24px; }
.ctx-col { flex: 1; }
.ctx-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin-bottom: 4px; }
.ctx-value { font-size: 18px; font-weight: 800; color: var(--text); }
.welcome-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.feature-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; }
.feature-icon { font-size: 22px; flex-shrink: 0; }
.feature-text { font-size: 13px; color: var(--text-3); line-height: 1.3; }
.feature-text strong { color: var(--text); font-weight: 700; display: block; font-size: 14px; }

@media (max-width: 340px) {
  .welcome-hero { flex-direction: column-reverse; }
  .welcome-hero-right { width: 100%; }
  .welcome-hero-img { width: 100%; height: 72px; border-radius: var(--r); }
}


/* ═══════════════════════════════════════════════════════════ */
/* LOADING OVERLAY                                             */
/* ═══════════════════════════════════════════════════════════ */
#loading {
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.9);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 2000; gap: 14px;  /* L5 — Checkout overlays */
  backdrop-filter: blur(4px);
}
#loading.on { display: flex; }

.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-msg { font-size: 14px; font-weight: 600; color: var(--text-3); }

#loading.on .block-ui-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 24px; text-align: center; }
.block-ui-icon { font-size: 40px; }
.block-ui-msg  { font-size: 15px; color: var(--text); max-width: 300px; line-height: 1.5; }
#loading.on .spinner { display: none; }
#loading.on .loading-msg { display: none; }


/* ═══════════════════════════════════════════════════════════ */
/* TOAST                                                        */
/* ═══════════════════════════════════════════════════════════ */
#toast {
  position: fixed;
  bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #111;
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 998; white-space: nowrap;
  max-width: calc(100vw - 40px); text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err  { background: #dc2626; }
#toast.ok   { background: var(--green); }


/* ═══════════════════════════════════════════════════════════ */
/* DEBUG PANEL                                                  */
/* ═══════════════════════════════════════════════════════════ */
#rgo-debug {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;  /* L3 — Developer overlays */
  max-height: 40vh; overflow-y: auto;
  background: rgba(17,24,39,0.96);
  color: #d1d5db;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  border-top: 2px solid var(--red);
  backdrop-filter: blur(4px);
}
.dbg-title { padding: 6px 12px; background: var(--red); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; position: sticky; top: 0; }
.dbg-title small { opacity: 0.8; font-weight: 400; }
.dbg-row { display: flex; gap: 8px; padding: 3px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.dbg-key { flex-shrink: 0; width: 80px; color: #fbbf24; font-weight: 600; }
.dbg-val { margin: 0; padding: 0; color: #d1d5db; white-space: pre-wrap; word-break: break-all; flex: 1; }


/* ═══════════════════════════════════════════════════════════ */
/* LEGACY / DESKTOP 3-PANEL (hidden, JS compatibility only)    */
/* ═══════════════════════════════════════════════════════════ */
#desktop-layout { display: none !important; }

.desktop-left { width: 280px; min-width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 24px 16px; overflow-y: auto; }
.desktop-center { flex: 1; padding: 24px; overflow-y: auto; max-width: 560px; }
.desktop-right { width: 300px; min-width: 240px; flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--border); padding: 24px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 0; }
.desktop-panel-title { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.dt-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; margin-bottom: 4px; border: 1.5px solid transparent; transition: background 0.1s, border-color 0.1s; }
.dt-row:hover { background: var(--bg); }
.dt-row.active { background: var(--red-bg); border-color: var(--red); }
.dt-row-label { font-size: 14px; font-weight: 700; color: var(--text); }
.dt-row-slot { font-size: 12px; color: var(--text-3); font-weight: 500; }
.dt-row.active .dt-row-slot { color: var(--red); }
.desktop-slot-section { margin-top: 16px; }
.desktop-slot-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.desktop-slot-btn { position: relative; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; font-family: inherit; transition: border-color 0.1s, background 0.1s; }
.desktop-slot-btn:hover:not(:disabled) { border-color: var(--red); }
.desktop-slot-btn.selected { border-color: var(--green); background: var(--green); color: #fff; }
.desktop-slot-btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.desktop-slot-btn .slot-badge { position: static; display: inline-block; margin-left: 6px; vertical-align: middle; }
.summary-empty { color: var(--text-3); font-size: 13px; text-align: center; padding: 24px 0; }
.summary-day { padding: 10px 0; border-bottom: 1px solid var(--border); }
.summary-day:last-of-type { border-bottom: none; }
.summary-day-head { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.summary-day-item { font-size: 12px; color: var(--text-3); display: flex; justify-content: space-between; }
.summary-total { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--border); display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; }
.desktop-proceed-btn { margin-top: 16px; width: 100%; padding: 14px; background: var(--red); color: #fff; border: none; border-radius: var(--r); font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity 0.1s; }
.desktop-proceed-btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.desktop-proceed-btn:not(:disabled):hover { opacity: 0.88; }
.slots-label { font-size: 13px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.global-toggle { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; user-select: none; }
.global-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; flex-shrink: 0; }
@media (min-width: 900px) {
  .rgo-cart-panel .global-toggle { padding: 0; margin: 0; font-size: 13px; color: var(--text-3); font-weight: 500; }
}

/* ── Misc overrides (legacy compatibility) ─────────────────── */
.empty { text-align: center; padding: 40px; color: var(--text-3); }
.cart-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.cart-item .qty { display: flex; align-items: center; gap: 6px; }
.cart-item .qty button { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }

/* Catalog hint (locked state) */
.catalog-hint::before { font-style: normal; }

/* Form misc */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Basket bar fix */
.basket-bar {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--sh-xs);
}

/* ── STICKY SELECTION BAR ────────────────────────────────── */
.sticky-bar {
  position: sticky;
  top: var(--dlv-sticky-total, var(--header-h));
  width: 100%;
  max-width: 100%;
  z-index: 10;

  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0;

  /* Hidden state */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* visible state */
.sticky-bar.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-inner {
  width: 100%;
  max-width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;

  /* Attached card — flat top, rounded bottom */
  background: #fff;
  border-radius: 0 0 16px 16px;
  border-top: none;
  padding: 10px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.sticky-date {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sticky-day,
.sticky-time {
  padding: 8px 14px;
  border-radius: 12px;
  background: #f5f5f5;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.sticky-day:empty,
.sticky-time:empty { display: none; }

.sticky-categories {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  opacity: 0.7;
  font-size: 12px;
  flex: 1 1 auto;
}

.sticky-categories::-webkit-scrollbar { display: none; }

.sticky-cat-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border-md);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}

.sticky-cat-btn:hover {
  background: var(--red-bg);
  border-color: var(--red-ring);
  color: var(--red-dark);
}

.sticky-cat-btn.active {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.sticky-cat-btn {
  transition: all 0.15s ease;
}
/* ── Sticky summary utility classes ─── */
.rgo-sticky-summary {
  display: flex;
  gap: 12px;
  align-items: center;
}

.rgo-sticky-pill {
  padding: 8px 14px;
  border-radius: 12px;
  background: #f5f5f5;
  font-size: 13px;
  font-weight: 500;
}

.rgo-sticky-category {
  opacity: 0.7;
  font-size: 12px;
}



/* ═══════════════════════════════════════════════════════════ */
/* COUPON / PROMO CODE SECTION                                  */
/* ═══════════════════════════════════════════════════════════ */

.co-promo {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.co-promo-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.co-promo-input {
  flex: 1;
  height: 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-sm);
  padding: 0 12px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s;
}
.co-promo-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 1.5px var(--red-ring);
}
.co-promo-input::placeholder { color: var(--text-3); font-weight: 400; letter-spacing: 0; }

.co-promo-btn {
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.co-promo-btn:hover   { background: #333; }
.co-promo-btn:active  { background: #111; }
.co-promo-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Error state */
.co-promo-error {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  padding: 6px 10px;
  background: rgba(220,38,38,0.06);
  border-radius: var(--r-sm);
  border: 1px solid rgba(220,38,38,0.18);
}

/* Applied state */
.co-promo--applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--green-bg);
  border: 1px solid var(--green-ring);
  border-radius: var(--r-sm);
}

.co-promo-code {
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 0.06em;
}

.co-promo-remove {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.co-promo-remove:hover { color: var(--text); }


/* ═══════════════════════════════════════════════════════════ */
/* VISIT GYULA CARD BLOCK                                       */
/* ═══════════════════════════════════════════════════════════ */

.co-vg-card {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border-md);
  border-radius: var(--r);
  background: var(--surface-2);
}

/* Confirmed state: green border tint */
.co-vg-card--confirmed {
  border-color: var(--green-ring);
  background: var(--green-bg);
}

.co-vg-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.co-vg-card-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
}

.co-vg-card-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
}

/* Input row: input + button side by side */
.co-vg-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.co-vg-input {
  flex: 1;
  height: 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-sm);
  padding: 0 12px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s;
}
.co-vg-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 1.5px var(--red-ring);
}
.co-vg-input::placeholder { color: var(--text-3); font-weight: 400; letter-spacing: 0; text-transform: none; }

.co-vg-check-btn {
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.co-vg-check-btn:hover  { background: #333; }
.co-vg-check-btn:active { background: #111; }

/* Error message */
.co-vg-error {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  padding: 5px 10px;
  background: rgba(220,38,38,0.06);
  border-radius: var(--r-sm);
  border: 1px solid rgba(220,38,38,0.18);
}

/* Success / confirmed state */
.co-vg-success {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}
.co-vg-success svg { flex-shrink: 0; }

.co-vg-clear {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.co-vg-clear:hover { color: var(--text); }



/* ═══════════════════════════════════════════════════════════ */
/* MOBILE — ≤899px — Single authoritative block               */
/* Consolidates phases 10E.2 through 10F.                     */
/* Each rule is the final effective value after all phases.   */
/* Desktop (≥900px) completely untouched.                     */
/* ═══════════════════════════════════════════════════════════ */

@media (max-width: 899px) {

  /* ── 1. Hide marketing hero ──────────────────────────────── */
  .rgo-hero { display: none !important; }

  /* ── 2. Page layout — desktop main hidden on mobile ─────── */
  /* #mb-app is shown instead (Phase 12 mobile shell).         */
  .rgo-page { display: none !important; }

  /* ── 3. Overflow protection ──────────────────────────────── */
  /* min-height: 0 collapses #app to its actual content height  */
  /* (.rgo-hero + .rgo-page are both display:none on mobile).   */
  /* Without this, #app reserves 100vh and pushes #mb-app below */
  /* the fold — the source of the phantom vertical space.       */
  #app { overflow-x: clip; min-height: 0; }
  .day-nav { display: none !important; }
  .mobile-days::before,
  .mobile-days::after { display: none; }

  /* ── 4. Layout rhythm ────────────────────────────────────── */
  .rgo-main { gap: 8px; }
  .rgo-selectors-row { gap: 8px; }
  .rgo-flow-section {
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: none;
  }
  .primary-flow {
    box-shadow: none;
    border-color: rgba(228, 0, 43, 0.20);
  }
  /* position:fixed so it stays visible throughout #mb-app scroll.            */
  /* position:sticky inside #app fails: #app has no height below the header, */
  /* so sticky sticks for 0px then scrolls away with #app.                   */
  .rgo-booking-header {
    position: fixed;
    left: 0;
    right: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  }

  /* ── 5. Booking header — Setup Mode ─────────────────────── */
  .rgo-booking-inner {
    padding: 14px 16px 18px;
  }
  .rgo-booking-main {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rgo-booking-left {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .rgo-booking-right { display: none; }
  .rgo-booking-inner .ctx-control {
    height: 44px;
    font-size: 15px;
    border-radius: 10px;
  }
  .rgo-booking-inner .ctx-label {
    font-size: 11px;
    margin-bottom: 2px;
  }

  /* ── 5b. Header close button — shown when expanded + ready ── */
  .rgo-header-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg);
    border-radius: 8px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.15s, color 0.15s;
  }
  .rgo-header-close:hover,
  .rgo-header-close:active {
    background: var(--border);
    color: var(--text-1);
  }

  /* ── 6. Booking header — Order Mode (collapsed) ──────────── */
  body.rgo-booking-collapsed .rgo-booking-main { display: none; }
  body.rgo-booking-collapsed .rgo-booking-inner { padding: 10px 16px; }
  body.rgo-booking-collapsed .rgo-booking-inner { padding: 8px 16px; }
  body.rgo-booking-collapsed .rgo-ctx-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    min-height: 32px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  body.rgo-booking-collapsed .rgo-ctx-pills .context-item {
    font-size: 12px;
  }

  /* ── 7. Section labels ───────────────────────────────────── */
  .rgo-flow-head  { gap: 7px; margin-bottom: 10px; }
  .rgo-flow-num   { width: 20px; height: 20px; font-size: 11px; box-shadow: none; }
  .rgo-flow-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
  }

  /* ── 8. Day selector ─────────────────────────────────────── */
  .rgo-flow-section--days {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: none;
    padding: 12px 14px;
  }
  .rgo-flow-section--days .active-day-header { font-size: 11px; }

  /* flex-start fixes iOS Safari: center-justified overflow-x clips left side */
  .mobile-days {
    gap: 6px;
    justify-content: flex-start;
    padding: 2px 0;
  }
  .day-pill {
    width: 68px;
    height: 56px;
    border-radius: 12px;
    gap: 3px;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  }
  .day-pill.active     { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0, 0, 0, 0.12); }
  .rgo-chip-day-title  { font-size: 12px; font-weight: 700; }
  .rgo-chip-day-sub    { font-size: 11px; }
  .day-pill-slot       { font-size: 9px; }

  /* ── 9. Slot selector — single-column compact list ───────── */
  .rgo-flow-section--slots {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: none;
    padding: 12px 14px;
  }
  .rgo-flow-section--slots::before { display: none; }

  .slots-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .slot-tile {
    width: 100%;
    max-width: none;
    height: 44px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 14px;
    gap: 8px;
    text-align: left;
    transform: none !important;
    transition: border-color 0.12s ease, background 0.12s ease;
  }
  .slot-tile .rgo-chip-slot-time {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    letter-spacing: -0.01em;
  }
  .slot-tile .slot-cap {
    flex-shrink: 0;
    margin-top: 0;
    font-size: 10px;
    font-weight: 700;
    text-align: right;
  }
  .slot-tile .slot-badge     { display: none; }
  .slot-tile .rgo-badge-reco { display: none; }
  .slot-tile.selected { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.12); }
  .rgo-chip-slot-meta { font-size: 10px; }
  .slots-empty {
    font-size: 13px;
    color: var(--text-3);
    padding: 8px 0;
    text-align: center;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  /* ── 10. Category strip ──────────────────────────────────── */
  /* overflow:visible overrides base overflow:hidden which clips */
  /* cat-bar's overflow-x:auto scroll container on mobile.      */
  .rgo-cats-strip {
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .cat-bar { padding: 4px 0; gap: 6px; }
  .cat-btn {
    padding: 6px 12px;
    font-size: 12px;
    touch-action: manipulation;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }

  /* ── 11. Product catalog grid ────────────────────────────── */
  .catalog-grid {
    grid-template-columns: minmax(0, 1fr); /* 1fr alone has auto min — forces track to never expand beyond container */
    gap: 0;
  }
  .catalog-section .catalog-grid {
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }
  .catalog-section      { margin-bottom: 16px; }
  .catalog-group-label  { font-size: 10px; margin: 8px 0 5px; }
  .catalog-section .section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 6px;
  }
  .date-label         { font-size: 12px; margin-bottom: 6px; }
  .products-day-label { font-size: 11px; margin-bottom: 8px; padding: 5px 10px; }

  /* ── 12. Products section wrapper: transparent flow ─────── */
  .rgo-flow-section--products {
    padding: 0 0 4px;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  /* ── 13. Product rows ────────────────────────────────────── */
  .product-card,
  .rgo-product-card {
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    gap: 10px;
    min-width: 0;      /* grid item must not push track width beyond container */
    transform: none !important;
  }
  .product-card:last-child,
  .rgo-product-card:last-child { border-bottom: none; }

  .card-inner   { flex: 1; min-width: 0; align-items: center; gap: 10px; }
  .card-content { gap: 0; min-width: 0; }            /* min-width:0 — Safari flex intrinsic-size fix */
  .card-image   { width: 48px; height: 48px; border-radius: 8px; }
  .card-desc    { display: none; }
  .box-contains { display: none; }

  .card-title {
    min-width: 0;          /* Safari: flex child inherits min-content without this */
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-bottom {
    min-width: 0;          /* Safari: column-flex child can expand without this */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    gap: 8px;
    margin-top: 3px;
  }
  .price {
    flex: 1;               /* fills space left after qty-control */
    min-width: 0;          /* allows shrinking below content minimum */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .qty-control { gap: 6px; flex-shrink: 0; }         /* flex-shrink:0 — explicit, never yields to price */
  .qty-btn     { width: 30px; height: 30px; font-size: 16px; border-width: 1.5px; }
  .qty-value   { font-size: 14px; min-width: 18px; }

  /* Safari intrinsic-width fix for slot inline product rows (inside slot section).
     .slot-product-name has flex:1 in base CSS but no min-width:0 — long Hungarian
     product names expand the row beyond the slot section's content box.            */
  .slot-product-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .slot-product-row  { min-width: 0; }

  /* ── 14. Basket bar + sticky bar ────────────────────────── */
  .basket-bar  { border-radius: 10px; padding: 10px 14px; box-shadow: none; }

  /* Sticky selection bar: clip overflow so expanded rgo-main cannot bleed
     into the visible viewport. position:sticky escapes overflow-x:clip on
     #app in iOS Safari — so we clip the bar itself instead.             */
  .sticky-bar  { overflow-x: clip; }

  /* Match sticky-inner horizontal padding to rgo-page mobile side padding (12px)
     so the sticky pill row is flush with the content sections below it.
     Overrides the base padding: 10px 20px shorthand's left/right values. */
  .sticky-inner {
    border-radius: 0 0 12px 12px;
    padding-left:  12px;
    padding-right: 12px;
  }

  /* ── 15. Mobile cart bar (fixed bottom) ──────────────────── */
  #mobile-cart-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;  /* L1 — Sticky UI */
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(17,17,17,0.12);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    align-items: center;
    gap: 12px;
  }
  .mcb-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
  }
  #mobile-cart-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
  }
  #mobile-cart-total {
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  /* Toast positioned above cart bar + safe area */
  #toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

}

/* ── Tablet safety: 640–899px ──────────────────────────────── */
@media (min-width: 640px) and (max-width: 899px) {
  .rgo-page  { padding-left: 16px; padding-right: 16px; }
  .day-pill  { width: 72px; height: 58px; }
  .slot-tile { height: 46px; }
}


/* ═══════════════════════════════════════════════════════════ */
/* MOBILE APP SHELL — Phase 12                                 */
/* Isolated mb- namespace. Never overrides desktop classes.   */
/* Desktop (≥900px) completely untouched.                     */
/* TODO: future — multilingual labels, PWA prompt,            */
/*   native wrapper, delivery tracking, upsell, branding.     */
/* ═══════════════════════════════════════════════════════════ */

/* Hidden by default — shown only on mobile by media query */
#mb-app { display: none; }

@media (max-width: 899px) {

  /* ── Responsive switch ────────────────────────────────────── */
  /* .rgo-page already display:none in the consolidated block.  */
  #mb-app {
    display: block;
    width: 100%;
    padding: calc(var(--header-h, 72px) + 8px) 0 calc(80px + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
  }

  /* ── Fixed stack — two progressive rows, position:fixed ─────── */
  /* Fixed = out of document flow. Rows never shift page layout.  */
  /* Booking context owned by .rgo-booking-header (z-index:1000). */
  /* JS adds/removes .visible as user scrolls.                    */
  #mb-sticky-stack {
    position: fixed;
    top: var(--dlv-sticky-total, var(--header-h, 72px));
    left: 0;
    right: 0;
    z-index: 200;  /* L1 — Sticky UI (above cart bar) */
    background: var(--bg, #f6f7f9);
  }
  .mb-stack-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    overflow: hidden;
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition: height 0.2s ease, opacity 0.18s ease;
  }
  .mb-stack-row.visible {
    height: 44px;
    opacity: 1;
    pointer-events: auto;
    border-bottom: 1px solid var(--border);
  }

  /* ── Row 1: compact day strip + slot chip ────────────────────── */
  .mb-stk-days {
    display: flex;
    gap: 5px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mb-stk-days::-webkit-scrollbar { display: none; }
  .mb-stk-day-pill {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-stk-day-pill.active {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
  }
  .mb-stk-slot { flex-shrink: 0; }
  .mb-stk-slot-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(228, 0, 43, 0.07);
    border: 1.5px solid var(--red);
    color: var(--red);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  /* ── Row 2: sticky category nav clone ────────────────────────── */
  #mb-sticky-cats .mb-cat-bar {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    white-space: nowrap;
  }
  #mb-sticky-cats .mb-cat-bar::-webkit-scrollbar { display: none; }

  /* ── Inline category bar — geometry anchor for sticky trigger ── */
  #mb-cat-bar-inline {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px;
    white-space: nowrap;
  }
  #mb-cat-bar-inline::-webkit-scrollbar { display: none; }

  /* ── Sections ─────────────────────────────────────────────── */
  .mb-section {
    margin: 0 12px 8px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    /* Reserve clearance for fixed stack (header + 2 rows max) when scrolling to anchor */
    scroll-margin-top: calc(var(--dlv-sticky-total, var(--header-h, 72px)) + 96px);
  }
  .mb-section-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
  }
  .mb-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .mb-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
  }

  /* ── Day carousel ─────────────────────────────────────────── */
  .mb-day-carousel {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 4px;
  }
  .mb-day-carousel::-webkit-scrollbar { display: none; }

  .mb-day-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 68px;
    min-height: 56px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
    padding: 6px 4px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  /* ── SELECTED DAY — solid primary fill, white text, glow ─── */
  .mb-day-pill.active {
    border-color: var(--red-dark);
    background: var(--red-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .mb-day-pill.active .mb-pill-name,
  .mb-day-pill.active .mb-pill-date,
  .mb-day-pill.active .mb-pill-slot { color: #fff !important; }

  .mb-pill-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
  }
  .mb-pill-date {
    font-size: 11px;
    color: var(--text-3);
    line-height: 1;
  }
  .mb-pill-slot {
    font-size: 9px;
    color: var(--red);
    font-weight: 700;
    line-height: 1;
    margin-top: 1px;
  }

  /* ── Slot list ────────────────────────────────────────────── */
  .mb-slot-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .mb-slot-tile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    touch-action: manipulation;
    gap: 8px;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  /* ── SELECTED SLOT — same visual language as selected day ─── */
  .mb-slot-tile.selected {
    border-color: var(--red-dark);
    background: var(--red-dark);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.12);
  }
  /* slot-cap and badge inside selected tile: override explicit child colors to white */
  .mb-slot-tile.selected .slot-cap,
  .mb-slot-tile.selected .slot-cap--full,
  .mb-slot-tile.selected .slot-cap--almost,
  .mb-slot-tile.selected .slot-cap--popular,
  .mb-slot-tile.selected .slot-cap--ok,
  .mb-slot-tile.selected .slot-cap--unlimited {
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
  }
  .mb-slot-tile:disabled,
  .mb-slot-tile.is-full {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .mb-slot-tile.is-recommended {
    border-color: var(--red);
    border-style: dashed;
  }
  /* ── HOVER — desktop/mouse only, never fires on touch ────── */
  @media (hover: hover) {
    .mb-day-pill:not(.active):hover {
      border-color: rgba(228, 0, 43, 0.45);
      background: rgba(228, 0, 43, 0.04);
    }
    .mb-slot-tile:not(.selected):not(:disabled):not(.is-full):hover {
      border-color: rgba(228, 0, 43, 0.45);
      background: rgba(228, 0, 43, 0.04);
    }
  }
  .mb-slot-info {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 6px;
    min-height: 16px;
  }

  /* ── Products section ─────────────────────────────────────── */
  .mb-section--products {
    padding: 0 0 8px;
    border: none;
    background: transparent;
    box-shadow: none;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
  .mb-products-head {
    padding: 10px 14px 6px;
    margin-bottom: 0;
  }

  /* ── Category strip — lives in #mb-sticky-stack Row 3 ────────── */
  .mb-cat-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mb-cat-btn.active {
    border-color: var(--red-dark);
    background: var(--red-dark);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  }

  /* ── Product list ─────────────────────────────────────────── */
  .mb-product-list {
    padding: 8px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .mb-catalog-section {
    margin-bottom: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    background: var(--surface);
  }
  .mb-catalog-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    padding: 7px 14px;
    background: var(--bg, #f2f2f7);
    border-bottom: 1px solid var(--border);
  }
  /* ── Product card (mobile-native, no desktop inheritance) ─── */
  .mb-product-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin: 0 14px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: background 0.12s, border-color 0.15s;
    touch-action: manipulation;
  }
  .mb-product-card.selected  {
    background: var(--red-bg);
    border-color: var(--red);
  }
  .mb-product-card.is-locked { opacity: var(--opacity-disabled); }

  /* Hero image — top of card, fixed aspect ratio */
  .mb-card-hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg, #f2f2f7);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mb-card-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Card body — below image */
  .mb-card-body {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mb-card-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
  }
  .mb-card-desc {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mb-card-body .card-highlight {
    margin-top: 2px;
  }
  .mb-card-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
  }
  .mb-card-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  .mb-price {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
  }
  .mb-card-detail-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
  }
  /* qty controls — always visible, bottom right */
  .mb-qty-control {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .mb-qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--text);
    transition: background 0.1s, border-color 0.1s, color 0.1s, box-shadow 0.1s;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-qty-btn:active:not(:disabled) { background: var(--bg); box-shadow: none; }
  .mb-qty-btn:disabled { opacity: 0.3; cursor: default; }
  .mb-qty-btn.plus {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }
  .mb-qty-btn.plus:active:not(:disabled) { background: var(--red-dark); border-color: var(--red-dark); }
  .mb-qty-value {
    font-size: 14px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    color: var(--text);
    flex-shrink: 0;
  }

  /* ── Empty / lock messages ────────────────────────────────── */
  .mb-empty-msg,
  .mb-lock-msg {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-3);
    font-weight: 500;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* PRODUCT DETAIL BOTTOM SHEET                                 */
/* ═══════════════════════════════════════════════════════════ */

#mb-product-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;  /* L6 — Product sheet */
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
body.mb-sheet-open #mb-product-sheet-overlay {
  opacity: 1;
  pointer-events: auto;
}

#mb-product-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3001;  /* L6 — Product sheet (above overlay) */
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
body.mb-sheet-open #mb-product-sheet {
  transform: translateY(0);
}

.mb-sheet-handle-bar {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
  flex-shrink: 0;
  cursor: grab;
}
.mb-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.15);
}

.mb-sheet-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

.mb-sheet-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #fff5f7 0%, #fce8ec 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mb-sheet-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mb-sheet-image-emoji {
  font-size: 64px;
  line-height: 1;
}

.mb-sheet-body {
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: max(36px, env(safe-area-inset-bottom));
}
.mb-sheet-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.mb-sheet-tagline {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 4px;
  font-style: italic;
  letter-spacing: 0.01em;
}
.mb-sheet-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--red);
  margin-top: 4px;
}
.mb-sheet-body .product-badge-row { margin-top: 10px; }
.mb-sheet-desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin-top: 10px;
}
.mb-sheet-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 22px;
  margin-bottom: 5px;
}
.mb-sheet-contents {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}
.mb-sheet-contents li { list-style: disc; }

/* ── Nutrition row ──────────────────────────────────────── */
.mb-sheet-nutrition {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.mb-nutri-item {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}
.mb-nutri-item b {
  font-weight: 700;
  color: var(--text);
}

/* ── Recommendations row — editorial hospitality cards ──── */
.mb-sheet-recs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.mb-sheet-recs::-webkit-scrollbar { display: none; }
/* Editorial card: horizontal thumb + info */
.mb-sheet-rec-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  max-width: 220px;
  background: var(--surface-2, #f9f9fb);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.mb-sheet-rec-item:active { opacity: 0.65; transform: scale(0.98); }
.mb-sheet-rec-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  overflow: hidden;
}
.mb-sheet-rec-thumb img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  display: block;
}
.mb-sheet-rec-thumb-placeholder {
  width: 44px;
  height: 44px;
  background: var(--bg-2, #ebebeb);
  border-radius: 9px;
}
.mb-sheet-rec-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mb-sheet-rec-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-sheet-rec-note {
  font-size: 11px;
  color: var(--text-3, #9ca3af);
  font-style: italic;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Qty row ────────────────────────────────────────────── */
.mb-sheet-qty-row {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.mb-sheet-qty-row .mb-qty-btn {
  width: 48px;
  height: 48px;
  font-size: 24px;
  border-radius: 14px;
}
.mb-sheet-qty-row .mb-qty-value {
  font-size: 22px;
  font-weight: 700;
  min-width: 32px;
  text-align: center;
}
.mb-sheet-lock-msg {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 8px 0 4px;
}

/* ── Close button ───────────────────────────────────────── */
.mb-sheet-handle-bar {
  position: relative;
}
.mb-sheet-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-2, #f0f0f0);
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Desktop: center the sheet as a constrained card */
@media (min-width: 600px) {
  #mb-product-sheet {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 520px;
    transform: translateX(-50%) translateY(100%);
  }
  body.mb-sheet-open #mb-product-sheet {
    transform: translateX(-50%) translateY(0);
  }
}

/* ── Phase 20.2 — Premium Food Intelligence Sheet ─────────────────────────── */

/* Nutrition stat grid — 4 compact cards */
.mb-nutri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 8px;
}
.mb-nutri-stat {
  background: var(--surface-2, #f9f9fb);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px);
  padding: 11px 6px 9px;
  text-align: center;
}
.mb-nutri-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.mb-nutri-stat-lbl {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.2;
}

/* Sheet allergen chips — [eu_num] + name, warm red tone */
.mb-sheet-allergen-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mb-allergen-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(220, 38, 38, 0.07);
  color: #991b1b;
  border-radius: 8px;
  padding: 5px 9px 5px 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.mb-allergen-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(220, 38, 38, 0.14);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Dietary badge colors */
.badge--diet-green { background: rgba(22,163,74,0.12); color: #14532d; }
.badge--diet-vegan { background: rgba(21, 128, 61, 0.14); color: #14532d; }
.badge--diet-blue  { background: rgba(37,  99, 235, 0.11); color: #1e3a8a; }
.badge--diet-amber { background: rgba(217,119,   6, 0.13); color: #78350f; }

/* Dietary badge row: slightly larger than card badges */
.mb-badge-row--dietary .product-badge {
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  border-radius: 7px;
  gap: 4px;
}

/* Sheet commercial badges: slightly larger than card context */
.mb-sheet-body .product-badge-row:not(.mb-badge-row--dietary) .product-badge {
  height: 22px;
  padding: 0 9px;
  font-size: 10px;
}

/* Recommendation placeholder */
.mb-sheet-rec-placeholder {
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 0 2px;
  font-style: italic;
}

/* ── End Phase 20.2 ──────────────────────────────────────────────────────── */

/* ── Phase 21.0 — Curated Commerce Layer ────────────────────────────────── */

/* Curated experience pills — editorial, above nutrition */
.mb-curated-exp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.mb-curated-exp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-2, #4b5563);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Recommendation strip tap styles moved to Phase 21.1 rec card rewrite. */

/* ── End Phase 21.0 ──────────────────────────────────────────────────────── */

/* ── Phase 21.1 — Curated Experience Registry + Editorial Rec Cards ──────── */

/* Curated pill SVG icon vertical alignment */
.mb-curated-exp-pill svg { vertical-align: middle; flex-shrink: 0; }

/* ── End Phase 21.1 ──────────────────────────────────────────────────────── */

/* ── Phase 30.2 — Email-link room picker prompt ─────────────────────────── */

/* Pulsing highlight on the room selector when guest must pick a room */
.ctx-highlight {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 1.5px var(--red-ring) !important;
  animation: rgo-pulse-ring 1.5s ease-in-out 3;
}
@keyframes rgo-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--red-ring); }
  50%      { box-shadow: 0 0 0 3px var(--red-ring); }
}

/* Inline hint text below the room selector */
.ctx-room-hint {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  margin-top: 4px;
  animation: rgo-fade-in 0.3s ease;
}
@keyframes rgo-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════ */
/* INTRO OVERLAY — first visit only                            */
/* ═══════════════════════════════════════════════════════════ */
.rgo-intro {
  position: fixed; inset: 0;
  z-index: 5000;  /* L7 — Onboarding gates */
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: rgo-intro-fadein 0.3s ease;
}
@keyframes rgo-intro-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.rgo-intro.rgo-intro-out {
  animation: rgo-intro-fadeout 0.25s ease forwards;
}
@keyframes rgo-intro-fadeout {
  to { opacity: 0; }
}

.rgo-intro-box {
  background: var(--surface, #fff);
  border-radius: 20px;
  max-width: 380px;
  width: 100%;
  padding: 44px 32px 24px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  position: relative;
}

/* Skip link — top-right corner */
.rgo-intro-skip {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3, #999);
  cursor: pointer;
  padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.rgo-intro-skip:active { opacity: 0.5; }

/* Fixed-height card stage — prevents box jumping */
.rgo-intro-stage {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.rgo-intro-card {
  display: none;
  width: 100%;
}
.rgo-intro-card.active {
  display: block;
  animation: rgo-intro-fwd 0.28s ease;
}
.rgo-intro-card.active.rgo-intro-rev {
  animation: rgo-intro-bwd 0.28s ease;
}
@keyframes rgo-intro-fwd {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rgo-intro-bwd {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.rgo-intro-icon {
  margin-bottom: 18px;
  line-height: 1;
  color: var(--red, #E4002B);
}
.rgo-intro-icon svg { display: block; margin: 0 auto; }
.rgo-intro-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text, #1a1a1a);
  margin: 0 0 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.rgo-intro-text {
  font-size: 14px;
  color: var(--text-2, #555);
  line-height: 1.65;
  margin: 0;
  padding: 0 4px;
}

/* Context detail block inside card 4 */
.rgo-intro-ctx-detail {
  margin: 12px 0 6px;
  padding: 10px 14px;
  background: var(--bg, #f8f8f8);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1a1a1a);
  line-height: 1.5;
}
.rgo-intro-ctx-dates {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2, #555);
}

/* Swipe hint */
.rgo-intro-swipe-hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3, #999);
  margin: 20px 0 2px;
  letter-spacing: 0.08em;
  animation: rgo-intro-hint-nudge 2.5s ease-in-out infinite;
}
@keyframes rgo-intro-hint-nudge {
  0%, 100% { opacity: 0.45; letter-spacing: 0.08em; }
  50%      { opacity: 0.85; letter-spacing: 0.14em; }
}

/* Progress counter */
.rgo-intro-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3, #999);
  letter-spacing: 0.1em;
  margin: 2px 0 16px;
}

.rgo-intro-btn {
  display: block;
  width: 100%;
  padding: 13px 24px;
  border: none;
  border-radius: 10px;
  background: var(--red, #E4002B);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.rgo-intro-btn:active { transform: scale(0.97); }

/* ── End Phase 30.2 ─────────────────────────────────────────────────────── */

/* ── LANGUAGE GATE (Phase 76.2) ──────────────────────────────────────────── */
.rgo-lang-gate {
  position: fixed; inset: 0;
  z-index: 5001;  /* L7 — Onboarding gates (above intro) */
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: rgo-intro-fadein 0.3s ease;
}
.rgo-lang-gate.rgo-lang-gate-out {
  animation: rgo-intro-fadeout 0.25s ease forwards;
}
.rgo-lang-gate-box {
  background: var(--surface, #fff);
  border-radius: 20px;
  max-width: 380px;
  width: 100%;
  padding: 40px 28px 32px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
.rgo-lang-gate-logo {
  margin-bottom: 20px;
}
.rgo-lang-gate-logo img {
  height: 28px;
  filter: brightness(0) saturate(100%);
}
.rgo-lang-gate-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #111);
  margin-bottom: 24px;
  line-height: 1.4;
}
.rgo-lang-gate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rgo-lang-gate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  border: 1.5px solid var(--border-md, rgba(17,17,17,0.14));
  border-radius: 12px;
  background: var(--surface, #fff);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text, #111);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.rgo-lang-gate-btn:hover {
  border-color: var(--red, #E4002B);
  background: var(--red-bg, rgba(228,0,43,0.06));
}
.rgo-lang-gate-btn:active {
  transform: scale(0.97);
}
/* ── End Phase 76.2 ──────────────────────────────────────────────────────── */

/* ── LANGUAGE SWITCHER (Phase 76.6) ──────────────────────────────────────── */
.rgo-lang-sw {
  position: relative;
  display: inline-flex;
}
.rgo-lang-sw-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border, rgba(17,17,17,0.09));
  border-radius: 6px;
  background: var(--surface, #fff);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-2, #444);
  cursor: pointer;
  transition: border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.rgo-lang-sw-btn:hover { border-color: var(--text-3, #888); }
.rgo-lang-sw-icon { flex-shrink: 0; opacity: 0.6; }
.rgo-lang-sw-caret { flex-shrink: 0; opacity: 0.5; transition: transform 0.2s; }
.rgo-lang-sw--open .rgo-lang-sw-caret { transform: rotate(180deg); }

.rgo-lang-sw-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-md, rgba(17,17,17,0.14));
  border-radius: 10px;
  box-shadow: var(--sh, 0 8px 28px rgba(0,0,0,0.10));
  z-index: 200;
  overflow: hidden;
}
.rgo-lang-sw--open .rgo-lang-sw-menu { display: block; }

.rgo-lang-sw-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #111);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.rgo-lang-sw-item:hover { background: var(--bg, #f6f7f9); }
.rgo-lang-sw-item--active {
  color: var(--red, #E4002B);
  font-weight: 600;
}
/* ── Site Footer — Legal / Payment / Contact ─────────────────────────────── */
.rgo-site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding: 48px 0 32px;
}
.rgo-footer-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Section 1: Secure Payment */
.rgo-footer-payment {
  text-align: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.rgo-footer-payment-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 16px;
}
.rgo-footer-payment-label svg { color: #16a34a; stroke: #16a34a; }
.rgo-footer-barion-logo {
  display: block;
  margin: 0 auto 10px;
  height: 40px;
  width: auto;
  object-fit: contain;
}
.rgo-footer-barion-note {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  margin-bottom: 6px;
}
.rgo-footer-barion-info {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
}
.rgo-footer-barion-info:hover { color: var(--red); }

/* Sections 2 + 3: Legal & Contact columns */
.rgo-footer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.rgo-footer-col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.rgo-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rgo-footer-links li { margin-bottom: 8px; }
.rgo-footer-links a {
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
}
.rgo-footer-links a:hover { color: var(--red); }

/* Contact */
.rgo-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rgo-footer-brand {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.rgo-footer-contact a {
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
}
.rgo-footer-contact a:hover { color: var(--red); }

/* Section 4: Copyright */
.rgo-footer-copy {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}

/* Responsive: stack columns on mobile */
@media (max-width: 599px) {
  .rgo-site-footer { margin-top: 40px; padding: 32px 0 24px; }
  .rgo-footer-columns { grid-template-columns: 1fr; gap: 24px; }
  .rgo-footer-barion-logo { height: 32px; }
}

/* Mobile: extra bottom padding so footer clears the fixed cart bar */
@media (max-width: 899px) {
  .rgo-site-footer { padding-bottom: 80px; }
}
/* ── End Site Footer ─────────────────────────────────────────────────────── */

/* ── Consent Banner ──────────────────────────────────────────────────────── */
.rgo-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6000;  /* L8 — Consent */
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
  padding: 20px 24px;
}
.rgo-consent-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.rgo-consent-text { flex: 1; min-width: 0; }
.rgo-consent-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.rgo-consent-text p { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0; }
.rgo-consent-text a { color: var(--red); text-decoration: none; }
.rgo-consent-text a:hover { text-decoration: underline; }
.rgo-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.rgo-consent-btn { font-family: inherit; font-size: 13px; font-weight: 600; border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.rgo-consent-btn--primary { background: var(--red); color: #fff; }
.rgo-consent-btn--primary:hover { background: var(--red-dark); }
.rgo-consent-btn--secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border-md); }
.rgo-consent-btn--secondary:hover { background: var(--border); }
.rgo-consent-btn--link { background: none; color: var(--text-2); padding: 10px 8px; }
.rgo-consent-btn--link:hover { color: var(--red); }

@media (max-width: 720px) {
  .rgo-consent-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .rgo-consent-actions { flex-direction: column; gap: 6px; }
  .rgo-consent-btn { text-align: center; }
  .rgo-consent-banner { padding-bottom: 80px; }
}

/* ── Consent Customize Dialog ────────────────────────────────────────────── */
.rgo-consent-dialog { position: fixed; inset: 0; z-index: 6001; /* L8 — Consent (above banner) */ background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; padding: 24px; }
.rgo-consent-dialog-box { background: var(--surface); border-radius: 14px; box-shadow: var(--sh-lg); width: 100%; max-width: 440px; overflow: hidden; }
.rgo-consent-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.rgo-consent-dialog-header strong { font-size: 16px; color: var(--text); }
.rgo-consent-dialog-close { background: none; border: none; font-size: 18px; color: var(--text-3); cursor: pointer; padding: 4px; line-height: 1; }
.rgo-consent-dialog-close:hover { color: var(--text); }
.rgo-consent-dialog-body { padding: 8px 0; }
.rgo-consent-row { display: flex; align-items: center; gap: 12px; padding: 14px 24px; cursor: pointer; transition: background 0.12s; }
.rgo-consent-row:hover { background: var(--bg); }
.rgo-consent-row--locked { opacity: 0.6; cursor: default; }
.rgo-consent-row--locked:hover { background: transparent; }
.rgo-consent-row-info { flex: 1; min-width: 0; }
.rgo-consent-row-title { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.rgo-consent-row-desc { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.rgo-consent-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--red); flex-shrink: 0; }
.rgo-consent-dialog-footer { padding: 16px 24px; border-top: 1px solid var(--border); }
.rgo-consent-dialog-footer .rgo-consent-btn { width: 100%; text-align: center; }
/* ── End Consent ─────────────────────────────────────────────────────────── */

/* ── GO-Box validation panel ─────────────────────────────────────────────── */
.rgo-box-validation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
}
.rbv-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.2;
}
.rbv-text { flex: 1; min-width: 0; }
.rbv-title {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  line-height: 1.4;
}
ul.rbv-dates {
  margin: 6px 0 0;
  padding-left: 18px;
  list-style: disc;
  font-size: 13px;
  font-weight: 500;
  color: #b45309;
  line-height: 1.5;
}
ul.rbv-dates li { margin-bottom: 2px; }
.rbv-hint {
  font-size: 12px;
  font-weight: 400;
  color: #a16207;
  line-height: 1.4;
  margin-top: 8px;
}
/* ── End GO-Box validation ───────────────────────────────────────────────── */

/* ── Inline box-missing warning in cart summary ──────────────────────────── */
.checkout-box-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff8f0;
  border: 1px solid #fed7aa;
  cursor: pointer;
  transition: background 0.15s ease;
}
.checkout-box-warn:active { background: #fff1e0; }
.cbw-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.2;
}
.cbw-text { flex: 1; min-width: 0; }
.cbw-title {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  line-height: 1.3;
}
.cbw-hint {
  font-size: 11px;
  font-weight: 400;
  color: #b45309;
  line-height: 1.3;
  margin-top: 2px;
}
.cbw-chevron {
  flex-shrink: 0;
  align-self: center;
  font-size: 20px;
  font-weight: 300;
  color: #d97706;
  line-height: 1;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.checkout-box-warn:active .cbw-chevron { transform: translateX(2px); }
/* ── End box-missing warning ─────────────────────────────────────────────── */

/* ── FOCUS MODE ─────────────────────────────────────────────────────────── */
/* Cinematic dark overlay + coach mark until booking context is complete.   */
/* Booking header z-index: 1000 stays above — the only active surface.     */
/* Visible by default (zero CLS). Fades on body.rgo-ctx-ready.            */

/* Focus layer — clean dark overlay */
#rgo-focus-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Context complete: overlay + coach mark fade out */
body.rgo-ctx-ready #rgo-focus-layer {
  opacity: 0;
  pointer-events: none;
}
body.rgo-ctx-ready .rgo-coach-mark {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  pointer-events: none;
}

/* Coach mark — absolutely positioned under the active field */
.rgo-booking-inner { position: relative; padding-bottom: 44px; transition: padding-bottom 0.3s ease; }
body.rgo-ctx-ready .rgo-booking-inner { padding-bottom: 10px; }
.rgo-coach-mark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: top 250ms ease, left 250ms ease, opacity 150ms ease, transform 150ms ease;
  transform: translateX(-50%);
}
.rgo-coach-mark-arrow {
  color: var(--red, #E4002B);
  flex-shrink: 0;
  animation: rgo-coach-float 2.5s ease-in-out infinite;
}
@keyframes rgo-coach-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.rgo-coach-mark-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2, #52525B);
  margin: 0;
  line-height: 1;
  background: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* Fade during step transition */
.rgo-coach-mark.rgo-coach-fade {
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
}

/* Per-field breathing — only on fields that need attention */
.ctx-field--breathe .ctx-control {
  border-color: var(--red);
  box-shadow: 0 0 0 1.5px var(--red-ring);
}
@keyframes rgo-field-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* Nudge: smooth scroll + subtle bounce on booking header */
.rgo-booking-header.rgo-ctx-nudge {
  animation: rgo-ctx-nudge-anim 0.3s ease;
}
@keyframes rgo-ctx-nudge-anim {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(3px); }
  60%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
/* ── End focus layer ───────────────────────────────────────────────────── */

/* ── Section Guidance — unified attention emphasis ────────────────────── */

/* Section nudge — reusable on any flow section */
.rgo-flow-section.rgo-section-nudge {
  animation: rgo-section-nudge-anim 0.3s ease;
}
@keyframes rgo-section-nudge-anim {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(3px); }
  60%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* Section "needs attention" — crisp border emphasis, no glow */
.rgo-flow-section.rgo-section-attention {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 2px 6px rgba(0, 0, 0, 0.08);
}
.rgo-flow-section.rgo-section-attention .rgo-flow-num {
  background: var(--red, #E4002B);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Backward compat aliases (slot emphasis) */
.rgo-flow-section--slots.rgo-slot-nudge { animation: rgo-section-nudge-anim 0.3s ease; }
.rgo-flow-section--slots.rgo-slot-needs-attention { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 2px 6px rgba(0,0,0,0.08); }
.rgo-flow-section--slots.rgo-slot-needs-attention .rgo-flow-num { background: var(--red, #E4002B); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }

/* ── Order Coach — same visual language as booking coach, arrow ↓ ────── */
.rgo-order-coach {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 2px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 150ms ease, transform 150ms ease;
}
.rgo-order-coach-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2, #52525B);
  margin: 0;
  line-height: 1;
  background: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  white-space: nowrap;
}
.rgo-order-coach-arrow {
  color: var(--red, #E4002B);
  flex-shrink: 0;
  animation: rgo-coach-float 2.5s ease-in-out infinite; /* reuse booking coach keyframes */
}
.rgo-order-coach.rgo-coach-fade {
  opacity: 0;
  transform: translateY(-4px);
}

/* ── Catalog lock banner — premium "select slot first" ───────────────── */
.catalog-lock-banner {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px 24px;
  text-align: center;
}
.clb-icon {
  font-size: 28px;
  line-height: 1;
}
.clb-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #18181B);
  line-height: 1.3;
}
.clb-hint {
  font-size: 13px;
  color: var(--text-3, #A1A1AA);
  line-height: 1.4;
  max-width: 280px;
}

/* ── Day pill — missing slot warning ─────────────────────────────────── */
.day-pill--no-slot {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 1.5px rgba(245, 158, 11, 0.2);
}
.day-pill-warn {
  font-size: 10px;
  line-height: 1;
  color: #f59e0b;
}
.mb-day-pill.day-pill--no-slot {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 1.5px rgba(245, 158, 11, 0.2);
}

/* ── Same-all-days inline slot info ──────────────────────────────────── */
.rgo-same-all-info {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-3, #A1A1AA);
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(245, 158, 11, 0.06);
  border-left: 2px solid #f59e0b;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════ */
/* DELIVERY DAY SELECTOR                                       */
/* ═══════════════════════════════════════════════════════════ */
.dlv-day-header {
  margin-bottom: 14px;
}
.dlv-day-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.dlv-day-count {
  font-size: 13px;
  color: var(--text-4);
  font-weight: 500;
  transition: color 0.2s;
}
.dlv-day-count--active {
  color: var(--red);
  font-weight: 600;
}
.dlv-day-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  gap: 8px;
}
@media (max-width: 600px) {
  .dlv-day-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}
.dlv-day-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.dlv-day-card:hover {
  border-color: var(--red);
}
.dlv-day-card:active {
  transform: scale(0.98);
}
/* ○ Selected (incomplete) */
.dlv-day-card.dlv-day--selected {
  border-color: var(--red);
  background: var(--red-bg);
}
/* ● Active (currently editing) */
.dlv-day-card.dlv-day--active {
  border-color: var(--red);
  background: var(--red-bg);
  box-shadow: 0 0 0 2px var(--red-ring);
}
/* ✓ Complete (slot + products) */
.dlv-day-card.dlv-day--complete {
  border-color: var(--green);
  background: rgba(22,163,74,0.04);
}
.dlv-day-card.dlv-day--complete .dlv-day-check {
  border-color: var(--green);
  background: var(--green);
}
.dlv-day-card.dlv-day--tomorrow {
  border-color: var(--red-ring);
}
.dlv-day-card.dlv-day--tomorrow .dlv-day-label::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
/* Status dots */
.dlv-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dlv-dot--active {
  background: var(--red);
}
.dlv-dot--empty {
  border: 2px solid var(--border-md);
  width: 10px;
  height: 10px;
}
/* Completion info */
.dlv-day-info {
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
  margin-left: auto;
}
.dlv-day-check {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-md);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
.dlv-day--selected .dlv-day-check {
  border-color: var(--red);
  background: var(--red);
}
.dlv-day-label {
  font-weight: 600;
  flex: 1;
}
.dlv-day-date {
  font-size: 13px;
  color: var(--text-3);
}
/* Copy-to-all button */
.dlv-copy-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 4px;
  border: 2px dashed var(--border-md);
  border-radius: var(--r-sm);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  grid-column: 1 / -1;
}
.dlv-copy-all-btn:hover {
  border-color: var(--red);
  background: var(--red-bg);
}

/* ── DELIVERY CONTEXT HEADER ─────────────────────────────── */
/* Same visual weight and sticky behavior as .rgo-booking-header. */
/* Uses same max-width (1480px), padding base (10px 32px), z-index (1000). */
.rgo-delivery-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.rgo-delivery-header-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Row 1: mode label + lang + edit button */
.rgo-dlv-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rgo-dlv-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--red);
}
.rgo-dlv-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rgo-dlv-edit-btn {
  padding: 4px 14px;
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-sm);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.rgo-dlv-edit-btn:hover {
  border-color: var(--red);
  color: var(--red);
}
/* Row 2: address + days badge (no label — pin icon is self-explanatory) */
.rgo-dlv-address-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rgo-dlv-pin {
  flex-shrink: 0;
  color: var(--text-3);
}
.rgo-dlv-address-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rgo-dlv-addr-line1 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.rgo-dlv-addr-line2 {
  font-size: 13px;
  color: var(--text-2);
}
.rgo-dlv-days-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  background: var(--red-bg);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  transition: background 0.3s, color 0.3s;
}
.rgo-dlv-days-badge--done {
  color: var(--green);
  background: var(--green-bg);
}
@media (max-width: 900px) {
  .rgo-delivery-header-inner { padding: 6px 16px; }
  .rgo-dlv-addr-line1 { font-size: 13px; }
}

/* ── DELIVERY SELECTED DAYS NAVIGATION ──────────────────── */
/* Sticky pill row between #days and #slots — always visible while ordering */
.dlv-selected-days-nav {
  position: sticky;
  top: var(--header-h, 72px);
  z-index: 90;
  background: var(--bg);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 0 4px;
}
.dlv-selected-days-nav:empty { display: none; }
@media (max-width: 480px) {
  .dlv-selected-days-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .dlv-selected-days-nav::-webkit-scrollbar { display: none; }
  .dlv-nav-pill { flex-shrink: 0; }
}
.dlv-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.dlv-nav-pill:hover {
  border-color: var(--text-3);
}
.dlv-nav-pill.dlv-nav--active {
  border-color: var(--red);
  color: var(--text);
  background: var(--red-bg);
}
.dlv-nav-pill.dlv-nav--done {
  border-color: var(--green);
  color: var(--green);
}
.dlv-nav-pill.dlv-nav--done:hover {
  background: var(--green-bg);
}
.dlv-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}
.dlv-nav-dot--empty {
  background: transparent;
  border: 2px solid var(--border-md);
}
.dlv-nav-icon {
  flex-shrink: 0;
  color: var(--green);
}
.dlv-nav-label {
  font-weight: 700;
}
.dlv-nav-date {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-4);
}
.dlv-nav--active .dlv-nav-date {
  color: var(--text-3);
}

/* ── DELIVERY COACH (separate block below nav) ──────────── */
.dlv-delivery-coach {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.5;
  padding: 10px 16px;
  margin: 0 0 8px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--red);
}
.dlv-delivery-coach:empty { display: none; }

/* ── DELIVERY SUBTOTALS (in cart panel) ──────────────────── */
.delivery-subtotals {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-bottom: 4px;
}
.delivery-sub-row {
  padding: 4px 0;
  font-size: 13px;
}
.delivery-sub-row .basket-bar-left {
  color: var(--text-3);
  font-weight: 500;
}
.delivery-sub-row .basket-bar-right {
  font-weight: 600;
}
.dlv-discount-value {
  color: var(--green);
}