/* =============================================
   RESTAURANT ORDER SYSTEM — v1.5.0
   VLabTech | Clean rebuild, normal scroll flow
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ── */
:root {
  --gold:      #C9A96E;
  --gold-deep: #A6813C;
  --gold-lt:   #F0D9A8;
  --gold-glow: rgba(201,169,110,0.25);
  --dark:      #111111;
  --dark2:     #1C1C1C;
  --dark3:     #272727;
  --white:     #FFFFFF;
  --off:       #F7F4EF;
  --surface:   #FFFFFF;
  --text:      #1A1A1A;
  --muted:     #777777;
  --border:    #EBEBEB;
  --green:     #27AE60;
  --red:       #E74C3C;
  --orange:    #E67E22;
  --blue:      #2980B9;
  --radius:    16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.11);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.16);
  --font-d:    'Playfair Display', Georgia, serif;
  --font-b:    'Inter', system-ui, sans-serif;
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --safe-t:    env(safe-area-inset-top,    0px);
}

/* ── WRAP — simple block, normal scroll ── */
.ros-wrap {
  font-family: var(--font-b);
  color: var(--text);
  background: var(--off);
  width: 100%;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* NO position:fixed, NO overflow:hidden — body scrolls normally */
}

/* ── SCREENS — show/hide, all in normal flow ── */
.ros-screen { display: none; }
.ros-screen.active { display: block; animation: ros-fadein 0.25s ease; }
@keyframes ros-fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── LOADER ── */
.ros-loader { display:flex; justify-content:center; padding:60px 20px; }
.ros-spinner {
  width:36px; height:36px;
  border:3px solid rgba(201,169,110,0.2);
  border-top-color: var(--gold);
  border-radius:50%;
  animation: spin 0.75s linear infinite;
}
.ros-spinner-white { border-color:rgba(255,255,255,0.15); border-top-color:#fff; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ━━━━━━━━━━━━━━━━━━━━━━━
   HERO
━━━━━━━━━━━━━━━━━━━━━━━ */
.ros-hero {
  position:relative;
  background: linear-gradient(150deg, #111 0%, #1e1a14 60%, #2a200f 100%);
  color: var(--white);
  text-align:center;
  padding: calc(var(--safe-t) + 40px) 24px 70px;
  overflow:hidden;
}
.ros-hero::before {
  content:''; position:absolute; border-radius:50%;
  border:1px solid rgba(201,169,110,0.1);
  width:360px; height:360px;
  top:-100px; left:50%; transform:translateX(-50%);
  pointer-events:none;
}
.ros-hero-logo { position:relative; z-index:1; margin-bottom:16px; }
.ros-hero-logo img {
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  border:3px solid var(--gold); display:block; margin:0 auto;
  box-shadow:0 0 0 6px rgba(201,169,110,0.12), 0 8px 24px rgba(0,0,0,0.4);
}
.ros-logo-placeholder {
  width:84px; height:84px; border-radius:50%;
  background:var(--dark3); border:3px solid var(--gold);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:32px; position:relative; z-index:1;
}
.ros-hero-name {
  font-family:var(--font-d);
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight:700; color:var(--gold-lt);
  margin-bottom:8px; position:relative; z-index:1;
}
.ros-hero-address {
  font-size:0.82rem; color:rgba(255,255,255,0.45);
  letter-spacing:0.06em; position:relative; z-index:1;
}
.ros-hero-wave { position:absolute; bottom:-1px; left:0; right:0; line-height:0; }
.ros-hero-wave svg { width:100%; height:48px; display:block; }

/* ── SELECT LABEL ── */
.ros-select-label {
  display:flex; align-items:center; gap:12px;
  padding:20px 20px 14px;
  color:var(--muted); font-size:0.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em;
}
.ros-select-line { flex:1; height:1px; background:var(--border); }

/* ── TABLES GRID ── */
.ros-tables-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
  gap:12px;
  padding:4px 16px 40px;
  max-width:600px; margin:0 auto;
}
.ros-table-card {
  background:var(--surface); border-radius:var(--radius);
  padding:20px 10px 16px; text-align:center; cursor:pointer;
  border:2px solid transparent; box-shadow:var(--shadow-sm);
  transition:all 0.2s; position:relative;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.ros-table-card:active { transform:scale(0.95); }
.ros-table-card.ros-table-free:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.ros-table-card.ros-table-occupied { background:linear-gradient(140deg,var(--dark2),var(--dark3)); color:var(--white); }
.ros-table-card.ros-table-mine { background:linear-gradient(140deg,#1a2410,#243318); border-color:var(--green) !important; }
.ros-table-svg {
  width: 60px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
}
.ros-table-svg svg { width: 100%; height: 100%; overflow: visible; }
.ros-table-card.ros-table-free:hover .ros-table-svg { transform: scale(1.08); transition: transform 0.2s; }
.ros-table-name { font-size:0.85rem; font-weight:700; }
.ros-table-seats { font-size:0.7rem; color:var(--muted); margin-top:3px; }
.ros-table-occupied .ros-table-seats { color:rgba(255,255,255,0.3); }
.ros-table-my-label   { font-size:0.7rem; color:var(--green); font-weight:700; margin-top:3px; }
.ros-table-busy-label { font-size:0.7rem; color:rgba(231,76,60,0.8); font-weight:600; margin-top:3px; }
.ros-table-chip { position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--green); }
.ros-table-occupied .ros-table-chip { background:var(--red); }
.ros-table-chip.ros-blink { animation:blink 1.1s ease infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.2;} }

/* ── TOPBAR ── */
.ros-topbar {
  display:flex; align-items:center; gap:10px;
  background:var(--dark);
  padding:12px 16px;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,0.2);
}
.ros-topbar-back {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:none;
  color:var(--gold); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; -webkit-tap-highlight-color:transparent;
  transition:background 0.15s;
}
.ros-topbar-back:active { background:rgba(255,255,255,0.18); }
.ros-topbar-brand { display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.ros-topbar-logo img { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); }
.ros-topbar-info strong { font-size:0.88rem; color:var(--gold-lt); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ros-topbar-info small  { font-size:0.7rem;  color:rgba(255,255,255,0.4); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ros-topbar-title { flex:1; font-family:var(--font-d); font-size:1.05rem; color:var(--gold-lt); font-weight:500; }
.ros-topbar-table {
  background:var(--gold); color:var(--dark);
  font-size:0.7rem; font-weight:800;
  padding:4px 11px; border-radius:20px;
  letter-spacing:0.06em; white-space:nowrap; flex-shrink:0;
}

/* ── CATEGORY TABS ── */
.ros-cat-tabs {
  display:flex; overflow-x:auto; background:var(--surface);
  border-bottom:1px solid var(--border); padding:0 12px;
  scrollbar-width:none; position:sticky; top:62px; z-index:90;
}
.ros-cat-tabs::-webkit-scrollbar { display:none; }
.ros-cat-tab {
  flex-shrink:0; padding:13px 16px;
  font-size:0.85rem; font-weight:500; color:var(--muted);
  cursor:pointer; border-bottom:3px solid transparent;
  transition:all 0.18s; white-space:nowrap; margin-bottom:-1px;
  -webkit-tap-highlight-color:transparent;
}
.ros-cat-tab.active { color:var(--dark); border-bottom-color:var(--gold); font-weight:700; }

/* ── DISHES ── */
.ros-dishes-wrap { padding:12px 14px 120px; max-width:640px; margin:0 auto; }
.ros-dish-card {
  display:flex; gap:12px;
  background:var(--surface); border-radius:var(--radius);
  padding:14px; margin-bottom:10px;
  box-shadow:var(--shadow-sm);
  border:1.5px solid transparent; transition:border-color 0.2s;
}
.ros-dish-card.in-cart { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow), var(--shadow-sm); }
.ros-dish-img { width:78px; height:78px; flex-shrink:0; object-fit:cover; border-radius:var(--radius-sm); }
.ros-dish-img-placeholder {
  width:78px; height:78px; flex-shrink:0;
  background:var(--off); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
}
.ros-dish-info { flex:1; min-width:0; }
.ros-dish-name { font-weight:700; font-size:0.92rem; color:var(--dark); margin-bottom:3px; }
.ros-dish-desc { font-size:0.76rem; color:var(--muted); line-height:1.45; margin-bottom:8px; }
.ros-dish-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ros-dish-price { font-family:var(--font-d); font-size:1rem; font-weight:700; color:var(--gold-deep); }
.ros-dish-controls { display:flex; align-items:center; gap:7px; }
.ros-qty-btn {
  width:30px; height:30px; border-radius:50%;
  border:2px solid var(--gold); background:transparent;
  color:var(--gold-deep); font-size:1.1rem; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.ros-qty-btn:active { background:var(--gold); color:var(--dark); }
.ros-qty-num { min-width:20px; text-align:center; font-weight:800; font-size:0.92rem; }

/* ── CART BAR (bottom of menu screen) ── */
.ros-cart-bar {
  position:sticky; bottom:0;
  background:var(--dark);
  padding:12px 16px calc(12px + var(--safe-b));
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-top:1px solid rgba(201,169,110,0.2);
  opacity:0; pointer-events:none;
  transition:opacity 0.25s;
}
.ros-cart-bar.visible { opacity:1; pointer-events:auto; }
.ros-cart-left { display:flex; align-items:center; gap:12px; }
.ros-cart-bubble {
  width:36px; height:36px; border-radius:50%;
  background:var(--gold); color:var(--dark);
  font-size:0.88rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.ros-cart-label { font-size:0.75rem; color:rgba(255,255,255,0.5); display:block; }
.ros-cart-total { font-family:var(--font-d); font-size:1.1rem; color:var(--gold-lt); font-weight:700; display:block; }
.ros-cart-cta {
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:var(--dark); font-weight:700; font-size:0.88rem;
  padding:11px 20px; border-radius:50px; border:none;
  cursor:pointer; box-shadow:0 4px 14px var(--gold-glow);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━
   ORDER REVIEW SCREEN
   Everything in normal flow — items on top, footer below, body scrolls
━━━━━━━━━━━━━━━━━━━━━━━ */
#ros-screen-order .ros-order-items-section {
  padding: 14px 14px 0;
  max-width: 640px; margin: 0 auto;
}
.ros-order-item {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface); border-radius:var(--radius-sm);
  padding:14px 16px; margin-bottom:9px;
  box-shadow:var(--shadow-sm);
}
.ros-oi-left { flex:1; min-width:0; }
.ros-oi-name { font-weight:700; font-size:0.92rem; color:var(--dark); }
.ros-oi-qty  { font-size:0.78rem; color:var(--muted); margin-top:2px; }
.ros-oi-price { font-family:var(--font-d); font-weight:700; color:var(--gold-deep); flex-shrink:0; }

/* Total + notes + button — plain block below the items */
#ros-screen-order .ros-order-footer-section {
  padding: 0 14px calc(40px + var(--safe-b));
  max-width: 640px; margin: 0 auto;
}
.ros-total-block {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--dark); color:var(--white);
  padding:16px 18px; border-radius:var(--radius);
  margin: 14px 0;
}
.ros-total-block span { font-size:0.82rem; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.08em; }
.ros-total-block strong { font-family:var(--font-d); font-size:1.5rem; color:var(--gold-lt); }

.ros-notes-wrap { margin-bottom:14px; }
.ros-notes-wrap label {
  display:block; font-size:0.78rem; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:0.08em;
  margin-bottom:8px;
}
.ros-notes-wrap textarea {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font-b); font-size:0.88rem; color:var(--text);
  resize:none; background:var(--surface); -webkit-appearance:none;
}
.ros-notes-wrap textarea:focus { outline:none; border-color:var(--gold); }

.ros-send-btn {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:16px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:var(--dark); font-weight:800; font-size:1rem;
  border-radius:50px; border:none; cursor:pointer;
  box-shadow:0 6px 20px var(--gold-glow);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  letter-spacing:0.02em;
}
.ros-send-btn:active { transform:scale(0.98); opacity:0.9; }

/* ━━━━━━━━━━━━━━━━━━━━━━━
   STATUS SCREEN
━━━━━━━━━━━━━━━━━━━━━━━ */
.ros-status-wrap {
  min-height: 80vh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px calc(40px + var(--safe-b));
}
.ros-status-card {
  background:var(--surface); border-radius:24px;
  padding:36px 28px 32px; text-align:center;
  max-width:400px; width:100%; box-shadow:var(--shadow-lg);
}
.ros-status-anim { position:relative; width:100px; height:100px; margin:0 auto 24px; }
.ros-status-ring {
  position:absolute; inset:0; border-radius:50%;
  border:3px solid var(--gold-glow);
  animation:ring-pulse 2.5s ease infinite;
}
@keyframes ring-pulse { 0%{transform:scale(0.85);opacity:0;} 50%{opacity:1;} 100%{transform:scale(1.2);opacity:0;} }
.ros-status-emoji {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; font-size:3.2rem;
  background:linear-gradient(140deg,var(--dark2),var(--dark3));
  border-radius:50%; border:3px solid var(--gold);
}
.ros-status-title { font-family:var(--font-d); font-size:1.5rem; color:var(--dark); margin-bottom:8px; }
.ros-status-msg   { color:var(--muted); font-size:0.88rem; margin-bottom:28px; line-height:1.5; }

.ros-tracker { display:flex; justify-content:center; margin-bottom:28px; }
.ros-track-item { display:flex; flex-direction:column; align-items:center; position:relative; flex:1; max-width:80px; }
.ros-track-dot {
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--border); background:var(--off);
  transition:all 0.35s; z-index:1;
}
.ros-track-line {
  position:absolute; top:7px; left:calc(50% + 7px);
  width:calc(100% - 14px); height:2px; background:var(--border); transition:background 0.35s;
}
.ros-track-item:last-child .ros-track-line { display:none; }
.ros-track-item span { font-size:0.62rem; color:var(--muted); font-weight:500; margin-top:7px; text-align:center; }
.ros-track-item.done .ros-track-dot  { background:var(--green); border-color:var(--green); }
.ros-track-item.done .ros-track-line { background:var(--green); }
.ros-track-item.done span            { color:var(--green); font-weight:700; }
.ros-track-item.current .ros-track-dot {
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 4px var(--gold-glow); animation:t-pulse 1.6s infinite;
}
.ros-track-item.current span { color:var(--gold-deep); font-weight:700; }
@keyframes t-pulse { 0%,100%{box-shadow:0 0 0 4px var(--gold-glow);} 50%{box-shadow:0 0 0 8px rgba(201,169,110,0.08);} }

.ros-status-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ros-btn-outline, .ros-btn-danger-outline {
  display:flex; align-items:center; gap:7px;
  padding:11px 20px; border-radius:50px; font-size:0.85rem; font-weight:700;
  cursor:pointer; border:2px solid; transition:all 0.2s; background:transparent;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; font-family:var(--font-b);
}
.ros-btn-outline       { border-color:var(--gold);  color:var(--gold-deep); }
.ros-btn-outline:hover { background:var(--gold); color:var(--dark); }
.ros-btn-danger-outline       { border-color:var(--green); color:var(--green); }
.ros-btn-danger-outline:hover { background:var(--green); color:var(--white); }

/* ── TOAST ── */
.ros-toast {
  position:fixed; bottom:calc(20px + var(--safe-b)); left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--dark2); color:var(--white);
  padding:11px 22px; border-radius:50px;
  font-size:0.86rem; font-weight:600;
  box-shadow:var(--shadow-md); z-index:9999;
  opacity:0; transition:all 0.28s ease;
  white-space:nowrap; max-width:calc(100vw - 32px);
}
.ros-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.ros-toast.success { border-left:4px solid var(--green); }
.ros-toast.error   { border-left:4px solid var(--red); }

/* ── MODAL ── */
.ros-modal-overlay {
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity 0.25s;
}
.ros-modal-overlay.visible { opacity:1; }
.ros-modal {
  background:var(--surface); border-radius:20px;
  padding:32px 24px; text-align:center; max-width:340px; width:100%;
  box-shadow:var(--shadow-lg);
  transform:scale(0.9); transition:transform 0.25s;
}
.ros-modal-overlay.visible .ros-modal { transform:scale(1); }
.ros-modal-icon { font-size:3rem; margin-bottom:14px; }
.ros-modal h3   { font-family:var(--font-d); font-size:1.3rem; margin-bottom:10px; }
.ros-modal p    { font-size:0.88rem; color:var(--muted); margin-bottom:8px; line-height:1.5; }
.ros-modal-close-btn {
  margin-top:18px; width:100%; padding:13px; border-radius:50px; border:none;
  background:var(--dark); color:var(--white); font-weight:700; font-size:0.9rem; cursor:pointer;
}

/* ── EMPTY ── */
.ros-empty-cat { text-align:center; padding:50px 20px; color:var(--muted); }
.ros-empty-cat-icon { font-size:2.8rem; margin-bottom:10px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━
   KITCHEN DISPLAY
━━━━━━━━━━━━━━━━━━━━━━━ */
.ros-kitchen { background:#0d0d0d; color:var(--white); }
.ros-k-topbar {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--dark2); padding:14px 20px;
  border-bottom:1px solid rgba(201,169,110,0.15); gap:16px; flex-wrap:wrap;
}
.ros-k-topbar-left  { display:flex; align-items:center; gap:12px; }
.ros-k-topbar-right { display:flex; align-items:center; gap:20px; }
.ros-k-logo {
  width:44px; height:44px; border-radius:50%;
  background:var(--dark3); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; overflow:hidden;
}
.ros-k-logo img { width:100%; height:100%; object-fit:cover; }
.ros-k-brand-name { font-family:var(--font-d); font-size:1.1rem; color:var(--gold-lt); display:block; font-weight:700; }
.ros-k-brand-sub  { font-size:0.7rem; color:rgba(255,255,255,0.3); letter-spacing:0.1em; text-transform:uppercase; display:block; }
.ros-k-stats { display:flex; align-items:center; gap:16px; }
.ros-k-stat  { text-align:center; }
.ros-k-stat-num   { font-size:1.4rem; font-weight:800; color:var(--white); display:block; font-family:var(--font-d); }
.ros-k-stat-ready { color:var(--green) !important; }
.ros-k-stat-label { font-size:0.65rem; color:rgba(255,255,255,0.35); text-transform:uppercase; letter-spacing:0.08em; }
.ros-k-stat-divider { width:1px; height:30px; background:rgba(255,255,255,0.1); }
.ros-k-clock { font-size:1rem; color:rgba(255,255,255,0.4); font-variant-numeric:tabular-nums; }

.ros-k-section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 10px; flex-wrap:wrap; gap:10px;
}
.ros-k-section-header h2 { font-family:var(--font-d); font-size:1.1rem; color:rgba(255,255,255,0.65); font-weight:500; }
.ros-k-legend { display:flex; gap:8px; flex-wrap:wrap; }
.ros-k-leg {
  font-size:0.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; padding:3px 9px; border-radius:12px;
}
.ros-k-leg-free      { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.3); }
.ros-k-leg-pending   { background:rgba(230,126,34,0.15); color:var(--orange); }
.ros-k-leg-accepted  { background:rgba(41,128,185,0.15); color:var(--blue); }
.ros-k-leg-preparing { background:rgba(230,126,34,0.15); color:var(--orange); }
.ros-k-leg-ready     { background:rgba(39,174,96,0.15);  color:var(--green); }

.ros-k-tables-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px; padding:0 20px 40px; max-width:1100px; margin:0 auto;
}
.ros-k-table-card {
  background:var(--dark2); border:2px solid rgba(255,255,255,0.06);
  border-radius:var(--radius); padding:20px 14px 16px;
  text-align:center; cursor:default; transition:all 0.2s; position:relative;
  -webkit-tap-highlight-color:transparent;
}
.ros-k-table-card.has-order { cursor:pointer; }
.ros-k-table-card.has-order:hover { transform:translateY(-3px); }
.ros-k-table-card:active { transform:scale(0.96); }
.ros-k-table-num {
  font-family:var(--font-d); font-size:2rem; font-weight:700;
  color:rgba(255,255,255,0.18); line-height:1; margin-bottom:6px;
}
.ros-k-table-label { font-size:0.8rem; font-weight:700; color:rgba(255,255,255,0.5); text-transform:uppercase; }
.ros-k-table-status-tag {
  display:inline-block; margin-top:10px;
  font-size:0.68rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.08em; padding:4px 10px; border-radius:12px;
}
.ros-k-table-total { font-family:var(--font-d); font-size:0.92rem; font-weight:700; color:var(--gold); margin-top:6px; }
.ros-k-table-items { font-size:0.72rem; color:rgba(255,255,255,0.3); margin-top:4px; }

.ros-k-card-free      { border-color:rgba(255,255,255,0.05); }
.ros-k-card-pending   { border-color:var(--orange); box-shadow:0 0 18px rgba(230,126,34,0.25); }
.ros-k-card-accepted  { border-color:var(--blue);   box-shadow:0 0 14px rgba(41,128,185,0.2); }
.ros-k-card-preparing { border-color:var(--orange); box-shadow:0 0 14px rgba(230,126,34,0.2); }
.ros-k-card-ready     { border-color:var(--green);  box-shadow:0 0 18px rgba(39,174,96,0.25); }
.ros-k-card-free .ros-k-table-num      { color:rgba(255,255,255,0.12); }
.ros-k-card-pending .ros-k-table-num   { color:var(--orange); }
.ros-k-card-accepted .ros-k-table-num  { color:var(--blue); }
.ros-k-card-preparing .ros-k-table-num { color:var(--orange); }
.ros-k-card-ready .ros-k-table-num     { color:var(--green); }
.ros-k-tag-free      { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.25); }
.ros-k-tag-pending   { background:rgba(230,126,34,0.15); color:var(--orange); }
.ros-k-tag-accepted  { background:rgba(41,128,185,0.15); color:var(--blue); }
.ros-k-tag-preparing { background:rgba(230,126,34,0.15); color:var(--orange); }
.ros-k-tag-ready     { background:rgba(39,174,96,0.15);  color:var(--green); }
.ros-blink-card { animation:card-blink 1.1s ease infinite; }
@keyframes card-blink { 0%,100%{box-shadow:0 0 18px rgba(230,126,34,0.25);} 50%{box-shadow:0 0 30px rgba(230,126,34,0.55);} }

.ros-kscreen { display:none; }
.ros-kscreen.active { display:block; animation:ros-fadein 0.25s ease; }

.ros-k-order-topbar {
  display:flex; align-items:center; gap:14px;
  background:var(--dark2); padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,0.06); flex-wrap:wrap;
}
.ros-k-back-btn {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
  color:var(--gold); font-size:0.85rem; font-weight:700;
  padding:8px 14px; border-radius:50px; cursor:pointer;
  font-family:var(--font-b); -webkit-tap-highlight-color:transparent;
}
.ros-k-back-btn:active { background:rgba(201,169,110,0.15); }
.ros-k-order-title-wrap { flex:1; min-width:0; }
.ros-k-order-title-wrap h2 { font-family:var(--font-d); font-size:1.1rem; color:var(--gold-lt); }
.ros-k-order-time { font-size:0.7rem; color:rgba(255,255,255,0.3); margin-top:2px; }
.ros-k-badge {
  padding:5px 14px; border-radius:20px;
  font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em;
}
.ros-k-badge.pending   { background:rgba(230,126,34,0.15); color:var(--orange); }
.ros-k-badge.accepted  { background:rgba(41,128,185,0.15); color:var(--blue); }
.ros-k-badge.preparing { background:rgba(230,126,34,0.15); color:var(--orange); }
.ros-k-badge.ready     { background:rgba(39,174,96,0.15);  color:var(--green); }

.ros-k-order-body { max-width:700px; margin:0 auto; padding:20px; }
.ros-k-panel-label {
  font-size:0.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.1em; color:rgba(255,255,255,0.3);
  margin-bottom:12px; padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.ros-k-items-panel { margin-bottom:20px; }
.ros-k-item {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--dark3); border-radius:var(--radius-sm);
  padding:14px 16px; margin-bottom:8px; border-left:4px solid var(--gold);
}
.ros-k-item-name { font-weight:700; font-size:0.95rem; flex:1; }
.ros-k-item-meta { font-size:0.78rem; color:rgba(255,255,255,0.35); }
.ros-k-item-sub  { font-size:0.85rem; color:var(--gold); text-align:right; padding-right:8px; font-weight:600; }
.ros-k-item-qty  {
  min-width:36px; height:36px; border-radius:50%;
  background:rgba(201,169,110,0.12); border:2px solid var(--gold);
  color:var(--gold); font-weight:900; font-size:1rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ros-k-total-row {
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(201,169,110,0.08); border:1px solid rgba(201,169,110,0.2);
  border-radius:var(--radius-sm); padding:12px 16px; margin-top:6px;
  font-size:0.9rem; color:rgba(255,255,255,0.5);
}
.ros-k-total-row strong { font-family:var(--font-d); font-size:1.3rem; color:var(--gold-lt); }
.ros-k-notes-block {
  background:rgba(255,255,255,0.04); border-radius:var(--radius-sm);
  border-left:3px solid rgba(255,255,255,0.12);
  padding:11px 14px; font-size:0.82rem;
  color:rgba(255,255,255,0.4); font-style:italic; display:none; margin-top:10px;
}
.ros-k-notes-block.visible { display:block; }
.ros-k-actions-panel { margin-top:0; }
.ros-k-action-btn {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:15px 20px; border-radius:50px; border:none;
  font-family:var(--font-b); font-size:0.92rem; font-weight:800;
  cursor:pointer; letter-spacing:0.03em; transition:all 0.18s; margin-bottom:10px;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.ros-k-action-btn:active { transform:scale(0.97); }
.ros-k-action-accept  { background:linear-gradient(135deg,var(--blue),#1a6699); color:#fff; box-shadow:0 4px 16px rgba(41,128,185,0.3); }
.ros-k-action-prepare { background:linear-gradient(135deg,var(--orange),#c0651a); color:#fff; box-shadow:0 4px 16px rgba(230,126,34,0.3); }
.ros-k-action-ready   { background:linear-gradient(135deg,var(--green),#1a7a44); color:#fff; box-shadow:0 4px 16px rgba(39,174,96,0.3); }
.ros-k-action-close   { background:linear-gradient(135deg,#555,#333); color:rgba(255,255,255,0.7); }
.ros-k-action-print   { background:linear-gradient(135deg,#34495e,#2c3e50); color:#fff; }
.ros-k-payment-block {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-sm); padding:16px; margin-bottom:12px;
}
.ros-k-pay-methods { display:flex; gap:8px; flex-wrap:wrap; }
.ros-k-pay-btn {
  flex:1; min-width:80px; padding:11px 10px; border-radius:10px;
  background:var(--dark3); border:2px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.75); font-size:0.82rem; font-weight:700;
  cursor:pointer; transition:all 0.18s; font-family:var(--font-b);
  -webkit-tap-highlight-color:transparent;
}
.ros-k-pay-btn:hover   { border-color:var(--gold); color:var(--gold); }
.ros-k-pay-btn.selected{ background:var(--gold); border-color:var(--gold); color:var(--dark); }

/* ── RESPONSIVE ── */
@media (max-width:380px) {
  .ros-tables-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .ros-dish-img, .ros-dish-img-placeholder { width:64px; height:64px; }
  .ros-k-tables-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
}
@media (min-width:600px) {
  .ros-tables-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
  .ros-dishes-wrap { padding:16px 24px 120px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .ros-hero { padding:16px 24px 50px; }
  .ros-hero-logo img, .ros-logo-placeholder { width:60px; height:60px; }
}

/* ── v1.6.0: multi-order blocks in kitchen ── */
.ros-k-order-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 12px;
}
.ros-k-order-block-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.ros-k-order-block-num { font-weight: 700; font-size: 0.82rem; color: rgba(255,255,255,0.5); }
.ros-k-order-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ros-k-order-actions .ros-k-action-btn { flex: 1; min-width: 100px; margin-bottom: 0; }

/* customer_closed badge colour */
.ros-k-badge.customer_closed { background: rgba(201,169,110,0.2); color: var(--gold); }
.ros-k-card-customer_closed {
  border-color: var(--gold) !important;
  box-shadow: 0 0 20px rgba(201,169,110,0.35) !important;
  animation: pay-pulse 1.4s ease infinite;
}
.ros-k-tag-customer_closed { background: rgba(201,169,110,0.2); color: var(--gold); }
.ros-k-card-customer_closed .ros-k-table-num { color: var(--gold); }
@keyframes pay-pulse { 0%,100%{box-shadow:0 0 20px rgba(201,169,110,0.35);} 50%{box-shadow:0 0 32px rgba(201,169,110,0.6);} }

/* Status meta on customer status screen */
.ros-status-meta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.ros-status-order-count {
  background: rgba(201,169,110,0.12); color: var(--gold-deep);
  border: 1px solid rgba(201,169,110,0.3);
  padding: 4px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 700;
}
.ros-status-grand-total {
  background: var(--dark); color: var(--gold-lt);
  padding: 4px 14px; border-radius: 20px; font-size: 0.88rem; font-weight: 700;
  font-family: var(--font-d);
}

/* ── v1.7.0: kitchen nav tabs + receipts table ── */
.ros-k-nav-tabs {
  display: flex !important;
  background: var(--dark2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 0 20px !important;
  margin: 0 !important;
}
.ros-k-nav-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 12px 20px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.38) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  cursor: pointer !important;
  margin-bottom: -1px !important;
  transition: color 0.18s, border-color 0.18s !important;
  font-family: var(--font-b) !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  outline: none !important;
}
.ros-k-nav-tab:hover {
  color: rgba(255,255,255,0.7) !important;
  background: transparent !important;
}
.ros-k-nav-tab.active {
  color: var(--gold) !important;
  border-bottom-color: var(--gold) !important;
  background: transparent !important;
}

.ros-k-receipts-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}
.ros-k-receipts-table th {
  background: rgba(255,255,255,0.05);
  padding: 10px 12px; text-align: left;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ros-k-receipts-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
}
.ros-k-receipts-table tr:hover td { background: rgba(255,255,255,0.02); }
.ros-k-reprint-btn {
  background: rgba(201,169,110,0.12); border: 1px solid rgba(201,169,110,0.3);
  color: var(--gold); font-size: 0.78rem; font-weight: 700;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
  font-family: var(--font-b); transition: all 0.15s;
}
.ros-k-reprint-btn:hover { background: var(--gold); color: var(--dark); }

/* ── v1.8.0: reserved table on customer side ── */
.ros-table-reserved {
  background: linear-gradient(140deg, #1a0f2a, #250d3a) !important;
  border-color: rgba(155,89,182,0.5) !important;
  box-shadow: 0 0 0 2px rgba(155,89,182,0.15), var(--shadow-sm) !important;
}
.ros-table-reserved .ros-table-chip { background: #9b59b6 !important; }

/* ── v1.9.0: table shape SVGs in kitchen ── */
.ros-k-shape-svg {
  width: 54px; height: 46px;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
}
.ros-k-shape-svg svg { width: 100%; height: 100%; overflow: visible; }
.ros-k-table-card .ros-k-table-num { display: none; } /* replaced by SVG */

/* ── v2.0.0: Payment modal + Stripe ── */
#ros-payment-modal { position:fixed; inset:0; z-index:9990; }
.ros-pay-modal-inner {
  max-width: 380px !important;
  padding: 0 !important;
  overflow: hidden;
}
.ros-pay-modal-header {
  background: var(--dark);
  padding: 24px 24px 18px;
  text-align: center;
}
.ros-pay-modal-header .ros-modal-icon { font-size:2.5rem; margin-bottom:10px; }
.ros-pay-modal-header h3 { font-family:var(--font-d); font-size:1.2rem; color:var(--gold-lt); margin-bottom:4px; }
.ros-pay-modal-header p  { font-size:0.82rem; color:rgba(255,255,255,0.45); }

.ros-pay-choices { padding:16px; display:flex; flex-direction:column; gap:10px; }
.ros-pay-choice {
  display:flex; align-items:center; gap:14px;
  background:var(--off); border:2px solid var(--border);
  border-radius:14px; padding:16px;
  cursor:pointer; text-align:left; width:100%;
  font-family:var(--font-b); transition:all 0.18s;
  -webkit-tap-highlight-color:transparent;
}
.ros-pay-choice:hover  { border-color:var(--gold); background:#fff; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.ros-pay-choice:active { transform:scale(0.98); }
.ros-pay-choice-icon   { font-size:1.8rem; flex-shrink:0; }
.ros-pay-choice div    { flex:1; }
.ros-pay-choice strong { font-size:0.95rem; color:var(--dark); display:block; }
.ros-pay-choice small  { font-size:0.76rem; color:var(--muted); }
.ros-pay-choice svg    { flex-shrink:0; color:var(--muted); }

.ros-pay-stripe { border-color:rgba(99,91,255,0.3); background:rgba(99,91,255,0.04); }
.ros-pay-stripe:hover { border-color:#635BFF; background:rgba(99,91,255,0.08); }
.ros-pay-stripe strong { color:#4F46E5; }

.ros-pay-cancel {
  display:block; width:100%; padding:12px;
  background:none; border:none; color:var(--muted);
  font-size:0.85rem; cursor:pointer; font-family:var(--font-b);
  border-top:1px solid var(--border); margin:0;
  -webkit-tap-highlight-color:transparent;
}
.ros-pay-cancel:hover { color:var(--dark); }
