/* =============================================
   RESTAURANT ORDER SYSTEM — v1.2.0
   VLabTech | Full Redesign + Responsive
   ============================================= */

@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.3);
  --dark:        #111111;
  --dark2:       #1C1C1C;
  --dark3:       #272727;
  --dark4:       #333333;
  --white:       #FFFFFF;
  --off:         #F7F4EF;
  --surface:     #FFFFFF;
  --text:        #1A1A1A;
  --muted:       #777777;
  --border:      #EBEBEB;
  --green:       #27AE60;
  --green-lt:    rgba(39,174,96,0.15);
  --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-t:      env(safe-area-inset-top,    0px);
  --safe-b:      env(safe-area-inset-bottom, 0px);
  --safe-l:      env(safe-area-inset-left,   0px);
  --safe-r:      env(safe-area-inset-right,  0px);
}

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

/* ── WRAP ── */
.ros-wrap {
  font-family: var(--font-b);
  color: var(--text);
  background: var(--off);
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}

/* ── SCREENS ── */
.ros-screen { display: none; animation: ros-fadein 0.28s ease; }
.ros-screen.active { display: block; }
@keyframes ros-fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── LOADER ── */
.ros-loader { display: flex; justify-content: center; align-items: center; padding: 70px 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); } }

/* ━━━━━━━━━━━━━━━━━━━━━━━
   CUSTOMER — 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) + 48px) 24px 72px;
  overflow: hidden;
}
/* Decorative rings */
.ros-hero::before, .ros-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,0.12);
  pointer-events: none;
}
.ros-hero::before { width: 320px; height: 320px; top: -80px; left: 50%; transform: translateX(-50%); }
.ros-hero::after  { width: 500px; height: 500px; top: -160px; left: 50%; transform: translateX(-50%); }

.ros-hero-logo { position: relative; z-index: 1; margin-bottom: 18px; }
.ros-hero-logo img {
  width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(201,169,110,0.15), 0 8px 32px rgba(0,0,0,0.4);
  display: block; margin: 0 auto;
}
.ros-logo-placeholder {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--dark3);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(201,169,110,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 34px; position: relative; z-index: 1;
}
.ros-hero-name {
  font-family: var(--font-d);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 700; letter-spacing: 0.01em;
  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;
}
/* Wave cut */
.ros-hero-wave {
  position: absolute; bottom: -1px; left: 0; right: 0;
  line-height: 0;
}
.ros-hero-wave svg { width: 100%; height: 50px; display: block; }

/* Select label */
.ros-select-label {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 20px 16px;
  color: var(--muted); font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.ros-select-line { flex: 1; height: 1px; background: var(--border); }
.ros-select-text { white-space: nowrap; }

/* ── TABLES GRID ── */
.ros-tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  padding: 4px 16px calc(24px + var(--safe-b));
  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.22s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.ros-table-card:active { transform: scale(0.94); }
.ros-table-card:hover  { border-color: var(--gold); box-shadow: var(--shadow-md), 0 0 0 4px var(--gold-glow); transform: translateY(-4px); }
.ros-table-card.ros-table-occupied {
  background: linear-gradient(140deg, var(--dark2), var(--dark3));
  color: var(--white); cursor: default;
}
.ros-table-card.ros-table-occupied:hover { transform: none; border-color: rgba(231,76,60,0.5); box-shadow: var(--shadow-sm), 0 0 0 4px rgba(231,76,60,0.12); }
.ros-table-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.ros-table-name { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; }
.ros-table-seats { font-size: 0.7rem; color: var(--muted); margin-top: 3px; }
.ros-table-card.ros-table-occupied .ros-table-seats { color: rgba(255,255,255,0.3); }

/* Status chip */
.ros-table-chip {
  position: absolute; top: 8px; right: 8px;
  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;transform:scale(1);} 50%{opacity:0.25;transform:scale(0.8);} }

/* ── TOPBAR ── */
.ros-topbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--dark);
  padding: calc(var(--safe-t) + 12px) 16px 12px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.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; transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ros-topbar-back:active { background: rgba(255,255,255,0.15); }
.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 { min-width: 0; }
.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; text-transform: uppercase;
}

/* ── CAT TABS ── */
.ros-cat-tabs {
  display: flex; overflow-x: auto; background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  scrollbar-width: none; -ms-overflow-style: none;
  position: sticky; top: 62px; z-index: 90;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ros-cat-tabs::-webkit-scrollbar { display: none; }
.ros-cat-tab {
  flex-shrink: 0; padding: 14px 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:hover  { color: var(--text); }
.ros-cat-tab.active { color: var(--dark); border-bottom-color: var(--gold); font-weight: 700; }

/* ── DISHES ── */
.ros-dishes-wrap {
  padding: 14px 14px calc(110px + var(--safe-b));
  max-width: 640px; margin: 0 auto;
}
.ros-dish-card {
  display: flex; gap: 13px;
  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, box-shadow 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.9rem; color: var(--muted);
}
.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.15rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ros-qty-btn:active { background: var(--gold); color: var(--dark); transform: scale(0.9); }
.ros-qty-num { min-width: 20px; text-align: center; font-weight: 800; font-size: 0.92rem; color: var(--dark); }

/* ── CART BAR ── */
.ros-cart-bar {
  position: fixed; bottom: 0; left: var(--safe-l); right: var(--safe-r);
  background: var(--dark);
  padding: 12px 16px calc(12px + var(--safe-b));
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  z-index: 200;
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  border-top: 1px solid rgba(201,169,110,0.2);
}
.ros-cart-bar.visible { transform: translateY(0); }
.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;
  flex-shrink: 0;
}
.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; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  box-shadow: 0 4px 14px var(--gold-glow);
}

/* ── ORDER REVIEW ── */
#ros-screen-order { display: none; }
#ros-screen-order.active { display: block !important; }

.ros-order-wrap { max-width: 640px; margin: 0 auto; width: 100%; }
.ros-order-list { padding: 14px 14px 0; }
.ros-order-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 13px 15px; margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}
.ros-oi-left  { flex: 1; min-width: 0; }
.ros-oi-name  { font-weight: 700; font-size: 0.9rem; color: var(--dark); }
.ros-oi-qty   { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.ros-oi-price { font-family: var(--font-d); font-weight: 700; color: var(--gold-deep); flex-shrink: 0; font-size: 0.95rem; }

/* Footer: normal flow, always visible below the items */
.ros-order-footer {
  padding: 16px 14px calc(30px + var(--safe-b));
}

.ros-order-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-order-total-block span { font-size: 0.85rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; }
.ros-order-total-block strong { font-family: var(--font-d); font-size: 1.5rem; color: var(--gold-lt); }

.ros-notes-block { margin-bottom: 12px; }
.ros-notes-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600; color: var(--muted);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em;
}
.ros-notes-block textarea {
  width: 100%; padding: 10px 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; transition: border-color 0.2s;
}
.ros-notes-block textarea:focus { outline: none; border-color: var(--gold); }

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

/* ── STATUS SCREEN ── */
.ros-status-wrap {
  min-height: calc(100vh - 62px);
  display: flex; align-items: center; justify-content: center;
  padding: 30px 20px calc(30px + var(--safe-b));
  background: linear-gradient(160deg, var(--off) 0%, #ede8df 100%);
}
.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.4rem;
  background: linear-gradient(140deg, var(--dark2), var(--dark3));
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px var(--gold-glow);
}
.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: 30px; line-height: 1.5; }

/* Tracker */
.ros-tracker { display: flex; justify-content: center; gap: 0; margin-bottom: 30px; }
.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; flex-shrink: 0;
}
.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.64rem; 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: tracker-pulse 1.6s infinite;
}
.ros-track-item.current span { color: var(--gold-deep); font-weight: 700; }
@keyframes tracker-pulse { 0%,100%{box-shadow:0 0 0 4px var(--gold-glow);} 50%{box-shadow:0 0 0 8px rgba(201,169,110,0.1);} }

.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;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: transparent;
}
.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); }

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

/* ── TOAST ── */
.ros-toast {
  position: fixed; bottom: calc(90px + 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 cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap; max-width: calc(100vw - 32px);
  overflow: hidden; text-overflow: ellipsis;
  border: 1px solid rgba(255,255,255,0.08);
}
.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); }

/* ━━━━━━━━━━━━━━━━━━━━━━━
   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: calc(var(--safe-t) + 14px) 20px 14px;
  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.72rem; color: rgba(255,255,255,0.35); 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; font-feature-settings: 'tnum'; letter-spacing: 0.05em; }

/* Section header */
.ros-k-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 12px; flex-wrap: wrap; gap: 10px;
}
.ros-k-section-header h2 { font-family: var(--font-d); font-size: 1.15rem; color: rgba(255,255,255,0.7); 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.35); }
.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); }

/* Kitchen tables grid */
.ros-k-tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; padding: 0 20px calc(30px + var(--safe-b));
  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.22s ease; 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.2); line-height: 1; margin-bottom: 6px;
}
.ros-k-table-label { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; 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-items { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-top: 5px; }

/* Status colours per card */
.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);} }

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

/* Order detail */
.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;
  transition: background 0.15s; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-b);
}
.ros-k-back-btn:hover, .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.15rem; color: var(--gold-lt); }
.ros-k-order-time { font-size: 0.72rem; color: rgba(255,255,255,0.35); margin-top: 2px; }

.ros-k-badge {
  padding: 6px 14px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  flex-shrink: 0;
}
.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 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0; max-width: 700px; margin: 0 auto;
  padding: 20px 20px calc(20px + var(--safe-b));
}
@media (min-width: 700px) {
  .ros-k-order-body { grid-template-columns: 1fr 280px; gap: 20px; max-width: 1000px; }
}
.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-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-notes-block {
  background: rgba(255,255,255,0.04); border-radius: var(--radius-sm);
  border-left: 3px solid rgba(255,255,255,0.15);
  padding: 11px 14px; font-size: 0.82rem;
  color: rgba(255,255,255,0.45); font-style: italic;
  display: none; margin-top: 10px;
}
.ros-k-notes-block.visible { display: block; }

/* Kitchen action buttons */
.ros-k-actions-panel {}
.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); }

/* ━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━ */
@media (max-width: 380px) {
  .ros-tables-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 12px 90px; }
  .ros-dish-img, .ros-dish-img-placeholder { width: 64px; height: 64px; }
  .ros-hero { padding: calc(var(--safe-t) + 36px) 18px 64px; }
  .ros-status-card { padding: 28px 18px 24px; }
  .ros-k-tables-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 14px 30px; }
}
@media (min-width: 600px) {
  .ros-tables-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; padding: 4px 24px 24px; }
  .ros-dishes-wrap { padding: 16px 24px calc(120px + var(--safe-b)); }
  .ros-k-tables-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (min-width: 900px) {
  .ros-wrap:not(.ros-kitchen) {
    max-width: 460px !important; margin: 0 auto !important;
    min-height: 100vh; box-shadow: var(--shadow-lg);
    position: relative !important; height: auto !important; overflow-y: visible !important;
  }
  .ros-kitchen { max-width: 100% !important; position: fixed !important; overflow-y: auto !important; }
  .ros-k-tables-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); max-width: 1200px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .ros-hero { padding: calc(var(--safe-t) + 16px) 24px 50px; }
  .ros-hero-logo img, .ros-logo-placeholder { width: 60px; height: 60px; font-size: 24px; }
  .ros-hero-name { font-size: 1.3rem; }
  .ros-status-emoji { font-size: 2.2rem; }
  .ros-status-wrap { padding-top: 16px; align-items: flex-start; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━
   v1.3.0 ADDITIONS
━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── OCCUPIED TABLE — my table indicator ── */
.ros-table-card.ros-table-mine {
  background: linear-gradient(140deg, #1a2410, #243318) !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(39,174,96,0.2), var(--shadow-sm) !important;
}
.ros-table-mine .ros-table-name { color: #fff; }
.ros-table-my-label   { font-size:0.72rem; color:var(--green); font-weight:700; margin-top:3px; }
.ros-table-busy-label { font-size:0.72rem; color:rgba(231,76,60,0.8); font-weight:600; margin-top:3px; }

/* ── OCCUPIED 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; color: var(--dark); }
.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;
}

/* ── KITCHEN: item subtotal column ── */
.ros-k-item-meta { font-size:0.78rem; color:rgba(255,255,255,0.35); flex-shrink:0; }
.ros-k-item-sub  { font-size:0.85rem; color:var(--gold); flex:1; text-align:right; padding-right:8px; font-weight:600; }

/* ── KITCHEN: total row ── */
.ros-k-total-row {
  display:flex; justify-content:space-between; align-items:center;
  background: rgba(201,169,110,0.1);
  border: 1px solid rgba(201,169,110,0.25);
  border-radius: var(--radius-sm);
  padding: 12px 16px; margin-top: 6px;
  font-size: 0.9rem; color: rgba(255,255,255,0.6);
}
.ros-k-total-row strong {
  font-family: var(--font-d); font-size: 1.3rem; color: var(--gold-lt);
}

/* ── KITCHEN: table total badge ── */
.ros-k-table-total {
  font-family: var(--font-d); font-size: 0.92rem; font-weight: 700;
  color: var(--gold); margin-top: 6px;
}

/* ── KITCHEN: payment block ── */
.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; text-align:center;
  font-family: var(--font-b);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.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); }

/* ── KITCHEN: print button ── */
.ros-k-action-print {
  background: linear-gradient(135deg, #34495e, #2c3e50) !important;
  color: #fff !important; box-shadow: none !important;
}