/* A restaurant's own site. Colours and type come from the look (App\Design\Looks) as custom properties on <body>.
   It is read on a phone, often on a slow connection, often in Arabic: everything here is sized for a thumb at 360px,
   written with logical properties so one sheet serves both directions, and works with no JavaScript at all. */
:root { --danger: #b3261e; --ok: #1f7a44; --soon: #9a5b00; --tap: 2.75rem; }
.dark { --danger: #ff8a80; --ok: #7ddc9a; --soon: #ffc46b; }
.wrap { max-inline-size: 46rem; margin-inline: auto; padding-inline: 1rem; }
.page { padding-block: 1.25rem 1rem; }
.lead { color: var(--muted); }
.empty { color: var(--muted); padding-block: 1rem; }
.flashes { padding-block-start: 1rem; }
.back a { display: inline-flex; align-items: center; min-block-size: var(--tap); font-weight: 600; }

/* Arabic script needs air between its lines, and its letters join: never space them out. */
body:lang(ar) { line-height: 1.75; }
:lang(ar) :is(h1, h2, h3) { line-height: 1.4; }
:lang(ar) .tag { letter-spacing: 0; text-transform: none; }

/* Header: the restaurant's name and the language switch. At 360px the languages move under the name rather than squeeze it. */
.site-head { background: var(--surface); border-block-end: 1px solid var(--line); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding-block: 0.5rem; }
.site-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--ink); text-decoration: none; margin-inline-end: auto; display: flex; align-items: center; gap: 0.6rem; min-block-size: var(--tap); min-inline-size: 0; }
.site-name span { overflow-wrap: anywhere; }
.site-name img { block-size: 2.4rem; inline-size: auto; border-radius: calc(var(--radius) * 0.6); }
.langs { display: flex; gap: 0.15rem; }
.langs a { display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: 0.6rem; border-radius: 99px; text-decoration: none; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.langs a[aria-current=true] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
/* The other languages' names are the only words of their script on the page: a look with typefaces of its own gives
   them the phone's (--font-langs, Looks::current), or the page would fetch a whole file of letters for one word. */
.langs a:not([aria-current=true]) { font-family: var(--font-langs, var(--font-body)); }

.banner { padding-block: 0.6rem; padding-inline: 1rem; text-align: center; font-weight: 600; font-size: 0.95rem; }
.banner-table { background: var(--brand); color: var(--on-brand); }
.banner-demo { background: #f2b134; color: #24142e; }
.banner-demo a { color: inherit; font-weight: 700; }
/* The page's own focus colour is the look's brand, lost on the banner's yellow in some looks: a dark ring of its own. */
.banner-demo a:focus-visible { outline: 3px solid #24142e; outline-offset: 2px; }
/* The demo of a plan: what it is, then the same restaurant on each plan, the one being read filled in. */
.banner-levels p { margin: 0; }
.banner-levels nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem; margin-block-start: 0.45rem; }
.banner-levels nav a { display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: 0.85rem; border: 2px solid currentColor; border-radius: 99px; color: inherit; font-weight: 700; text-decoration: none; }
.banner-levels nav a[aria-current=true] { background: #24142e; border-color: #24142e; color: #f2b134; }
/* The restaurant's own notice ("Closed for Eid until Tuesday"), under its name on every page: its words on a tint of its
   colour, in the page's ink, so it reads in every look, dark ones too. */
.banner-notice { margin: 0; background: var(--surface); background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--ink); border-block-end: 1px solid var(--line); }
.banner-notice span { display: block; max-inline-size: 46rem; margin-inline: auto; overflow-wrap: anywhere; }

/* The top of the menu: the restaurant's card laid over its photo - its name, its line, and a strip saying whether it is
   open (the dot breathes while it is) with the way to its Info page at the other end. With no photo it stands alone. */
.cover { aspect-ratio: 16 / 6; max-block-size: 24rem; object-fit: cover; inline-size: 100%; }
.masthead { position: relative; z-index: 1; padding-block: 1rem 0; }
.masthead.on-cover { margin-block-start: calc(-1 * clamp(2.25rem, 8vw, 5rem)); padding-block-start: 0; }
.masthead-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 22px 44px -28px rgb(0 0 0 / 0.45); }
.masthead-body { padding-block: 1.15rem 1rem; padding-inline: 1.25rem; }
.masthead h1 { margin: 0; font-size: clamp(1.65rem, 4.6vw, 2.5rem); overflow-wrap: anywhere; }
.masthead-line { margin-block: 0.35rem 0; color: var(--muted); max-inline-size: 36rem; }
.masthead-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; padding-inline: 1.25rem; border-block-start: 1px dashed var(--line); }
.status { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.6rem; margin: 0; padding-block: 0.7rem; min-inline-size: 0; }
.status strong { font-weight: 700; }
.status-then { grid-column: 2; color: var(--muted); font-size: 0.92rem; }
.masthead-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; margin-inline-start: auto; }
.masthead-info { display: inline-flex; align-items: center; gap: 0.1rem; min-block-size: var(--tap); font-weight: 700; text-decoration: none; }
.masthead-chat { display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: var(--tap); font-weight: 700; text-decoration: none; color: var(--ok); }
.masthead-chat svg { inline-size: 1.15rem; block-size: 1.15rem; fill: currentColor; }
.masthead-chat:hover, .masthead-info:hover { text-decoration: underline; }
.chev { flex: none; inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[dir=rtl] .chev { transform: scaleX(-1); }
/* The diner's branch under the name: a pin and its name, and - where there are several - the others to choose from. */
.branch-pick, .branch-here { margin-block-start: 0.6rem; }
.branch-pick summary, .branch-here { display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: var(--tap); margin: 0; }
.branch-pick summary { list-style: none; cursor: pointer; padding-inline: 0.8rem 0.9rem; border: 1.5px solid var(--line); border-radius: 99px; }
.branch-pick summary::-webkit-details-marker { display: none; }
.branch-pick[open] summary { border-color: var(--ink); }
.branch-pick svg, .branch-here svg { flex: none; inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: var(--brand-text); stroke-width: 2; }
.branch-change { color: var(--brand-text); font-size: 0.9rem; font-weight: 700; }
.branch-change::before { content: '·'; margin-inline-end: 0.45rem; color: var(--muted); }
.branch-list { display: grid; gap: 0.35rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.branch-list a { display: grid; gap: 0.1rem; padding-block: 0.55rem; padding-inline: 0.85rem; border: 1px solid var(--line); border-radius: calc(var(--radius) * 0.8); color: var(--ink); text-decoration: none; }
.branch-list a span { color: var(--muted); font-size: 0.9rem; }
.branch-list a[aria-current=true] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
@media (min-width: 40rem) {
  .status { display: flex; flex-wrap: wrap; }
  .status-then { font-size: inherit; }
  .status-then::before { content: '·'; margin-inline-end: 0.6rem; }
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ok) 28%, transparent); }
  50% { box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--ok) 0%, transparent); }
}
.status.is-open .info-dot { animation: breathe 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .status.is-open .info-dot { animation: none; } }

/* One bar at the top of a long menu: search at the start, the sections in the middle, saved dishes and the filters at
   the end, their chips dropping down from it. On a phone the search is a magnifier that opens across the bar while it
   is in use (is-searching, finder.js), the sections giving it their room. */
.menu-top { display: block; }
.menu-bar { position: sticky; inset-block-start: 0; z-index: 5; margin-block-start: 0.75rem; background: var(--bg); border-block-end: 1px solid var(--line); }
.menu-bar-inner { display: flex; align-items: center; gap: 0.4rem; max-inline-size: 46rem; margin-inline: auto; padding-block: 0.45rem; padding-inline: 1rem; }
.finder-field { position: relative; display: flex; flex: none; }
.finder-field svg { position: absolute; inset-inline-start: 0.85rem; inset-block: 0; margin-block: auto; inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.menu-bar .finder-q { inline-size: var(--tap); min-block-size: var(--tap); padding-block: 0; padding-inline: 2.45rem 0.75rem; border-radius: 99px; background: var(--surface); transition: inline-size 0.2s ease; }
/* Folded, it is a round button: no room for words, so none shown (it is empty and not in use, or it would be open). */
.menu-bar:not(.is-searching) .finder-q { padding-inline: 0; cursor: pointer; }
.menu-bar:not(.is-searching) .finder-q::placeholder { color: transparent; }
.menu-bar.is-searching .finder-field { flex: 1; }
.menu-bar.is-searching .finder-q { inline-size: 100%; }
.menu-bar.is-searching .rail { display: none; }
.rail { flex: 1; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent); }
.rail::-webkit-scrollbar { display: none; }
.rail ul { display: flex; gap: 0.1rem; list-style: none; margin: 0; padding: 0; padding-inline: 0.4rem; }
.rail a { display: flex; align-items: center; min-block-size: var(--tap); white-space: nowrap; padding-inline: 0.8rem; border-radius: 99px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.rail a:hover, .rail a:focus-visible { background: var(--ink); color: var(--bg); }
.finder-tools { display: flex; gap: 0.4rem; flex: none; }
.bar-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-block-size: var(--tap); min-inline-size: var(--tap); padding-inline: 0.7rem; border: 1.5px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.92rem; font-weight: 650; cursor: pointer; }
.bar-btn svg { flex: none; inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.finder-saved svg { fill: currentColor; stroke: none; }
.finder-saved[aria-pressed=true], .finder-toggle[aria-expanded=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* On a phone the buttons are their icons; their words stay for screen readers. */
.bar-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.finder-count { position: absolute; inset-block-start: -0.3rem; inset-inline-end: -0.3rem; display: inline-grid; place-items: center; min-inline-size: 1.3rem; block-size: 1.3rem; padding-inline: 0.25rem; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.75rem; box-shadow: 0 0 0 2px var(--bg); }
@media (min-width: 40rem) {
  .bar-label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
  .bar-btn { padding-inline: 0.95rem; }
}
@media (min-width: 48rem) {
  .menu-bar .finder-q, .menu-bar:not(.is-searching) .finder-q { inline-size: 12rem; padding-inline: 2.45rem 0.75rem; cursor: text; }
  .menu-bar:not(.is-searching) .finder-q::placeholder { color: var(--muted); }
  .menu-bar.is-searching .finder-q { inline-size: 100%; }
}
.finder-panel { position: absolute; inset-inline: 0; inset-block-start: 100%; max-inline-size: 46rem; margin-inline: auto; max-block-size: min(70vh, 32rem); overflow-y: auto; overscroll-behavior: contain; padding-block: 1rem 0; padding-inline: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-block-start: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 26px 48px -26px rgb(0 0 0 / 0.45); }
.finder-panel fieldset { border: 0; margin: 0 0 1rem; padding: 0; min-inline-size: 0; }
.finder-panel legend { font-weight: 700; padding: 0; margin-block-end: 0.5rem; }
.finder-panel-foot { position: sticky; inset-block-end: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.65rem; background: var(--surface); border-block-start: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-block-size: 2.4rem; padding-inline: 0.85rem; border: 1.5px solid var(--line); border-radius: 99px; font-size: 0.9rem; font-weight: 600; }
.chip input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.finder-note { color: var(--muted); font-size: 0.85rem; margin-block: 0.5rem 0; }
.finder-empty { margin-block: 1.25rem 0; font-weight: 600; }

/* A category opens like a section of a printed menu: its name over a double rule. */
.category { padding-block: 1.75rem 0.5rem; scroll-margin-block-start: 4.5rem; }
.category > header { border-block-end: 3px double var(--line); padding-block-end: 0.5rem; }
.category > header h2 { margin: 0; }
.category > header p { color: var(--muted); margin: 0.25rem 0 0; }
.category .when { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding-inline: 0.6rem; margin-block-start: 0.4rem; margin-inline-end: 0.3rem; }
.category .when-away { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* A dish. The name and the price are joined by a dotted leader, as on a printed menu: the eye travels along it from
   one to the other, in whichever direction the language reads. The whole row opens the dish; its Add button sits above that. */
.dishes { list-style: none; margin: 0; padding: 0; }
.dish { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.9rem; padding-block: 1rem; border-block-end: 1px solid var(--line); scroll-margin-block-start: 3.75rem; }
.dish:last-child { border-block-end: 0; }
.dish-line { display: flex; align-items: baseline; gap: 0.5rem; }
.dish-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem; margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.dish-name a { color: inherit; text-decoration: none; }
.dish-name a::after { content: ''; position: absolute; inset: 0; }
.leader { flex: 1; min-inline-size: 1rem; border-block-end: 2px dotted var(--line-strong, var(--muted)); opacity: 0.55; transform: translateY(-0.25em); }
.price { font-weight: 700; white-space: nowrap; }
.price-alt { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 500; text-align: end; }
.dish-text { color: var(--muted); margin: 0.15rem 0 0; font-size: 0.95rem; }
.dish-photo { grid-row: 1 / span 3; grid-column: 2; inline-size: 5.5rem; block-size: 5.5rem; object-fit: cover; border-radius: var(--radius); }
.dish-body { grid-column: 1; min-inline-size: 0; }
.dish.is-off .dish-line, .dish.is-off .dish-text, .dish.is-off .dish-photo { opacity: 0.55; }
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-block-start: 0.4rem; padding: 0; list-style: none; }
.tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding-inline: 0.45rem; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
.tag-off { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dish-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-block-start: 0.5rem; }
.dish-foot .tags { margin: 0; }
.dish-add { position: relative; z-index: 1; display: inline-flex; margin-inline-start: auto; }
.dish-add .btn, .btn.dish-add { min-block-size: var(--tap); padding-inline: 1.1rem; }
.menu-grid .dishes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.menu-grid .dish { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem; background: var(--surface); grid-template-columns: 1fr; }
.menu-grid .dish-photo { grid-row: auto; grid-column: 1; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; order: -1; }
.dish-letter { display: none; }

/* The list: a dish's words on the reading side and, on the other, a square that every dish has - its photo, or the
   first letter of its name in the look's own heading face - with its Add button sitting on the square's lower edge.
   Every row keeps the same two columns, so names, prices and buttons line up down the whole menu whether a dish has a
   photo or not. The price follows the words (dollars, then pounds beside them) instead of hanging off a leader: a
   narrow phone has no room for both beside a photo. */
.menu-list { --thumb: 6rem; }
.menu-list .category > header { border-block-end: 0; padding-block-end: 0; }
.menu-list .dishes { border-block-start: 1px solid var(--line); margin-block-start: 0.75rem; }
.menu-list .dish {
  grid-template-columns: minmax(0, 1fr) var(--thumb);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "name media" "text media" "price media" "foot media";
  gap: 0 1rem;
  padding-block: 1rem;
}
.menu-list .dish-body, .menu-list .dish-line, .menu-list .dish-foot { display: contents; }
.menu-list .leader { display: none; }
.menu-list .dish-name { grid-area: name; font-size: 1.06rem; line-height: 1.25; }
.menu-list .dish:hover .dish-name a { text-decoration: underline; text-underline-offset: 0.2em; }
.menu-list .dish:has(.dish-name a:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius); }
.menu-list .dish-text { grid-area: text; margin-block: 0.25rem 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Dollars first, pounds after: each amount keeps its left-to-right digits (.num), and on a right-to-left page the pair is
   turned round so the dollars still come first, on the reading side. */
.menu-list .price { grid-area: price; justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; margin-block-start: 0.4rem; font-size: 0.98rem; }
[dir=rtl] .menu-list .price { flex-direction: row-reverse; }
.menu-list .price-alt { display: inline; font-size: 0.8rem; }
.menu-list .tags { grid-area: foot; align-self: start; gap: 0 0.4rem; margin-block-start: 0.35rem; }
.menu-list .tag { font-size: 0.8rem; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0; border: 0; border-radius: 0; color: var(--muted); }
.menu-list .tag:not(:first-child)::before { content: '·'; margin-inline-end: 0.4rem; color: var(--muted); }
.menu-list .tag-popular, .menu-list .tag-new { color: var(--accent-text); }
.menu-list .tag-off { background: none; color: var(--danger); }
.menu-list .dish-photo { grid-area: media; align-self: start; inline-size: var(--thumb); block-size: var(--thumb); background: var(--line); }
.menu-list .dish-letter {
  display: grid; place-items: center; border-radius: var(--radius);
  background: var(--line); background: color-mix(in srgb, var(--brand) 13%, var(--surface));
  color: var(--brand-text); font-family: var(--font-heading); font-size: calc(var(--thumb) * 0.44); font-weight: 700; line-height: 1;
}
/* The button covers only the bottom strip of the square and hangs a little below it: the food stays in view, and the
   row is hardly taller than its square. */
.menu-list .dish-add { grid-area: media; align-self: start; justify-self: center; margin-block-start: calc(var(--thumb) - var(--tap) + 0.85rem); margin-inline-start: 0; }
.menu-list .dish-add .btn, .menu-list .btn.dish-add {
  min-block-size: var(--tap); min-inline-size: 4.75rem; padding-inline: 0.9rem; font-size: 0.92rem;
  border-radius: calc(var(--radius) + 0.25rem); box-shadow: 0 0 0 3px var(--bg), 0 4px 14px rgb(0 0 0 / 0.16);
}
.menu-list .btn-quiet.dish-add { background: var(--surface); border-color: var(--line); color: var(--ink); }
/* The line and the body draw no box in the list, so a dish that cannot be ordered greys its parts one by one. */
.menu-list .dish.is-off :is(.dish-name, .price, .dish-text, .dish-photo) { opacity: 0.55; }

/* The compact menu (menu_styles): words only, as a printed menu lists them - the name and the price joined by the dotted
   leader across the whole row, the description under them with the Add button beside it - and two columns of them on a
   wide screen. For a long menu, a bar's or a café's, where photos would only make the diner scroll. Each dish draws the
   rule above itself, so the rules line up whether the columns are one or two; its labels read as the list's do. */
.menu-compact .category > header { border-block-end: 0; padding-block-end: 0; }
.menu-compact .dishes { margin-block-start: 0.6rem; }
.menu-compact .dish {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "line line" "text add" "foot add";
  grid-template-rows: auto auto 1fr;
  gap: 0 0.9rem; padding-block: 0.75rem; border-block-end: 0; border-block-start: 1px solid var(--line);
}
.menu-compact .dish-body, .menu-compact .dish-foot { display: contents; }
.menu-compact .dish-photo { display: none; }
.menu-compact .dish-line { grid-area: line; }
.menu-compact .dish-name { font-size: 1.02rem; }
.menu-compact .price-alt { font-size: 0.75rem; }
.menu-compact .dish-text { grid-area: text; font-size: 0.9rem; margin-block-start: 0.15rem; }
.menu-compact .tags { grid-area: foot; align-self: start; gap: 0 0.4rem; margin-block-start: 0.3rem; }
.menu-compact .tag { font-size: 0.8rem; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0; border: 0; border-radius: 0; color: var(--muted); }
.menu-compact .tag:not(:first-child)::before { content: '·'; margin-inline-end: 0.4rem; color: var(--muted); }
.menu-compact .tag-popular, .menu-compact .tag-new { color: var(--accent-text); }
.menu-compact .tag-off { background: none; color: var(--danger); }
.menu-compact .dish-add { grid-area: add; align-self: start; margin-block-start: 0.35rem; margin-inline-start: 0; }
.menu-compact .dish.is-off :is(.dish-line, .dish-text) { opacity: 0.55; }
.menu-compact .dish:has(.dish-name a:focus-visible), .menu-photos .dish:has(.dish-name a:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius); }
@media (min-width: 48rem) { .menu-compact .dishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }

/* Big photos (menu_styles): a dish is its photo, wide, with the Add button on its lower corner and the name and price
   under it - one after another on a phone, two side by side on a wide screen. A dish without a photo keeps a band of
   the look's colour with its first letter, so the rhythm of the page holds. */
.menu-photos .category > header { border-block-end: 0; padding-block-end: 0; }
.menu-photos .dishes { display: grid; gap: 1.75rem 1.25rem; margin-block-start: 1rem; }
.menu-photos .dish {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "media media" "name price" "text text" "foot foot";
  gap: 0 0.75rem; padding-block: 0; border-block-end: 0;
}
.menu-photos .dish-body, .menu-photos .dish-line, .menu-photos .dish-foot { display: contents; }
.menu-photos .leader { display: none; }
.menu-photos .dish-photo { grid-area: media; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; margin-block-end: 0.75rem; }
.menu-photos .dish-letter {
  display: grid; place-items: center; aspect-ratio: 4 / 1.4; background: color-mix(in srgb, var(--brand) 13%, var(--surface));
  color: var(--brand-text); font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; line-height: 1;
}
.menu-photos .dish-name { grid-area: name; font-size: 1.2rem; }
.menu-photos .price { grid-area: price; font-size: 1.05rem; text-align: end; }
.menu-photos .dish-text { grid-area: text; margin-block-start: 0.2rem; }
.menu-photos .tags { grid-area: foot; margin-block-start: 0.45rem; }
.menu-photos .dish-add { grid-area: media; align-self: end; justify-self: end; margin-block: 0 1.5rem; margin-inline: 0 0.75rem; }
.menu-photos .dish-add .btn, .menu-photos .btn.dish-add { box-shadow: 0 4px 16px rgb(0 0 0 / 0.28); }
.menu-photos .btn-quiet.dish-add { background: var(--surface); border-color: var(--line); color: var(--ink); }
.menu-photos .dish.is-off :is(.dish-name, .price, .dish-text, .dish-photo) { opacity: 0.55; }
@media (min-width: 40rem) { .menu-photos .dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* At the table: the calls to the floor, and the way out of being "at table 4". */
.table-tools { padding-block-start: 1.5rem; }
.table-calls { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; }
.table-tools .link-btn { min-block-size: var(--tap); margin-block-start: 0.5rem; }

/* The basket bar: always within reach of a thumb, and clear of the phone's home bar. */
.basket-bar { position: sticky; inset-block-end: 0; z-index: 6; padding-block: 0.75rem calc(0.75rem + env(safe-area-inset-bottom)); padding-inline: 1rem; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.basket-bar .btn { inline-size: 100%; max-inline-size: 44rem; min-block-size: 3.25rem; margin-inline: auto; display: flex; justify-content: space-between; box-shadow: 0 6px 24px rgb(0 0 0 / 0.18); }
/* A dish went into the basket without the page moving (basket.js): said above the bar, where the thumb is, then gone. */
.toast { position: fixed; z-index: 7; inset-inline: 1rem; inset-block-end: calc(5.25rem + env(safe-area-inset-bottom)); max-inline-size: 26rem; margin-inline: auto; padding-block: 0.7rem; padding-inline: 1rem; border-radius: var(--radius); background: var(--ink); color: var(--bg); font-weight: 600; text-align: center; box-shadow: 0 6px 24px rgb(0 0 0 / 0.22); opacity: 0; transform: translateY(0.5rem); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.toast.is-on { opacity: 1; transform: none; }
.toast.is-error { background: var(--danger); color: #fff; }
.dark .toast.is-error { color: #1c1c20; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; transform: none; } }

/* One dish. */
.item-photo { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; inline-size: 100%; margin-block-end: 1rem; }
.item-head { margin-block-end: 0.5rem; }
.item-head h1 { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.item-head .price { font-size: 1.15rem; }
.item-form { margin-block-start: 1.25rem; }
fieldset[aria-invalid=true] .option-list { border-color: var(--danger); }
fieldset .error { display: block; color: var(--danger); font-weight: 600; margin-block: 0 0.5rem; }
/* The way back on one side, the heart on the other (favourites: finder.js shows it and keeps what it saves). */
.item-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 0.5rem; }
.item-top .back { margin: 0; }
.save-dish { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: var(--tap); padding-inline: 0.75rem; border: 1.5px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.save-dish svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; }
.save-dish[aria-pressed=true] { border-color: var(--brand); color: var(--brand-text); }
.save-dish[aria-pressed=true] svg { fill: currentColor; }
/* A dish's details (dish_details): three facts side by side, each a small label over its value, then the longer text. */
.facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-block: 0.75rem 1rem; padding: 0; list-style: none; }
.facts li { display: flex; flex-direction: column; }
.facts-label { font-size: 0.8rem; color: var(--muted); }
.facts-value { font-weight: 700; }
.story { max-inline-size: 38rem; }
.story p:last-child { margin-block-end: 0; }

/* The Info page (info_page): whether the restaurant is open first, then its week, where it is, how to reach it, and the
   Wi-Fi - each under a rule, as the sections of a menu are. The same dot says "open" on the menu's card. */
.info-dot { flex: none; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--muted); }
.is-open .info-dot { background: var(--ok); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--ok) 20%, transparent); }
.is-soon .info-dot { background: var(--soon); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--soon) 22%, transparent); }
.is-closed .info-dot { background: var(--danger); }
.info-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.info-head h1 { margin: 0; }
.info-branch { color: var(--muted); font-weight: 400; }
.info-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.65rem; margin-block: 0.9rem 1.25rem; }
.info-status strong { font-family: var(--font-heading); font-size: 1.3rem; line-height: 1.2; }
.info-status span:not(.info-dot) { color: var(--muted); inline-size: 100%; padding-inline-start: 1.25rem; }
.info-about { max-inline-size: 38rem; margin-block-end: 0.5rem; }
.info-block { border-block-start: 1px solid var(--line); padding-block: 1.1rem 0.4rem; }
.info-block h2 { font-size: 1.1rem; margin-block-end: 0.6rem; }
.hours { inline-size: 100%; border-collapse: collapse; margin-block-end: 0.75rem; }
.hours th, .hours td { padding-block: 0.4rem; font-weight: 400; vertical-align: baseline; }
.hours th { text-align: start; }
.hours td { text-align: end; }
.hours tr + tr > * { border-block-start: 1px dashed var(--line); }
.hours .is-today > * { font-weight: 700; }
.hours-today { display: inline-block; margin-inline-start: 0.4rem; padding-inline: 0.5rem; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.75rem; font-weight: 700; vertical-align: 0.1em; }
.info-address { margin-block-end: 0.75rem; }
.info-list { margin-block: 0 0.75rem; }
.info-list > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.1rem 1rem; min-block-size: var(--tap); padding-block: 0.3rem; }
.info-list > div + div { border-block-start: 1px dashed var(--line); }
.info-list dt { color: var(--muted); }
.info-list dd { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-weight: 600; overflow-wrap: anywhere; min-inline-size: 0; }

/* The ticket: a basket, a checkout summary and a placed order are all the same slip of paper a kitchen would pin up. */
.ticket { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; padding-block: 1.25rem 1.6rem; padding-inline: 1.1rem; position: relative; margin-block: 1rem 2rem; }
.ticket::after { content: ''; position: absolute; inset-inline: -1px; inset-block-end: -9px; block-size: 10px; background: radial-gradient(circle at 6px 10px, transparent 6px, var(--surface) 6.5px) 0 0 / 12px 10px repeat-x; filter: drop-shadow(0 1px 0 var(--line)); }
.ticket-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; border-block-end: 2px dashed var(--line); padding-block-end: 0.75rem; margin-block-end: 0.75rem; }
.ticket-code { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.06em; }
.ticket-meta { color: var(--muted); font-size: 0.875rem; text-align: end; }
.ticket-lines { list-style: none; margin: 0; padding: 0; }
.ticket-lines > li { padding-block: 0.6rem; border-block-end: 1px solid var(--line); }
.ticket-line { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 600; }
.ticket-line .qty { min-inline-size: 1.8rem; }
.ticket-line > span:nth-child(2) { min-inline-size: 0; overflow-wrap: anywhere; }
.ticket-sub { margin: 0; padding-inline-start: 2.3rem; color: var(--muted); font-size: 0.9rem; list-style: none; }
.ticket-problem { color: var(--danger); font-weight: 600; font-size: 0.9rem; padding-inline-start: 2.3rem; margin-block: 0.25rem 0; }
.ticket-totals { margin-block: 0.75rem 0; }
.ticket-totals div { display: flex; align-items: baseline; gap: 0.5rem; padding-block: 0.2rem; }
.ticket-totals div[hidden] { display: none; }
.ticket-totals dt { margin: 0; }
.ticket-totals dd { margin: 0; font-weight: 600; }
.ticket-totals .grand { font-size: 1.25rem; font-weight: 800; border-block-start: 2px dashed var(--line); margin-block-start: 0.5rem; padding-block-start: 0.6rem; }
.ticket-totals .grand dd { font-weight: 800; }
.ticket-note { font-size: 0.875rem; margin-block: 0.4rem 0; }
.qty-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-block-start: 0.4rem; padding-inline-start: 2.3rem; }
.qty-form button:not(.link-btn) { inline-size: var(--tap); block-size: var(--tap); border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.qty-form > .num { min-inline-size: 1.5rem; text-align: center; font-weight: 700; }
.qty-form .link-btn { min-block-size: var(--tap); padding-inline: 0.5rem; margin-inline-start: auto; }

/* Choosing: order type, payment, tip, options. Each choice is a whole card to press, not a dot to aim at. */
.choices { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.choices-tight { grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; inline-size: 100%; block-size: 100%; cursor: pointer; margin: 0; }
.choice > span { display: flex; flex-direction: column; justify-content: center; min-block-size: 3rem; padding-block: 0.5rem; padding-inline: 0.9rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 600; }
.choice small { font-weight: 500; color: var(--muted); }
.choice input:checked + span { border-color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.choice input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.option-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.option-list li { display: flex; align-items: center; gap: 0.7rem; padding-inline: 0.9rem; border-block-end: 1px solid var(--line); }
.option-list li:last-child { border-block-end: 0; }
.option-list label { flex: 1; display: flex; align-items: baseline; gap: 0.5rem; min-block-size: 3rem; padding-block: 0.75rem; cursor: pointer; }
.option-list input { inline-size: 1.3rem; block-size: 1.3rem; accent-color: var(--brand); flex: none; }
.need { font-size: 0.8rem; font-weight: 700; color: var(--brand-text); }

/* The checkout follows the choices without JavaScript too: delivery details only for delivery, a tip only on a card.
   (checkout.js does the same with `hidden`, and adds the running total.) */
[data-checkout]:has(input[type=radio][name=type]:checked:not([value=delivery])) [data-only=delivery] { display: none; }
[data-checkout]:has(input[type=radio][name=payment_method]:checked:not([value=card])) [data-only-method=card] { display: none; }
.place-note { margin-block-start: 0.75rem; }

/* The WhatsApp message to copy by hand, under the WhatsApp button; the restaurant's one-tap updates to the diner. */
.wa-copy { margin-block: 0.25rem 1rem; }
.wa-copy summary { cursor: pointer; font-weight: 600; color: var(--brand-text); min-block-size: var(--tap); display: flex; align-items: center; }
.wa-copy textarea { inline-size: 100%; font-size: 0.85rem; margin-block-end: 0.5rem; }
.wa-updates h2 { font-size: 1.05rem; }

/* Checkout: the diner's location for the driver (delivery_pin), under the address. */
.pin { margin-block: -0.4rem 1rem; }
.pin .hint { display: block; color: var(--muted); font-size: 0.875rem; margin-block-start: 0.35rem; }
.pin .btn svg, .pin-done svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pin-done { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; color: var(--ok); }
.pin-done .link-btn { font-weight: 600; }

/* Order progress */
.eta { font-weight: 700; font-size: 1.1rem; }
.steps { list-style: none; margin-block: 1.25rem; padding: 0; display: grid; gap: 0; }
.steps li { position: relative; padding-block: 0 1.1rem; padding-inline-start: 2.2rem; color: var(--muted); }
.steps li::before { content: ''; position: absolute; inset-inline-start: 0.35rem; inset-block-start: 0.2rem; inline-size: 0.9rem; block-size: 0.9rem; border-radius: 99px; border: 2px solid var(--line-strong, var(--muted)); background: var(--bg); }
.steps li::after { content: ''; position: absolute; inset-inline-start: 0.75rem; inset-block: 1.2rem 0; inline-size: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps li.done { color: var(--ink); }
.steps li.done::before { background: var(--brand); border-color: var(--brand); }
.steps li.now { color: var(--ink); font-weight: 700; }
.steps li.now::before { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent); }
.btn-whatsapp { background: #128c4a; color: #fff; }

/* The restaurant's page behind the WhatsApp link */
.pin-form { max-inline-size: 20rem; }
.pin-input { font-size: 1.6rem; letter-spacing: 0.5em; text-align: center; }
.action-steps { display: grid; gap: 0.75rem; }
.action-step .field { margin-block-end: 0.5rem; }
.action-away { border-block-start: 1px solid var(--line); padding-block-start: 0.5rem; }
.action-away summary { display: flex; align-items: center; min-block-size: var(--tap); cursor: pointer; color: var(--muted); font-weight: 600; }
.action-away .action-step { margin-block-start: 0.75rem; }

/* The foot: the restaurant signs off - its name and its note on one side, where it is and how to reach it on the other -
   then, under a rule, who takes its orders. Clear of the basket bar. */
.site-foot { border-block-start: 1px solid var(--line); margin-block-start: 3rem; padding-block: 2rem 5.5rem; color: var(--muted); font-size: 0.92rem; }
.site-foot a { color: var(--ink); }
.foot-grid { display: grid; gap: 1.25rem 2.5rem; }
.foot-name { margin: 0 0 0.35rem; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.foot-note { margin: 0; max-inline-size: 34rem; }
.foot-facts { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.foot-facts li { display: flex; align-items: center; gap: 0.65rem; min-block-size: 2.3rem; }
.foot-facts svg { flex: none; inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.foot-facts a { font-weight: 600; text-decoration: none; }
.foot-facts a:hover { text-decoration: underline; }
/* "Ordering by WataDish" (unless the plan takes it off) and the privacy notice, on one line under a dashed rule. */
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1.5rem; margin-block-start: 1.5rem; padding-block-start: 1rem; border-block-start: 1px dashed var(--line); font-size: 0.85rem; }
.foot-base p { margin: 0; }
.site-foot .foot-base a { color: inherit; }
@media (min-width: 40rem) { .foot-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.narrow { max-inline-size: 30rem; margin-inline: auto; padding-block: 2rem; padding-inline: 1rem; }
.link-btn.small { display: inline-flex; align-items: center; }

/* Ticket quantities in a unit ("2 kg", "3 packs") stay on one line beside the dish. */
.ticket-line .qty { white-space: nowrap; }

/* Basket: "+" at the most a line can hold (what is left, or one line's limit) is off, and looks it. */
.qty-form button:not(.link-btn)[disabled] { opacity: 0.4; cursor: not-allowed; }

/* A table forgotten a moment ago: "scan the code again", and the way on for somebody who has left the table. */
.banner-lost p { margin: 0; }
.banner-lost form { margin: 0; }
.banner-lost .link-btn { color: inherit; min-block-size: var(--tap); font-weight: 600; }

/* Basket: a dish put in for later says from when; a line's choice that is no longer offered is marked off. */
.ticket-later { color: var(--muted); font-size: 0.9rem; padding-inline-start: 2.3rem; margin-block: 0.25rem 0; }
.ticket-sub .choice-off { color: var(--danger); font-weight: 600; }

/* The restaurant's action page: money still owed back after a card refund that did not go through. */
.ticket-note.ticket-owed { color: var(--danger); font-weight: 600; }

/* Order page: "Pay in cash instead" under the card button of an order still waiting for its payment. */
.cash-instead { margin-block: 0 1em; }
.cash-instead p { margin-block: 0.4rem 0; }

/* An order paid by card is WataDish's sale (Services\Seller): who sold it, above the pay button and on its receipt;
   the line above Place order while card is chosen. */
.seller-box { margin-block: 1rem; padding-block: 0.9rem; padding-inline: 1.1rem; border: 1px solid var(--line); border-inline-start: 4px solid var(--brand); border-radius: var(--radius); background: var(--surface); }
.seller-box p { margin-block: 0 0.4rem; }
.seller-box p:last-child { margin-block-end: 0; }
.seller-line { font-weight: 600; }
.seller-note { margin-block: 0.75rem; color: var(--muted); }
/* When each step happened, and the customer's word that the order reached them (the order's record). */
.step-at { margin-inline-start: 0.4rem; font-weight: 400; color: var(--muted); font-size: 0.9em; }
.received-note { margin-block: -0.5rem 1rem; color: var(--muted); }
.received-form { margin-block: -0.25rem 1.25rem; }
.received-form p { margin-block: 0.4rem 0; }
/* WataDish's own pay page (platform/pay.twig): the restaurant's look, nothing to wander off to, and whose page it is. */
.paypage .pay-form { margin-block: 1rem 0.5rem; }
.paypage .site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.pay-by { color: var(--muted); font-size: 0.9rem; }

/* A dish this branch does not sell (public/elsewhere.twig): each branch that does, a way to it. */
.elsewhere-list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin-block: 1.2rem 0; padding: 0; }
/* Checkout at a restaurant with branches: which one the order is for. */
.checkout-branch { margin-block: -0.4rem 1rem; color: var(--muted); font-weight: 600; }

/* Order page: a Whish or OMT transfer still to send - how much, where to, and the code to put with it. */
.transfer-box { margin-block: 1rem; padding-block: 1rem; padding-inline: 1.1rem; border: 2px solid var(--brand); border-radius: var(--radius); background: var(--surface); }
.transfer-box h2 { margin-block: 0 0.2rem; font-size: 1.15rem; }
.transfer-to { display: grid; gap: 0.35rem; margin-block: 0.8rem; }
.transfer-to div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-block-end: 0.35rem; border-block-end: 1px dashed var(--line); }
.transfer-to dt { color: var(--muted); }
.transfer-to dd { margin: 0; font-weight: 700; }

/* A promo code: the field and its button on one line, or the code applied (or why it does not count) with the way to
   take it off. On the basket page and above the checkout form. */
.promo { margin-block: 0.75rem 1rem; }
.promo summary { cursor: pointer; color: var(--brand-text); font-weight: 600; min-block-size: var(--tap); display: flex; align-items: center; }
.promo-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block-start: 0.4rem; }
.promo-row input { flex: 1 1 10rem; min-inline-size: 0; text-transform: uppercase; }
.promo-applied { margin: 0; padding-block: 0.55rem; padding-inline: 0.8rem; border-radius: var(--radius); background: var(--surface); border: 1px dashed var(--brand); font-weight: 600; }
.promo-applied .link-btn { margin-inline-start: 0.5rem; font-weight: 400; }
.promo-problem { border-color: var(--line); color: var(--muted); font-weight: 400; }
.ticket-totals .discount dd { color: var(--brand-text); }