/* RSQ-NFR-001: mobile-first. Base styles target phone widths; desktop is
   a secondary @media enhancement, never the primary layout. */

:root {
  /* Card-Q brand green, derived from the logo mark (see php/img/). */
  --accent: #26523C;
  --accent-dark: #1A3829;
  --accent-light: #489C72;
  --accent-tint: #F0F7F4;
  --bg: #f7f7fb;
  --card-bg: #ffffff;
  --text: #1a1a2e;
  --muted: #6b7280;
  --border: #e5e7eb;
  --danger: #dc2626;
  --danger-tint: #fef2f2;
  --success: #16a34a;
  --success-tint: #ecfdf5;
  --warning: #c2410c;
  --warning-tint: #fff7ed;
  --info: #0e7490;
  --info-tint: #ecfeff;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(38, 82, 60, 0.16);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); transition: color var(--transition); }
a:hover { color: var(--accent-dark); }

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}

.dashboard-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

.dashboard-container.wide { max-width: 1400px; }

@media (min-width: 1024px) {
  .dashboard-container { max-width: 900px; }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

/* Opt-in for cards that are themselves a clickable link/action row (e.g.
   admin overview's "Manage X ->" cards) — a static content card should not
   look interactive. */
.card.clickable:hover, a.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 14px; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; }
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }

label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; margin-top: 10px; }

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=url], input[type=time],
input[type=date], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Color swatch inputs (Page tab's Accent Color) were inheriting the generic
   full-width text-input rule above, which stretched the native swatch into
   a thin, unprofessional-looking bar edge-to-edge. Give it its own compact,
   fixed-size treatment instead. */
input[type=color] {
  width: 64px;
  height: 42px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type=color]::-webkit-color-swatch { border: none; border-radius: 4px; }
input[type=color]::-moz-color-swatch { border: none; border-radius: 4px; }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

input::placeholder, textarea::placeholder { color: #9ca3af; }

input[type=file] {
  width: 100%;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 4px 0;
}
input[type=file]::file-selector-button {
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--accent-light);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 10px;
  transition: background var(--transition);
}
input[type=file]::file-selector-button:hover { background: #e0e4fc; }

input[type=checkbox], input[type=radio] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  vertical-align: middle;
}

textarea { resize: vertical; min-height: 70px; }

button, .btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  width: 100%;
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}

button:hover, .btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

button.secondary, .btn.secondary {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}
button.secondary:hover, .btn.secondary:hover { background: var(--accent-tint); box-shadow: none; }

button.danger, .btn.danger {
  background: var(--danger);
  background-image: none;
}
button.danger:hover, .btn.danger:hover { background: #b91c1c; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row > * { flex: 1; margin-top: 0; }

/* Reusable pattern for a flex row of controls (buttons/inputs/selects) that
   should size to their content instead of inheriting the default full-width
   button — use this instead of one-off inline style="width:auto" overrides. */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar button, .toolbar .btn, .toolbar select,
.toolbar input[type=number], .toolbar input[type=text] { width: auto; margin: 0; }

.hint { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.error { color: var(--danger); font-size: 0.9rem; margin: 8px 0; font-weight: 600; }

/* Delivery Options: two fields side-by-side (e.g. available-from/until
   time pickers), stacking on narrow screens same as everything else here. */
.input-row { display: flex; gap: 10px; }
.input-row > div { flex: 1; }
@media (max-width: 480px) { .input-row { flex-direction: column; gap: 0; } }

.delivery-address-row { background: var(--accent-tint); border-radius: var(--radius); padding: 8px 10px; font-size: 0.85rem; }
.delivery-address-row a { color: var(--accent); font-weight: 700; }

/* Copy-to-clipboard rows on the diner-facing "use your own app" section. */
.copy-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.copy-field:last-child { border-bottom: none; }
.copy-field .copy-field-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.copy-field .copy-field-value { font-weight: 600; word-break: break-word; }
.copy-btn { flex-shrink: 0; width: auto; margin: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 0.8rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.copy-btn.copied { background: var(--success-tint); color: var(--success); border-color: transparent; }

.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 2px; }
.tabs a {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--transition);
}
.tabs a:hover { border-color: var(--accent-light); color: var(--accent); }
.tabs a.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.item-row:last-child { border-bottom: none; }
.item-row[hidden] { display: none; }
.item-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.item-info { flex: 1; min-width: 0; }
.item-name { font-weight: 600; }
.item-price { color: var(--muted); font-size: 0.9rem; }
.item-variant-line { font-size: 0.82rem; margin-top: 2px; }
.cart-row-actions { display: flex; align-items: center; gap: 10px; }
.cart-remove-btn { display: flex; align-items: center; justify-content: center; padding: 4px; color: var(--muted); background: none; border: none; cursor: pointer; }
.cart-remove-btn:hover { color: var(--danger); }
.veg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.veg-dot.veg { background: #16a34a; }
.veg-dot.non_veg { background: #dc2626; }
.out-of-stock { opacity: 0.5; }
.out-of-stock .item-name::after { content: " (Out of Stock)"; color: var(--danger); font-weight: normal; font-size: 0.8rem; }

.quick-actions { display: flex; gap: 8px; margin: 16px 0; }
.quick-actions a, .quick-actions button {
  flex: 1;
  text-align: center;
  padding: 14px 6px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.quick-actions a:hover, .quick-actions button:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.banner-img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius); }
.logo-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-top: -40px; border: 3px solid #fff; background: #fff; box-shadow: var(--shadow-md); }

.table-banner {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.category-block { margin-bottom: 20px; }
.subcategory-block { margin-left: 12px; margin-top: 10px; }

.cart-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  padding: 14px 16px;
  display: none;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.12);
}
.cart-bar.visible { display: flex; }
.cart-coupon-nudge {
  margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 600; background: var(--accent-tint); color: var(--accent-dark);
}
.cart-coupon-nudge.unlocked { background: var(--accent); color: #fff; }

.qty-control { display: flex; align-items: center; gap: 8px; }
.qty-control button { width: 30px; height: 30px; padding: 0; border-radius: 50%; margin: 0; font-size: 1.1rem; line-height: 1; }
.qty-control span { min-width: 20px; text-align: center; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(16, 24, 40, 0.55);
  display: none; align-items: flex-end; justify-content: center; z-index: 100;
  backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
.modal-sheet {
  background: #fff; width: 100%; max-width: 480px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 20px; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 -8px 32px rgba(16, 24, 40, 0.2);
}

.preview-frame-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.phone-frame {
  width: 260px; height: 480px; border: 8px solid #222; border-radius: 24px;
  overflow: hidden; background: #fff; box-shadow: var(--shadow-lg);
}
.phone-frame iframe { width: 100%; height: 100%; border: none; }

.star-rating { display: flex; gap: 6px; font-size: 1.8rem; cursor: pointer; margin: 8px 0; }
.star-rating .star { color: #d1d5db; transition: color var(--transition); }
.star-rating .star.selected { color: #f59e0b; }

.magic-link-box {
  background: var(--accent-tint); border: 1px dashed var(--accent); border-radius: var(--radius-sm);
  padding: 10px; word-break: break-all; font-size: 0.85rem; margin: 10px 0;
}

.muted { color: var(--muted); font-size: 0.85rem; }

.ad-banner {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin: 14px 0;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.ad-banner-tag {
  position: absolute; top: 6px; right: 8px;
  font-size: 0.65rem; color: var(--muted); background: var(--bg);
  padding: 1px 6px; border-radius: 8px; letter-spacing: 0.5px; text-transform: uppercase;
}
.ad-banner-link { text-decoration: none; display: block; }
.ad-banner-img { width: 100%; max-height: 120px; object-fit: cover; border-radius: 8px; }
.ad-banner-text { color: var(--text); font-size: 0.9rem; font-weight: 600; padding: 6px 24px 2px; }
.ad-banner-remove-link {
  display: block; width: auto; background: none; border: none; margin: 6px auto 0;
  padding: 0; color: var(--muted); font-size: 0.75rem; text-decoration: underline; cursor: pointer;
}
.ad-redeem-box { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.ad-redeem-box input { margin: 0; text-transform: uppercase; }
.ad-redeem-box button { margin: 0; width: auto; }
.ad-redeem-box .hint { flex-basis: 100%; margin: 4px 0 0; }

.item-rating { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.item-rating-avg { font-size: 0.78rem; color: #f59e0b; font-weight: 600; }
.item-rate-stars { display: inline-flex; gap: 1px; cursor: pointer; }
.item-rate-star { font-size: 0.85rem; color: #d1d5db; }
.item-rate-star:hover { color: #f59e0b; }

.busy-banner { background: var(--warning-tint); color: var(--warning); padding: 8px 12px; border-radius: var(--radius-sm); text-align: center; font-size: 0.9rem; margin-bottom: 12px; font-weight: 600; }
.trial-banner-dismiss-btn { display: inline-block; margin-left: 10px; padding: 3px 10px; background: rgba(255,255,255,0.6); color: inherit; border: none; border-radius: 999px; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.trial-banner-dismiss-btn:hover { background: rgba(255,255,255,0.9); }

.variant-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.variant-label { font-size: 0.85rem; color: var(--text); }

.sponsored-tag { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 0.65rem; font-weight: 600; background: #f3f4f6; color: var(--muted); text-transform: uppercase; vertical-align: middle; }

.section-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.ai-import-steps { margin: 8px 0; padding-left: 20px; font-size: 0.9rem; color: var(--text); }
.ai-import-steps li { margin-bottom: 4px; }
.ai-diff-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-top: 8px; }
.ai-diff-label { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.ai-diff-values { font-size: 0.8rem; line-height: 1.5; margin-bottom: 6px; }
.ai-diff-row select { margin: 0; }
.ai-checklist-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 0.9rem; }

.ai-item-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-top: 8px; }
.ai-item-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-item-fields input, .ai-item-fields select { width: auto; flex: 1; min-width: 90px; margin: 0; padding: 8px; font-size: 0.85rem; }
.ai-item-fields .ai-item-name { flex: 2; min-width: 140px; }
.ai-item-delete { margin-top: 6px; width: auto; }

/* Structured variant editor — replaces the old "Label:Price:Days:Time"
   text syntax with real fields/checkboxes/native time pickers. Shared
   look across the Add Item form, Edit Item modal, and the AI import
   review table (each file builds its own DOM via JS, this is just the
   shared visual styling). */
.variant-editor-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-top: 8px; }
.variant-editor-fields { display: flex; gap: 6px; flex-wrap: wrap; }
.variant-editor-fields input { width: auto; flex: 1; min-width: 90px; margin: 0; }
.variant-editor-fields .variant-label-input { flex: 2; min-width: 130px; }
.variant-editor-label { font-size: 0.78rem; color: var(--muted); margin: 8px 0 4px; }
.variant-editor-days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.day-check { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; color: var(--text); margin: 0; }
.day-check input { width: auto; margin: 0; }
.variant-editor-time { margin-top: 8px; }
.variant-editor-time > label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text); margin: 0; }
.variant-editor-time input[type=checkbox] { width: auto; margin: 0; }
.variant-time-inputs { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.variant-time-inputs[hidden] { display: none; }
.variant-time-inputs input { width: auto; flex: 1; margin: 0; min-width: 0; }
.variant-remove-btn { margin-top: 8px; width: auto; }
.variant-add-btn { width: auto; margin: 8px 0 0; }

/* ---------------------------------------------------------------------
   Shared admin/dashboard components — centralized here instead of being
   redefined (slightly differently each time) inside individual views'
   <style> blocks. Keep any new per-page <style> block scoped to that
   page's genuinely unique layout, not these.
   --------------------------------------------------------------------- */

.tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2px; }
.tag.unused { background: var(--success-tint); color: var(--success); }
.tag.used { background: #f3f4f6; color: var(--muted); }
.tag.draft { background: var(--warning-tint); color: var(--warning); }
.tag.owner { background: var(--accent-tint); color: var(--accent); }
.tag.diner { background: var(--success-tint); color: var(--success); }
.tag.created-admin { background: var(--accent-tint); color: var(--accent); }
.tag.created-organic { background: #f3f4f6; color: var(--muted); }

.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.stat-box {
  flex: 1; min-width: 100px; text-align: center;
  background: var(--bg); border-radius: var(--radius-sm); padding: 12px 8px;
}
.stat-box .num { font-size: 1.5rem; font-weight: 800; color: var(--accent-dark); line-height: 1.2; }
.stat-box .muted { font-size: 0.75rem; margin-top: 2px; }

/* Opt-in rich table: wrap a <table class="data-table"> in a
   <div class="table-scroll"> for horizontal overflow + shadow framing. */
.table-scroll { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.data-table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; font-size: 0.92rem; }
.data-table thead th { text-align: left; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; padding: 14px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; background: #fafbfc; position: sticky; top: 0; z-index: 1; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--accent-tint); }

.section-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.section-card .btn { width: auto; margin: 0; }

.page-header-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-header-row h1 { margin: 0; }

/* Card-Q brand lockup — the small header logo shown on the platform's own
   chrome (public start page, admin panel, auth pages). Deliberately not
   shown on a cafe's own dashboard/menu pages, since those are the cafe's
   branded space, not the platform's. */
.brand-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.brand-header img { height: 110px; width: auto; }
.brand-header.compact { justify-content: flex-start; margin-bottom: 12px; }
.brand-header.compact img { height: 32px; }

.powered-by { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 20px; font-size: 0.75rem; color: var(--muted); text-decoration: none; }
.powered-by img { height: 16px; width: auto; }
.powered-by:hover { color: var(--accent); }

.item-description { margin-top: 2px; line-height: 1.35; }

/* iOS-style toggle switch — used for "Available to order" on the Add/Edit
   Item forms, reusable anywhere else a checkbox needs this treatment. */
.toggle-switch-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-switch-track { position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; transition: background var(--transition); }
.toggle-switch-track::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition); box-shadow: var(--shadow-sm); }
.toggle-switch input:checked + .toggle-switch-track { background: var(--accent); }
.toggle-switch input:checked + .toggle-switch-track::before { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-switch-track { box-shadow: 0 0 0 3px var(--accent-tint); }

/* Add/Edit Item modals: multi-photo picker (Camera/Gallery + reorder). */
.item-photos-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.item-photos-grid:empty { margin: 0; }
.item-photo-thumb { position: relative; width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.item-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-photo-thumb.locked img { opacity: 0.45; }
.item-photo-tag { position: absolute; top: 3px; left: 3px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: #fff; }
.item-photo-tag.locked { background: rgba(0,0,0,0.65); }
.item-photo-actions { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 2px; background: rgba(0,0,0,0.55); }
.item-photo-action-btn { flex: 1; border: none; background: transparent; color: #fff; font-size: 0.75rem; line-height: 1.8; cursor: pointer; padding: 0; }
.item-photo-action-btn:hover { background: rgba(255,255,255,0.15); }
.item-photo-remove-btn:hover { background: var(--danger); }

/* Small inline disclosure (lighter weight than details.history-details,
   which is styled for a section-level heading). */
details.field-details { margin-top: 8px; }
details.field-details > summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); list-style: none; }
details.field-details > summary::-webkit-details-marker { display: none; }
details.field-details > summary::before { content: "▸ "; display: inline-block; }
details.field-details[open] > summary::before { content: "▾ "; }

/* Tables tab: QR cards replacing the plain item-row list. */
.qr-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.qr-card { text-align: center; }
.qr-card img { width: 100%; max-width: 200px; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 auto 10px; display: block; }
.qr-card-label { font-weight: 700; margin-bottom: 10px; }
.qr-card-actions { margin-top: 8px; }
.qr-card-actions > * { padding: 8px 6px; font-size: 0.82rem; }

/* Orders tab: live queue + history order cards. */
.order-card .item-row:last-of-type { border-bottom: none; }
.tag.order-status-pending { background: var(--warning-tint); color: var(--warning); }
.tag.order-status-confirmed { background: var(--accent-tint); color: var(--accent); }
.tag.order-status-preparing { background: var(--accent-tint); color: var(--accent-dark); }
.tag.order-status-ready { background: var(--info-tint); color: var(--info); }
.tag.order-status-served { background: var(--success-tint); color: var(--success); }
.tag.order-status-cancelled { background: #f3f4f6; color: var(--muted); }
.tag.order-status-urgent { background: var(--danger-tint); color: var(--danger); }

.order-card-status-group { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* Color-coded per order state — a tinted fill (not just the left edge) so
   e.g. Pending vs Confirmed read as different at a glance instead of two
   white cards that only differ by a thin stripe and a small tag. */
.order-card { border-left: 4px solid transparent; }
.order-card[data-status="pending"] { border-left-color: var(--warning); background: var(--warning-tint); }
.order-card[data-status="confirmed"] { border-left-color: var(--accent); background: var(--accent-tint); }
.order-card[data-status="preparing"] { border-left-color: var(--accent-dark); background: rgba(26, 56, 41, 0.07); }
.order-card[data-status="served"] { border-left-color: var(--success); background: var(--success-tint); }
.order-card[data-status="cancelled"] { border-left-color: var(--danger); background: #f3f4f6; opacity: 0.7; }

/* Every pending order needs the owner to act on it, so it gets a soft
   continuous glow; one still unconfirmed past ORDER_ATTENTION_URGENT_MINUTES
   escalates to a faster, redder pulse (paired with the "Needs attention"
   tag in orderCards.php) so it can't get buried in a busy queue. */
.order-card.order-card-attention { animation: rsq-attention-glow 2.2s ease-in-out infinite; }
@keyframes rsq-attention-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0.32); }
  50% { box-shadow: 0 0 0 7px rgba(194, 65, 12, 0.10); }
}
.order-card.order-card-urgent { border-left-color: var(--danger); animation: rsq-urgent-glow 1.1s ease-in-out infinite; }
@keyframes rsq-urgent-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  50% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .order-card.order-card-attention, .order-card.order-card-urgent, .order-card.order-card-new { animation: none; }
}

/* Status filter chips (Orders tab, mobile) — the 3 Kanban columns stack
   vertically below 900px, so a quick "just show me Pending" filter saves
   scrolling past columns the owner doesn't currently care about. Hidden at
   the desktop breakpoint where all 3 columns already sit side by side. */
.order-status-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; -webkit-overflow-scrolling: touch; }
.order-status-chips::-webkit-scrollbar { display: none; }
.order-status-chips .chip {
  flex-shrink: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; color: var(--muted); font-size: 0.82rem; font-weight: 700; white-space: nowrap;
  box-shadow: none; transform: none; cursor: pointer;
}
.order-status-chips .chip:hover { box-shadow: none; transform: none; background: var(--bg); }
.order-status-chips .chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.order-status-chips .chip-count { opacity: 0.8; font-weight: 800; }
@media (min-width: 900px) {
  .order-status-chips { display: none; }
}

/* Order card action row: on narrow screens, stack instead of letting the
   ETA select, Confirm and Cancel buttons wrap into a cramped 2nd line, and
   de-emphasize Cancel to a quiet ghost style so it doesn't compete for
   thumb-taps with the primary action. */
@media (max-width: 480px) {
  .order-card .toolbar { flex-direction: column; align-items: stretch; }
  .order-card .toolbar > * { width: 100%; }
  .order-card .toolbar button.danger.order-action-btn {
    background: transparent; color: var(--danger); box-shadow: none; margin-top: 2px;
  }
  .order-card .toolbar button.danger.order-action-btn:hover { background: var(--danger-tint); box-shadow: none; transform: none; }
}

/* Diner order-tracking page */
.order-progress-track { background: var(--border); border-radius: 999px; height: 8px; overflow: hidden; margin: 10px 0; }
.order-progress-fill { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); height: 100%; border-radius: 999px; transition: width 1s linear; }
.order-track-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.92rem; }
.order-track-row .muted { font-size: 0.85rem; }

@media (min-width: 640px) {
  .container, .dashboard-container { padding: 24px; }
}

/* ---------------------------------------------------------------------
   Round 2 (2026-09-09): competitor-parity visual/UX pass — toast system,
   icon helper styling, Orders Kanban board, order-tracking stepper,
   diner menu sticky nav + veg filter, per-table live order badges.
   --------------------------------------------------------------------- */

/* Inline SVG icon helper (includes/icons.php rsq_icon()) — sits inline
   with text, inherits currentColor so it tints with whatever text color
   surrounds it (button label, muted caption, etc). */
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* Toast/snackbar — replaces silent full-page reloads for quick actions
   (js/toast.js). Stacks bottom-center, auto-dismisses. */
.toast-container {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: calc(100% - 32px); max-width: 420px; pointer-events: none;
}
.toast {
  background: var(--text); color: #fff; padding: 11px 18px; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 600; box-shadow: var(--shadow-lg); text-align: center;
  opacity: 0; transform: translateY(10px); transition: opacity var(--transition), transform var(--transition);
  display: flex; align-items: center; gap: 8px; justify-content: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-info { background: var(--accent-dark); }

/* Small unread-count badge on a nav tab (Orders — new pending orders). */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; line-height: 1;
}
.nav-badge[hidden] { display: none; }
.tabs a.active .nav-badge { background: #fff; color: var(--accent-dark); }

/* Orders tab: Kanban board (Pending / Confirmed / Preparing side by side on
   desktop, stacked on mobile — same cards as before, just organized into
   columns instead of one long list, matching the competitor's queue view). */
.kanban-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; margin-bottom: 20px; }
@media (min-width: 900px) {
  .kanban-grid { grid-template-columns: repeat(3, 1fr); }
}
.kanban-col { background: var(--bg); border-radius: var(--radius-lg); padding: 12px; min-height: 80px; }
.kanban-col-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px; }
.kanban-col-header h3 { margin: 0; font-size: 0.95rem; }
.kanban-col .order-card { margin-bottom: 12px; }
.kanban-col .order-card:last-child { margin-bottom: 0; }
.kanban-empty { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 18px 8px; }

.order-card.order-card-new { animation: rsq-new-order-pulse 1.6s ease-out 2; }
@keyframes rsq-new-order-pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
}

details.history-details { margin-top: 8px; }
details.history-details > summary {
  cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: 8px 0; list-style: none;
}
details.history-details > summary::-webkit-details-marker { display: none; }
details.history-details > summary::before { content: "▸ "; display: inline-block; transition: transform var(--transition); }
details.history-details[open] > summary::before { transform: rotate(90deg); }

/* Diner order-tracking page: step indicator, replacing/augmenting the plain
   progress bar with discrete Placed/Confirmed/Preparing/Served stages. */
.stepper { display: flex; align-items: flex-start; margin: 16px 0 6px; }
.stepper-step { flex: 1; text-align: center; position: relative; }
.stepper-dot {
  width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; color: var(--muted);
  font-weight: 700; font-size: 0.8rem; transition: all var(--transition); position: relative; z-index: 1;
}
.stepper-step::after {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
  background: var(--border); z-index: 0;
}
.stepper-step:first-child::after { display: none; }
.stepper-step.done .stepper-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper-step.done::after { background: var(--accent); }
.stepper-step.active .stepper-dot { background: #fff; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.stepper-label { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.stepper-step.done .stepper-label, .stepper-step.active .stepper-label { color: var(--text); }
.stepper.cancelled .stepper-dot { background: #f3f4f6 !important; border-color: var(--border) !important; color: var(--muted) !important; box-shadow: none !important; }
.stepper.cancelled .stepper-step::after { background: var(--border) !important; }

/* Diner menu: sticky category nav + veg filter bar. */
.menu-cat-nav {
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.menu-cat-nav a {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 20px; background: #fff; border: 1px solid var(--border);
  text-decoration: none; color: var(--text); font-size: 0.82rem; font-weight: 600; scroll-snap-align: start;
  transition: all var(--transition);
}
.menu-cat-nav a.active { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border-color: transparent; }
.menu-filter-row { display: flex; gap: 8px; margin-bottom: 8px; }
.menu-filter-btn {
  width: auto; margin: 0; flex: 0 0 auto; padding: 7px 14px; font-size: 0.8rem;
  background: #fff; color: var(--text); border: 1px solid var(--border); box-shadow: none;
}
.menu-filter-btn .veg-dot { margin-right: 5px; }
.menu-filter-btn.active { background: var(--accent-tint); border-color: var(--accent-light); color: var(--accent-dark); }

/* Bigger, appetite-driving item photos on diner-facing menu (dashboard's own
   compact 48px thumbnail in _item-row.php is left untouched). */
.diner-item-row img { width: 76px; height: 76px; border-radius: var(--radius-sm); }

/* Table cards: live "N active orders" badge (dashboard/tables.php). */
.qr-card-order-badge { display: block; margin: 0 0 8px; }

.search-input-wrap { position: relative; }
.search-input-wrap .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-input-wrap input { padding-left: 36px; }

/* ---------------------------------------------------------------------
   Round 3 (2026-09-10): professional admin shell — persistent sidebar +
   topbar replacing the plain pill-tab bar (dashboard/_shell-open.php,
   dashboard/_shell-close.php), plus a new Dashboard home tab (stat cards,
   order-volume chart, top sellers, live queue breakdown, setup checklist,
   table occupancy). Sidebar collapses on mobile — the old single-column
   flow is the fallback, per RSQ-NFR-001's mobile-first rule.
   --------------------------------------------------------------------- */

.admin-shell { display: flex; align-items: stretch; min-height: 100vh; }

.admin-sidebar {
  width: 240px; flex: none; background: var(--card-bg); border-right: 1px solid var(--border);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px; }
.admin-brand-mark {
  width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex: none;
}
.admin-brand-name { font-weight: 800; font-size: 1.05rem; color: var(--text); }

.admin-cafe-chip { display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; }
.admin-cafe-avatar { width: 26px; height: 26px; border-radius: 7px; background: var(--accent-tint); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex: none; }
.admin-cafe-meta { min-width: 0; }
.admin-cafe-meta .name { font-weight: 700; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-cafe-meta .sub { color: var(--muted); font-size: 0.7rem; }

.admin-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-nav-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--muted); text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.admin-nav-link:hover { background: var(--bg); color: var(--text); }
.admin-nav-link.active { background: var(--accent-tint); color: var(--accent-dark); }
.admin-nav-link .admin-nav-badge { margin-left: auto; }

.admin-sidebar-foot-form { border-top: 1px solid var(--border); padding-top: 12px; margin: 0; }
.admin-sidebar-foot-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; box-shadow: none;
  color: var(--muted); font-size: 0.82rem; font-weight: 600; padding: 6px 10px; cursor: pointer;
}
.admin-sidebar-foot-btn:hover { color: var(--text); }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 26px; border-bottom: 1px solid var(--border); background: var(--card-bg); flex-wrap: wrap;
}
.admin-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-topbar h1 { margin: 0; font-size: 1.2rem; }
.admin-crumb { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.admin-top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Hidden on desktop (the sidebar is always visible there) — shown only
   under the 980px breakpoint below, where it opens the sidebar as a
   slide-in drawer instead. */
.admin-hamburger-btn {
  display: none; width: 38px; height: 38px; flex: none; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.admin-sidebar-backdrop { display: none; }

.status-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 14px; font-size: 0.78rem; font-weight: 700; border: none; cursor: pointer; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.is-open { background: var(--success-tint); color: var(--success); }
.status-pill.is-closed { background: var(--danger-tint); color: var(--danger); }

.admin-bell-wrap { position: relative; }
.admin-bell-btn {
  width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-bg);
  display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; position: relative; padding: 0;
}
.admin-bell-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.admin-bell-dot[hidden] { display: none; }
.admin-bell-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); width: 280px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50; padding: 6px; max-height: 340px; overflow-y: auto;
}
.admin-bell-dropdown[hidden] { display: none; }
.admin-bell-dropdown-head { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }
.admin-bell-item { display: block; padding: 9px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.admin-bell-item:hover { background: var(--bg); }
.admin-bell-item .t { font-weight: 700; font-size: 0.82rem; }
.admin-bell-item .s { color: var(--muted); font-size: 0.72rem; }
.admin-bell-empty { padding: 16px 10px; text-align: center; color: var(--muted); font-size: 0.8rem; }

.admin-avatar { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem; flex: none; }

.admin-content { flex: 1; padding: 22px 26px 48px; max-width: 1240px; width: 100%; margin: 0 auto; }
.admin-content.wide { max-width: 1400px; }
.admin-busy-row .icon-btn { margin: 0 0 14px !important; width: auto !important; }

@media (max-width: 980px) {
  /* The fixed sidebar doesn't fit next to page content at phone/tablet
     widths, but it still has to be REACHABLE — it's the only way to switch
     tabs. It becomes a slide-in drawer (hamburger button in the topbar
     opens it) instead of disappearing outright. */
  .admin-sidebar {
    position: fixed; top: 0; left: 0; z-index: 220;
    transform: translateX(-100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-lg);
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-hamburger-btn { display: flex; }
  .admin-sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(16, 24, 40, 0.5); z-index: 210;
    opacity: 0; pointer-events: none; transition: opacity var(--transition);
  }
  .admin-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .admin-content { padding: 16px 14px 40px; }
  .admin-topbar { padding: 12px 14px; }
}

/* Tabular, fixed-width figures for stat values / table amounts — kept to
   the system font stack (no webfont request) since this is a deployed
   site, not a mockup. */
.num-mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* -- Dashboard home -- */
.home-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 780px) { .home-stat-row { grid-template-columns: repeat(2, 1fr); } }
.home-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow-sm); }
.home-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.home-stat-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.home-stat-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: none; }
.home-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.home-stat-delta { font-size: 0.72rem; font-weight: 700; margin-top: 5px; }
.home-stat-delta.up { color: var(--success); }
.home-stat-delta.muted { color: var(--muted); font-weight: 600; }

/* -- Comparison engine: one badge at a time, arrow-cycled -- */
.cmp-gear { width: 18px; height: 18px; margin: 0 0 0 auto; box-shadow: none; flex: none; border: 1px solid transparent; background: none; color: var(--border); border-radius: 5px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cmp-gear:hover { color: var(--muted); border-color: var(--border); box-shadow: none; transform: none; }
.cmp-badge-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.cmp-arrow { width: 18px; height: 18px; margin: 0; box-shadow: none; flex: none; border: 1px solid var(--border); background: var(--card-bg); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0; }
.cmp-arrow:hover { color: var(--text); border-color: var(--muted); box-shadow: none; transform: none; }
.cmp-pill { font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.cmp-pill.cmp-up { color: var(--success); background: var(--success-tint); }
.cmp-pill.cmp-down { color: var(--danger); background: var(--danger-tint); }
.cmp-pill.cmp-flat { color: var(--muted); background: var(--bg); }
.cmp-pill.cmp-nodata { font-weight: 600; }
.cmp-pill-label { font-weight: 600; opacity: 0.75; }
.cmp-dots { display: flex; gap: 4px; margin-top: 6px; padding-left: 24px; }
.cmp-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--border); }
.cmp-dots span.active { background: var(--accent); }

.cmp-check-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 0.86rem; border-bottom: 1px solid var(--border); }
.cmp-check-row:last-child { border-bottom: none; }
.cmp-hour-curve { display: flex; align-items: flex-end; gap: 2px; height: 60px; margin-top: 10px; }
.cmp-hour-curve .bar-pair { flex: 1; display: flex; align-items: flex-end; gap: 1px; height: 100%; }
.cmp-hour-curve .bar { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; }
.cmp-hour-curve .bar.this-week { background: var(--accent); }
.cmp-hour-curve .bar.last-week { background: var(--border); }
.cmp-curve-legend { display: flex; gap: 14px; font-size: 0.72rem; color: var(--muted); margin-top: 8px; }
.cmp-curve-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.cmp-dual-row { display: flex; gap: 16px; margin-top: 6px; }
.cmp-dual-col { flex: 1; text-align: center; padding: 10px 8px; background: var(--bg); border-radius: 8px; }
.cmp-dual-col .num { font-size: 1.3rem; font-weight: 800; }
.cmp-dual-col .lbl { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.cmp-nudge { font-size: 0.82rem; color: var(--muted); margin-top: 6px; }

.insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }
.insights-category-head { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 22px 0 10px; }
.insights-category-head:first-child { margin-top: 0; }

.range-switch { display: inline-flex; gap: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
.range-switch a { padding: 5px 11px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.range-switch a.on { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm); }

.home-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
@media (max-width: 980px) { .home-grid-2 { grid-template-columns: 1fr; } }
.home-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.home-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.home-panel-head h2 { margin: 0; font-size: 1rem; }
.home-panel-sub { color: var(--muted); font-size: 0.75rem; text-decoration: none; }

.chart-svg-wrap { position: relative; }
.chart-tip { position: absolute; pointer-events: none; background: var(--text); color: #fff; font-size: 0.72rem; padding: 5px 9px; border-radius: 6px; opacity: 0; transform: translate(-50%, -120%); white-space: nowrap; transition: opacity 0.1s; }

.rank-list { display: flex; flex-direction: column; }
.rank-row { display: grid; grid-template-columns: 16px 1fr 40px; gap: 10px; align-items: center; padding: 7px 0; }
.rank-row .n { font-size: 0.7rem; color: var(--muted); font-weight: 700; }
.rank-row .name { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .bar-track { grid-column: 2 / 3; height: 6px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.rank-row .bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.rank-row .count { font-size: 0.78rem; color: var(--muted); text-align: right; }

.queue-mini-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 780px) { .queue-mini-row { grid-template-columns: 1fr; } }
.queue-mini-col { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.queue-mini-col .label { font-size: 0.75rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.queue-mini-col .count { font-size: 1.4rem; font-weight: 800; }
.queue-mini-col.pending .count { color: var(--warning); }
.queue-mini-col.confirmed .count { color: var(--accent); }
.queue-mini-col.preparing .count { color: var(--accent-dark); }

.setup-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.setup-check-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.setup-check-item .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex: none; color: transparent; }
.setup-check-item.done { background: var(--success-tint); border-color: transparent; }
.setup-check-item.done .dot { background: var(--success); border-color: var(--success); color: #fff; }
.setup-check-item .body { flex: 1; }
.setup-check-item .t { font-weight: 700; font-size: 0.85rem; }
.setup-check-item .s { color: var(--muted); font-size: 0.75rem; }
.setup-check-item.done .t { text-decoration: line-through; color: var(--muted); }

.table-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.table-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: 0.76rem; font-weight: 600; }
.table-chip.active-order { background: var(--warning-tint); border-color: transparent; color: var(--warning); }
.table-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }

.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 700; padding: 0 10px 8px; border-bottom: 1px solid var(--border); }
.orders-table td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.orders-table tbody tr:nth-child(even) { background: var(--bg); }
.orders-table tr:last-child td { border-bottom: none; }
.orders-table td.amount { text-align: right; }
.orders-table .status-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.78rem; }
.orders-table .status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.export-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; text-decoration: none; background: var(--card-bg); }
.export-link:hover { color: var(--text); border-color: var(--muted); }

.closed-banner { background: var(--danger-tint) !important; color: var(--danger) !important; }

/* ---------------------------------------------------------------------
   Visual restyle round: diner-facing pages (landing/menu/order-status/
   not-found) restyled toward a more premium light look — rounder cards,
   pill badges/chips, softer shadows. Scoped to .diner-page so the
   admin/dashboard shared .card/.btn-row etc. are left exactly as they are.
   --------------------------------------------------------------------- */

.diner-page .card {
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  border-color: transparent;
  padding: 20px 22px;
}

/* The reference look is built almost entirely out of pill/large-radius
   shapes (buttons, chips, photos, sheets) instead of the admin/dashboard's
   8px-radius default — this is the single biggest lever for "premium light"
   vs. the old look, so it's applied broadly rather than piecemeal. */
.diner-page button, .diner-page .btn {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.diner-page button.secondary, .diner-page .btn.secondary {
  border-width: 1.5px;
}
.diner-page h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.7rem;
}
.diner-page h2 { font-weight: 800; letter-spacing: -0.01em; }
.diner-page .quick-actions a, .diner-page .quick-actions button {
  border-radius: 999px;
  font-weight: 700;
  padding: 15px 8px;
}
.diner-page .banner-img { border-radius: 24px; height: 180px; }
.diner-page .modal-sheet { border-radius: 28px 28px 0 0; padding: 24px 22px; }
.diner-page input, .diner-page textarea, .diner-page select {
  border-radius: 14px;
  border-color: var(--border);
}
.diner-page .item-row img,
.diner-page .item-photo-placeholder,
.diner-page .item-peek-image,
.diner-page .item-peek-placeholder {
  border-radius: 18px;
}
.diner-page .qty-control button { border-radius: 999px; }
.diner-page .menu-cat-nav { background: transparent; }
.diner-page .menu-cat-nav a, .diner-page .menu-filter-btn { border-radius: 999px; }
.diner-page .cart-bar { border-radius: 24px 24px 0 0; }
.diner-page .table-banner, .diner-page .busy-banner { border-radius: 16px; }

.status-pill-row { display: flex; gap: 8px; margin-bottom: 12px; }

.cafe-rating-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.85rem; font-weight: 700; color: #b45309; margin: 2px 0 10px;
}
.cafe-rating-badge .icon { color: #f59e0b; }
.cafe-rating-badge .muted { font-weight: 600; }

.offer-banner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--accent-tint), #fff7ed);
  border: 1px solid var(--accent-light);
  border-radius: 16px; padding: 12px 14px; margin: 12px 0;
  font-size: 0.85rem; font-weight: 700; color: var(--accent-dark);
}
.offer-banner .icon { flex: none; color: var(--warning); }

.bestseller-tag {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fef3c7; color: #92400e; font-size: 0.68rem; font-weight: 800;
  padding: 2px 7px; border-radius: 20px; vertical-align: middle; margin-left: 4px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.spicy-tag {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fee2e2; color: #b91c1c; font-size: 0.68rem; font-weight: 800;
  padding: 2px 7px; border-radius: 20px; vertical-align: middle; margin-left: 4px;
  text-transform: uppercase; letter-spacing: 0.03em;
}

/* AI Voice Concierge (Card-Q Pro, Phase 3) — its own row below the rating
   line (not inline with the item name), so the rotating attract-text next
   to the mic never overlaps the dish name on narrow screens. */
.ai-ask-row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.ai-ask-trigger-wrap { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ai-ask-trigger-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; vertical-align: middle;
  border: none; border-radius: 50%; background: var(--accent, #16a34a); color: #fff;
  cursor: pointer; padding: 0; flex: 0 0 auto;
  animation: ai-ask-pulse 1.8s ease-in-out infinite;
}
.ai-ask-trigger-btn:hover { filter: brightness(1.08); }
@keyframes ai-ask-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(38, 83, 60, 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(38, 83, 60, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-ask-trigger-btn { animation: none; }
}
/* Rotating attract-text (js/leporis.js cycles textContent + opacity) — a
   normal inline element in its own row, never absolutely overlaid on other
   text, with ellipsis if a longer dish name pushes it past the available
   width instead of wrapping onto the qty-control column. */
.ai-ask-row-text {
  font-size: 0.72rem; font-weight: 600; color: var(--accent, #26533c);
  opacity: 0; transition: opacity 0.4s ease;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ai-ask-row-text.visible { opacity: 1; }
.ai-ask-history {
  max-height: 260px; overflow-y: auto; margin: 10px 0; padding-right: 4px;
}
.ai-ask-turn-question { font-weight: 700; margin: 10px 0 2px; }
.ai-ask-turn-answer { margin: 0 0 6px; }
#ai-ask-mic-btn.listening { background: #fee2e2; color: #b91c1c; border-color: #b91c1c; }
.ai-ask-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ai-ask-avatar { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.ai-ask-brand-name { margin: 0; line-height: 1.1; }
.ai-ask-item-subtitle { margin: 2px 0 0; font-size: 0.85rem; }
.ai-ask-lang-label { font-size: 0.72rem; margin: 0 0 2px; display: block; }
.ai-ask-lang-select { width: 100%; margin-bottom: 8px; }

/* Round 4: explicit selected-state for the filter chips — needed because
   the chips are now styled with static Tailwind utility classes (no
   Tailwind variant toggling from plain classList.add('active')). */
.menu-filter-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.item-peek-trigger { flex-shrink: 0; cursor: pointer; display: block; }
.item-photo-placeholder {
  width: 76px; height: 76px; border-radius: var(--radius-sm);
  background: var(--accent-tint); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.item-peek-sheet { text-align: center; }
.item-peek-image {
  width: 140px; height: 140px; object-fit: cover; border-radius: 20px;
  margin: 0 auto 12px; display: block;
}
.item-peek-placeholder {
  width: 140px; height: 140px; border-radius: 20px; background: var(--accent-tint);
  color: var(--accent-light); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
/* Pro items with more than one photo: swipeable gallery in the peek popup
   (single-photo items keep the plain .item-peek-image above, untouched). */
.item-peek-gallery { margin: 0 auto 12px; }
.item-peek-gallery-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  width: 100%; height: 200px; border-radius: 20px;
}
.item-peek-gallery-track::-webkit-scrollbar { display: none; }
.item-peek-gallery-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.item-peek-gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.item-peek-gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.item-peek-gallery-dot.active { background: var(--accent); }
.item-peek-price { font-weight: 700; color: var(--accent-dark); }
.veg-tag-pill {
  display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 2px 9px;
  border-radius: 20px; margin: 4px 0; text-transform: uppercase;
}
.veg-tag-pill.veg { background: var(--success-tint); color: var(--success); }
.veg-tag-pill.non_veg { background: var(--danger-tint); color: var(--danger); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.gallery-grid img { width: 100%; height: 100px; object-fit: cover; border-radius: var(--radius-sm); }

.social-link { display: inline-flex; align-items: center; gap: 8px; word-break: break-all; }

.upi-btn { background: linear-gradient(135deg, #16a34a, #15803d) !important; }

.not-found-icon { display: block; color: var(--muted); margin-bottom: 10px; }

/* Round 8: menu-page header social buttons — grayed/inert when the owner
   hasn't configured that platform's link, glowing in the platform's own
   brand color once they have (see rsq_find_social_link()). */
.social-btn-disabled, .social-btn-facebook, .social-btn-instagram, .social-btn-youtube {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
}
.social-btn-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.social-btn-facebook.configured { color: #1877F2; box-shadow: 0 0 0 2px rgba(24,119,242,0.15), 0 0 10px rgba(24,119,242,0.55); }
.social-btn-instagram.configured { color: #E4405F; box-shadow: 0 0 0 2px rgba(228,64,95,0.15), 0 0 10px rgba(228,64,95,0.55); }
.social-btn-youtube.configured { color: #FF0000; box-shadow: 0 0 0 2px rgba(255,0,0,0.15), 0 0 10px rgba(255,0,0,0.55); }

/* Round 8: Instagram/Facebook-style profile hero on the landing page —
   cover photo edge-to-edge, circular DP overlapping and centered beneath
   it, with tasteful placeholders when no photo is uploaded yet. */
.hero-cover { width: 100%; height: 160px; object-fit: cover; display: block; }
.hero-cover-placeholder {
  width: 100%; height: 160px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}
.hero-dp-wrap { display: flex; justify-content: center; margin-top: -44px; }
.hero-dp { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow-md); background: #fff; }
.hero-dp-placeholder {
  width: 88px; height: 88px; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--shadow-md);
  background: var(--accent-tint); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.6rem;
}

.popular-dishes-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 10px; margin: 0 -16px; }
.popular-dish-card { flex: 0 0 auto; width: 116px; text-align: center; }
.popular-dish-photo, .popular-dish-photo .food-art-container { width: 96px; height: 96px; border-radius: 18px; overflow: hidden; margin: 0 auto 6px; }
.popular-dish-photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 18px; }
.popular-dish-more-photo { background: var(--accent-tint); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; }

/* Recommended carousel (views/diner/menu.php): slide width 80% + 10%
   side padding on the track keeps a deliberate sliver of the neighboring
   slide's border visible on both sides, signaling it's swipeable. */
.recommended-carousel-viewport { position: relative; padding-bottom: 6px; }
.recommended-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 10% 14px; gap: 12px; }
.recommended-carousel::-webkit-scrollbar { display: none; }
.recommended-slide { flex: 0 0 80%; scroll-snap-align: center; }
.recommended-dots { display: flex; justify-content: center; gap: 6px; padding-bottom: 12px; }
.recommended-dot { width: 6px; height: 6px; border-radius: 50%; background: #d6d3d1; transition: background 0.2s, width 0.2s, border-radius 0.2s; }
.recommended-dot.active { background: var(--accent); width: 16px; border-radius: 3px; }

/* Diner-facing attention-grabbing idle vibration (ported from the approved
   dog_shake_button_animation.html reference) — timing/JS side (shared
   partial views/diner/_highlight-vibrate.php) handles the burst + 2s gap
   cycle; hover/touch cancels it. Generalized from a landing-page-only,
   "View Menu"-only rule to a reusable class used on two pages: the landing
   page footer (owner picks which button, page.homeHighlight.buttonKey — see
   rsq_landing_effective_highlight() in includes/cafeModel.php) and the order
   tracking page's Review Us button (always highlighted once an order is
   served — views/diner/order-status.php). The CSS itself is unchanged from
   the original View-Menu-only version, just re-scoped to .highlight-btn. */
@keyframes view-menu-idle-vibrate {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-2px, 1px) rotate(-1.5deg); }
  40%  { transform: translate(2px, -1px) rotate(1.5deg); }
  60%  { transform: translate(-1px, 0px) rotate(-1deg); }
  80%  { transform: translate(1px, 0px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes view-menu-icon-wiggle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.15) rotate(-12deg); }
  75% { transform: scale(1.15) rotate(12deg); }
}
.highlight-btn {
  will-change: transform;
  /* Fixed red, matching the dog_shake_button_animation.html reference
     exactly, per explicit direction — not the tenant's own --accent color
     like the other footer buttons, since this one's whole point is to
     stand out and grab the eye rather than blend in. */
  background: linear-gradient(135deg, #ff7675, #d63031);
  box-shadow: 0 10px 25px rgba(214, 48, 49, 0.3);
}
.highlight-btn:hover { opacity: 1; box-shadow: 0 12px 28px rgba(214, 48, 49, 0.4); }
.highlight-btn .menu-btn-icon { display: inline-block; }
.highlight-btn.idle-vibrating { animation: view-menu-idle-vibrate 0.4s ease-in-out infinite; }
.highlight-btn.idle-vibrating .menu-btn-icon { animation: view-menu-icon-wiggle 0.4s ease-in-out infinite; }
.highlight-btn:hover { animation: none !important; }
.highlight-btn:hover .menu-btn-icon { animation: none !important; }

/* Round 2: icon-button header row, colored rating badge box, offer icon
   circle, and Past Orders row styling — matching the reference design's
   actual componentry rather than just its border-radius. */
.diner-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.diner-header-actions { display: flex; gap: 8px; }
.icon-circle-btn {
  width: 38px; height: 38px; border-radius: 50%; background: #fff;
  border: 1px solid var(--border); display: inline-flex; align-items: center;
  justify-content: center; color: var(--text); cursor: pointer; flex: none;
  box-shadow: var(--shadow-sm); text-decoration: none;
}
.icon-circle-btn:hover { background: var(--bg); }

.diner-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.diner-title-row h1 { margin-bottom: 4px; }

.cafe-rating-box {
  flex: none; background: var(--success); color: #fff; border-radius: 14px;
  padding: 6px 10px; display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--shadow-sm);
}
.cafe-rating-value { font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; gap: 3px; }
.cafe-rating-caption { font-size: 0.62rem; opacity: 0.9; white-space: nowrap; }

.diner-page .status-pill.is-open { border: 1px solid var(--success); }
.diner-page .status-pill.is-closed { border: 1px solid var(--danger); }

.offer-icon-circle {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.offer-banner .icon { display: none; } /* superseded by .offer-icon-circle */

.history-row { align-items: center; }
.history-row-num { font-size: 0.75rem; font-weight: 700; color: var(--muted); flex: none; width: 14px; }
.history-row-photo { flex: none; width: 48px; height: 48px; }
.history-row-photo img, .history-photo-placeholder {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--accent-tint);
}

/* Round 8: mobile "floating card" depth illusion for the Tailwind-based
   diner pages (landing/menu/order-status/not-found) — the page sits on a
   soft-shadowed card instead of flush against the viewport edge, radius and
   margin scaling up on wider screens. --bg/--card-bg reused from the design
   tokens already defined at the top of this file (same backdrop-vs-surface
   pattern the dashboard already uses), not new colors. */
.diner-shell {
  background: var(--card-bg);
  margin: 10px auto;
  min-height: calc(100vh - 20px);
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 40, 0.05);
  box-shadow:
    0 1px 4px rgba(16, 24, 40, 0.05),
    0 10px 28px rgba(16, 24, 40, 0.09),
    0 22px 56px rgba(16, 24, 40, 0.07);
  overflow: hidden;
}
@media (min-width: 400px) {
  .diner-shell { margin: 16px auto; min-height: calc(100vh - 32px); border-radius: 20px; }
}
@media (min-width: 640px) {
  .diner-shell {
    margin: 28px auto; min-height: calc(100vh - 56px); border-radius: 28px;
    box-shadow:
      0 2px 6px rgba(16, 24, 40, 0.05),
      0 16px 40px rgba(16, 24, 40, 0.11),
      0 32px 80px rgba(16, 24, 40, 0.09);
  }
}

/* Round 3: structural rebuild — full-bleed section spacers, "Pure Veg" pill,
   and the featured/bestseller hero card, matching the reference layout with
   real data only (no fabricated claims/counters). */
.diner-page { background: #fff; }
.diner-page .card { box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06); }

.section-spacer { height: 10px; background: #f3f4f6; margin: 16px -16px; }

.veg-dining-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--success); background: var(--success-tint); color: var(--success);
  font-size: 0.72rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; margin-bottom: 8px;
}
.veg-dining-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

.menu-section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 10px; }
.menu-section-head h2 { margin: 0; }

.featured-item-card {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--border); padding-bottom: 20px;
}
.featured-item-body { flex: 1; min-width: 0; }
.featured-item-body h3 { margin: 4px 0; font-size: 1.05rem; }
.featured-item-price { font-weight: 700; color: var(--text); margin: 4px 0; }
.featured-item-desc { line-height: 1.4; }
.featured-item-photo-wrap { position: relative; flex: none; }
.featured-item-photo { width: 128px; height: 128px; object-fit: cover; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.featured-item-add-btn { position: absolute; bottom: 8px; right: 8px; background: #fff; border-radius: 999px; padding: 3px 6px; box-shadow: var(--shadow-md); }