/* Ferculon - the guest-facing pages: the restaurant's public page (menu, table bookings, online
   orders), a guest's booking, an order on its way, and the dish cards of the table QR page. Warmer
   than the staff screens: white cards with soft shadows on the cream ground, the forest hero with a
   soft light, Hanken Grotesk throughout, semibold for headlines and the one big figure. Loaded after pos.css and built on
   its tokens. */

body.guest { --card-shadow: 0 1px 2px rgba(20, 32, 26, .05), 0 10px 26px -16px rgba(18, 40, 28, .24); }
[data-theme="dark"] body.guest { --card-shadow: 0 0 0 1px rgba(255, 255, 255, .04); }
body.pub { background: var(--ground); }
body.guest a:focus-visible, body.guest button:focus-visible, body.guest summary:focus-visible, body.guest input[type=checkbox]:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.pub-hero :focus-visible { outline-color: var(--mint) !important; }
body.guest .input:focus-visible, body.guest .textarea:focus-visible { outline: none; }

/* What guests and restaurants type (dish names and notes, names, addresses) wraps inside its box,
   a long word included, so it never pushes a basket, a sheet or a card wider than the screen. */
.dish h3, body.guest .sheet-head h2, .bline-text, .oline .n, .t-line .n, .facts span, .bk-summary div, .where, .pub-note > span, .info-row, .t-note > div, .t-receipt span, .rider-stop h3, .rider-addr span, .menu-note li { overflow-wrap: anywhere; }
body.guest .sheet-head h2 { min-width: 0; }

.pub-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.pub-wrap.pub-narrow { max-width: 760px; }
.row.wrap { flex-wrap: wrap; }

/* ── Hero: the forest field with soft light, or the restaurant's cover photo under a 30% black veil ── */
.pub-hero { position: relative; background: var(--forest); color: #fff; isolation: isolate; overflow: hidden; }
.pub-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 90% at 100% 0%, rgba(111, 206, 143, .18), transparent 60%), radial-gradient(45% 70% at 0% 100%, rgba(238, 123, 48, .07), transparent 65%); }
.pub-cover { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pub-hero.has-cover { background: #000; }
.pub-hero.has-cover::before { background: rgba(0, 0, 0, .3); }
/* Words over a photo keep a soft shadow, so they read on a light picture too. */
.pub-hero.has-cover .pub-hero-text { text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 18px rgba(0, 0, 0, .35); }
.pub-hero.has-cover .pub-facts, .pub-hero.has-cover .pub-back { color: #fff; }
.pub-hero.has-cover .pub-kicker { color: #fff; }
.pub-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: end; padding-top: 64px; padding-bottom: 56px; }
.pub-hero.has-cover .pub-hero-in { min-height: 440px; }
.pub-hero-text { min-width: 0; }
.pub-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--mint); font-weight: 600; font-size: 14px; }
.pub-hero h1 { font-size: 48px; line-height: 1.04; letter-spacing: -.03em; color: #fff; margin-top: 12px; max-width: 680px; overflow-wrap: anywhere; }
.pub-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; color: #D3E3D8; font-size: 14.5px; }
.pub-facts > * { display: inline-flex; align-items: center; gap: 8px; }
.pub-facts .ico { color: #9FC4AC; }
.pub-open .dot { color: #E9B95C; }
.pub-open.is-open .dot { color: var(--mint); box-shadow: 0 0 0 3px rgba(111, 206, 143, .22); }
.pub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn-hero { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .22); }
.btn-hero:hover { background: rgba(255, 255, 255, .15); }
.narrow-only { display: none; }
.pub-lead { color: #D3E3D8; margin: 10px 0 0; font-size: 15px; max-width: 560px; }

.pub-info { background: var(--surface); color: var(--ink); border-radius: 8px; box-shadow: var(--shadow-lift); padding: 4px 20px; }
.info-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.info-row:first-child { border-top: 0; }
.info-row > .ico { color: var(--brand-2); margin-top: 1px; }
.info-row small { display: block; font-size: 12px; color: var(--ink-muted); font-weight: 600; margin-bottom: 1px; }
.info-row b { display: block; font-weight: 600; }
.info-row span { display: block; color: var(--ink-soft); }
.info-row .link { margin-top: 3px; font-size: 13.5px; }

/* The guest's own booking or order, under the hero */
.pub-notes { display: grid; gap: 10px; padding-top: 24px; max-width: 760px; }
.pub-note { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border-radius: 6px; box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); font-size: 14px; }
.pub-note > .ico { color: var(--brand-2); }
.pub-note > span { flex: 1; min-width: 0; }
.pub-note b { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-2); font-weight: 600; white-space: nowrap; }
.pub-note:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pub-about p { max-width: 760px; margin: 32px 0 0; font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; }

/* ── Menu ── */
.pub-menu { padding: 52px 0 32px; scroll-margin-top: 8px; }
.menu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 24px; }
.menu-title { min-width: 0; max-width: 760px; flex: 1 1 360px; }
.menu-head h2 { font-family: var(--display); font-size: 32px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.menu-note { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-muted); line-height: 1.45; }
.menu-note li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; }
.menu-note .ico { color: var(--brand-2); margin-top: 2px; }
.seg.chan button { height: 36px; padding: 0 14px; font-size: 13.5px; }
.menu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.dishes { min-width: 0; }
.basket-aside { display: none; }
@media (min-width: 1024px) {
  .menu-grid.ordering { grid-template-columns: minmax(0, 1fr) 340px; }
  .menu-grid.ordering .basket-aside { display: block; position: sticky; top: 16px; }
  .menu-head .seg.chan { width: 340px; }
  .menu-head .seg.chan button { flex: 1; justify-content: center; }
  .pub-bar { display: none; }
}
body.pub .g-cats { padding: 12px 0; margin: 0; border-bottom: 0; box-shadow: 0 1px 0 var(--line); background: color-mix(in srgb, var(--ground) 94%, transparent); }
body.pub .g-cats button { height: 34px; }
body.pub .g-sec { padding: 26px 0 4px; scroll-margin-top: 64px; }
body.pub .g-sec h2 { font-size: 23px; margin-bottom: 12px; }

/* Dish cards: words on the left, the photo (or a soft tile with a drawing) on the right. */
.dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.g-wrap .dish-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dish { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; padding: 14px; background: var(--surface); border-radius: 6px; box-shadow: var(--card-shadow); transition: box-shadow .15s, transform .15s; }
.dish.can { cursor: pointer; }
.dish.can:hover { box-shadow: 0 1px 2px rgba(20, 32, 26, .06), 0 16px 34px -18px rgba(18, 40, 28, .34); }
.dish.off { opacity: .55; }
.dish-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dish h3 { font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.dish-desc { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dish-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 6px; }
.dish-meta > b { font-weight: 700; font-size: 14.5px; }
.dish-meta .chip { height: 22px; font-size: 11.5px; gap: 4px; padding: 0 7px; }
.dish-meta .chip .ico { width: 12px; height: 12px; }
.mark { display: inline-flex; color: var(--leaf); } .mark.hot { color: var(--danger); }
.allergens { font-size: 12.5px; color: var(--ink-muted); }
.allergens summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 600; color: var(--ink-soft); list-style: none; padding: 2px 0; }
.allergens summary::-webkit-details-marker { display: none; }
.allergens summary .ico { width: 13px; height: 13px; transition: transform .15s; }
.allergens[open] summary .ico { transform: rotate(180deg); }
.allergens p { margin: 3px 0 0; }
.dish-media { position: relative; width: 104px; height: 104px; border-radius: 5px; overflow: hidden; display: grid; place-items: center; align-self: start; background: var(--surface-3); }
.dish-media img { width: 100%; height: 100%; object-fit: cover; }
.dish-media .pic { width: 34px; height: 34px; stroke-width: 1.4; opacity: .9; }
.dish-media.t0 { background: var(--wash); color: var(--brand-2); }
.dish-media.t1 { background: var(--gold-soft); color: var(--gold); }
.dish-media.t2 { background: var(--accent-soft); color: var(--accent-ink); }
.dish-media.t3 { background: var(--lagoon-soft); color: var(--lagoon); }
.dish.can .dish-media .pic { transform: translate(-7px, -7px); }
.dish-add { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border: 0; border-radius: 5px; background: var(--surface); color: var(--forest); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(18, 40, 28, .2); }
.dish-add:hover { background: var(--forest); color: #fff; }
[data-theme="dark"] .dish-add { color: var(--mint); }

/* ── Basket (beside the menu on wide screens, in the checkout sheet on phones) ── */
.basket { background: var(--surface); border-radius: 8px; box-shadow: var(--card-shadow); padding: 18px; display: grid; gap: 14px; max-height: calc(100vh - 32px); overflow: auto; }
.basket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.basket-head h3 { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.basket-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 16px 8px 6px; color: var(--ink-muted); font-size: 13.5px; }
.basket-empty .ico { width: 28px; height: 28px; color: var(--ink-faint); }
.basket-empty b { color: var(--ink); font-size: 14.5px; }
.blines { display: grid; }
.bline { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.bline:first-child { border-top: 0; padding-top: 2px; }
.bline-text { flex: 1; min-width: 0; }
.bline-text b { font-weight: 600; font-size: 14px; }
.bline-price { font-weight: 600; margin-top: 2px; font-size: 13.5px; }
.stepper.sm { height: 34px; }
.stepper.sm button { width: 34px; }
.stepper.sm b { min-width: 26px; font-size: 14px; }
.bill { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.bill-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink-soft); }
.bill-row.faint { color: var(--ink-muted); font-size: 13px; }
.bill-row.total { color: var(--ink); font-weight: 700; font-size: 16px; padding-top: 4px; }
.skel { display: inline-block; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: pub-shimmer 1.2s infinite linear; }
@keyframes pub-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.callout { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 13px; border-radius: 5px; background: var(--gold-soft); color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
.callout .ico { color: var(--gold); margin-top: 2px; }
.callout.bad { background: var(--danger-soft); }
.callout.bad .ico { color: var(--danger); }
.btn-split { justify-content: space-between; }
.btn-split .tnum:empty { display: none; }
.btn-split:has(.tnum:empty) { justify-content: center; }

/* ── Sheets: a bottom sheet on phones, a centred dialog from tablet width on the public page ── */
body.guest .sheet { box-shadow: var(--shadow-lift); }
body.guest .sheet:focus { outline: none; }
body.guest .sheet-head h2 { line-height: 1.15; }
.sheet-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
fieldset.opt-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.sheet-alg { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); }
.sheet-alg .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ink-faint); }
.sheet-foot .stepper { height: 42px; }
.sheet-foot .stepper button { width: 40px; }
.sheet-foot .btn-lg { height: 42px; font-size: 14.5px; padding: 0 18px; }
.sheet-foot > .flow-foot { flex: 1; min-width: 0; }
@media (min-width: 768px) {
  body.pub .sheet { top: 50%; bottom: auto; width: min(560px, calc(100% - 48px)); max-height: min(88vh, 920px); border-radius: 8px; opacity: 0; transform: translate(-50%, -46%); transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .18s; }
  body.pub .sheet.in { opacity: 1; transform: translate(-50%, -50%); }
  body.pub .sheet-grab { display: none; }
  body.pub .sheet-head { padding: 20px 22px 12px; }
  body.pub .sheet-body { padding: 4px 22px 18px; }
  body.pub .sheet-foot { padding: 14px 22px; border-radius: 0 0 8px 8px; }
  body.pub .sheet-foot #addBtn { flex: 0 1 280px !important; margin-left: auto; }
}
.flow-steps { display: flex; gap: 6px; margin-top: 14px; }
.flow-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-4); transition: background .2s; }
.flow-steps i.on { background: var(--brand-2); }
body.pub #app { min-height: 100vh; display: flex; flex-direction: column; }
body.pub #app > .pub-foot { margin-top: auto; }
.pane { display: grid; gap: 18px; min-width: 0; }
.input-prefix.tel .input { padding-left: 56px; }
.flow-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; }
.flow-foot > .btn { flex: 1 1 140px; }
.flow-foot > .btn-ghost:first-child:not(:only-child) { flex: 0 1 auto; }
.flow-sum { flex: 1 1 140px; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); }
.flow-sum b { display: block; font-weight: 650; color: var(--ink); }
.flow-sum small { display: block; font-size: 12.5px; color: var(--ink-muted); }
.flow-foot > .flow-sum + .btn { flex: 0 0 auto; }
.flow-sum .ico { color: var(--brand-2); }
.flow-sum span { overflow: hidden; text-overflow: ellipsis; }

/* Booking */
.bk-sec { display: grid; gap: 10px; min-width: 0; }
.bk-label { font-size: 13px; font-weight: 650; color: var(--ink-soft); }
.party { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.party .t-sub { flex: 1 1 200px; }
.dates { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.dates::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .dates { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .dates::-webkit-scrollbar { display: block; height: 6px; } .dates::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } }
.date { flex: none; width: 62px; height: 74px; display: grid; justify-items: center; align-content: center; gap: 1px; padding: 0; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); scroll-snap-align: start; }
.date small { font-size: 11.5px; color: var(--ink-muted); font-weight: 600; }
.date b { font-size: 19px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.date:hover:not(:disabled) { border-color: var(--brand-2); }
.date.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.date.on small { color: #BFD3C6; }
.date:disabled { opacity: .5; cursor: not-allowed; background: var(--surface-2); }
.later { max-width: 280px; }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.time { height: 46px; padding: 0; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 650; font-size: 14.5px; display: grid; place-items: center; align-content: center; line-height: 1.1; }
.time:hover:not(:disabled) { border-color: var(--brand-2); }
.time.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.time:disabled { background: var(--surface-2); color: var(--ink-faint); border-color: var(--line); cursor: not-allowed; }
.time small { font-size: 10.5px; font-weight: 600; }
.time-skel { height: 46px; border-radius: 5px; }
.time-group { font-size: 12.5px; font-weight: 650; color: var(--ink-muted); margin: 8px 0 -2px; }
.time-group:first-child { margin-top: 0; }
.bk-summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 6px; background: var(--wash); }
.bk-summary > .ico { color: var(--brand-2); }
.bk-summary div { flex: 1; min-width: 0; }
.bk-summary b { display: block; font-weight: 650; }
.bk-summary span { font-size: 13.5px; color: var(--ink-soft); }
.bk-summary .link { background: none; border: 0; padding: 4px 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; line-height: 1.45; }
.check input { margin: 1px 0 0; width: 18px; height: 18px; flex: none; }
body.guest .input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
.ck { display: grid; gap: 22px; }
.ck-sec { display: grid; gap: 12px; }
.ck-sec h3 { font-size: 14px; font-weight: 650; }
.ck-sec .bill { border-top: 0; padding-top: 0; }

/* Phone code: six boxes */
.otp { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 6px 0 2px; }
.otp-badge, .done-badge { width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; background: var(--wash); color: var(--brand-2); }
.otp-badge .ico, .done-badge .ico { width: 26px; height: 26px; stroke-width: 1.7; }
.otp h3, .bk-done h3 { font-family: var(--display); font-size: 23px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.otp p, .bk-done p { margin: 0; color: var(--ink-muted); font-size: 14px; max-width: 420px; }
.otp-boxes { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.otp-box { width: 46px; height: 56px; padding: 0; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); text-align: center; font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; outline: none; caret-color: var(--brand-2); transition: border-color .15s, box-shadow .15s; }
.otp-box:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent); }
.otp-error { margin: 0; color: var(--danger) !important; font-weight: 600; font-size: 13.5px; }
/* Who sends the code: one quiet line with the partner's mark (dude-lemon.png, black on white: the white
   melts into the page, and in the dark theme the mark turns white). */
.otp .otp-partner { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--ink-faint); }
.otp .otp-partner[hidden] { display: none; }
.otp-partner img { width: 30px; height: 13px; object-fit: cover; mix-blend-mode: multiply; opacity: .8; }
[data-theme="dark"] .otp-partner img { filter: invert(1); mix-blend-mode: screen; }
.otp .devnote { max-width: 420px; }
.otp-links { display: flex; gap: 6px 20px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.otp-links .link, .flow-foot .link { background: none; border: 0; padding: 6px 0; font-size: 13.5px; }
.link[disabled] { color: var(--ink-faint); cursor: default; text-decoration: none; }

.bk-done { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 8px 0 2px; }
.facts { display: grid; gap: 10px; padding: 14px 16px; border-radius: 6px; background: var(--surface-2); font-size: 14px; }
.facts > div { display: flex; gap: 10px; align-items: flex-start; }
.facts .ico { color: var(--brand-2); margin-top: 1px; }
.facts span { min-width: 0; }

/* ── A booking, an order: a compact hero and a card over its edge ── */
.pub-hero.compact .pub-hero-in { grid-template-columns: minmax(0, 1fr); padding-top: 32px; padding-bottom: 88px; }
.pub-hero.compact.has-cover .pub-hero-in { min-height: 0; padding-top: 48px; }
.pub-hero.compact h1 { font-size: 36px; margin-top: 10px; }
.pub-back { display: inline-flex; align-items: center; gap: 4px; color: #D3E3D8; text-decoration: none; font-weight: 600; font-size: 14px; }
.pub-back:hover { color: #fff; }
.pub-body { margin-top: -56px; position: relative; z-index: 2; display: grid; gap: 16px; padding-bottom: 40px; }
.pub-card { background: var(--surface); border-radius: 8px; box-shadow: var(--card-shadow); padding: 24px; display: grid; gap: 16px; min-width: 0; }
.pub-body > .pub-card:first-child { box-shadow: var(--shadow-lift); }
.pub-card > h3 { font-size: 15px; font-weight: 650; }
.pub-card .empty { padding: 20px 8px; }
.pub-card .empty span { max-width: 420px; }
.bk-when { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.bk-when .figure { font-size: 32px; }
.bk-time { font-size: 22px; font-weight: 650; color: var(--brand-2); }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.card-actions:empty { display: none; }
.card-actions > span:empty { display: none; }
.confirm { display: grid; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 6px; background: var(--danger-soft); }
.confirm p { margin: 0; font-size: 14px; color: var(--ink-soft); }

.o-title { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
/* A food court order's number, shown at the counter to pay and to collect. */
.o-num { margin: 0; font-family: var(--display); font-size: 46px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.o-steps { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.o-steps li { display: grid; gap: 7px; font-size: 12px; color: var(--ink-faint); font-weight: 600; min-width: 0; }
.o-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-steps i { height: 5px; border-radius: 3px; background: var(--surface-4); }
.o-steps li.done { color: var(--ink-muted); }
.o-steps li.done i { background: var(--brand-2); }
.o-steps li.cur { color: var(--ink); }
.olines { display: grid; }
.oline { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.oline:first-child { border-top: 0; padding-top: 0; }
.oline b { font-weight: 600; }
.oline small { display: block; color: var(--ink-muted); font-size: 12.5px; }
.oline .q { color: var(--ink-muted); font-weight: 600; }
.map-card { padding: 14px; gap: 12px; }
.map { position: relative; height: 260px; border-radius: 6px; overflow: hidden; background: #E9E5D9; }
.map .gm { position: absolute; inset: 0; }
.map-pin { position: absolute; transform: translate(-50%, calc(-100% - 6px)); width: 34px; height: 34px; border-radius: 6px; background: var(--forest); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.map-pin::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--forest); transform: translateX(-50%) rotate(45deg); }
.map-pin.door, .map-pin.door::after { background: var(--accent); }
.map-pin.shop, .map-pin.shop::after { background: var(--gold); }
.map-who { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.map-who .ico { color: var(--brand-2); }

/* ── Footer ── */
.pub-foot { margin-top: 32px; padding: 26px 0 40px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 13.5px; }
.pub-foot .pub-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; }
.pub-foot .pub-wrap > div { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.pub-foot b { color: var(--ink); font-weight: 650; }
.pub-foot a { color: var(--ink-soft); }
.pub-by { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pub-privacy { margin-right: 14px; color: var(--ink-soft); }

/* ── Smaller screens ── */
@media (max-width: 1023px) {
  .pub-hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 44px; padding-bottom: 32px; }
  .pub-hero.has-cover .pub-hero-in { min-height: 0; padding-top: 160px; }
  .pub-hero h1 { font-size: 40px; }
  .pub-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding: 4px 18px; }
  .pub-info .info-row:nth-child(2) { border-top: 0; }
  .pub-foot.has-bar { padding-bottom: 104px; }
}
@media (max-width: 767px) {
  .pub-wrap { padding: 0 16px; }
  .pub-hero-in { padding-top: 28px; padding-bottom: 20px; gap: 22px; }
  .pub-hero h1 { font-size: 32px; margin-top: 10px; }
  .pub-facts { font-size: 14px; gap: 6px 18px; margin-top: 12px; }
  .pub-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
  .pub-actions .btn { height: 46px; padding: 0 12px; font-size: 14.5px; }
  .pub-actions .btn:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .pub-info { grid-template-columns: minmax(0, 1fr); padding: 2px 16px; }
  .pub-info .info-row:nth-child(2) { border-top: 1px solid var(--line); }
  .pub-notes { padding-top: 18px; }
  .pub-note { flex-wrap: wrap; row-gap: 6px; }
  .pub-note > span { flex: 1 1 calc(100% - 40px); }
  .pub-note b { margin-left: 30px; }
  .pub-about p { margin-top: 24px; font-size: 15px; }
  .pub-menu { padding-top: 34px; }
  .menu-head h2 { font-size: 28px; }
  .menu-title { flex-basis: 100%; }
  .seg.chan { display: flex; width: 100%; }
  .seg.chan button { flex: 1; justify-content: center; padding: 0 6px; }
  body.pub .g-sec { padding-top: 22px; }
  body.pub .g-sec h2 { font-size: 21px; }
  .dish-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pub-hero.compact .pub-hero-in { padding-top: 22px; padding-bottom: 76px; }
  .pub-hero.compact h1 { font-size: 30px; }
  .pub-card { padding: 18px; }
  .o-title { font-size: 26px; }
  .bk-when .figure { font-size: 26px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .card-actions > .btn, .card-actions > a.btn, .confirm .btn { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .dish { grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; padding: 12px; }
  .dish-media { width: 88px; height: 88px; }
  .dish-media .pic { width: 30px; height: 30px; }
  .o-steps li { font-size: 11px; }
}
@media (max-width: 380px) {
  .otp-boxes { gap: 6px; }
  .otp-box { width: 40px; height: 50px; font-size: 21px; }
}

/* Table QR page: the hero's facts with icons */
.g-hero .g-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.g-hero .g-facts span { display: inline-flex; align-items: center; gap: 6px; }
.g-hero .g-facts .ico { color: #9FC4AC; }

/* Delivery checkout: the optional door pin under the address. */
.pin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -2px 0 12px; }
.pin-row .btn { padding-left: 8px; gap: 6px; }
.pin-row .t-sub { flex: 1 1 220px; min-width: 0; }

/* Where a delivery goes: the basket and checkout ask for a pin or an area; outside the delivery
   area the block says so. The area picker lists towns and villages with whether they are delivered. */
.where { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border-radius: 6px; background: var(--surface-2); font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.where > .ico { color: var(--brand-2); margin-top: 2px; flex: none; }
.where b { display: block; color: var(--ink); font-weight: 650; font-size: 14px; }
.where span { display: block; }
.where.in { background: var(--wash); }
.where.out { background: var(--danger-soft); }
.where.out > .ico { color: var(--danger); }
.where-acts { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
.where-acts .btn { padding-left: 8px; gap: 6px; }
.where-acts .link, .callout .link { background: none; border: 0; padding: 4px 0; font-size: 13.5px; cursor: pointer; }
.tlist { display: grid; gap: 6px; margin-top: 10px; max-height: 46vh; overflow: auto; }
.trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 6px; border: 0; background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; }
.trow:hover, .trow:focus-visible { background: var(--wash); }
.trow b { display: block; font-weight: 600; }
.trow small { display: block; color: var(--ink-muted); font-size: 12.5px; }
.trow.out { opacity: .78; }
.trow .chip { flex: none; }
.bill-note { display: block; color: var(--ink-muted); font-size: 12.5px; }

/* ── Table QR page: a visit (pos-table.js). Cards without hairlines, the live order, the bill asked
   for, option tiles in the sheets, the thumb dock at the bottom, the thank-you. ── */
.g-wrap .card { border: 0; border-radius: 8px; box-shadow: var(--card-shadow); }
.g-wrap .g-status { gap: 12px; padding: 18px; }
.t-foot { text-align: center; padding: 14px 16px 0; margin: 0; }
.t-foot:first-of-type { padding-top: 24px; }
.t-note { display: flex; align-items: center; gap: 12px; margin: 16px 16px 0; padding: 13px 14px; background: var(--surface); border-radius: 8px; box-shadow: var(--card-shadow); font-size: 13.5px; line-height: 1.4; }
.t-note > .ico { color: var(--brand-2); flex: none; }
.t-note > div { flex: 1; min-width: 0; }
.t-note b { display: block; font-weight: 600; font-size: 14px; }
.t-note span { color: var(--ink-muted); }
.t-note > .btn { flex: none; }
.t-note.warn { background: var(--gold-soft); box-shadow: none; }
.t-note.warn > .ico { color: var(--gold); }
.t-order h2 { font-size: 16px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-order .chip { flex: none; }
.t-moved { display: flex; align-items: center; gap: 6px; margin: 0; }
.t-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.t-steps li { display: grid; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-faint); min-width: 0; }
.t-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-steps i { height: 5px; border-radius: 3px; background: var(--surface-4); }
.t-steps li.done i, .t-steps li.cur i { background: var(--brand-2); }
.t-steps li.done { color: var(--ink-muted); } .t-steps li.cur { color: var(--ink); }
.t-lines { display: grid; }
.t-line { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.t-line:first-child { border-top: 0; }
.t-line .q { color: var(--ink-muted); font-weight: 600; }
.t-line b { font-weight: 600; }
.t-line small { display: block; color: var(--ink-muted); font-size: 12.5px; }
.t-line .s { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.t-line .s.warn { color: var(--gold); } .t-line .s.info { color: var(--lagoon); } .t-line .s.good { color: var(--leaf); }
.t-checks { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.t-checks b { font-weight: 600; }
.t-asked { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 6px; background: var(--accent-soft); font-size: 13.5px; line-height: 1.45; }
.t-asked > .ico { color: var(--accent-ink); margin-top: 1px; flex: none; }
.t-asked b { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.t-asked span { display: block; color: var(--ink-soft); }
.t-asked .link { background: none; border: 0; padding: 6px 0 0; font-size: 13.5px; cursor: pointer; }
.t-qr { margin: 0; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--ink-muted); }
.t-qr img { width: min(240px, 70%); aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 6px; padding: 8px; box-shadow: var(--card-shadow); }
.t-card-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.t-card-acts .btn { flex: 1 1 140px; }
.t-dock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.g-bar .t-dock .btn { justify-content: center; gap: 8px; padding: 0 12px; font-size: 15px; }
.g-bar .t-dock .btn-ghost { background: var(--surface); }
.t-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.t-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; text-align: left; }
.t-opt .ico { color: var(--brand-2); flex: none; }
.t-opt.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.t-opt.on .ico { color: var(--mint); }
.t-seg { display: flex; width: 100%; }
.t-seg button { flex: 1; justify-content: center; }
.t-ways { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; }
.t-ways .t-sub { flex-basis: 100%; }
.t-end { margin: 16px; padding: 28px 20px 20px; display: grid; justify-items: center; text-align: center; gap: 12px; }
.t-end h2 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.t-end p { margin: 0; color: var(--ink-muted); font-size: 14.5px; max-width: 400px; }
.t-receipts { display: grid; gap: 8px; width: 100%; }
.t-receipt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 6px; background: var(--surface-2); color: var(--ink); text-decoration: none; text-align: left; }
.t-receipt > .ico:first-child { color: var(--brand-2); }
.t-receipt span { flex: 1; min-width: 0; }
.t-receipt b { display: block; font-weight: 600; }
.t-receipt small { color: var(--ink-muted); font-size: 13px; }
.t-end .t-card-acts { width: 100%; margin-top: 4px; }
@media (min-width: 480px) { .t-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Mobile number: a country code dropdown (flag and code) beside the number. */
.tel-row { display: flex; gap: 8px; align-items: stretch; }
.tel-row .input { flex: 1; min-width: 0; }
.cc { position: relative; flex: none; display: flex; }
.cc-face { display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r, 4px); background: var(--surface); font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; }
.cc-face svg { color: var(--ink-faint); }
.cc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.cc:focus-within .cc-face { border-color: var(--forest, #1E5C3A); box-shadow: 0 0 0 3px rgba(30, 92, 58, .15); }

/* A chef's pick on the menu (the restaurant chooses it; Popular comes from sales). */
.chip.pick { background: var(--wash); color: var(--brand-2); }

/* The restaurant's own labels on a dish (Vegan, Halal, New). */
.dish-labels { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
.dish-labels span { font-size: 11.5px; font-weight: 600; color: var(--brand-2); background: var(--wash); padding: 1px 7px; border-radius: 3px; }

/* ── The rider's workspace on the web (pos-rider.js) ── */
body.rider .rider-hero h1 { font-size: 26px; }
.rider-card { background: var(--surface); border-radius: 8px; box-shadow: var(--card-shadow); padding: 18px; display: grid; gap: 14px; margin: 16px 0; }
.rider-card h2 { font-size: 20px; font-weight: 600; }
.rider-card .t-sub { margin: 0; }
.rider-code { font-size: 22px; font-weight: 600; letter-spacing: .06em; text-align: center; height: 56px; }
.rider-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rider-person { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); text-align: left; font: inherit; cursor: pointer; }
.rider-person .avatar { width: 38px; height: 38px; flex: none; font-weight: 600; }
.rider-person b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rider-dots { display: flex; justify-content: center; gap: 14px; margin: 6px 0 4px; }
.rider-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); }
.rider-dots i.on { background: var(--forest); border-color: var(--forest); }
.rider-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 320px; margin: 0 auto; width: 100%; }
.rider-keys button { height: 58px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 22px; font-weight: 600; display: grid; place-items: center; cursor: pointer; }
.rider-keys button:active { background: var(--surface-3); }
.rider-shift { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #fff; }
.rider-shift .dot { width: 10px; height: 10px; border-radius: 50%; background: #9FB9A8; flex: none; }
.rider-shift.on .dot { background: var(--mint); box-shadow: 0 0 0 4px rgba(111, 206, 143, .25); }
.rider-shift b { display: block; font-weight: 600; }
.rider-shift small { display: block; color: #C8D9CD; font-size: 12.5px; }
.rider-cash { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #F6C453; font-size: 13.5px; }
.rider-lock { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }
.rider-sec { margin: 18px 0 6px; }
.rider-sec h2 { font-size: 17px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.rider-sec h2 .n { font-size: 12px; font-weight: 700; background: var(--surface-3); border-radius: 4px; padding: 1px 7px; color: var(--ink-soft); }
.rider-none { margin: 0; }
.rider-stop { background: var(--surface); border-radius: 8px; box-shadow: var(--card-shadow); padding: 16px; display: grid; gap: 10px; margin-bottom: 10px; }
.rider-stop h3 { font-size: 17px; font-weight: 600; margin-top: 2px; }
.rider-ref { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.rider-addr { display: flex; gap: 8px; margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.rider-addr .ico { flex: none; margin-top: 2px; color: var(--brand-2); }
.rider-addr small { display: block; color: var(--ink-muted); font-size: 13px; margin-top: 2px; }
.rider-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.rider-acts .btn { justify-content: center; }
.rider-photo { justify-content: center; cursor: pointer; }
.rider-why { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; align-items: center; }
.rider-why input { width: 18px; height: 18px; accent-color: var(--forest); }
body.rider .rider-sec, body.rider .rider-card, body.rider .t-foot { margin-left: 16px; margin-right: 16px; }
@media (min-width: 640px) { body.rider #app { max-width: 640px; margin: 0 auto; } }

/* Suggestions under the basket's lines (pos-guest.js suggester). */
/* Suggestions under the basket (pos-guest.js suggester): photo cards in a row that scrolls sideways
   when they do not fit, rows lined up across the cards; the reason with its icon; the add button turns
   into a tick before the dish joins the basket; a card comes in when it first shows. */
.sug { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); min-width: 0; }
.sug-h { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.sug-h .ico { color: var(--gold); }
/* The row runs out to the basket's and the sheets' edges (their 18 px padding), so a card that does not fit is cut at the edge, not short of it. */
.sug-list { display: grid; grid-auto-flow: column; grid-auto-columns: 136px; grid-template-rows: repeat(4, auto); column-gap: 12px; row-gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; padding: 2px 18px 8px; margin: 0 -18px; scrollbar-width: none; }
.sug-list::-webkit-scrollbar { display: none; }
/* With a mouse, a slim scrollbar shows the row goes on (and can be dragged), as for the dates. */
@media (pointer: fine) { .sug-list { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .sug-list::-webkit-scrollbar { display: block; height: 6px; } .sug-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } }
.sug-card { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; min-width: 0; scroll-snap-align: start; cursor: pointer; }
.sug-media { position: relative; height: 100px; margin-bottom: 9px; border-radius: 5px; overflow: hidden; display: grid; place-items: center; background: var(--surface-3); }
.sug-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sug-media .pic { width: 30px; height: 30px; stroke-width: 1.4; opacity: .9; transition: transform .35s ease; }
.sug-media.t0 { background: var(--wash); color: var(--brand-2); }
.sug-media.t1 { background: var(--gold-soft); color: var(--gold); }
.sug-media.t2 { background: var(--accent-soft); color: var(--accent-ink); }
.sug-media.t3 { background: var(--lagoon-soft); color: var(--lagoon); }
.sug-name { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sug-why { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--ink-muted); }
.sug-why .ico { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--forest); }
.sug-why span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sug-price { margin-top: 6px; font-weight: 600; font-size: 14px; }
.sug-add { position: absolute; right: 6px; bottom: 6px; width: 36px; height: 36px; border: 0; border-radius: 5px; background: var(--surface); color: var(--forest); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 40, 28, .2); transition: background-color .2s ease, color .2s ease, transform .15s ease; }
.sug-add .ico { grid-area: 1 / 1; transition: opacity .2s ease, transform .25s ease; }
.sug-add .sug-done { opacity: 0; transform: scale(.4); }
.sug-add:active { transform: scale(.92); }
.sug-add.on { background: var(--forest); color: #fff; animation: sug-pop .4s cubic-bezier(.3, 1.4, .5, 1); }
.sug-add.on .sug-plus { opacity: 0; transform: rotate(90deg) scale(.4); }
.sug-add.on .sug-done { opacity: 1; transform: none; }
.sug-card.on .sug-media img, .sug-card.on .sug-media .pic { transform: scale(1.05); }
@media (hover: hover) { .sug-add:hover { background: var(--forest); color: #fff; } .sug-card:hover .sug-media img, .sug-card:hover .sug-media .pic { transform: scale(1.05); } }
.sug-card.new { animation: sug-in .42s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--n, 0) * 70ms); }
@keyframes sug-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sug-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
[data-theme="dark"] .sug-add { color: var(--mint); }
[data-theme="dark"] .sug-add.on { color: #fff; }
[data-theme="dark"] .sug-why .ico { color: var(--mint); }
@media (prefers-reduced-motion: reduce) { .sug-card.new, .sug-add.on { animation: none; } .sug-media img, .sug-media .pic, .sug-add, .sug-add .ico { transition: none; } }

/* ── The stars at the top of a restaurant's page (pos-shop.js rating; the stars are pos-reviews-public.js's) ── */
.pub-rate, .info-rate { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; border-radius: 3px; }
.pub-rate-stars { display: inline-flex; line-height: 0; }
.pub-rate b, .info-rate b { font-weight: 650; }
.pub-rate b { color: #fff; }
.pub-rate .rv-star { fill: rgba(255, 255, 255, .24); }
.pub-rate .rv-star.on { fill: var(--gold); }
.pub-hero.has-cover .pub-rate-stars { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.pub-rate:hover .pub-rate-t, .info-rate:hover .pub-rate-t { text-decoration: underline; text-underline-offset: 3px; }
.info-row .info-rate { margin-top: 1px; color: var(--ink-soft); }
.info-row .info-rate .pub-rate-stars, .info-row .info-rate .rv-stars, .info-row .info-rate .rv-stars-row { display: inline-flex; }
.info-row .info-rate .pub-rate-t, .info-row .info-rate b { display: inline; color: inherit; }
.info-row .info-rate b { color: var(--ink); }