/* Shared base for the customer page, owner screen and QR cards. Uses tokens.css only. Logical properties throughout so Arabic mirrors. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-md)/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.display { font-family: var(--font-display); font-weight: 800; letter-spacing: .005em; font-optical-sizing: auto; }
/* Arabic, Chinese, Hindi and Korean headings use their Noto face; condensed Latin settings don't apply. */
:lang(ar) .display, :lang(zh-Hans) .display, :lang(hi) .display, :lang(ko) .display { font-family: var(--font-body); letter-spacing: 0; }
.wordmark { font-family: var(--font-wordmark); font-weight: 900; letter-spacing: .01em; line-height: .9; text-transform: uppercase; }
bdi.num, .num { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; }

/* The table plate: a berth number board, navy with a chilli number. */
.plate {
  display: inline-grid; place-items: center; align-content: center; gap: 1px;
  min-width: 64px; padding: 6px 10px 7px; border-radius: var(--r-md);
  background: var(--brand); color: var(--brand-ink);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), inset 0 0 0 4px var(--brand);
  line-height: 1; text-align: center;
}
.plate small { font: 700 12px/1.1 var(--font-body); letter-spacing: .04em; opacity: .92; white-space: nowrap; }
:lang(en-AU) .plate small, :lang(id) .plate small { text-transform: uppercase; letter-spacing: .07em; }
.plate b { font: 900 34px/1 "Big Shoulders", var(--font-display); color: var(--signal); font-variant-numeric: tabular-nums; }
.plate.lg { min-width: 96px; padding: 10px 14px 12px; border-radius: var(--r-lg); }
.plate.lg small { font-size: 13px; }
.plate.lg b { font-size: 52px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5); border: 0; border-radius: var(--r-md);
  background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: var(--t-md);
  text-decoration: none; transition: background-color .15s;
}
.btn:hover { background: var(--brand-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn.wide { width: 100%; }
.btn.quiet { background: var(--surface); color: var(--ink); }
.btn.quiet:hover { background: var(--surface-2); }
.btn.outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}