/* ==========================================================================
   BISTRO — restaurant-templates/bistro/css/bistro.css

   The design shipped as one HTML file built on the Tailwind CDN. That could
   not stay: the CDN injects its utilities AFTER this sheet, so at equal weight
   every utility wins and the theme cannot own its own design — and a page that
   waits on a CDN for its layout has no layout while the CDN is slow. Every
   utility the design used is a rule here instead.

   Sections
     1.  Tokens and the two faces
     2.  Base
     3.  Buttons and small controls
     4.  Header
     5.  Hero
     6.  Menu: filters, grid, card
     7.  The declaration fold
     8.  Gallery and lightbox
     9.  Footer
     10. The owner's notice (#popup-notification)
     11. PLATFORM — the shared dialogs, restyled
   ========================================================================== */


/* ── 1. Tokens and the two faces ──────────────────────────────────────────
   The design calls them Classic (paper) and Modern (near-black). Classic is
   the base and lives on the bare :root; Modern restates the same names under
   html[data-theme="dark"], which is the attribute index.tpl stamps from the
   owner's setting and the pill in the bar rewrites.

   Every rule below reads a token. Nothing reads a literal colour, which is
   what lets one attribute repaint the whole page.

   --bi-accent and --bi-accent-rgb are declared here as the design's own
   terracotta and overwritten by index.tpl with the restaurant's Theme color,
   in a block that names both selectors — see the comment there. */
:root {
    --bi-bg:          #ffffff;
    --bi-bg-2:        #f9fafb;
    --bi-ink:         #000000;
    --bi-ink-2:       #374151;
    --bi-line:        #e5e7eb;
    --bi-nav-bg:      rgba(255, 255, 255, 0.95);
    --bi-shade-rgb:   17, 24, 39;
    --bi-on-accent:   #ffffff;

    --bi-accent:      #d9734e;
    --bi-accent-rgb:  217, 115, 78;

    /* The footer is a dark plate in both faces, so inside it the ink tokens go
       back to their Modern values — see section 9. */
    --bi-plate:       #0f0f0f;
    --bi-plate-ink:   #e7e5e4;
    --bi-plate-dim:   #a8a29e;
    --bi-plate-line:  #292524;

    --bi-radius:      16px;
    --bi-radius-sm:   10px;
    --bi-shell:       1400px;
    --bi-gutter:      clamp(16px, 4vw, 32px);

    --bi-sans:        "Barlow", ui-sans-serif, system-ui, sans-serif;
    --bi-cond:        "Barlow Condensed", "Barlow", ui-sans-serif, sans-serif;
    --bi-script:      "Dancing Script", "Barlow", cursive;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --bi-bg:          #0a0a0a;
    --bi-bg-2:        #171717;
    --bi-ink:         #ffffff;
    --bi-ink-2:       #9ca3af;
    --bi-line:        #262626;
    --bi-nav-bg:      rgba(10, 10, 10, 0.95);
    --bi-shade-rgb:   0, 0, 0;
}


/* ── 2. Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bi-bg);
    color: var(--bi-ink);
    font-family: var(--bi-sans);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.5s ease, color 0.5s ease;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--bi-cond);
    font-weight: 700;
    line-height: 1.05;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

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

/* The strip of thumbnails and the filter row both scroll sideways and both
   look wrong with a bar under them; the row itself is the affordance. */
.bi-thumbs,
.bi-filters,
.bi-gallery__grid { scrollbar-width: none; }
.bi-thumbs::-webkit-scrollbar,
.bi-filters::-webkit-scrollbar { display: none; }

/* The design's entrance. The transition is declared on the finished state, not
   on the base rule: js/bistro.js adds the hidden class before it reveals, and a
   transition on the base would animate the HIDING too — a slow fade-out of a
   block that was already on screen, before the entrance could begin. */
.bi-fade-up {
    opacity: 0;
    transform: translateY(25px);
}

.bi-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.bi-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: var(--bi-ink-2);
    font-family: var(--bi-cond);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.bi-eyebrow--accent { color: var(--bi-accent); }

.bi-eyebrow > span {
    width: 26px;
    height: 1px;
    flex: 0 0 auto;
    background: currentColor;
}


/* ── 3. Buttons and small controls ────────────────────────────────────── */
.bi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 2px solid transparent;
    font-family: var(--bi-cond);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.bi-btn svg { width: 16px; height: 16px; fill: currentColor; }

.bi-btn--solid {
    background: var(--bi-accent);
    color: var(--bi-on-accent);
    box-shadow: 0 10px 24px -14px rgba(var(--bi-accent-rgb), 0.9);
}

.bi-btn--solid:hover { opacity: 0.9; }

.bi-btn--outline {
    border-color: var(--bi-ink);
    color: var(--bi-ink);
}

.bi-btn--outline:hover {
    background: var(--bi-ink);
    color: var(--bi-bg);
}

/* The design's travelling highlight. overflow: hidden on the button, the sheen
   on a pseudo-element, so nothing is added to the markup. */
.bi-btn--shine {
    position: relative;
    overflow: hidden;
}

.bi-btn--shine::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: biShine 5s infinite;
}

@keyframes biShine {
    0%   { left: -100%; opacity: 0; }
    20%  { left: 100%; opacity: 0.6; }
    100% { left: 100%; opacity: 0; }
}

.bi-round {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--bi-line);
    border-radius: 999px;
    background: var(--bi-bg-2);
    color: var(--bi-ink);
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.bi-round svg { width: 16px; height: 16px; fill: currentColor; }
.bi-round:hover { border-color: var(--bi-ink); }

.bi-round--wa {
    border-color: rgba(37, 211, 102, 0.35);
    color: #25d366;
}

.bi-round--wa:hover {
    background: #25d366;
    border-color: transparent;
    color: #fff;
}


/* ── 4. Header ────────────────────────────────────────────────────────── */
.bi-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 18px 0;
    background: transparent;
    transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

/* Past the first screen the bar takes a ground of its own, because from there
   on it is over content rather than over the hero's own top margin. */
.bi-topbar.is-stuck {
    padding: 10px 0;
    background: var(--bi-nav-bg);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--bi-line);
}

.bi-topbar__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(var(--bi-shell), 100%);
    margin: 0 auto;
    padding: 0 var(--bi-gutter);
}

.bi-topbar__lead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: auto;
    min-width: 0;
}

.bi-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bi-brand__word {
    font-family: var(--bi-cond);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The mark is the one thing in this bar that cannot be read at half size, so it
   is the one thing that gives no ground: flex: 0 0 auto holds it at the height
   set here and everything beside it is compacted at the breakpoints instead.
   Without it the mark is a flex item inside a lead that is free to shrink to
   nothing, and object-fit: contain then draws the whole logo inside whatever
   sliver is left — on a phone that was about thirty pixels.

   max-width is the other half of it: a wide mark is bounded by its width rather
   than by its height, and contain scales it down inside the box rather than
   squashing it. */
.bi-brand__logo {
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    max-width: 200px;
    object-fit: contain;
}

/* Two marks, one showing. The restaurant uploads one drawn for a dark ground
   and one for a light one, and which is right changes the moment the reader
   uses the pill — so the face picks, not the template.

   .bi-brand is in both selectors on purpose: a bare class would lose to any
   `.something img` reset, and both marks would print at once. */
.bi-brand .bi-brand__logo--light { display: none; }

html[data-theme="dark"] .bi-brand .bi-brand__logo--dark { display: none; }
html[data-theme="dark"] .bi-brand .bi-brand__logo--light { display: block; }

/* The Classic / Modern pill. Two labelled options and a ball that slides under
   the pressed one — the design's own control, and the reason it is two buttons
   rather than a toggle is in the markup comment. */
.bi-tone {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid var(--bi-line);
    border-radius: 999px;
    background: var(--bi-bg-2);
}

.bi-tone__ball {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: var(--bi-ink);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bi-tone.is-dark .bi-tone__ball { transform: translateX(100%); }

.bi-tone__option {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 28px;
    padding: 0;
    color: var(--bi-ink-2);
    transition: color 0.5s ease;
}

/* A sun and a moon, and nothing else. The words were the design's, and they
   cost the bar 80px to say what the two glyphs already say — on a narrow bar
   that was the room the restaurant's own name needed.

   The <span> stays in the markup rather than being dropped: js/bistro.js reads
   its text into the button's title, so the label is still there for a pointer
   to rest on and for a screen reader to announce. */
.bi-tone__option span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.bi-tone__option svg { width: 14px; height: 14px; fill: currentColor; }
.bi-tone__option[aria-pressed="true"] { color: var(--bi-bg); }

.bi-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    font-family: var(--bi-cond);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.bi-nav a { padding: 6px 0; transition: color 0.25s ease; }
.bi-nav a:hover { color: var(--bi-accent); }

.bi-nav__rule {
    width: 1px;
    height: 18px;
    background: var(--bi-line);
}

.bi-langs { display: inline-flex; gap: 4px; }

.bi-langs__option {
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--bi-ink-2);
    font-family: var(--bi-cond);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bi-langs__option:hover,
.bi-langs__option.is-active {
    background: var(--bi-bg-2);
    color: var(--bi-ink);
}

.bi-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The burger. Three lines drawn in CSS: this theme loads no icon font. */
.bi-nav-toggle {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid var(--bi-line);
    border-radius: 10px;
    background: var(--bi-bg-2);
}

.bi-nav-toggle > span,
.bi-nav-toggle > span::before,
.bi-nav-toggle > span::after {
    position: absolute;
    left: 50%;
    width: 17px;
    height: 2px;
    background: var(--bi-ink);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.bi-nav-toggle > span {
    top: 50%;
    transform: translate(-50%, -50%);
}

.bi-nav-toggle > span::before,
.bi-nav-toggle > span::after {
    content: "";
    left: 0;
    transform: none;
}

.bi-nav-toggle > span::before { top: -6px; }
.bi-nav-toggle > span::after  { top: 6px; }

.bi-nav-toggle[aria-expanded="true"] > span { background: transparent; }
.bi-nav-toggle[aria-expanded="true"] > span::before { transform: translateY(6px) rotate(45deg); }
.bi-nav-toggle[aria-expanded="true"] > span::after  { transform: translateY(-6px) rotate(-45deg); }


/* ── 5. Hero ──────────────────────────────────────────────────────────── */
.bi-main { display: block; }

.bi-hero {
    position: relative;
    padding: clamp(120px, 16vw, 172px) 0 clamp(48px, 8vw, 96px);
    background: var(--bi-bg);
    overflow: hidden;
}

/* The design's graph paper, at the opacity it had. Two gradients rather than an
   image: nothing to load and it repaints with the face. */
.bi-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.05;
    pointer-events: none;
    background-image:
        linear-gradient(var(--bi-ink) 1px, transparent 1px),
        linear-gradient(90deg, var(--bi-ink) 1px, transparent 1px);
    background-size: 40px 40px;
}

.bi-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    width: min(var(--bi-shell), 100%);
    margin: 0 auto;
    padding: 0 var(--bi-gutter);
}

.bi-hero__stage { min-width: 0; }

.bi-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
}

/* The offset plate behind the picture — the design's depth, and the only thing
   holding the frame off the graph paper. */
.bi-stage__shadow {
    position: absolute;
    top: 16px;
    right: -16px;
    bottom: 16px;
    left: -8px;
    z-index: 0;
    background: #292524;
}

html[data-theme="dark"] .bi-stage__shadow { background: #1a1d1a; }

.bi-stage__frame {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1c1917;
    box-shadow: 0 24px 60px -30px rgba(var(--bi-shade-rgb), 0.75);
}

/* The pictures are written by js/bistro.js, one per cover image. */
.bi-stage__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-out;
}

.bi-stage__frame img.is-current { opacity: 1; z-index: 1; }

/* The design's four entrances, one per slide in turn: a picture zooms out of
   the frame, the next rises into it, the next resolves out of blur, the next
   slides in from the left. Four rather than one because the hero holds on each
   picture for the same 3.6s — the same movement four times reads as a loop,
   four different ones read as a sequence.

   They are on the incoming picture only. The one leaving keeps the plain
   opacity transition above, so the two cross rather than both moving at once.

   forwards, so the finished frame is held: without it the picture would snap
   back to its 0% state — scaled up, blurred, or off to the left — the moment
   the animation ended, which is the whole 3.6s a reader actually looks at it. */
.bi-stage__frame img.bi-effect-zoom {
    animation: biEffectZoom 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.bi-stage__frame img.bi-effect-rise {
    animation: biEffectRise 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.bi-stage__frame img.bi-effect-blur {
    animation: biEffectBlur 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.bi-stage__frame img.bi-effect-slide {
    animation: biEffectSlide 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes biEffectZoom {
    from { opacity: 0; transform: scale(1.15); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes biEffectRise {
    from { opacity: 0; transform: translateY(30px) scale(1.02); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes biEffectBlur {
    from { opacity: 0; filter: blur(12px); transform: scale(1.05); }
    to   { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes biEffectSlide {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.bi-stage__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 55%);
}

/* The caption plate. The design cuts its right edge rather than rounding it. */
.bi-stage__plate {
    position: absolute;
    left: 0;
    bottom: 22px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    width: 85%;
    max-width: 420px;
    padding: 16px 20px;
    border-left: 4px solid var(--bi-accent);
    background: #1c1917;
    clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
    transition: transform 0.5s ease;
}

.bi-stage__plate[hidden] { display: none; }
.bi-stage__plate:hover { transform: translateX(8px); }

.bi-stage__title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bi-stage__desc {
    color: #a8a29e;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.5;
}

.bi-stage__index {
    flex: 0 0 auto;
    color: var(--bi-accent);
    font-family: var(--bi-cond);
    font-size: 20px;
    font-weight: 700;
}

.bi-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    padding-bottom: 6px;
    overflow-x: auto;
}

.bi-thumbs[hidden] { display: none; }

.bi-thumb {
    position: relative;
    width: 108px;
    height: 76px;
    flex: 0 0 auto;
    padding: 0;
    overflow: hidden;
    opacity: 0.5;
    filter: grayscale(1);
    transform: scale(0.95);
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
}

.bi-thumb img { width: 100%; height: 100%; object-fit: cover; }

.bi-thumb:hover { opacity: 0.85; filter: grayscale(0.5); }

.bi-thumb.is-current {
    opacity: 1;
    filter: none;
    transform: scale(1);
    /* The design's ring with its offset, drawn as two shadows: an outline
       cannot take a gap, and a border would move the picture. */
    box-shadow: 0 0 0 2px var(--bi-bg), 0 0 0 4px var(--bi-accent);
}

.bi-hero__copy { min-width: 0; }

.bi-hero__name {
    margin: 0;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* The cursive runs on a line-height of 1 so it sits close under the name, the
   way the design draws it — which leaves its descenders touching whatever
   follows. The bottom margin is that clearance, and it is on this rather than
   on the paragraph because it is this line's own leading that is short. */
.bi-hero__cursive {
    margin: 4px 0 18px;
    color: var(--bi-accent);
    font-family: var(--bi-script);
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 600;
    line-height: 1;
    text-transform: lowercase;
    transform: rotate(-2deg);
    transform-origin: left center;
}

/* The bar that runs while a cover image is up. It is printed hidden and
   js/bistro.js shows it only when there is more than one picture — a bar
   counting down a slideshow of one says nothing. */
.bi-progress {
    position: relative;
    width: 128px;
    height: 6px;
    margin: 28px 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bi-line);
}

.bi-progress[hidden] { display: none; }

.bi-progress > span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to right, #292524, var(--bi-accent) 55%, #f59e0b);
    transform: scaleX(0);
    transform-origin: left center;
}

.bi-progress.is-running > span {
    animation: biProgressFill var(--bi-slide-ms, 3600ms) linear forwards;
}

@keyframes biProgressFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.bi-hero__lead-in {
    max-width: 46ch;
    margin: 0 0 26px;
    color: var(--bi-ink-2);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65;
}

.bi-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.bi-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid var(--bi-line);
}

.bi-facts dt {
    color: var(--bi-accent);
    font-family: var(--bi-cond);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.bi-facts dd {
    margin: 2px 0 0;
    color: var(--bi-ink-2);
    font-size: 14.5px;
}


/* ── 6. Menu ──────────────────────────────────────────────────────────── */
.bi-menu {
    position: relative;
    z-index: 1;
    padding: clamp(48px, 8vw, 80px) 0;
    border-top: 1px solid var(--bi-line);
    background: var(--bi-bg-2);
}

.bi-menu__inner,
.bi-gallery__inner {
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 0 var(--bi-gutter);
}

.bi-menu__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 28px;
}

.bi-menu__title {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.bi-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--bi-line);
    border-radius: 999px;
    background: var(--bi-bg);
}

.bi-search svg { width: 16px; height: 16px; flex: 0 0 auto; fill: var(--bi-ink-2); }

.bi-search input {
    width: 190px;
    border: 0;
    background: none;
    color: var(--bi-ink);
    font: inherit;
    font-size: 14.5px;
}

.bi-search input:focus { outline: none; }
.bi-search input::-webkit-search-cancel-button { display: none; }

/* The row and its two handles.

   min-width: 0 on the row is not optional. A flex child sizes to its content
   by default, so a row of twelve category chips would hold its full width
   whatever the screen — the arrows would never have room and the section would
   scroll sideways instead of the row inside it. */
.bi-filters-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.bi-filters {
    display: flex;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
}

/* Collapsed to nothing until the script says the row has somewhere to go, so a
   menu whose categories all fit is not paying for two dead buttons. Width and
   margin both, or a hidden arrow would still hold its gap.

   min-width: 0 and padding: 0 are both what make width: 0 mean it. A flex item
   will not shrink below its own content, and a <button> carries the UA's own
   1px 6px padding — with border-box that padding is a floor the width cannot
   go under, so a "collapsed" arrow still measured 12px and the row was short
   two gaps it had not been given. */
.bi-filters-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0;
    min-width: 0;
    height: 38px;
    flex: 0 0 auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--bi-bg);
    color: var(--bi-ink);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bi-filters-nav.is-visible {
    width: 38px;
    border: 1px solid var(--bi-line);
    opacity: 1;
}

.bi-filters-nav.is-visible:hover { border-color: var(--bi-ink); }

.bi-filters-nav--prev.is-visible { margin-right: 10px; }
.bi-filters-nav--next.is-visible { margin-left: 10px; }

/* Two borders of a square, turned — the same chevron the declaration fold
   uses. Drawn rather than set as a character, because this theme loads no icon
   font and a glyph that fails to arrive would leave a blank round button. */
.bi-filters-nav::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.bi-filters-nav--prev::before { transform: translateX(2px) rotate(135deg); }
.bi-filters-nav--next::before { transform: translateX(-2px) rotate(-45deg); }

.bi-filter {
    padding: 9px 20px;
    flex: 0 0 auto;
    border: 1px solid var(--bi-line);
    border-radius: 999px;
    background: var(--bi-bg);
    color: var(--bi-ink);
    font-family: var(--bi-cond);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bi-filter:hover { border-color: var(--bi-ink); }

.bi-filter.is-active {
    border-color: transparent;
    background: var(--bi-ink);
    color: var(--bi-bg);
    box-shadow: 0 8px 20px -14px rgba(var(--bi-shade-rgb), 0.9);
}

.bi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 20px;
}

.bi-empty {
    margin: 32px 0 0;
    color: var(--bi-ink-2);
    font-family: var(--bi-cond);
    font-size: 15px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
}

.bi-empty[hidden] { display: none; }

.bi-card {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-radius);
    background: var(--bi-bg);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.bi-card:hover {
    border-color: rgba(var(--bi-accent-rgb), 0.35);
    box-shadow: 0 18px 40px -28px rgba(var(--bi-shade-rgb), 0.9);
}

.bi-card.is-hidden { display: none; }

.bi-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: var(--bi-radius-sm);
    background: var(--bi-bg-2);
}

.bi-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.bi-card:hover .bi-card__media img { transform: scale(1.05); }

.bi-card__tags {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: calc(100% - 20px);
}

.bi-card__tags--inline {
    position: static;
    margin-bottom: 10px;
    max-width: none;
}

/* The kitchen's marks. The design draws one white pill; the four states keep
   the platform's own colours as a left rule, so a guest who learned the mark on
   another of this platform's menus reads the same mark here. */
.bi-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-left: 3px solid var(--bi-tag, #57534e);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.95);
    color: #1c1917;
    font-family: var(--bi-cond);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bi-tag--beliebt   { --bi-tag: #1fa363; }
.bi-tag--angebot   { --bi-tag: #f4643a; }
.bi-tag--neu       { --bi-tag: #3b82f6; }
.bi-tag--chef-tipp { --bi-tag: #e8a221; }

.bi-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 0 2px;
}

.bi-card__cat {
    margin-bottom: 6px;
    color: var(--bi-accent);
    font-family: var(--bi-cond);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.bi-card__title {
    margin-bottom: 8px;
    font-size: 21px;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.bi-card__code {
    margin-right: 6px;
    color: var(--bi-ink-2);
    font-weight: 600;
}

/* The declared codes, after the dish name. Superscript type rather than a row
   of chips: it wraps with the name, costs the card no line of its own, and it
   is what a printed Speisekarte does. white-space: nowrap keeps "A, B, C" from
   breaking after a comma. */
.bi-card__codes {
    margin-left: 6px;
    color: var(--bi-ink-2);
    font-family: var(--bi-cond);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
    vertical-align: super;
}

/* The property icons. Both shapes are named because templates/…/js/svg.js
   swaps the <img> for an inline <svg> asynchronously — the rule has to be true
   before and after. */
.bi-card__props {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    vertical-align: middle;
}

.bi-card__props img,
.bi-card__props svg {
    width: 15px;
    height: 15px;
    fill: var(--bi-accent);
}

.bi-card__desc {
    margin-bottom: 18px;
    color: var(--bi-ink-2);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    /* Two lines, then an ellipsis: the design's own limit, and what keeps a
       grid of cards a grid when one kitchen writes an essay. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bi-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--bi-line);
}

.bi-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--bi-cond);
    font-size: 22px;
    font-weight: 700;
}

/* price_format()'s own class names for the two shapes of discount. */
.bi-card__price .menu-before-price-discount {
    color: var(--bi-ink-2);
    font-size: 15px;
    font-weight: 500;
    text-decoration: line-through;
}

.bi-card__price .menu-percent-Discount {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bi-accent);
    color: var(--bi-on-accent);
    font-size: 12px;
    font-weight: 700;
}

.bi-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.bi-card__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--bi-line);
    border-radius: 999px;
    color: var(--bi-ink-2);
    font-family: var(--bi-cond);
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.bi-card__info:hover { border-color: var(--bi-accent); color: var(--bi-accent); }

.bi-card__order {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bi-accent);
    font-family: var(--bi-cond);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.bi-card__order svg { width: 12px; height: 12px; fill: currentColor; }
.bi-card__order:hover { opacity: 0.7; }


/* ── 7. The declaration fold ──────────────────────────────────────────── */
.bi-legend {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--bi-line);
}

.bi-legend[hidden] { display: none; }

/* list-style on the summary AND the -webkit- pseudo-element: the default
   triangle is drawn by a different mechanism in each engine and neither one
   line removes both. */
.bi-legend__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 0;
    list-style: none;
    cursor: pointer;
}

.bi-legend__summary::-webkit-details-marker { display: none; }

.bi-legend__title {
    margin: 0;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Two borders of a square, turned. It points down while the block is closed
   and up once it is open, and it turns rather than being swapped so the state
   change is legible as a movement. */
.bi-legend__chevron {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    margin-right: 6px;
    border-right: 2px solid var(--bi-accent);
    border-bottom: 2px solid var(--bi-accent);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.26s ease;
}

.bi-legend__fold[open] .bi-legend__chevron { transform: translateY(2px) rotate(-135deg); }

.bi-legend__body { padding-top: 24px; }

.bi-legend__fold[open] .bi-legend__body { animation: biLegendOpen 0.3s ease both; }

@keyframes biLegendOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── The legend as running text, not a table ──────────────────────────────
   Twenty-nine entries at one to a line made a block as tall as the menu above
   it: a reader looking up a single letter had to scan a fourteen-row column to
   find it, and everyone else scrolled past a screenful of list.

   Set as prose instead — each group one full-width paragraph, the entries
   separated by commas, the codes picked out in the accent so a letter can
   still be found at a glance. The same twenty-nine facts in four lines rather
   than fifteen.

   The two groups stack rather than sitting side by side: a paragraph that
   wraps wants the width, and a 340px column would put three words on a
   line. */
.bi-legend__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.bi-legend__col h4,
.bi-legend__props h4 {
    margin: 0 0 12px;
    color: var(--bi-accent);
    font-family: var(--bi-cond);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.bi-legend__col ul {
    color: var(--bi-ink-2);
    font-size: 15.5px;
    line-height: 1.8;
}

/* display: inline, so the entries flow into one another and wrap as text does.
   A grid item cannot be part of a line, which is why the row this used to be
   is gone rather than restyled. */
.bi-legend__col li {
    display: inline;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

/* The separator is drawn rather than typed: a comma in the markup would be a
   comma after the last entry too, and the loop that prints these has no idea
   which one that is. */
.bi-legend__col li:not(:last-child)::after {
    content: ", ";
}

.bi-legend__code {
    color: var(--bi-accent);
    font-weight: 600;
    /* index.tpl prints <span>A</span>Glutenhaltig with nothing between them, so
       the space after the full stop has to come from here or the code and the
       word run together. nowrap keeps "A." from breaking across a line. */
    white-space: nowrap;
}

.bi-legend__code::after { content: ". "; }

.bi-legend__props {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--bi-line);
}

.bi-legend__props-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}

.bi-legend__prop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--bi-ink-2);
    font-size: 15px;
    white-space: nowrap;
}

/* The property artwork carries no fill of its own, so an unstyled icon paints
   itself black — near-invisible on the Modern face. svg.js has swapped these
   for inline <svg> by the time the page settles, so the rule has to name that
   shape; the <img> half is the fallback for a page where it never ran. */
.bi-legend__prop svg,
.bi-legend__prop img {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    object-fit: contain;
    fill: var(--bi-accent);
}


/* ── 8. Gallery and lightbox ──────────────────────────────────────────── */
.bi-gallery {
    padding: clamp(48px, 8vw, 80px) 0;
    background: var(--bi-bg);
}

.bi-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.bi-gallery__tile {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border-radius: var(--bi-radius-sm);
    background: var(--bi-bg-2);
}

.bi-gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
}

.bi-gallery__tile:hover img { transform: scale(1.06); filter: brightness(1.06); }

.bi-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(0, 0, 0, 0.9);
}

.bi-lightbox.is-open { display: flex; }

.bi-lightbox img {
    max-width: min(1100px, 100%);
    max-height: 100%;
    object-fit: contain;
}

.bi-lightbox__close,
.bi-lightbox__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: #fff;
    font-size: 26px;
    line-height: 1;
}

.bi-lightbox__close { top: 20px; right: 20px; }
.bi-lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.bi-lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }

.bi-lightbox__count {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--bi-cond);
    font-size: 13px;
    letter-spacing: 0.18em;
}


/* ── 9. Footer ────────────────────────────────────────────────────────── */
.bi-footer {
    padding: clamp(44px, 7vw, 68px) 0 28px;
    background: var(--bi-plate);
    color: var(--bi-plate-ink);
}

.bi-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    gap: 32px 44px;
    width: min(var(--bi-shell), 100%);
    margin: 0 auto;
    padding: 0 var(--bi-gutter);
}

.bi-footer__mark {
    margin-bottom: 14px;
    color: #fff;
    font-size: 28px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bi-footer__copy {
    max-width: 42ch;
    margin-bottom: 22px;
    color: var(--bi-plate-dim);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.65;
}

.bi-footer__social { display: flex; gap: 10px; }

.bi-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--bi-plate-line);
    border-radius: 999px;
    color: var(--bi-plate-ink);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.bi-footer__social svg { width: 17px; height: 17px; fill: currentColor; }

.bi-footer__social a:hover {
    border-color: transparent;
    background: var(--bi-accent);
    color: #fff;
}

.bi-footer__col h4 {
    margin-bottom: 18px;
    color: #fff;
    font-size: 19px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bi-footer__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    color: var(--bi-plate-ink);
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.55;
}

.bi-footer__list svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 2px;
    fill: var(--bi-accent);
}

.bi-footer__list a:hover { color: var(--bi-accent); }

.bi-hours {
    display: grid;
    gap: 5px;
    padding: 16px 18px;
    border: 1px solid var(--bi-plate-line);
    border-radius: var(--bi-radius);
    background: rgba(255, 255, 255, 0.03);
    font-size: 14px;
}

.bi-hours span {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: var(--bi-plate-dim);
    font-weight: 300;
}

.bi-hours em {
    color: var(--bi-plate-ink);
    font-style: normal;
    white-space: nowrap;
}

.bi-footer__legal {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--bi-plate-line);
    color: var(--bi-plate-dim);
    font-size: 13px;
}


/* ── 10. The owner's notice ───────────────────────────────────────────── */
.bi-notice {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(940px, 100%);
    margin: 24px auto;
    overflow: hidden;
    border-radius: var(--bi-radius);
    background: var(--bi-bg);
    color: var(--bi-ink);
}

.bi-notice.is-imageless { grid-template-columns: minmax(0, 1fr); }
.bi-notice.is-imageless .bi-notice__media { display: none; }

.bi-notice__media {
    position: relative;
    min-height: 260px;
    background: var(--bi-bg-2);
}

.bi-notice__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.bi-notice__slide.is-current { opacity: 1; z-index: 1; }
.bi-notice__slide.is-leaving { opacity: 1; z-index: 0; }
.bi-notice__slide.is-broken { display: none; }

.bi-notice__slide img { width: 100%; height: 100%; object-fit: cover; }

/* One bar per picture, the current one filling left to right over exactly as
   long as its picture is up. The dwell lives in js/bistro.js — one number for
   the timer and the animation both — and reaches here as --bi-slide-ms; the
   value below is only what a rail would run at if the script never set it. */
.bi-notice__rail {
    --bi-slide-ms: 3600ms;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3px;
    padding: 0 6px 6px;
}

.bi-notice__rail[hidden] { display: none; }

.bi-notice__rail span {
    position: relative;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
}

.bi-notice__rail span::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--bi-accent);
    transform: scaleX(0);
    transform-origin: left center;
}

/* A picture already seen keeps its bar full — the rail reads as progress
   through the set rather than as a single travelling light. */
.bi-notice__rail span.is-done::after { transform: scaleX(1); }

.bi-notice__rail span.is-current::after {
    animation: biProgressFill var(--bi-slide-ms) linear forwards;
}

.bi-notice__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 30px;
}

.bi-notice__eyebrow {
    color: var(--bi-accent);
    font-family: var(--bi-cond);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

#popup-notification .popup-notification-header {
    display: block;
    margin: 0;
    padding: 0 40px 0 0;
    border: 0;
    background: transparent;
    color: var(--bi-ink);
    font-family: var(--bi-cond);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    text-transform: uppercase;
}

#popup-notification .popup-content-title {
    color: var(--bi-ink-2);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65;
}

.bi-notice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}

.bi-notice__dismiss {
    border-color: var(--bi-line);
    color: var(--bi-ink-2);
}

/* The way out, for every dialog this theme opens.

   magnific prints its close button inside the panel (closeBtnInside), and its
   glyph comes from .dialog-with-tabs .mfp-close::before — a feather-icons
   codepoint. Two of the panels on this page are NOT .dialog-with-tabs: the
   notice is the theme's own .bi-notice, and the dish dialog is
   .menu-dialog-with-tabs. That rule never reaches either, so the button
   arrives with nothing drawn in it — a 40px target the reader cannot see.
   Both had one, and both were invisible.

   So the cross is drawn here, out of two rules turned against each other. Two
   rules rather than a character, because an icon font that fails to arrive
   would take the only way out of the dialog with it. */
#popup-notification .mfp-close,
.menu-dialog-with-tabs .mfp-close {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    z-index: 5;
    border: 1px solid var(--bi-line);
    border-radius: 999px;
    background: var(--bi-bg);
    color: var(--bi-ink);
    opacity: 1;
    /* The button's own "×" text: replaced by the two rules below, so it is
       pushed out of sight rather than left to print over them. */
    font-size: 0;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

#popup-notification .mfp-close:hover,
.menu-dialog-with-tabs .mfp-close:hover {
    border-color: var(--bi-accent);
    color: var(--bi-accent);
}

#popup-notification .mfp-close::before,
#popup-notification .mfp-close::after,
.menu-dialog-with-tabs .mfp-close::before,
.menu-dialog-with-tabs .mfp-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: currentColor;
    transform-origin: center;
}

#popup-notification .mfp-close::before,
.menu-dialog-with-tabs .mfp-close::before { transform: translate(-50%, -50%) rotate(45deg); }

#popup-notification .mfp-close::after,
.menu-dialog-with-tabs .mfp-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }


/* ── 11. PLATFORM ─────────────────────────────────────────────────────────
   The order, booking, login and dish dialogs arrive with the platform's own
   markup and its own class names. Not one of those classes is declared outside
   the modern-cuisine stylesheet, which this theme does not load — so each one
   has to be redeclared here or the forms fall apart in a way that looks like
   broken markup.

   Order matters inside this band: .popup-dialog .input-with-icon-left input
   and .popup-dialog input[type="text"] weigh exactly the same, so the iconed
   rule has to come after the generic field block, not before it. */
/* position: relative is not decoration. magnific puts the close button inside
   the panel, absolutely placed — with no positioned ancestor in here it
   resolves against .mfp-wrap, which is fixed to the viewport, and the button
   lands in the corner of the SCREEN rather than the corner of the dialog. It
   was 600px to the right of the panel it belonged to. */
.popup-dialog,
.menu-dialog-with-tabs {
    position: relative;
    background: var(--bi-bg);
    color: var(--bi-ink);
    border-radius: var(--bi-radius);
}

/* dialog-with-tabs.css sizes .dialog-with-tabs but not this one, whose box
   only exists in the modern-cuisine sheet. Without it the dish popup opens
   full-bleed. */
.menu-dialog-with-tabs {
    max-width: 620px;
    margin: 40px auto;
}

.popup-dialog h2,
.popup-dialog h3,
.popup-dialog .form-title h2 {
    color: var(--bi-ink);
    font-family: var(--bi-cond);
    text-transform: uppercase;
}

.popup-dialog .popup-tabs-container { padding: 26px 24px; }

/* One field per row. Without this, label, input and button share a line. */
.popup-dialog .form-group,
.popup-dialog .bookmarks-input-group,
.popup-dialog .submit-field {
    display: block;
    margin-bottom: 14px;
}

.popup-dialog input[type="text"],
.popup-dialog input[type="email"],
.popup-dialog input[type="password"],
.popup-dialog input[type="tel"],
.popup-dialog input[type="number"],
.popup-dialog input[type="date"],
.popup-dialog input[type="search"],
.popup-dialog select,
.popup-dialog textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-radius-sm);
    background: var(--bi-bg-2);
    color: var(--bi-ink);
    font: inherit;
    font-size: 15px;
}

.popup-dialog textarea { min-height: 96px; resize: vertical; }

/* The icon is absolutely placed inside the field, and the input is given room
   for it. Without this the icon prints on a line of its own ABOVE the field.
   It is after the generic block on purpose — see the band comment. */
.popup-dialog .input-with-icon-left { position: relative; }

.popup-dialog .input-with-icon-left i {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: var(--bi-ink-2);
    font-size: 16px;
    pointer-events: none;
}

.popup-dialog .input-with-icon-left input { padding-left: 40px; }

.popup-dialog button[type="submit"],
.popup-dialog .button,
.popup-dialog .btn {
    padding: 11px 22px;
    border: 0;
    border-radius: var(--bi-radius-sm);
    background: var(--bi-accent);
    color: var(--bi-on-accent);
    font-family: var(--bi-cond);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Bootstrap-shaped helpers used throughout the dialog markup, none of which
   are on the page. */
.popup-dialog .d-flex { display: flex; }
.popup-dialog .align-items-center { align-items: center; }
.popup-dialog .margin-left-auto { margin-left: auto; }
.popup-dialog .margin-bottom-5 { margin-bottom: 5px; }
.popup-dialog .full-width { width: 100%; }
.popup-dialog .text-center { text-align: center; }
.popup-dialog .margin-top-10 { margin-top: 10px; }
.popup-dialog .margin-top-20 { margin-top: 20px; }
.popup-dialog .margin-bottom-10 { margin-bottom: 10px; }
.popup-dialog .row { display: block; }

.popup-dialog .modal-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--bi-line);
    text-align: center;
    font-size: 14px;
}

.popup-dialog .modal-footer a { color: var(--bi-accent); }

.popup-dialog .form-error {
    display: block;
    color: #dc2626;
    font-size: 13px;
}

.mfp-bg { background: rgba(0, 0, 0, 0.72); opacity: 1; }

/* The cookie banner.

   Its markup is the platform's — .cookieConsentContainer, .cookieTitle,
   .cookieDesc, .cookieButton — and every one of those classes lives only in
   the modern-cuisine stylesheet, which this theme does not load. With nothing
   declared it is not a banner at all: a heading, a paragraph and a link
   printed in document flow at the very bottom of the page, under the footer,
   where nobody will ever see it and where it is not a consent notice in any
   meaningful sense.

   Drawn as a card in the corner rather than a bar across the foot: the quick
   actions and the order button already live along that edge on a phone, and a
   full-width bar would cover them.

   restaurant.php pins the acceptance flag to 0, so this is printed on every
   request; js/bistro.js remembers the answer. */
.cookieConsentContainer {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9998;
    width: min(360px, calc(100vw - 40px));
    padding: 20px 22px;
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-radius);
    background: var(--bi-bg);
    color: var(--bi-ink);
    box-shadow: 0 24px 60px -28px rgba(var(--bi-shade-rgb), 0.95);
}

.cookieConsentContainer .cookieTitle h3 {
    margin-bottom: 8px;
    font-family: var(--bi-cond);
    font-size: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cookieConsentContainer .cookieDesc p {
    margin-bottom: 16px;
    color: var(--bi-ink-2);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
}

.cookieConsentContainer .cookieDesc a {
    color: var(--bi-accent);
    text-decoration: underline;
}

.cookieConsentContainer .cookieAcceptButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: var(--bi-radius-sm);
    background: var(--bi-accent);
    color: var(--bi-on-accent);
    font-family: var(--bi-cond);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: opacity 0.25s ease;
}

.cookieConsentContainer .cookieAcceptButton:hover { opacity: 0.9; }

@media (max-width: 720px) {
    /* Clear of the order button, which sits in this corner on a phone. */
    .cookieConsentContainer { bottom: 14px; left: 14px; padding: 16px 18px; }
}


/* ── Breakpoints ──────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .bi-nav { gap: 18px; }
}

@media (max-width: 1024px) {
    .bi-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .bi-hero__copy { order: -1; }
    .bi-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .bi-nav-toggle { display: block; }

    /* From here the bar carries the burger as well, so the room the links have
       just given up is spent on the gaps before it is taken off the mark. */
    .bi-topbar__inner { gap: 10px; }
    .bi-topbar__lead { gap: 10px; }
    .bi-brand__logo { height: 36px; max-width: 160px; }

    /* The links fold behind the burger rather than wrapping onto three rows and
       pushing the restaurant's name off the first screen. */
    .bi-nav {
        position: absolute;
        top: calc(100% - 4px);
        right: var(--bi-gutter);
        z-index: 60;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        min-width: 220px;
        max-width: calc(100vw - 32px);
        padding: 10px;
        border: 1px solid var(--bi-line);
        border-radius: var(--bi-radius-sm);
        background: var(--bi-bg);
        box-shadow: 0 26px 60px -34px rgba(var(--bi-shade-rgb), 0.9);
    }

    .bi-topbar.is-nav-open .bi-nav { display: flex; }

    .bi-topbar__inner { position: relative; }

    .bi-nav a { padding: 11px 12px; border-radius: 8px; }
    .bi-nav a:hover { background: var(--bi-bg-2); }

    .bi-nav__rule { width: 100%; height: 1px; margin: 6px 0; }
    .bi-langs { flex-wrap: wrap; padding: 0 6px 4px; }

    .bi-search input { width: 140px; }
    .bi-notice { grid-template-columns: minmax(0, 1fr); }
    .bi-notice__media { min-height: 210px; }
}

@media (max-width: 720px) {
    .bi-actions .bi-btn--outline { display: none; }
    .bi-btn__label { display: none; }
    .bi-btn--shine { padding: 11px 14px; }

    /* Every control in the bar loses a few pixels so the mark keeps its own. */
    .bi-topbar__inner { gap: 8px; }
    .bi-topbar__lead { gap: 8px; }
    .bi-actions { gap: 6px; }
    .bi-round { width: 36px; height: 36px; }
    .bi-nav-toggle { width: 36px; height: 36px; }
    .bi-brand__logo { height: 34px; max-width: 132px; }
    .bi-footer__inner { grid-template-columns: minmax(0, 1fr); }
    .bi-stage__plate { bottom: 14px; padding: 13px 16px; }
    .bi-stage__title { font-size: 18px; }
}

@media (max-width: 560px) {
    /* On a phone the bar holds a mark, the pill, the burger and three actions,
       and they cannot all have what they want. The pill is the one that can say
       the same thing in half the room: it folds to the face it is *not* wearing.
       The pressed option tells the reader what the page already shows them, so
       it goes; the one left is both the state and the switch, and the ball has
       nothing left to slide between. js/bistro.js keeps aria-pressed and the
       title current on both buttons, so the one showing stays announced. */
    .bi-tone { padding: 3px; }
    .bi-tone__ball { display: none; }
    .bi-tone__option[aria-pressed="true"] { display: none; }
    .bi-tone__option { width: 30px; color: var(--bi-ink); }

    .bi-round { width: 34px; height: 34px; }
    .bi-nav-toggle { width: 34px; height: 34px; }
    .bi-btn--shine { padding: 10px 12px; }
    .bi-brand__logo { height: 32px; max-width: 108px; }
}

@media (max-width: 480px) {
    .bi-grid { grid-template-columns: minmax(0, 1fr); }
    .bi-menu__head { align-items: stretch; }
    .bi-search { width: 100%; }
    .bi-search input { width: 100%; }
    .bi-thumb { width: 84px; height: 60px; }
}

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

    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    .bi-fade-up { opacity: 1; transform: none; }
}

/* ── The dish dialog, #add-extras ─────────────────────────────────────────
   restaurant.js fills this one by class name: .menu-avatar-container takes the
   photo, .menu_detail the name and price, #menu-price-option the sizes,
   .menu-extra-wrapper the extras and #Allegie_detail the declaration. None of
   those classes is declared outside the modern-cuisine stylesheet, which this
   theme does not load, so the dialog arrives as an unstyled stack: a
   full-bleed photograph with the dish name floated beside it.

   The .d-flex above turns the head into a row, so the two halves are given
   sizes here rather than being left to the image's own dimensions. */
#add-extras .popup-tabs-container {
    padding: 22px;
    /* dialog-with-tabs.css centres everything inside a popup. That suits a
       login form and not a dish: a name, a description and a column of sizes
       all read from the left. */
    text-align: left;
}

/* The head has nothing under it when a dish carries neither picture nor
   description, and a rule under nothing is a line across an empty dialog. */
#add-extras .menu-popup-tab-content > .d-flex:empty { display: none; }

#add-extras .category_name {
    margin: 0 0 4px;
    color: var(--bi-accent);
    font-family: var(--bi-cond);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

#add-extras .menu-popup-tab-content > .d-flex {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bi-line);
}

/* A dish with no picture: restaurant.js leaves this container empty rather
   than not printing it, so without :empty the head keeps a 168px hole where
   the photograph would have been. */
#add-extras .menu-avatar-container:empty { display: none; }

#add-extras .menu-avatar-container {
    width: 168px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--bi-radius-sm);
    background: var(--bi-bg-2);
}

#add-extras .menu-avatar-container img {
    width: 100%;
    height: 132px;
    object-fit: cover;
}

#add-extras .menu_detail { min-width: 0; }

#add-extras .menu_post {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    font-family: var(--bi-cond);
    font-size: 21px;
    font-weight: 700;
    text-transform: uppercase;
}

/* The leader dots between name and price. They are a decoration on a printed
   menu and a row of stray characters in a dialog this narrow. */
#add-extras .menu_dots { display: none; }

#add-extras .menu_price { color: var(--bi-accent); }

#add-extras .menu_desc {
    color: var(--bi-ink-2);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
}

#add-extras .section-headline h5,
#add-extras .menu-extra-wrapper h5 {
    margin: 18px 0 8px;
    font-family: var(--bi-cond);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* A size, or an extra. restaurant.js builds both out of the same three pieces:

     <div class="d-flex menu-price-option-item align-items-center">
       <strong class="price-item-title">M</strong>
       <div class="margin-left-auto checkbox">
         <input type="checkbox" id="...">
         <label for="..."><span class="item-price">4,50 €</span>
                          <span class="checkbox-icon right"></span></label>
       </div>
     </div>

   The input and its label are siblings inside a plain <div>, so with nothing
   declared they stack: the size on one line and its price on the next, which
   is what this dialog was doing. The .checkbox wrapper is made a row here and
   the price is put back beside the box.

   .checkbox-icon is modern-cuisine's own tick sprite. It is not on this page
   and never will be, so it is taken out and the native control is coloured
   instead — accent-color is one line against a sprite that cannot arrive. */
#add-extras .menu-price-option-item,
#add-extras .menu-extras-item {
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bi-line);
    font-size: 14.5px;
}

#add-extras .menu-price-option-item:last-child,
#add-extras .menu-extras-item:last-child { border-bottom: 0; }

#add-extras .price-item-title,
#add-extras .extras-item-title {
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

#add-extras .menu-price-option-item .checkbox,
#add-extras .menu-extras-item .checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

#add-extras .menu-price-option-item .checkbox label,
#add-extras .menu-extras-item .checkbox label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

#add-extras .item-price,
#add-extras .extras-item-price {
    color: var(--bi-accent);
    font-family: var(--bi-cond);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

#add-extras .checkbox-icon { display: none; }

#add-extras .checkbox input[type="checkbox"] {
    /* Order matters: the price reads first and the control sits at the edge,
       which is where a thumb goes for it. */
    order: 2;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--bi-accent);
    cursor: pointer;
}

#add-extras .checkbox input[type="checkbox"]:disabled { cursor: default; opacity: 0.4; }

#add-extras .select_max_title {
    margin: 0 0 6px;
    color: var(--bi-ink-2);
    font-size: 13px;
    font-weight: 300;
}

#add-extras .category_extra_wraper + .category_extra_wraper { margin-top: 14px; }

/* The declaration inside the dialog. The inline style on this element sets a
   white top border, which is invisible on the Classic face — restated here,
   and the three lists inside it are given a shape they do not carry
   themselves. */
#add-extras #Allegie_detail {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--bi-line) !important;
    font-size: 13px !important;
    color: var(--bi-ink-2);
}

#add-extras #Allegie_detail h4 {
    margin: 12px 0 6px;
    color: var(--bi-ink);
    font-family: var(--bi-cond);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#add-extras #Allegie_detail ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

#add-extras #Allegie_detail li {
    display: flex;
    align-items: center;
    gap: 7px;
}

#add-extras #Allegie_detail img,
#add-extras #Allegie_detail svg {
    width: 18px;
    height: 18px;
    fill: var(--bi-accent);
}

@media (max-width: 560px) {
    #add-extras .menu-popup-tab-content > .d-flex { flex-direction: column; }
    #add-extras .menu-avatar-container { width: 100%; }
}