/* Mesa — Restaurant Table Booking · v2 "O'Vanta" dark interface.
   Palette: near-black surfaces, brass/gold accents,
   traffic-light seating: green = available, yellow = filling, red = full. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,500;0,600;0,700;1,600&family=Inter:wght@400;500;600&display=swap');

.mesa {
	--bg:        #0b0b0d;
	--bg-2:      #121216;
	--bg-3:      #1a1a20;
	--line:      #26262e;
	--ink:       #f2efe8;
	--muted:     #8b8b96;
	--brass:     #c9a45c;
	--brass-hi:  #e8c987;
	--green:     #2ecc71;
	--green-dk:  #14532d;
	--yellow:    #f5c542;
	--yellow-dk: #6b5416;
	--red:       #e74c3c;
	--red-dk:    #5c1f18;
	--radius:    14px;
	--font-disp: 'Cormorant', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	position: relative;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 26px;
	max-width: 1060px;
	margin: 0 auto;
	padding: 28px;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	border-radius: 20px;
	border: 1px solid var(--line);
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}

.mesa *, .mesa *::before, .mesa *::after { box-sizing: border-box; }

.mesa-head { grid-column: 1 / 2; }
.mesa-eyebrow {
	font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--brass); font-weight: 600;
}
.mesa-title {
	font-family: var(--font-disp);
	font-size: 40px; line-height: 1.02; font-weight: 700;
	color: var(--ink); margin: 6px 0 18px;
}

/* Step progress bar */
.mesa-steps { display: flex; gap: 8px; margin-bottom: 8px; }
.mesa-steps i {
	flex: 1; height: 3px; border-radius: 3px; background: var(--line);
	transition: background .3s;
}
.mesa-steps i.is-done { background: var(--brass); }
.mesa-steps i.is-now  { background: var(--brass-hi); box-shadow: 0 0 10px rgba(232,201,135,.5); }

.mesa-body { grid-column: 1 / 2; }

/* Steps */
.mesa-step { display: none; animation: mesaFade .35s ease; }
.mesa-step.is-active { display: block; }
@keyframes mesaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mesa-step-title {
	font-family: var(--font-disp); font-size: 26px; font-weight: 600;
	color: var(--ink); margin: 0 0 4px;
}
.mesa-sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; }

/* Fields */
.mesa-field { margin-bottom: 18px; }
.mesa-field > label {
	display: block; font-size: 13px; font-weight: 600; color: var(--brass);
	margin-bottom: 7px; letter-spacing: .01em;
}
.mesa-opt { color: var(--muted); font-weight: 400; }
.mesa-input {
	width: 100%; padding: 12px 14px; font-size: 15px; font-family: var(--font-body);
	color: var(--ink); background: var(--bg-2); border: 1px solid var(--line);
	border-radius: 10px; transition: border-color .2s, box-shadow .2s;
	color-scheme: dark;
}
.mesa-input::placeholder { color: #5b5b66; }
.mesa-input:focus {
	outline: none; border-color: var(--brass);
	box-shadow: 0 0 0 3px rgba(201, 164, 92, .22);
}
.mesa-textarea { resize: vertical; }
.mesa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Party stepper */
.mesa-stepper { display: flex; align-items: stretch; gap: 8px; }
.mesa-step-btn {
	width: 44px; border: 1px solid var(--line); background: var(--bg-2); border-radius: 10px;
	font-size: 20px; color: var(--brass); cursor: pointer; transition: background .15s;
}
.mesa-step-btn:hover { background: var(--bg-3); }
.mesa-input--num { text-align: center; max-width: 90px; }

/* Slots */
.mesa-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mesa-slot {
	text-align: left; padding: 13px 14px; border: 1px solid var(--line);
	background: var(--bg-2); border-radius: 12px; cursor: pointer; transition: all .18s;
	color: var(--ink);
}
.mesa-slot:hover { border-color: var(--brass); }
.mesa-slot.is-active {
	border-color: var(--brass); background: var(--bg-3);
	box-shadow: 0 0 0 1px var(--brass), 0 8px 24px -10px rgba(201,164,92,.4);
}
.mesa-slot b { display: block; font-family: var(--font-disp); font-size: 18px; color: var(--ink); }
.mesa-slot span { font-size: 12px; color: var(--muted); }
.mesa-slot.is-active b { color: var(--brass-hi); }

/* Food chips */
.mesa-food { display: flex; gap: 10px; }
.mesa-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px; border: 1px solid var(--line); background: var(--bg-2);
	border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500;
	color: var(--ink); transition: all .18s;
}
.mesa-chip.is-active { border-color: var(--brass); background: var(--bg-3); }
.mesa-chip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.mesa-chip-dot--jain { background: var(--green); }

/* Actions */
.mesa-actions {
	display: flex; align-items: center; justify-content: flex-end; gap: 12px;
	margin-top: 22px;
}
.mesa-hint { margin-right: auto; font-size: 13px; color: var(--yellow); }
.mesa-btn {
	padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 600;
	cursor: pointer; border: 1px solid transparent; font-family: var(--font-body);
	transition: transform .1s, background .2s, box-shadow .2s;
}
.mesa-btn:active { transform: translateY(1px); }
.mesa-btn--primary {
	background: var(--brass); color: #191204;
	box-shadow: 0 8px 24px -8px rgba(201,164,92,.55);
}
.mesa-btn--primary:hover { background: var(--brass-hi); }
.mesa-btn--primary:disabled { background: #3a3a42; color: #77777f; box-shadow: none; cursor: not-allowed; }
.mesa-btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.mesa-btn--ghost:hover { background: var(--bg-3); }

/* Legend */
.mesa-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.mesa-key { display: inline-flex; align-items: center; gap: 6px; }
.mesa-key::before { content:''; width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.mesa-key--green::before  { background: var(--green); box-shadow: 0 0 8px rgba(46,204,113,.7); }
.mesa-key--yellow::before { background: var(--yellow); box-shadow: 0 0 8px rgba(245,197,66,.7); }
.mesa-key--red::before    { background: var(--red); box-shadow: 0 0 8px rgba(231,76,60,.7); }
.mesa-key--sel::before    { background: var(--brass-hi); box-shadow: 0 0 8px rgba(232,201,135,.8); }

/* Floor plan */
.mesa-plan-wrap {
	background: radial-gradient(120% 120% at 50% 0%, #15151b 0%, #0a0a0c 70%);
	border-radius: var(--radius); padding: 18px; border: 1px solid var(--line);
}
.mesa-plan {
	position: relative; width: 100%; aspect-ratio: 16 / 10;
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 40px);
	border: 1px dashed rgba(201,164,92,.35); border-radius: 10px;
	overflow: visible;
}
.mesa-plan-entry {
	position: absolute; left: 12px; bottom: 8px;
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(242,239,232,.35);
}

/* Stylised O'Vanta brand mark, centred in the open floor space */
.mesa-brand {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-disp);
	font-size: clamp(34px, 7vw, 64px);
	letter-spacing: .06em;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	animation: mesaBrandBreathe 6s ease-in-out infinite;
}
.mesa-brand-o {
	font-style: italic; font-weight: 700;
	background: linear-gradient(120deg, var(--brass-hi), var(--brass) 55%, #8a6a30);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	text-shadow: 0 0 30px rgba(201,164,92,.25);
}
.mesa-brand-rest {
	font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
	font-size: .55em; vertical-align: .18em; margin-left: .1em;
	color: rgba(242,239,232,.28);
}
@keyframes mesaBrandBreathe {
	0%, 100% { opacity: .75; filter: drop-shadow(0 0 6px rgba(201,164,92,.15)); }
	50%      { opacity: 1;   filter: drop-shadow(0 0 18px rgba(201,164,92,.35)); }
}

/* ---- Table groups (tabletop + ring of chairs) ---- */
.mesa-tgroup {
	position: absolute; transform: translate(-50%, -50%);
	width: 76px; height: 76px;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1);
	z-index: 1;
}
.mesa-tgroup.is-open { z-index: 5; transform: translate(-50%, -50%) scale(1.35); }

.mesa-ttop {
	position: absolute; inset: 14px;
	border-radius: 50%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	cursor: pointer; transition: box-shadow .2s, background .2s, border-color .2s;
	background: var(--bg-3); border: 2px solid var(--line); color: var(--ink);
	padding: 0; z-index: 2;
}
.mesa-ttop b { font-family: var(--font-disp); font-size: 15px; line-height: 1.05; pointer-events: none; }
.mesa-ttop span { font-size: 8px; color: var(--muted); pointer-events: none; }

/* Traffic-light states */
.mesa-tgroup.is-green .mesa-ttop {
	border-color: var(--green);
	box-shadow: 0 0 14px rgba(46,204,113,.45), inset 0 0 12px rgba(46,204,113,.12);
}
.mesa-tgroup.is-yellow .mesa-ttop {
	border-color: var(--yellow);
	box-shadow: 0 0 14px rgba(245,197,66,.45), inset 0 0 12px rgba(245,197,66,.12);
}
.mesa-tgroup.is-red .mesa-ttop {
	border-color: var(--red);
	background: var(--red-dk);
	box-shadow: 0 0 12px rgba(231,76,60,.4);
	cursor: not-allowed; opacity: .85;
}
.mesa-tgroup.is-red .mesa-ttop span { color: #d9a49e; }

.mesa-tgroup:not(.is-red):hover .mesa-ttop { background: #23232b; }
.mesa-tgroup.is-open .mesa-ttop {
	border-color: var(--brass-hi);
	box-shadow: 0 0 0 3px rgba(232,201,135,.35), 0 0 24px rgba(232,201,135,.4);
}

/* "Try this table instead" hint pulse */
.mesa-tgroup.is-hint { animation: mesaHint 1.2s ease 2; }
@keyframes mesaHint {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50%      { transform: translate(-50%, -50%) scale(1.18); }
}
/* Full-table shake on a blocked tap */
.mesa-tgroup.is-shake, .mesa-chair.is-shake { animation: mesaShake .4s ease; }
@keyframes mesaShake {
	0%, 100% { transform: translate(-50%, -50%); }
	25% { transform: translate(calc(-50% - 5px), -50%); }
	75% { transform: translate(calc(-50% + 5px), -50%); }
}

/* ---- Chairs ---- */
/* Positioned on a circle via --cx / --cy unit-vector custom props from JS,
   so ANY seats-per-table count lays out evenly (scalable). */
.mesa-chair {
	position: absolute;
	left: calc(50% + var(--cx) * 34px);
	top:  calc(50% + var(--cy) * 34px);
	transform: translate(-50%, -50%) scale(0);
	width: 20px; height: 20px; border-radius: 6px;
	border: 1.5px solid var(--green); background: rgba(46,204,113,.15);
	color: var(--green); font-size: 9px; font-weight: 600; font-family: var(--font-body);
	cursor: pointer; padding: 0; line-height: 1;
	transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s;
	transition-delay: calc(var(--ci) * 40ms);
	opacity: 0; pointer-events: none;
	z-index: 3;
}
/* Chairs bloom out when the table is opened */
.mesa-tgroup.is-open .mesa-chair {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1; pointer-events: auto;
}
.mesa-tgroup.is-open .mesa-chair:hover:not(:disabled) {
	transform: translate(-50%, -50%) scale(1.25);
	box-shadow: 0 0 10px rgba(46,204,113,.6);
	transition-delay: 0s;
}
.mesa-chair.is-reserved {
	border-color: var(--red); background: var(--red-dk); color: #d9a49e;
	cursor: not-allowed; text-decoration: line-through;
}
.mesa-chair.is-selected {
	border-color: var(--brass-hi); background: var(--brass);
	color: #191204;
	box-shadow: 0 0 12px rgba(232,201,135,.8);
}
/* Seat-pick pop effect */
.mesa-chair.is-pop { animation: mesaPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes mesaPop {
	0%   { transform: translate(-50%, -50%) scale(1); }
	40%  { transform: translate(-50%, -50%) scale(1.6); box-shadow: 0 0 0 8px rgba(232,201,135,.25); }
	100% { transform: translate(-50%, -50%) scale(1); }
}

.mesa-plan-status { margin: 12px 0; font-size: 13px; color: var(--muted); min-height: 20px; }
.mesa-plan-status b { color: var(--ink); }
.mesa-status-warn { color: var(--yellow); }
.mesa-status-ok { color: var(--green); }

/* Guests */
.mesa-guests { display: grid; gap: 10px; }
.mesa-guest-row {
	display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center;
	padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
}
.mesa-guest-n {
	height: 28px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line);
	color: var(--brass); font-size: 11px; font-weight: 600;
	display: grid; place-items: center; padding: 0 6px; white-space: nowrap;
}
.mesa-guest-row input { border: none; background: transparent; font-size: 15px; padding: 4px 0; color: var(--ink); }
.mesa-guest-row input::placeholder { color: #5b5b66; }
.mesa-guest-row input:focus { outline: none; }
/* Missing compulsory guest name */
.mesa-guest-row.is-missing {
	border-color: var(--red);
	box-shadow: 0 0 0 2px rgba(231,76,60,.35), 0 0 14px rgba(231,76,60,.3);
	animation: mesaShakeRow .4s ease;
}
@keyframes mesaShakeRow {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}
.mesa-guest-food { display: flex; gap: 4px; }
.mesa-mini {
	font-size: 11px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
	background: var(--bg-3); cursor: pointer; color: var(--muted);
}
.mesa-mini.is-active { background: var(--brass); color: #191204; border-color: var(--brass); }

/* Summary */
.mesa-summary {
	margin-top: 18px; padding: 16px; background: var(--bg-2); border: 1px solid var(--line);
	border-radius: 12px; font-size: 14px;
}
.mesa-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.mesa-summary dt { color: var(--muted); }
.mesa-summary dd { margin: 0; text-align: right; font-weight: 500; color: var(--ink); }

/* Price rail */
.mesa-rail {
	grid-column: 2 / 3; grid-row: 1 / 4; align-self: start; position: sticky; top: 20px;
	background: var(--bg-2); color: var(--ink); border-radius: var(--radius);
	padding: 22px; border: 1px solid var(--line);
}
.mesa-rail-head { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.mesa-rail-total { font-family: var(--font-disp); font-size: 42px; font-weight: 700; margin: 6px 0 16px; color: var(--brass-hi); }
.mesa-rail-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mesa-rail-lines li {
	display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
	color: rgba(242,239,232,.8); padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.mesa-rail-lines li b { font-weight: 600; white-space: nowrap; }
.mesa-rail-lines .is-discount { color: var(--green); }
.mesa-rail-lines .is-surge b { color: var(--yellow); }
.mesa-rail-meta { margin-top: 14px; font-size: 12px; color: var(--muted); }

/* Done */
.mesa-done { text-align: center; padding: 20px 0; }
.mesa-tick {
	width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
	background: var(--green-dk); color: var(--green); font-size: 32px;
	display: grid; place-items: center; border: 2px solid var(--green);
	box-shadow: 0 0 24px rgba(46,204,113,.4);
}
.mesa-ref {
	display: inline-block; margin: 10px 0 20px; padding: 10px 20px; font-family: var(--font-disp);
	font-size: 22px; letter-spacing: .05em; background: var(--bg-3); border: 1px solid var(--brass);
	border-radius: 10px; color: var(--brass-hi);
}

/* Toast */
.mesa-toast {
	position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
	background: #23232b; color: var(--ink); padding: 12px 20px; border-radius: 10px;
	border: 1px solid var(--line);
	font-size: 14px; opacity: 0; pointer-events: none; transition: all .3s; z-index: 9999;
	max-width: 90vw;
}
.mesa-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mesa-toast.is-error { background: var(--red-dk); border-color: var(--red); }

/* Responsive */
@media (max-width: 860px) {
	.mesa { grid-template-columns: 1fr; padding: 18px; }
	.mesa-head, .mesa-body { grid-column: 1 / -1; }
	.mesa-rail { grid-column: 1 / -1; grid-row: auto; position: static; }
	.mesa-title { font-size: 32px; }
	.mesa-grid-2 { grid-template-columns: 1fr; }
	.mesa-slots { grid-template-columns: 1fr; }
	.mesa-plan { aspect-ratio: 4 / 5; }
	.mesa-tgroup { width: 64px; height: 64px; }
	.mesa-tgroup.is-open { transform: translate(-50%, -50%) scale(1.5); }
	.mesa-chair { left: calc(50% + var(--cx) * 30px); top: calc(50% + var(--cy) * 30px); }
	.mesa-brand { font-size: clamp(26px, 9vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
	.mesa-step, .mesa-btn, .mesa-tgroup, .mesa-chair, .mesa-toast, .mesa-brand {
		animation: none !important; transition: none !important;
	}
	.mesa-chair { opacity: 0; }
	.mesa-tgroup.is-open .mesa-chair { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ============ Staff Console (mobile-first) ============ */
.mesa-staffwrap {
	max-width: 1060px; margin: 0 auto;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.mesa-staffbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px; margin-bottom: 10px;
	background: #0b0b0d; border: 1px solid #26262e; border-radius: 14px;
	color: #f2efe8;
}
.mesa-staffbar-id { display: flex; flex-direction: column; gap: 2px; }
.mesa-staffbar-id .mesa-eyebrow { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #c9a45c; font-weight: 600; }
.mesa-staffbar-id b { font-size: 15px; }
.mesa-stafflogout { color: #8b8b96; font-size: 13px; text-decoration: none; }
.mesa-stafflogout:hover { color: #e8c987; }

.mesa-stabs { display: flex; gap: 8px; margin-bottom: 12px; }
.mesa-stab {
	flex: 1; padding: 14px; font-size: 15px; font-weight: 600;
	background: #121216; color: #8b8b96; border: 1px solid #26262e;
	border-radius: 12px; cursor: pointer; transition: all .2s;
}
.mesa-stab.is-active {
	background: #c9a45c; color: #191204; border-color: #c9a45c;
	box-shadow: 0 8px 24px -8px rgba(201,164,92,.5);
}
.mesa-spanel { display: none; }
.mesa-spanel.is-active { display: block; animation: mesaFade .3s ease; }

/* List view reuses the .mesa dark shell */
.mesa--list { grid-template-columns: 1fr; }
.mesa-listbar { display: flex; gap: 8px; margin-bottom: 14px; }
.mesa-listbar .mesa-input { flex: 1; min-width: 0; }
.mesa-listbar .mesa-btn { flex: 0 0 auto; }

.mesa-staff-count { font-size: 13px; color: #8b8b96; margin: 0 0 10px; }
.mesa-staff-list { display: grid; gap: 10px; }
.mesa-scard {
	background: #121216; border: 1px solid #26262e; border-radius: 12px;
	padding: 14px; color: #f2efe8; display: grid; gap: 8px;
}
.mesa-scard.is-cancelled { opacity: .45; }
.mesa-scard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mesa-scard-top b { font-size: 16px; }
.mesa-scard-ref { font-size: 11px; color: #c9a45c; letter-spacing: .04em; }
.mesa-scard-mid { font-size: 13px; color: #8b8b96; }
.mesa-scard-notes { font-size: 12px; color: #f5c542; }
.mesa-scard-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mesa-scall { color: #2ecc71; font-size: 13px; text-decoration: none; margin-right: auto; }
.mesa-scard-total { font-weight: 600; color: #e8c987; }
.mesa-scard-x { color: #e74c3c; font-size: 13px; font-style: normal; }
.mesa-btn--sm { padding: 8px 14px; font-size: 12px; }

/* Login / access gate */
.mesa--gate { grid-template-columns: 1fr; max-width: 420px; }
.mesa-gate-card { text-align: left; }
.mesa-gate-msg { color: #f2efe8; font-size: 15px; }
.mesa--gate .login-username, .mesa--gate .login-password, .mesa--gate .login-remember, .mesa--gate .login-submit { margin-bottom: 14px; }
.mesa--gate label { display: block; font-size: 13px; font-weight: 600; color: #c9a45c; margin-bottom: 7px; }
.mesa--gate input[type="text"], .mesa--gate input[type="password"] {
	width: 100%; padding: 12px 14px; font-size: 15px;
	color: #f2efe8; background: #121216; border: 1px solid #26262e; border-radius: 10px;
}
.mesa--gate input[type="submit"] {
	width: 100%; padding: 14px; border-radius: 10px; border: none;
	background: #c9a45c; color: #191204; font-size: 15px; font-weight: 600; cursor: pointer;
}
.mesa--gate input[type="submit"]:hover { background: #e8c987; }
.mesa--gate .login-remember label { color: #8b8b96; font-weight: 400; }

@media (max-width: 860px) {
	.mesa-staffwrap { padding: 0 4px; }
	.mesa-listbar { flex-wrap: wrap; }
	.mesa-listbar .mesa-input { flex: 1 1 40%; }
}