/* The guest page of POS System for Restaurant (resources/views/rpos/guest/page.php): QR ordering, the kiosk and the
   own online page. Mobile first (390 px), 44 px touch targets, GetXtra tokens, sharp corners; light on purpose. */
*, *::before, *::after { box-sizing: border-box; }
.g-body { margin: 0; background: var(--bg, #f8faf9); color: var(--text, #0f172a); font-family: var(--font-sans, system-ui, sans-serif); font-size: 1rem; line-height: 1.45; }
.g-app { min-height: 100vh; display: flex; flex-direction: column; }
.g-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 1rem; background: var(--brand, #047857); color: #fff; position: sticky; top: 0; z-index: 2; }
.g-title { margin: 0; font-size: 1.15rem; }
.g-title-dark { font-size: 1.3rem; }
.g-sub { margin: 0; font-size: .9rem; opacity: .9; }
.g-lang { color: #fff; min-height: 44px; display: inline-flex; align-items: center; padding: 0 .5rem; }
.g-main { flex: 1; width: 100%; max-width: 40rem; margin: 0 auto; padding: .75rem; }
.g-card { background: var(--surface, #fff); border: 1px solid var(--border, #d1d5db); padding: .75rem; margin: 0 0 .75rem; }
.g-card h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.g-msg { min-height: 1.5rem; font-weight: 600; margin: 0 0 .5rem; }
.g-msg[data-kind="error"] { color: var(--danger, #b91c1c); }
.g-note { background: #fff7ed; border: 1px solid #fdba74; padding: .75rem; }
.g-input { font: inherit; min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--border-strong, #6b7280); background: var(--surface, #fff); color: inherit; width: 100%; }
.g-btn { font: inherit; font-weight: 600; min-height: 44px; min-width: 44px; padding: .4rem 1rem; border: 1px solid var(--brand, #047857); background: var(--brand, #047857); color: #fff; cursor: pointer; }
.g-ghost { background: transparent; color: var(--brand-text, var(--brand, #047857)); }
.g-btn:focus-visible, .g-input:focus-visible, .g-lang:focus-visible, .g-cats a:focus-visible { outline: 3px solid var(--ring, #f59e0b); outline-offset: 2px; }
.g-btn[disabled] { opacity: .6; cursor: default; }
.g-start, .g-contact { display: grid; gap: .5rem; }
.g-types { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; }
.g-types label, .g-veg { min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; }
.g-cats { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .5rem; position: sticky; top: 3.25rem; background: var(--bg, #f8faf9); z-index: 1; }
.g-cats a { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; padding: 0 .75rem; border: 1px solid var(--border, #d1d5db); background: var(--surface, #fff); color: inherit; text-decoration: none; }
.g-cat h2 { font-size: 1.05rem; margin: 1rem 0 .5rem; }
.g-item { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.g-item h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: .4rem; }
.g-item p { margin: 0; font-size: .9rem; color: var(--text-muted, #475569); grid-column: 1 / -1; }
.g-item .g-price { font-weight: 700; white-space: nowrap; }
.g-item .g-opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.g-mark { width: 14px; height: 14px; border: 2px solid #15803d; display: inline-block; position: relative; flex: none; }
.g-mark::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #15803d; }
.g-mark[data-mark="nonveg"] { border-color: #b91c1c; }
.g-mark[data-mark="nonveg"]::after { background: #b91c1c; }
.g-mark[data-mark="egg"] { border-color: #ca8a04; }
.g-mark[data-mark="egg"]::after { background: #ca8a04; }
.g-addons { grid-column: 1 / -1; border: 1px dashed var(--border, #d1d5db); padding: .4rem .6rem; margin: 0; }
.g-addons label { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; margin-right: .75rem; }
.g-lines { list-style: none; margin: 0; padding: 0; }
.g-lines li { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--border, #e5e7eb); flex-wrap: wrap; }
.g-sum { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; margin: .5rem 0; }
.g-sum dt { margin: 0; }
.g-sum dd { margin: 0; text-align: right; font-weight: 600; }
.g-calls { display: flex; flex-wrap: wrap; gap: .5rem; }
.g-small { font-size: .85rem; color: var(--text-muted, #475569); margin: 0 0 .5rem; }
.g-qr svg { width: 12rem; height: auto; }
.g-foot { text-align: center; font-size: .8rem; padding: 1rem; color: var(--text-muted, #475569); }
.g-kiosk .g-main { max-width: 64rem; font-size: 1.15rem; }
.g-kiosk .g-btn { min-height: 56px; }
[hidden] { display: none !important; }
@media (min-width: 48rem) { .g-item { grid-template-columns: 1fr auto auto; } }
/* Phase 13: the guest feedback page (stars as large radio labels) */
.g-star { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; min-width: 44px; padding: 0 .4rem; }
fieldset.g-card { border: 1px solid var(--border, #d1d5db); }
.g-sum dt, .g-sum dd { overflow-wrap: anywhere; min-width: 0; }