/*
 * Mister Bob customer menu.
 * Stands alone — none of the admin template is loaded on this side.
 *
 * Built from the logo: its near-black, its white, and its teal. The page is
 * dark so the food photos carry the colour; the teal is kept small — the
 * chosen category, Add, the cart bar — and never laid down as a band. The type
 * follows the logo too: a serif like "Mr. BOB" for dish names, spaced-out
 * capitals like "FOOD & DRINKS" for the categories.
 *
 *   bg        #0C0E0E   the page
 *   surface   #151818   dishes, the cart
 *   accent    #20BCC0   the logo's teal, for what can be tapped
 */

/* ==========================================================================
   1. Base
   ========================================================================== */

:root {
    --bg: #0C0E0E;
    --surface: #151818;
    --surface-raised: #1E2222;
    --line: #282D2D;
    --line-strong: #384040;
    --text: #F4F6F6;
    --muted: #9BA6A6;
    --accent: #20BCC0;
    --accent-hover: #3DD0D4;
    --accent-soft: rgba(32, 188, 192, 0.14);
    --accent-ring: rgba(32, 188, 192, 0.18);
    /* Dark words on the teal: white on it is too faint to read. */
    --on-accent: #04292A;
    --danger: #FF8A7E;
    --radius-lg: 22px;
    --radius-md: 14px;
    --font-display: 'Playfair Display', 'Tajawal', Georgia, 'Times New Roman', serif;
    --font-body: 'Archivo', 'Tajawal', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
    color-scheme: dark;
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.menu-body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Room under the footer for the cart bar once it shows. */
body.menu-body.has-cart {
    padding-bottom: 88px;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The drawn icons (menu.partials.icons): one em square in the colour of the
   words around them, so every rule that sized or coloured the old icon font
   still sizes and colours these. */
.mi {
    display: inline-block;
    line-height: 0;
    vertical-align: -0.15em;
}

.mi svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* One narrow column, like a printed menu, rather than a shop's wide grid. */
.menu-container {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 768px) {
    .menu-container {
        padding-inline: 24px;
    }
}

/* A clear breath under the masthead, so the first thing on the page is not
   pressed against the bottom of it. */
.menu-main {
    min-height: 60vh;
    padding-top: 26px;
}

@media (max-width: 559px) {
    .menu-main {
        padding-top: 18px;
    }
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ==========================================================================
   2. Header
   ========================================================================== */

/* .menu-header has no band of its own and no rule under it: a bar in its own
   colour closed by a hairline read as a strip laid on the page rather than the
   top of it. The bar is simply the page, and the logo is the first thing on it.

   On the same column as the food below it: the language sits over the left
   edge of the banner and the cart over its right, so the bar lines up with
   the page instead of floating in a narrower world of its own. */
.menu-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding-block: 14px;
}

/* Stretched to the height of the row, not because anything in it is that
   tall, but so the phone's dropdown can hang from the bottom of the bar
   rather than from the middle of it, where it covered the logo. */
.menu-header-side {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 4px;
}

.menu-header-side > * {
    align-self: center;
}

.menu-header-end {
    justify-content: flex-end;
}

/* Pulled out by their own padding so it is the word and the glyph that land
   on the column's edge, not the invisible box around them. */
.menu-header-start > :first-child {
    margin-inline-start: -12px;
}

.menu-header-end > :last-child {
    margin-inline-end: -10px;
}

/* No disc behind it. The logo in Settings is drawn dark on nothing — right
   for the receipt and the QR code, invisible here — and propping it up on a
   light circle is what made the header look like a sticker stuck on the page.
   This is the same mark in the colourway made for a dark background, so it
   sits straight on the bar.

   The printed logo stacks three things: the hat over "Mr. BOB", a teal rule,
   and "FOOD & DRINKS" beneath it. Only the first of the three is the picture
   here — the rest is set below, in type. */
.menu-brand {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.menu-brand-logo {
    width: auto;
    height: 58px;
}

/* The line that finishes the logo, set as words instead of left in the
   picture. Drawn into the file it is eight pixels tall, and a bar can only
   carry the mark at about two thirds size, so it came out at five — which is
   not small type, it is nothing. Set as text it is sharp at any size on any
   screen, in Archivo, which this page took from this very line in the first
   place. The teal rule above it is the one ruled in the logo, kept, and it
   runs the width of the words the way it runs the width of "BOB". */
.menu-brand-tag {
    padding-block-start: 5px;
    border-block-start: 1px solid var(--accent);
    color: var(--accent);
    /* Archivo by name, not var(--font-body): the line is part of the mark, so
       it must not pick up Tajawal on the Arabic page. */
    font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    white-space: nowrap;
    /* Spacing capitals out leaves a gap after the last one, which would sit
       the line a hair off centre under the mark. This takes it back. */
    margin-inline-end: -0.1em;
}

@media (max-width: 559px) {
    .menu-header-inner {
        padding-block: 10px 6px;
    }

    .menu-brand-logo {
        height: 46px;
    }

    .menu-brand-tag {
        font-size: 9px;
        letter-spacing: 0.08em;
        margin-inline-end: -0.08em;
    }
}

/* The other language, as a word and nothing else. No box around it: it is a
   way out of the page, not one of the things to do on it. */
.menu-lang {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding-inline: 12px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: background-color 0.2s, color 0.2s;
}

/* Arabic letters join up, so they are never spaced out, and Tajawal sets them
   at the size the Latin letters are read at. */
.menu-lang:lang(ar) {
    font-family: 'Tajawal', var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.menu-lang:hover {
    background: var(--surface);
    color: var(--accent);
}

/* Feedback and the cart, and the phone opposite them: all four held at the
   same quiet weight as the language beside them, so the logo is the only
   bright thing on the bar. They come up to full strength under the finger,
   and the cart's own count still arrives in teal when there is one. */
.menu-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 21px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.menu-icon:hover,
.menu-icon.is-current {
    background: var(--surface);
    color: var(--accent);
}

.menu-feedback i {
    font-size: 22px;
}

/* The phone button opens onto the two ways to reach the shop: a call, or a
   WhatsApp message. It is an icon like the two on the other side — the number
   spelled out here made the bar lean and pushed the emblem off the middle. */
.menu-contact {
    position: relative;
    display: flex;
    align-self: stretch;
    align-items: center;
}

.menu-call {
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.menu-call::-webkit-details-marker {
    display: none;
}

.menu-contact[open] .menu-call {
    background: var(--surface);
    color: var(--accent);
}

.menu-contact-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 80;
    display: grid;
    gap: 2px;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8);
}

.menu-contact-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text);
    transition: background-color 0.2s;
}

.menu-contact-option:hover,
.menu-contact-option:focus-visible {
    background: var(--surface-raised);
}

.menu-contact-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 18px;
}

.menu-contact-option.is-whatsapp .menu-contact-icon {
    background: rgba(37, 211, 102, 0.14);
    color: #25D366;
}

.menu-contact-text {
    display: grid;
    line-height: 1.3;
}

.menu-contact-text strong {
    font-size: 15px;
    font-weight: 700;
}

.menu-contact-text small {
    color: var(--muted);
    font-size: 13px;
}

/* ==========================================================================
   3. Banner
   ========================================================================== */

.banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface);
    isolation: isolate;
}

.banner-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.banner-track::-webkit-scrollbar {
    display: none;
}

.banner-slide {
    position: relative;
    flex: 0 0 100%;
    margin: 0;
    aspect-ratio: 2 / 1;
    scroll-snap-align: start;
}

/* The wide shape offer banners are usually made in, so their words are not
   cropped off the ends. */
@media (min-width: 768px) {
    .banner-slide {
        aspect-ratio: 8 / 3;
    }
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(12, 14, 14, 0.6);
    color: var(--text);
    font-size: 24px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.banner-arrow-prev {
    left: 14px;
}

.banner-arrow-next {
    right: 14px;
}

.banner-arrow:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

/* Swiping is the way on a touch screen; the arrows only get in the way. */
@media (hover: none) {
    .banner-arrow {
        display: none;
    }
}

.banner-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 2;
    display: flex;
    gap: 7px;
    transform: translateX(-50%);
}

.banner-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: width 0.35s var(--ease), background-color 0.2s;
}

.banner-dot[aria-current="true"] {
    width: 22px;
    background: var(--accent);
}

/* ==========================================================================
   4. Heading and category bar
   ========================================================================== */

.menu-heading {
    padding-top: 18px;
}

.menu-heading h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
}

/* Pinned to the top, on the page's own dark — no coloured band. */
.category-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-top: 18px;
    padding-block: 10px;
    border-bottom: 1px solid transparent;
    background: rgba(12, 14, 14, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: border-color 0.25s;
}

.category-bar.is-stuck {
    border-bottom-color: var(--line);
}

.category-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Every category at once, in front of the row that only shows a few. */
.category-all {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.category-all[hidden] {
    display: none;
}

.category-all:hover,
.category-all[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.category-nav {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* On a phone the row runs on to the edge of the screen, so the pill it cuts
   in half says there are more to swipe to. */
@media (max-width: 767px) {
    .category-row .category-nav {
        margin-inline-end: -16px;
    }

    .category-row .category-tabs {
        padding-inline-end: 16px;
    }

    .category-row .category-nav::before,
    .category-row .category-nav::after {
        width: 36px;
    }
}

/* The fades that say the row carries on, laid over its ends. */
.category-nav::before,
.category-nav::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 76px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.category-nav::before {
    inset-inline-start: 0;
    background: linear-gradient(to right, var(--bg) 30%, rgba(12, 14, 14, 0));
}

.category-nav::after {
    inset-inline-end: 0;
    background: linear-gradient(to left, var(--bg) 30%, rgba(12, 14, 14, 0));
}

.category-nav.can-scroll-start::before,
.category-nav.can-scroll-end::after {
    opacity: 1;
}

.category-tabs {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

/* Spaced-out capitals, like "FOOD & DRINKS" under the logo. The edge makes
   each one a button rather than a word on the page. */
.category-tab {
    flex: 0 0 auto;
    padding: 13px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: rgba(244, 246, 246, 0.88);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.category-tab:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Only a tab once the script has made them tabs; before that they are links. */
.menu-tabbed .category-tab.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}

@media (max-width: 559px) {
    .category-tab {
        padding: 12px 15px;
        font-size: 12.5px;
        letter-spacing: 0.12em;
    }
}

/* The list of every category, from the button in front of the row. */
.category-list {
    margin: 0;
    padding: 6px 0 0;
    list-style: none;
}

.category-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 2px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    transition: color 0.2s;
}

.category-list li:last-child .category-list-item {
    border-bottom: 0;
}

.category-list-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.category-list-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 13px;
}

.category-list-item .mi {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 20px;
}

.category-list-item:hover .category-list-name,
.category-list-item.is-active .category-list-name,
.category-list-item.is-active .mi {
    color: var(--accent);
}

.category-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
}

.category-arrow-prev {
    inset-inline-start: 0;
}

.category-arrow-next {
    inset-inline-end: 0;
}

.category-nav.can-scroll-start .category-arrow-prev,
.category-nav.can-scroll-end .category-arrow-next {
    opacity: 1;
    pointer-events: auto;
}

.category-arrow:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

@media (hover: none) {
    .category-arrow {
        display: none;
    }
}

/* ==========================================================================
   5. Dishes
   ========================================================================== */

.menu-section {
    padding-block: 24px 56px;
    scroll-margin-top: 90px;
}

.menu-tabbed .menu-section {
    animation: menu-rise 0.45s var(--ease) both;
}

@keyframes menu-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

.menu-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.menu-section-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
}

.menu-section-header span {
    color: var(--muted);
    font-size: 14px;
}

/* The chosen tab already names the category. */
.menu-tabbed .menu-section-header {
    display: none;
}

/* The way on to the next category, under the last dish of this one. Only
   with the script: without it every category is already on the page. */
.menu-next {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    padding-block: 18px;
    padding-inline: 22px 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.2s;
}

.menu-tabbed .menu-next {
    display: flex;
}

.menu-next:hover {
    border-color: var(--accent);
}

.menu-next-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.menu-next-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.menu-next-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.menu-next .mi {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 21px;
}

/* One dish to a row. */
.dish-list {
    display: grid;
    gap: 22px;
}

.dish {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color 0.3s;
}

.dish:hover {
    border-color: var(--line-strong);
}

.dish-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-raised);
}

@media (min-width: 768px) {
    .dish-media {
        aspect-ratio: 2 / 1;
    }
}

.dish-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}

.dish:hover .dish-media img {
    transform: scale(1.03);
}

.dish-body {
    padding: 20px 22px 22px;
}

@media (min-width: 768px) {
    .dish-body {
        padding: 24px 28px 26px;
    }
}

.dish-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.dish-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.dish-tag i {
    font-size: 13px;
}

.dish-tag-popular {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(32, 188, 192, 0.4);
}

.dish-tag-sold-out {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Name, a dotted line, the price — the way a printed menu sets a dish. */
.dish-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.dish-name {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.dish-leader {
    flex: 1 1 24px;
    min-width: 24px;
    border-bottom: 2px dotted var(--line-strong);
    transform: translateY(-6px);
}

.dish-price {
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dish-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 28px;
    margin-top: 10px;
}

.dish-description {
    flex: 1;
    max-width: 64ch;
    margin: 0;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.6;
}

.dish-order {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.dish-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0;
    padding-inline: 14px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s var(--ease);
}

.dish-add i {
    font-size: 18px;
}

.dish-add:hover {
    background: var(--accent-hover);
}

.dish-add:active {
    transform: scale(0.95);
}

/* Add, once the dish is in the cart. */
.dish-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 42px;
    padding: 4px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    animation: cart-bump 0.35s var(--ease);
}

.dish-stepper button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(4, 41, 42, 0.14);
    color: var(--on-accent);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dish-stepper button:hover:not(:disabled) {
    background: rgba(4, 41, 42, 0.28);
}

.dish-stepper button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dish-stepper span {
    min-width: 30px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Sold out today: still on the menu, quieter, and nothing to add. */
.dish.is-sold-out .dish-media img {
    filter: grayscale(1) brightness(0.55);
}

.dish.is-sold-out .dish-name,
.dish.is-sold-out .dish-price {
    color: var(--muted);
}

/* On a phone the button sits on its own line under the words. */
@media (max-width: 559px) {
    .dish-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .dish-order {
        align-self: flex-end;
    }
}

/* ==========================================================================
   6. Empty state and footer
   ========================================================================== */

.menu-empty {
    margin-block: 40px;
    padding: 64px 24px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-align: center;
}

.menu-empty i {
    color: var(--accent);
    font-size: 44px;
}

.menu-empty h2 {
    margin: 12px 0 6px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
}

.menu-empty p {
    margin: 0;
    color: var(--muted);
}

/* Kept quiet: a line, the name, and how to reach the shop. */
.menu-footer {
    margin-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.menu-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-block: 28px calc(28px + env(safe-area-inset-bottom));
}

.menu-footer-note {
    margin: 0;
}

.menu-footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-footer-contact i {
    margin-inline-end: 4px;
    color: var(--accent);
}

.menu-footer-contact a:hover {
    color: var(--text);
}

@media (max-width: 559px) {
    .menu-footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .menu-footer-contact {
        justify-content: center;
    }
}

/* ==========================================================================
   7. Cart
   ========================================================================== */

body.cart-open {
    overflow: hidden;
}

.cart-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    border: 2px solid var(--bg);
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.cart-badge.is-bumped {
    animation: cart-bump 0.45s var(--ease);
}

@keyframes cart-bump {
    40% {
        transform: scale(1.35);
    }
}

/* Along the bottom once something is in the cart: count, "View cart", total. */
.cart-bar {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(520px, calc(100% - 32px));
    padding: 7px 22px 7px 7px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    cursor: pointer;
    box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.9);
    transform: translateX(-50%);
    transition: background-color 0.2s;
    animation: cart-bar-in 0.35s var(--ease) both;
}

@keyframes cart-bar-in {
    from {
        opacity: 0;
        transform: translate(-50%, 18px);
    }
}

.cart-bar:hover {
    background: var(--accent-hover);
}

.cart-bar-icon {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--on-accent);
    color: var(--accent);
    font-size: 20px;
}

.cart-bar .cart-badge {
    top: -4px;
    inset-inline-end: -6px;
    border-color: var(--accent);
    background: var(--text);
    color: var(--bg);
}

.cart-bar-label {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: start;
    text-transform: uppercase;
}

.cart-bar-total {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s;
}

.cart-overlay.is-visible {
    opacity: 1;
}

.cart {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    /* Never the full width of a phone: the strip of dimmed menu left showing
       is what a thumb taps to close it. */
    width: min(420px, calc(100% - 56px));
    border-inline-start: 1px solid var(--line);
    background: #101212;
    box-shadow: -24px 0 48px -24px rgba(0, 0, 0, 0.8);
    transform: translateX(100%);
    visibility: hidden;
    /* Visibility waits for the slide to finish before hiding the panel. */
    transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
}

.cart.is-open {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.cart-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
}

.cart-summary {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.cart-close,
.cart-back {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text);
    font-size: 21px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.cart-close:hover,
.cart-back:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.cart-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 20px 20px;
}

.cart-empty {
    margin: auto;
    padding: 40px 0;
    text-align: center;
}

.cart-empty i {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    font-size: 36px;
}

.cart-empty p {
    margin: 0;
    font-weight: 700;
}

.cart-empty span {
    color: var(--muted);
    font-size: 14px;
}

.cart-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    animation: menu-rise 0.35s var(--ease) both;
}

.cart-item-media {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--surface-raised);
}

.cart-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-media.is-named {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
}

.cart-item-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.cart-item-price {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.cart-qty {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
}

.cart-qty button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.cart-qty button:hover:not(:disabled) {
    background: var(--accent);
    color: var(--on-accent);
}

.cart-qty button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cart-qty span {
    min-width: 26px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cart-item-remove {
    padding: 2px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 17px;
    cursor: pointer;
    transition: color 0.2s;
}

.cart-item-remove:hover {
    color: var(--danger);
}

.cart-note {
    margin-top: 20px;
}

.cart-note label,
.checkout-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.cart-note textarea,
.checkout-field input,
.checkout-field textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cart-note textarea {
    min-height: 92px;
    resize: vertical;
}

.cart-note textarea::placeholder,
.checkout-field input::placeholder,
.checkout-field textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.cart-note textarea:focus,
.checkout-field input:focus,
.checkout-field textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 4px var(--accent-ring);
}

.cart-footer {
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: #101212;
}

.cart-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cart-total span {
    color: var(--muted);
    font-weight: 600;
}

.cart-total strong {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cart-checkout {
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cart-checkout:hover:not(:disabled) {
    background: var(--accent-hover);
}

.cart-checkout:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ==========================================================================
   8. Checkout
   ========================================================================== */

.cart-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cart-back {
    width: 38px;
    height: 38px;
    font-size: 20px;
}

.cart-step {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.cart-fee-line {
    margin: -6px 0 12px;
    color: var(--muted);
    font-size: 13px;
}

.checkout {
    padding-top: 16px;
}

.checkout-intro {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.checkout-error {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 138, 126, 0.35);
    border-radius: var(--radius-md);
    background: rgba(255, 138, 126, 0.1);
    color: var(--danger);
    font-size: 14px;
    line-height: 1.5;
}

.checkout-field {
    margin-bottom: 14px;
}

.checkout-field label {
    margin-bottom: 6px;
}

.checkout-field textarea {
    min-height: 84px;
    resize: vertical;
}

.checkout-field .is-invalid {
    border-color: var(--danger);
}

.checkout-field-error {
    margin: 6px 0 0;
    color: var(--danger);
    font-size: 13px;
}

.checkout-field-error:empty {
    display: none;
}

.checkout-note {
    margin-top: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 14px;
}

.checkout-note span {
    display: block;
    margin-bottom: 2px;
    font-weight: 700;
}

.checkout-note p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.checkout-done {
    justify-content: center;
    padding: 40px 8px;
    text-align: center;
}

.checkout-done > i {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 46px;
    animation: cart-bump 0.6s var(--ease);
}

.checkout-done h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
}

.checkout-done p {
    margin: 0 0 6px;
    color: var(--muted);
}

.checkout-done strong {
    color: var(--text);
}

.checkout-field label span {
    color: var(--muted);
    font-weight: 500;
}

/* The saved addresses, above the box they write into. */
.checkout-saved {
    position: relative;
    margin-bottom: 8px;
}

.checkout-saved select {
    display: block;
    width: 100%;
    padding-block: 12px;
    padding-inline: 14px 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.checkout-saved select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 4px var(--accent-ring);
}

.checkout-saved i {
    position: absolute;
    top: 50%;
    inset-inline-end: 12px;
    color: var(--muted);
    font-size: 20px;
    pointer-events: none;
    transform: translateY(-50%);
}

.checkout-code {
    display: flex;
    gap: 8px;
}

.checkout-code input {
    flex: 1;
    min-width: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.checkout-code-apply {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.checkout-code-apply:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.checkout-code-apply:disabled {
    opacity: 0.55;
    cursor: wait;
}

.checkout-code-applied {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    border: 1px solid rgba(32, 188, 192, 0.4);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}

.checkout-code-applied i {
    font-size: 17px;
}

.checkout-code-applied span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.checkout-code-applied button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--accent);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.checkout-code-applied button:hover {
    background: rgba(32, 188, 192, 0.18);
}

/* A cart line that was changed: what was added, left out and asked for. */
.cart-item.is-detailed {
    align-items: start;
}

.cart-item-options {
    margin: 4px 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    list-style: none;
}

.cart-item-options li {
    overflow-wrap: anywhere;
}

.cart-item-edit {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cart-item-edit:hover {
    text-decoration: underline;
}

/* ==========================================================================
   9. Dish options
   ========================================================================== */

/* How many of a dish that can be changed are in the cart, on its Add. */
.dish-add-count {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-inline: 2px -8px;
    padding-inline: 6px;
    border-radius: 999px;
    background: var(--on-accent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

body.sheet-open {
    overflow: hidden;
}

/* Above the cart, since a cart line can be changed from inside it. */
.sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s;
}

.sheet-overlay.is-visible {
    opacity: 1;
}

/* Rises from the bottom on a phone, where the thumb is; a panel in the middle
   of a wider screen. */
.sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: min(90vh, 780px);
    max-height: min(90dvh, 780px);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: #101212;
    box-shadow: 0 -24px 48px -24px rgba(0, 0, 0, 0.8);
    transform: translate(-50%, 100%);
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
}

.sheet.is-open {
    transform: translate(-50%, 0);
    visibility: visible;
    transition-delay: 0s;
}

@media (min-width: 768px) {
    .sheet {
        top: 50%;
        bottom: auto;
        border-bottom: 1px solid var(--line);
        border-radius: var(--radius-lg);
        opacity: 0;
        transform: translate(-50%, -46%);
        transition: transform 0.35s var(--ease), opacity 0.25s, visibility 0s linear 0.35s;
    }

    .sheet.is-open {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--line);
}

.sheet-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.sheet-price {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sheet-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 20px 22px;
}

.sheet-section {
    padding-top: 20px;
}

/* Spaced-out capitals, like the categories. */
.sheet-section-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sheet-section-title span {
    margin-inline-start: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.sheet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sheet-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.sheet-chip:hover {
    border-color: var(--accent);
}

.sheet-chip i {
    color: var(--accent);
    font-size: 15px;
}

/* Left out: dashed, quieter and crossed through, still there to tap back in. */
.sheet-chip.is-left-out {
    border-style: dashed;
    color: var(--muted);
}

.sheet-chip.is-left-out i {
    color: var(--muted);
}

.sheet-chip.is-left-out .sheet-chip-name {
    text-decoration: line-through;
}

.sheet-chip.is-on {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.sheet-note {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sheet-chips[hidden] + .sheet-note,
.sheet-chips[hidden] ~ .sheet-note {
    margin-top: 0;
}

.sheet-note::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.sheet-note:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 4px var(--accent-ring);
}

.sheet-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
}

.sheet-footer .cart-qty button {
    width: 36px;
    height: 36px;
}

.sheet-confirm {
    flex: 1;
    width: auto;
    font-variant-numeric: tabular-nums;
}

select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   9b. Feedback page
   ========================================================================== */

.feedback {
    max-width: 620px;
    padding-block: 20px 56px;
}

.feedback-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.feedback-back:hover {
    color: var(--accent);
}

/* The ask, centred over the card it belongs to. */
.feedback-heading {
    margin-bottom: 22px;
    text-align: center;
}

.feedback-heading h1 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
}

.feedback-heading p {
    margin: 0;
    color: var(--muted);
}

.feedback-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.9);
}

@media (max-width: 559px) {
    .feedback-card {
        padding: 20px 16px;
    }
}

.feedback-group {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

/* Spaced-out capitals, like the categories, so each question reads as a step
   rather than as more of the same text. */
.feedback-group legend {
    width: 100%;
    margin-bottom: 12px;
    padding: 0;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* The stars take the top of the card, in the middle and larger than anything
   else on the page: it is the one answer everybody has. */
.feedback-rating {
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.feedback-rating legend {
    text-align: center;
}

.feedback-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.feedback-star {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    color: var(--line-strong);
    font-size: 37px;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}

/* Every star up to the picked one lights up; hovering previews the same. */
.feedback-star:has(input:checked),
.feedback-star:has(~ .feedback-star input:checked) {
    color: #FFC247;
    filter: drop-shadow(0 0 10px rgba(255, 194, 71, 0.3));
}

.feedback-star:has(input:checked) {
    transform: scale(1.1);
}

@media (hover: hover) {
    .feedback-stars:hover .feedback-star {
        color: var(--line-strong);
        filter: none;
    }

    .feedback-stars .feedback-star:hover,
    .feedback-stars .feedback-star:has(~ .feedback-star:hover) {
        color: #FFC247;
    }

    .feedback-star:hover {
        transform: scale(1.1);
    }
}

.feedback-star:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* What the stars just said, in words. The row keeps its height empty so the
   card does not jump the first time a star is tapped. */
.feedback-rating-words {
    min-height: 22px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.feedback-rating-words span {
    display: none;
}

.feedback-rating:not(:has(input:checked)) .feedback-rating-words [data-word="0"] {
    display: inline;
}

/* One word per star, from one to five; a sixth star would simply get none. */
.feedback-rating:has(input[value="1"]:checked) .feedback-rating-words [data-word="1"],
.feedback-rating:has(input[value="2"]:checked) .feedback-rating-words [data-word="2"],
.feedback-rating:has(input[value="3"]:checked) .feedback-rating-words [data-word="3"],
.feedback-rating:has(input[value="4"]:checked) .feedback-rating-words [data-word="4"],
.feedback-rating:has(input[value="5"]:checked) .feedback-rating-words [data-word="5"] {
    display: inline;
    color: #FFC247;
}

/* How they ordered: three pills, one picked. */
.feedback-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/* Each pill fills its own column top to bottom, so a label that needs two
   lines — "استلام من المطعم" does — leaves a row of three the same height
   rather than one tall pill between two short ones. */
.feedback-choice {
    position: relative;
    display: grid;
    cursor: pointer;
}

.feedback-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.feedback-choice span {
    display: grid;
    place-items: center;
    padding: 12px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface-raised);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.feedback-choice:hover span {
    border-color: var(--accent);
}

.feedback-choice input:checked + span {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.feedback-choice input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.feedback-hint {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.feedback-hint.is-found {
    color: var(--accent);
}

/* The number and the name side by side where there is room: two short
   answers should not read as two whole steps. */
.feedback-pair {
    display: grid;
    gap: 0 14px;
}

@media (min-width: 560px) {
    .feedback-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* Set into the card rather than laid on it, so an empty box still reads as a
   box on a page this dark. */
.feedback-card .checkout-field input,
.feedback-card .checkout-field textarea {
    padding: 13px 15px;
    border-color: var(--line-strong);
    background: #0E1010;
}

.feedback-card .checkout-field .is-invalid {
    border-color: var(--danger);
}

.feedback-card .cart-checkout {
    margin-top: 10px;
    padding: 17px;
}

.feedback-done {
    padding-block: 40px;
    text-align: center;
}

.feedback-done > i {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 46px;
}

.feedback-done h1 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
}

.feedback-done p {
    margin: 0 0 24px;
    color: var(--muted);
}

.feedback-done .cart-checkout {
    display: block;
    text-align: center;
}

/* ==========================================================================
   10. Arabic
   ========================================================================== */

/* Tajawal first, so the Latin letters and figures on the page sit with the
   Arabic around them. */
:root[dir="rtl"] {
    --font-body: 'Tajawal', 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Arabic letters join up: spacing them out, the way the English capitals are,
   pulls every word apart. */
[dir="rtl"] .category-tab,
[dir="rtl"] .category-list-name,
[dir="rtl"] .menu-next-label,
[dir="rtl"] .dish-tag,
[dir="rtl"] .dish-add,
[dir="rtl"] .cart-bar-label,
[dir="rtl"] .cart-checkout,
[dir="rtl"] .checkout-code-apply,
[dir="rtl"] .sheet-section-title,
[dir="rtl"] .feedback-group legend {
    letter-spacing: 0;
}

/* The fades say there is more on the side the row carries on to. */
[dir="rtl"] .category-nav::before {
    background: linear-gradient(to left, var(--bg) 30%, rgba(12, 14, 14, 0));
}

[dir="rtl"] .category-nav::after {
    background: linear-gradient(to right, var(--bg) 30%, rgba(12, 14, 14, 0));
}

/* Arrows point the way the page reads. */
[dir="rtl"] .category-arrow svg,
[dir="rtl"] .category-list-item svg,
[dir="rtl"] .menu-next svg,
[dir="rtl"] .cart-back svg,
[dir="rtl"] .feedback-back svg {
    transform: scaleX(-1);
}

/* The cart comes in from the left, the side a right-to-left page ends on. */
[dir="rtl"] .cart {
    box-shadow: 24px 0 48px -24px rgba(0, 0, 0, 0.8);
    transform: translateX(-100%);
}

[dir="rtl"] .cart.is-open {
    transform: none;
}