/* =====================================================================
   ITALIEN — Compagnia di Famiglia
   Sistem de design

   Culorile NU sunt alese. Sunt citite din fișierele de producție —
   cartea de vizită, șervețelul, cutia de livrare, plăcuța de ceramică
   (Italien 2024/*.ai) — și numărate după cât de des apar la tipar:

     · crema        #F5EDD9  fondul a tot; cea mai folosită culoare
     · pomodoro     #D33F20  accentul; roșu de roșie, nu de semafor
     · basilico     #18490A  verdele din poza de profil de pe Instagram
     · mattone      #6F1A02  cărămidă arsă; umbra lui pomodoro
     · rosa         #FF94C7  marca de pe avatar; singura culoare neașteptată
     · sabbia       #BEA77F  nisip cald; chenare, hârtie
     · inchiostro   #151518  cerneala; aproape negru, dar nu negru

   Perechea care ține identitatea, și care lipsea de pe site: VERDE cu
   ROZ. Așa arată poza de profil de pe Instagram — cerc verde închis,
   „ITALIEN" scris în roz peste el. Pe site, roz-ul apare exclusiv pe
   fundaluri închise, exact ca acolo; pe crem n-are ce căuta.

   Tipografia urmează wordmark-ul: un grotesc condensat foarte gras
   pentru titluri, un geometric subțire și larg spațiat pentru etichete —
   exact raportul dintre „ITALIEN” și „COMPAGNIA DI FAMIGLIA” din logo.

   Mișcarea: fotografia se mișcă, textul curge, suprafețele stau. Un
   restaurant se vinde prin mâncare, nu prin efecte — efectele doar o pun
   în mișcare.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Identitate — valorile EXACTE din fișierele de tipar.
     Numele rămân cele vechi (--terra, --verde, --blush) ca să nu se rupă
     cele câteva sute de locuri care le folosesc; valorile sunt cele
     italienești de mai sus. */
  --ink:        #151518;   /* inchiostro */
  --terra:      #6F1A02;   /* mattone   */
  --ember:      #D33F20;   /* pomodoro  */
  --verde:      #18490A;   /* basilico  */
  --blush:      #FF94C7;   /* rosa      */
  --cream:      #F5EDD9;   /* crema     */
  --bone:       #FAF6EC;
  --sand:       #BEA77F;   /* sabbia    */

  /* Suprafețe derivate */
  --bg:         #F5EDD9;
  --bg-alt:     #FAF6EC;
  --surface:    #FFFFFF;
  --ink-soft:   rgba(21, 21, 24, 0.70);
  --ink-faint:  rgba(21, 21, 24, 0.45);
  --line:       rgba(21, 21, 24, 0.14);
  --line-soft:  rgba(21, 21, 24, 0.08);

  /* Pe fundaluri închise */
  --on-dark:        var(--cream);
  --on-dark-soft:   rgba(245, 237, 217, 0.72);
  --on-dark-faint:  rgba(245, 237, 217, 0.45);
  --line-dark:      rgba(245, 237, 217, 0.20);

  --ok:   var(--verde);
  --err:  #B3401F;

  /* Alias-uri pentru paleta veche (varianta întunecată, dinaintea
     identității reale). Câteva pagini le mai folosesc în stiluri
     inline; le mapăm aici ca să nu rămână culori nedefinite — adică
     text negru pe fundal transparent. Se scot pe măsură ce stilurile
     inline dispar din view-uri. */
  --ink-card: var(--surface);
  --amber:    var(--terra);
  --gold:     var(--terra);

  /* TIPOGRAFIE — fonturile meniului tipărit
     ───────────────────────────────────────
     Titlurile sunt Cinzel SemiBold, ca pe coperta meniului: o capitală
     romană, nu un sans. Textul e un sans geometric, în locul lui Sofia
     Pro din tipar — Sofia Pro e font comercial și n-are licență de web;
     vezi docs/FONTURI.md. Când licența există, se schimbă DOUĂ rânduri:
     familia de mai jos și legătura din `<head>`.

     Anton, care era aici, e un titlu îngust și foarte gras. Cinzel e mai
     deschis și mult mai lat la aceeași mărime, așa că scara de mai jos e
     coborâtă: cu vechile valori, „COMPAGNIA DI FAMIGLIA" ieșea din
     ecranul telefonului. Mărimile astea sunt măsurate pe 390 px lățime,
     nu ghicite. */
  --font-display: 'Cinzel', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t-mega:  clamp(2.6rem, 10vw, 9rem);
  --t-hero:  clamp(2.1rem, 6.4vw, 5.4rem);
  --t-h1:    clamp(1.85rem, 4.4vw, 3.6rem);
  --t-h2:    clamp(1.5rem, 3.1vw, 2.4rem);
  --t-h3:    clamp(1.1rem, 1.8vw, 1.42rem);
  --t-lead:  clamp(1.02rem, 1.4vw, 1.25rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.7rem;

  --s-1: .5rem;  --s-2: .875rem; --s-3: 1.25rem;
  --s-4: 2rem;   --s-5: 3rem;    --s-6: 4.5rem;
  --s-7: 7rem;   --s-8: 10rem;

  --gutter:  clamp(1.1rem, 4vw, 4rem);
  --measure: 62ch;
  --wide:    1440px;
  --narrow:  720px;

  --radius:   0px;      /* identitatea e tăiată drept — fără colțuri moi */
  --radius-r: 999px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur:  .38s;
  --dur-l: .9s;

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* `clip`, NU `hidden`. Taie la fel ce iese lateral, dar nu face din
     body un container de derulare.

     Diferența nu e teoretică. `overflow-x: hidden` pe body transformă
     body-ul în container de derulare, iar `position: sticky` se lipește
     de cel mai apropiat container de derulare — adică de body, care
     derulează odată cu pagina. Rezultatul: bara de grupe din meniul QR
     era scrisă ca lipită, arăta lipită în cod, și dispărea la prima
     derulare pe telefon.

     Valentin a raportat-o ca lipsă de funcție („e complicat să derulez
     până sus de fiecare dată"), nu ca defect — și avea dreptate să n-o
     numească defect: din afară arată identic. */
  overflow-x: clip;
  min-height: 100svh;
}

/* Granulație fină de hârtie. Pe crem, dă senzația de tipar — identitatea
   e făcută pentru hârtie (șervețel, cutie, carte de vizită). */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  opacity: .028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* `display: contents` — nu `block`.
   <picture> e doar un ambalaj care spune browserului „ia WebP dacă
   poți". Dacă îl lăsăm să fie o cutie adevărată, se așază între
   părinte și <img>, iar toate regulile scrise pentru imagine
   (`height: 100%`, poziția în grilă, `flex: 0 0 44px`) se raportează
   la ambalaj, nu la părinte — și pozele ies de alte mărimi decât cele
   desenate. Cu `contents`, ambalajul dispare din așezare și <img>
   rămâne exact acolo unde era înainte să adăugăm WebP. */
picture { display: contents; }
input, button, textarea, select { font: inherit; color: inherit; }
fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.grid > *, .stack > * { min-width: 0; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
::selection { background: var(--terra); color: var(--cream); }

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

/* ---------------------------------------------------------------------
   3. TIPOGRAFIE
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* 600 = SemiBold, greutatea din meniul tipărit. Cinzel are și 400,
     dar la 400 un titlu mare pe hârtie albă pare nescris. */
  font-weight: 600;
  /* Cinzel are majuscule înalte și fără coborâtoare la titlurile scrise
     cu capitale: .86 lipea rândurile între ele. */
  line-height: .95;
  /* Capitalele romane au nevoie de aer între ele — așa sunt desenate.
     Vechiul -.005em (strâns, pentru Anton) le făcea să pară lipite. */
  letter-spacing: .015em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
  font-weight: 300;
}

/* Eticheta de secțiune. Reproduce proporția din logo: literă mică,
   spațiere foarte largă, sub wordmark-ul gras. */
.eyebrow {
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--terra);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.eyebrow::before {
  content: '';
  width: clamp(18px, 3vw, 40px);
  height: 1px;
  background: currentColor;
  flex: none;
}

.eyebrow--plain::before { display: none; }

.display {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: .84;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.mono {
  font-size: var(--t-micro);
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 400;
}

.accent { color: var(--terra); }
.ember  { color: var(--ember); }
.dim    { color: var(--ink-soft); }
.faint  { color: var(--ink-faint); }

/* ---------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--narrow); }
.wrap--full   { max-width: none; padding-inline: 0; }

.section { padding-block: clamp(var(--s-5), 9vw, var(--s-7)); }
.section--tight { padding-block: clamp(var(--s-4), 6vw, var(--s-5)); }

/* Blocuri pline, în culorile brandului. Dau ritm paginii fără decor. */
.block-terra { background: var(--terra); color: var(--on-dark); }
.block-verde { background: var(--verde); color: var(--on-dark); }
.block-ink   { background: var(--ink);   color: var(--on-dark); }
.block-bone  { background: var(--bone); }

.block-terra .eyebrow,
.block-verde .eyebrow,
.block-ink   .eyebrow { color: var(--blush); }

.block-terra .lead, .block-verde .lead, .block-ink .lead { color: var(--on-dark-soft); }
.block-terra .dim,  .block-verde .dim,  .block-ink .dim  { color: var(--on-dark-soft); }
.block-terra .faint,.block-verde .faint,.block-ink .faint{ color: var(--on-dark-faint); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  max-width: var(--measure);
}

.section-head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.rule { height: 1px; background: var(--line); border: 0; }

.grid { display: grid; gap: var(--s-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row   { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   5. NAVIGAȚIE
   --------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: var(--s-3);
  transition: background var(--dur) var(--ease),
              padding var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Peste hero-ul întunecat, bara e crem; după derulare devine crem opac. */
.nav--over { color: var(--on-dark); }

.nav.is-stuck {
  background: rgba(245, 237, 217, .94);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
  padding-block: var(--s-2);
  color: var(--ink);
}

.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.brand { display: flex; align-items: center; gap: .6rem; }

/* Logo-ul real, din fișierul de identitate. Culoarea se schimbă prin
   `currentColor` pe un SVG mascat — astfel același fișier funcționează
   și pe crem, și pe terracotta. */
.brand__logo {
  display: block;   /* <span> inline ignoră width/aspect-ratio */
  height: clamp(17px, 2.1vw, 23px);
  width: auto;
  background: currentColor;
  -webkit-mask: var(--logo-main) center / contain no-repeat;
  mask: var(--logo-main) center / contain no-repeat;
  aspect-ratio: 3334 / 970;
  transition: height var(--dur) var(--ease);
}

.nav.is-stuck .brand__logo { height: clamp(15px, 1.8vw, 19px); }

.brand__sub {
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .55;
  white-space: nowrap;
  font-weight: 300;
}

.nav__links { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem); }

.nav__link {
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: .04em;
  position: relative;
  padding-block: .4rem;
  white-space: nowrap;
  opacity: .8;
  transition: opacity var(--dur) var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: .1rem;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover { opacity: 1; }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { opacity: 1; }

.nav__toggle {
  display: none;
  /* Deasupra panoului de meniu: altfel, cu meniul deschis, butonul de
     închidere e acoperit de propriul panou și nu-l mai poți închide. */
  position: relative;
  z-index: 2;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  margin-right: -10px;
}

.nav__toggle span {
  display: block; width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity .2s;
}

.nav__toggle[aria-expanded="true"] { color: var(--cream); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Tabletă și telefon: meniu pe tot ecranul, în terracotta */
@media (max-width: 1000px) {
  .nav__toggle { display: flex; }

  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--terra);
    color: var(--on-dark);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--gutter);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--dur-l) var(--ease-out), visibility var(--dur-l);
  }

  .nav__links.is-open { transform: translateY(0); visibility: visible; }

  .nav__link {
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 3.6rem);
    text-transform: uppercase;
    opacity: 1;
    line-height: 1;
    padding-block: .25rem;
  }

  .nav__link::after { display: none; }
  .nav__links .btn { margin-top: var(--s-3); font-size: var(--t-body); }
}

/* ---------------------------------------------------------------------
   6. BUTOANE — minimum 44px înălțime la atingere
   --------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-bd: currentColor;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  padding: .75rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-r);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Umplerea urcă de jos — confirmă apăsarea fără să mute nimic în pagină */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: var(--cream); }

.btn--primary {
  --btn-bg: var(--terra);
  --btn-bd: var(--terra);
  color: var(--cream);
}
.btn--primary::before { background: var(--ember); }
.btn--primary:hover { color: var(--cream); border-color: var(--ember); }

.btn--light { --btn-bd: var(--cream); color: var(--cream); }
.btn--light:hover { color: var(--terra); }

.btn--solid-light {
  --btn-bg: var(--cream);
  --btn-bd: var(--cream);
  color: var(--terra);
}
.btn--solid-light::before { background: var(--blush); }
.btn--solid-light:hover { color: var(--ink); }

.btn--ghost { border-color: transparent; padding-inline: 0; min-height: 44px; }
.btn--ghost::before { display: none; }
.btn--ghost:hover { color: var(--ember); }

.btn--block { width: 100%; }
.btn--lg { min-height: 54px; padding: .95rem 2rem; font-size: var(--t-body); }

.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:disabled::before { display: none; }

.arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(5px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terra);
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.link-arrow:hover { border-bottom-color: currentColor; color: var(--ember); }
.block-terra .link-arrow, .block-verde .link-arrow, .block-ink .link-arrow { color: var(--blush); }

/* ---------------------------------------------------------------------
   7. HERO — fotografie în mișcare, wordmark peste
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex;
  align-items: flex-end;
  /* Conținutul e lipit de jos. Când e mai înalt decât ecranul, dă pe
     sus — și acolo stă bara de navigare, care e `fixed`. Cu Anton nu se
     vedea, fiindcă era un font îngust; Cinzel e mai lat, „COMPAGNIA DI
     FAMIGLIA” trece pe două rânduri pe telefon, iar adresa din capul
     blocului ajungea sub logo. Rezerva de sus e cât bara. */
  padding-top: clamp(96px, 12vh, 140px);
  padding-bottom: clamp(var(--s-5), 9vh, var(--s-7));
  overflow: hidden;
  background: var(--ink);
  color: var(--on-dark);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: saturate(.96) contrast(1.05) brightness(.62);
  transform: scale(1.08);
  animation: kenburns 26s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

/* Ken Burns: fotografia se apropie și derivă lent. Mâncarea „respiră”
   fără să fie nevoie de video — un video de 8 MB pe prima pagină ar
   costa mai mult decât aduce. */
@keyframes kenburns {
  from { transform: scale(1.08) translate3d(0,0,0); }
  to   { transform: scale(1.18) translate3d(-2%, -2.5%, 0); }
}

.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  /* Trei straturi: bază jos pentru text, umbră sus pentru navigație,
     vinietă care ține privirea în centru. Fotografia de mâncare e
     luminoasă — fără umbra de sus, meniul devine ilizibil. */
  background:
    linear-gradient(to top, rgba(21, 21, 24,.94) 0%, rgba(21, 21, 24,.58) 40%, rgba(21, 21, 24,.26) 74%),
    linear-gradient(to bottom, rgba(21, 21, 24,.55) 0%, rgba(21, 21, 24,.12) 22%, transparent 40%),
    radial-gradient(130% 90% at 50% 10%, transparent 28%, rgba(21, 21, 24,.5) 100%);
}

.hero__content { position: relative; z-index: 2; width: 100%; }

/* Wordmark-ul real, la scară mare */
.hero__mark {
  display: block;
  width: min(100%, 980px);
  aspect-ratio: 3334 / 1325;
  background: var(--cream);
  -webkit-mask: var(--logo-slogan) left center / contain no-repeat;
  mask: var(--logo-slogan) left center / contain no-repeat;
  margin-block: var(--s-3) var(--s-4);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}

.hero__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }

.status-dot { display: inline-flex; align-items: center; gap: .5rem; }

.status-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blush);
  animation: pulse 2.6s infinite;
}

.status-dot--closed::before { background: var(--on-dark-faint); animation: none; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 148, 199,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 148, 199,0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 148, 199,0); }
}

/* ---------------------------------------------------------------------
   8. MARCHIZĂ CINETICĂ — „literele care curg”
   --------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  width: 100%;
  padding-block: clamp(.6rem, 1.6vw, 1.4rem);
  border-block: 1px solid var(--line);
  user-select: none;
}

.marquee--terra { background: var(--terra); color: var(--cream); border-color: transparent; }
.marquee--ink   { background: var(--ink);   color: var(--cream); border-color: transparent; }

.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  /* --shift e actualizat din JS în funcție de derulare: textul curge
     singur, dar accelerează și își schimbă sensul când derulezi. */
  transform: translate3d(var(--shift, 0px), 0, 0);
  will-change: transform;
}

.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 4.4rem);
  /* .9 tăia capetele literelor: banda are `overflow: hidden`, iar
     capitalele lui Cinzel sunt mai înalte decât cutia lor la o
     interlinie sub 1. */
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.marquee__item::after {
  content: '';
  width: clamp(9px, 1.4vw, 16px);
  height: clamp(9px, 1.4vw, 16px);
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: .55;
}

/* Varianta conturată — aerisește când marchiza e lungă */
/* Textul conturat din banda rulantă.

   `currentColor` NU merge aici: el se referă la `color` al aceluiași
   element, iar `color` tocmai a fost făcut transparent — deci conturul
   se desenează cu transparent și cuvintele „Dal 2014" nu se văd deloc.
   Se citea ca un gol în bandă, nu ca un bug.

   Culoarea conturului vine dintr-o variabilă proprie, ca secțiunea în
   care stă banda s-o poată schimba fără să știe nimic despre stroke. */
.marquee__item--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--contur, var(--ink));
}
.block-terra, .block-verde, .block-basilico, .block-ink,
.marquee--terra, .marquee--ink { --contur: var(--on-dark); }

/* ---------------------------------------------------------------------
   9. FOTOGRAFIE ÎN MIȘCARE
   --------------------------------------------------------------------- */

/* Cadru cu dezvăluire prin clip-path. Fotografia intră „ștearsă” de jos
   în sus, ca o perdea — nu apare pur și simplu. */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}

.frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out);
}

.reveal-img.is-in { clip-path: inset(0 0 0 0); }

.reveal-img img {
  transform: scale(1.12);
  transition: transform 1.4s var(--ease-out);
}

.reveal-img.is-in img { transform: scale(1); }

/* Deriva pe verticală legată de derulare (parallax) */
.drift { will-change: transform; }

/* Bandă orizontală de fotografii care alunecă în sens opus derulării */
.strip {
  display: flex;
  gap: var(--s-2);
  width: max-content;
  transform: translate3d(var(--shift, 0px), 0, 0);
  will-change: transform;
}

.strip__item {
  width: clamp(190px, 26vw, 380px);
  aspect-ratio: 3 / 4;
  flex: none;
  overflow: hidden;
  background: var(--sand);
}

.strip__item img { width: 100%; height: 100%; object-fit: cover; }
.strip__item:nth-child(even) { aspect-ratio: 4 / 5; align-self: flex-end; }

/* Secțiune fixată: fotografia rămâne pe loc, preparatele se schimbă */
.pin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

.pin__media {
  position: sticky;
  top: clamp(5rem, 12vh, 8rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}

.pin__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .7s var(--ease), transform 1.2s var(--ease-out);
}

.pin__media img.is-on { opacity: 1; transform: scale(1); }

.pin__list { display: flex; flex-direction: column; }

.pin__item {
  padding-block: clamp(var(--s-4), 7vh, var(--s-6));
  border-bottom: 1px solid var(--line);
  opacity: .35;
  transition: opacity .5s var(--ease);
}

.pin__item.is-on { opacity: 1; }

.pin__num {
  font-size: var(--t-micro);
  letter-spacing: .3em;
  color: var(--terra);
  display: block;
  margin-bottom: .6rem;
}

@media (max-width: 900px) {
  .pin { grid-template-columns: 1fr; gap: var(--s-3); }
  .pin__media { position: relative; top: 0; aspect-ratio: 4 / 3; }
  .pin__item { padding-block: var(--s-3); opacity: 1; }
}

/* ---------------------------------------------------------------------
   10. CARDURI DE PREPARAT
   --------------------------------------------------------------------- */
.dish {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}

.dish:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -26px rgba(21, 21, 24,.45);
}

.dish__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}

.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.dish:hover .dish__media img { transform: scale(1.07); }

.dish__badges { position: absolute; top: .7rem; left: .7rem; display: flex; flex-wrap: wrap; gap: .3rem; z-index: 1; }

.badge {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: .32rem .55rem;
  border-radius: var(--radius-r);
  background: var(--cream);
  color: var(--ink);
  white-space: nowrap;
}

.badge--signature { background: var(--terra); color: var(--cream); }
.badge--new       { background: var(--blush); color: var(--ink); }
.badge--chef      { background: var(--verde); color: var(--cream); }
.badge--out       { background: rgba(21, 21, 24,.8); color: var(--cream); }

.dish__body { padding: var(--s-3); display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.dish__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }

.dish__name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.02;
  text-transform: uppercase;
}

.dish__price {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--terra);
  white-space: nowrap;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.dish__desc { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; flex: 1; font-weight: 300; }

.dish__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); padding-top: .55rem;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

/* Rând de meniu */
.dish-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--s-3);
  align-items: start;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur) var(--ease);
}

.dish-row:hover { background: rgba(255,255,255,.55); }

.dish-row__img { width: 96px; height: 96px; object-fit: cover; background: var(--sand); }

.dish-row__price {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--terra);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dish-row__variants { display: flex; flex-direction: column; gap: .15rem; align-items: flex-end; font-size: var(--t-micro); }

@media (max-width: 640px) {
  .dish-row { grid-template-columns: 76px 1fr; gap: var(--s-2); }
  .dish-row__img { width: 76px; height: 76px; }
  .dish-row__price { grid-column: 2; text-align: left; margin-top: .3rem; }
  .dish-row__variants { align-items: flex-start; }
}

/* ---------------------------------------------------------------------
   11. ALERGENI & ETICHETE
   --------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  padding: .3rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-r);
  color: var(--ink-soft);
  background: transparent;
}

.chip--allergen { border-color: rgba(111, 26, 2,.3); color: var(--terra); }
.chip--trace    { border-style: dashed; opacity: .7; }
.chip--diet     { border-color: rgba(24, 73, 10,.32); color: var(--verde); }

.chip--filter {
  cursor: pointer;
  min-height: 38px;
  transition: all var(--dur) var(--ease);
}

.chip--filter:hover { border-color: var(--terra); color: var(--terra); }
.chip--filter.is-on { background: var(--terra); border-color: var(--terra); color: var(--cream); }

.allergen-note {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid rgba(111, 26, 2,.22);
  border-left: 3px solid var(--terra);
  background: rgba(111, 26, 2,.04);
  font-size: var(--t-small);
  color: var(--ink-soft);
  font-weight: 300;
}

/* ---------------------------------------------------------------------
   12. FORMULARE
   --------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .4rem; }

.label {
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
}

.label .req { color: var(--terra); }

.input, .textarea, .select {
  width: 100%;
  min-height: 48px;
  padding: .8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-size: 16px;            /* sub 16px, Safari pe iPhone face zoom la focus */
  font-weight: 300;
  transition: border-color var(--dur) var(--ease);
}

.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--terra); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--err); }
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23241F20' stroke-opacity='.5' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.4rem;
}

.field__error { font-size: var(--t-small); color: var(--err); display: flex; align-items: center; gap: .35rem; }
.field__hint  { font-size: var(--t-small); color: var(--ink-faint); font-weight: 300; }

.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; z-index: -1; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  cursor: pointer;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  font-weight: 300;
  min-height: 44px;
  padding-block: .4rem;
}

.checkbox input {
  appearance: none;
  width: 20px; height: 20px;
  flex: none; margin-top: 2px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: all var(--dur) var(--ease);
}

.checkbox input:checked { background: var(--terra); border-color: var(--terra); }

.checkbox input:checked::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--cream);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* --- Bandă de zile --------------------------------------------------- */
.date-strip {
  display: flex;
  gap: .45rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.date-strip::-webkit-scrollbar { height: 3px; }
.date-strip::-webkit-scrollbar-thumb { background: var(--line); }

.date-chip {
  flex: none;
  scroll-snap-align: start;
  min-width: 76px;
  min-height: 82px;
  padding: .6rem .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.date-chip__dow { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); display: block; }
.date-chip__day { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.05; display: block; margin-top: .1rem; }
.date-chip__mon { font-size: .62rem; color: var(--ink-faint); display: block; text-transform: lowercase; }

.date-chip:hover:not(:disabled) { border-color: var(--terra); }
.date-chip.is-on { background: var(--terra); border-color: var(--terra); color: var(--cream); }
.date-chip.is-on .date-chip__dow, .date-chip.is-on .date-chip__mon { color: rgba(245, 237, 217,.78); }
.date-chip:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

/* --- Intervale orare ------------------------------------------------- */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .45rem; }

.slot {
  min-height: 52px;
  padding: .6rem .4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.slot:hover:not(:disabled) { border-color: var(--terra); color: var(--terra); }
.slot.is-on { background: var(--terra); border-color: var(--terra); color: var(--cream); }
.slot:disabled { opacity: .3; cursor: not-allowed; }

.slot__left { display: block; font-size: .55rem; letter-spacing: .1em; color: var(--terra); margin-top: .15rem; font-weight: 400; }
.slot.is-on .slot__left { color: rgba(245, 237, 217,.85); }

.slots-empty {
  grid-column: 1 / -1;
  padding: var(--s-4);
  text-align: center;
  border: 1px dashed var(--line);
  color: var(--ink-faint);
  font-size: var(--t-small);
  font-weight: 300;
}

.stepper {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.stepper button {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-size: 1.3rem;
  color: var(--ink-soft);
  transition: background var(--dur) var(--ease);
}

.stepper button:hover:not(:disabled) { background: var(--bone); color: var(--ink); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }

.stepper__value {
  min-width: 62px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 52px;
  border-inline: 1px solid var(--line);
}

/* ---------------------------------------------------------------------
   13. RECENZII
   --------------------------------------------------------------------- */
.stars { display: inline-flex; gap: 2px; color: var(--terra); }
.stars svg { width: 15px; height: 15px; }
.stars .off { color: var(--line); }
.block-terra .stars, .block-verde .stars, .block-ink .stars { color: var(--blush); }
.block-terra .stars .off, .block-verde .stars .off, .block-ink .stars .off { color: var(--line-dark); }

.rating-big { font-family: var(--font-display); font-size: clamp(3.4rem, 8vw, 6rem); line-height: .86; color: var(--terra); }
.block-terra .rating-big, .block-verde .rating-big, .block-ink .rating-big { color: var(--blush); }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  position: relative;
  height: 100%;
}

.block-terra .review, .block-verde .review, .block-ink .review {
  background: rgba(245, 237, 217,.07);
  border-color: var(--line-dark);
}

.review__body { font-size: var(--t-small); line-height: 1.65; color: var(--ink-soft); flex: 1; font-weight: 300; }
.block-terra .review__body, .block-verde .review__body, .block-ink .review__body { color: var(--on-dark-soft); }

.review__author {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); flex-wrap: wrap;
}

.block-terra .review__author, .block-verde .review__author, .block-ink .review__author {
  color: var(--on-dark-faint); border-top-color: var(--line-dark);
}

.review__verified { color: var(--verde); display: inline-flex; align-items: center; gap: .25rem; }
.block-terra .review__verified, .block-verde .review__verified, .block-ink .review__verified { color: var(--blush); }

.review__reply {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--terra);
  background: rgba(111, 26, 2,.05);
  font-size: var(--t-small);
  font-weight: 300;
}

.rating-bar {
  display: grid;
  grid-template-columns: 2.4rem 1fr 2.4rem;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.block-terra .rating-bar, .block-verde .rating-bar, .block-ink .rating-bar { color: var(--on-dark-faint); }

.rating-bar__track { height: 3px; background: var(--line); overflow: hidden; }
.block-terra .rating-bar__track, .block-verde .rating-bar__track, .block-ink .rating-bar__track { background: var(--line-dark); }

.rating-bar__fill { height: 100%; background: var(--terra); transform-origin: left; animation: barGrow 1s var(--ease-out) both; }
.block-terra .rating-bar__fill, .block-verde .rating-bar__fill, .block-ink .rating-bar__fill { background: var(--blush); }

@keyframes barGrow { from { transform: scaleX(0); } }

.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }

.star-input label {
  cursor: pointer;
  color: var(--line);
  padding: 4px;
  transition: color .2s var(--ease), transform .2s var(--ease);
}

.star-input label svg { width: 28px; height: 28px; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--terra); }
.star-input label:hover { transform: scale(1.1); }

/* ---------------------------------------------------------------------
   14. GALERIE
   --------------------------------------------------------------------- */
.gallery-grid { columns: 3 280px; column-gap: var(--s-2); }

.gallery-grid figure {
  break-inside: avoid;
  margin-bottom: var(--s-2);
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--sand);
}

.gallery-grid img { width: 100%; transition: transform 1s var(--ease-out); }
.gallery-grid figure:hover img { transform: scale(1.05); }

.gallery-grid figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-3) var(--s-2) var(--s-2);
  background: linear-gradient(to top, rgba(21, 21, 24,.9), transparent);
  font-size: var(--t-small);
  color: var(--cream);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.gallery-grid figure:hover figcaption { opacity: 1; transform: translateY(0); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(21, 21, 24,.97);
  backdrop-filter: blur(12px);
  display: grid; place-items: center;
  padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(100%, 1200px); max-height: 84vh; object-fit: contain; }

.lightbox__close, .lightbox__nav {
  position: absolute;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--cream);
  transition: all var(--dur) var(--ease);
}

.lightbox__close { top: var(--gutter); right: var(--gutter); }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--cream); color: var(--ink); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--gutter); }
.lightbox__nav--next { right: var(--gutter); }

@media (max-width: 700px) {
  .lightbox__nav { display: none; }
  .gallery-grid { columns: 2 150px; }
}

/* ---------------------------------------------------------------------
   15. HARTĂ & CONTACT
   --------------------------------------------------------------------- */
.map-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bone);
}

.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) sepia(.12) contrast(1.02); }
.map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s-4); }

.info-line { display: flex; gap: var(--s-3); padding-block: var(--s-3); border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.info-line__icon { color: var(--terra); flex: none; margin-top: 3px; }

.info-line__label {
  font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); display: block; margin-bottom: .2rem;
}

.hours-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.hours-table td { padding-block: .6rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); font-weight: 300; }
.hours-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.hours-table tr.is-today td { color: var(--terra); font-weight: 500; }

.block-terra .hours-table td, .block-verde .hours-table td, .block-ink .hours-table td {
  color: var(--on-dark-soft); border-bottom-color: var(--line-dark);
}
.block-terra .hours-table tr.is-today td { color: var(--blush); }

/* ---------------------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--on-dark); padding-block: var(--s-6) var(--s-4); }

.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s-5) var(--s-4); }

@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s-4); } }

.footer__logo {
  display: block;
  width: min(100%, 230px);
  aspect-ratio: 3334 / 970;
  background: var(--cream);
  -webkit-mask: var(--logo-main) left center / contain no-repeat;
  mask: var(--logo-main) left center / contain no-repeat;
  margin-bottom: var(--s-3);
}

.footer__title {
  font-size: var(--t-micro); letter-spacing: .26em; text-transform: uppercase;
  color: var(--on-dark-faint); margin-bottom: var(--s-3);
}

.footer__list { display: flex; flex-direction: column; gap: .6rem; font-size: var(--t-small); font-weight: 300; }
.footer__list a { color: var(--on-dark-soft); transition: color var(--dur) var(--ease); min-height: 32px; display: inline-flex; align-items: center; }
.footer__list a:hover { color: var(--blush); }

.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-micro); letter-spacing: .12em;
  color: var(--on-dark-faint);
}

.social { display: flex; gap: var(--s-2); }

.social a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--on-dark-soft);
  transition: all var(--dur) var(--ease);
}

.social a:hover { border-color: var(--blush); color: var(--blush); transform: translateY(-2px); }

/* Ștampila din identitate, ca semnătură în footer */
.stamp {
  display: block;
  width: clamp(88px, 12vw, 130px);
  aspect-ratio: 1;
  background: var(--blush);
  -webkit-mask: var(--logo-stamp) center / contain no-repeat;
  mask: var(--logo-stamp) center / contain no-repeat;
  opacity: .9;
  animation: spin 46s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   17. MESAJE
   --------------------------------------------------------------------- */
.flash {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3);
  font-size: var(--t-small);
  border: 1px solid;
  border-left-width: 3px;
  margin-bottom: var(--s-3);
  animation: flashIn .5s var(--ease-out) both;
}

@keyframes flashIn { from { opacity: 0; transform: translateY(-8px); } }

.flash--success { background: rgba(24, 73, 10,.06);  border-color: rgba(24, 73, 10,.3);  color: var(--verde); }
.flash--error   { background: rgba(179,64,31,.06); border-color: rgba(179,64,31,.32); color: var(--err); }
.flash--info    { background: rgba(111, 26, 2,.05); border-color: rgba(111, 26, 2,.28); color: var(--terra); }

/* ---------------------------------------------------------------------
   18. DEZVĂLUIRE LA SCROLL
   --------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* Titlu care intră literă cu literă */
.split span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .8s var(--ease-out), opacity .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 26ms);
}

.split.is-in span { transform: none; opacity: 1; }
.split-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; }

.progress {
  position: fixed; top: 0; left: 0;
  height: 2px; background: var(--terra);
  z-index: 101; transform-origin: left; transform: scaleX(0);
  transition: transform .1s linear;
}

/* ---------------------------------------------------------------------
   19. UTILITARE
   --------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; top: -100px; left: var(--s-3); z-index: 300;
  padding: .8rem 1.2rem; background: var(--terra); color: var(--cream);
  font-size: var(--t-small); transition: top .2s var(--ease);
}

.skip:focus { top: var(--s-3); }

.text-center { text-align: center; }
.mt-auto { margin-top: auto; }
@media (max-width: 760px) { .hide-sm { display: none !important; } }

.divider-dots {
  flex: 1; height: 1px; min-width: 16px;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 6px 1px; background-repeat: repeat-x;
  align-self: flex-end; margin-bottom: .45rem;
}

/* ---------------------------------------------------------------------
   20. TABLETĂ ȘI TELEFON
   Nu doar „se strânge” — se reconfigurează: mai puțină mișcare, mai
   puține coloane, ținte de atingere mai mari.
   --------------------------------------------------------------------- */

/* Tabletă */
@media (min-width: 641px) and (max-width: 1024px) {
  :root { --gutter: clamp(1.4rem, 4vw, 2.5rem); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { min-height: 78svh; }
  .gallery-grid { columns: 2 240px; }
}

/* Telefon */
@media (max-width: 640px) {
  :root {
    --gutter: 1.1rem;
    --s-5: 2.2rem; --s-6: 3.2rem; --s-7: 4.2rem; --s-8: 5.5rem;
  }

  .hero {
    min-height: 88svh;
    padding-bottom: var(--s-5);
  }

  /* Pe telefon, Ken Burns consumă baterie fără să adauge mult:
     îl încetinim și îi reducem amplitudinea. */
  .hero__media img { animation-duration: 40s; }
  @keyframes kenburns {
    from { transform: scale(1.06) translate3d(0,0,0); }
    to   { transform: scale(1.12) translate3d(-1%, -1.2%, 0); }
  }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .section-head--split { flex-direction: column; align-items: flex-start; }

  .strip__item { width: 62vw; }
  .marquee__item { font-size: clamp(1.4rem, 9vw, 2.2rem); }

  /* Butoanele principale ocupă lățimea — degetul mare ajunge la ele */
  .hero__actions .btn { flex: 1 1 100%; }

  .footer { padding-block: var(--s-5) var(--s-4); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

/* Ecrane foarte înguste (iPhone SE, 320px) */
@media (max-width: 360px) {
  :root { --gutter: .9rem; }
  .date-chip { min-width: 68px; }
  .slots { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* Dispozitive fără hover (touch): efectele de hover devin zgomot */
@media (hover: none) {
  .dish:hover { transform: none; box-shadow: none; }
  .dish:hover .dish__media img { transform: none; }
  .gallery-grid figure:hover img { transform: none; }
  .gallery-grid figcaption { opacity: 1; transform: none; }
  .btn:hover::before { transform: scaleY(0); }
  .btn:hover { color: inherit; }
  .btn--primary:hover { color: var(--cream); }
}

/* Ecrane late: lăsăm marchiza și benzile să respire */
@media (min-width: 1600px) {
  :root { --wide: 1560px; }
}

/* ---------------------------------------------------------------------
   21. NUTRIȚIE, ALERGENI, DECLARAȚIE
   Informația obligatorie prin lege. Regula de aur aici e lizibilitatea,
   nu efectul: tabelul trebuie citit de cineva cu telefonul în mână,
   la lumină slabă, într-un restaurant.
   --------------------------------------------------------------------- */

/* Caseta de alergeni — mereu deschisă, niciodată sub un buton */
.allergen-box {
  padding: var(--s-3);
  border: 1px solid rgba(111, 26, 2, .22);
  border-left: 3px solid var(--terra);
  background: rgba(111, 26, 2, .05);
}

.allergen-box__h { color: var(--terra); margin-bottom: var(--s-2); }

/* Panoul nutrițional — <details>, deci merge fără JavaScript */
.nutri { border: 1px solid var(--line); background: var(--surface); }

.nutri__btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  padding: .95rem var(--s-3);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background var(--dur) var(--ease);
  /* țintă de atins cu degetul, nu cu mausul */
  min-height: 48px;
}

.nutri__btn::-webkit-details-marker { display: none; }
.nutri__btn:hover  { background: var(--bg-alt); }
.nutri__btn:focus-visible { outline: 2px solid var(--terra); outline-offset: -2px; }

/* Semnul + care devine − la deschidere. Două linii, fără icon-font. */
.nutri__btn-icon {
  position: relative; flex: 0 0 auto;
  width: 14px; height: 14px;
}
.nutri__btn-icon::before,
.nutri__btn-icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: var(--terra);
  transition: transform var(--dur) var(--ease);
}
.nutri__btn-icon::after { transform: rotate(90deg); }
.nutri[open] .nutri__btn-icon::after { transform: rotate(0deg); }
.nutri[open] .nutri__btn { background: var(--bg-alt); border-bottom: 1px solid var(--line); }

.nutri__panel { padding: var(--s-3); display: grid; gap: var(--s-3); }
.nutri__block { display: grid; gap: .5rem; }

.nutri__h {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.nutri__ing { font-size: var(--t-small); line-height: 1.55; }

.nutri__flag {
  font-size: var(--t-small);
  color: var(--terra);
  font-weight: 500;
}

.nutri__add { list-style: none; padding: 0; font-size: var(--t-small); line-height: 1.55; }
.nutri__add-cat { color: var(--ink-faint); }

/* Tabelul se poate lăți mai mult decât ecranul — atunci și numai
   atunci capătă propriul scroll orizontal. Pagina nu se mișcă. */
.nutri__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.nutri__t, .decl__t {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.nutri__t th, .nutri__t td,
.decl__t th, .decl__t td {
  padding: .5rem .6rem;
  text-align: right;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.nutri__t thead th, .decl__t thead th {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}

.nutri__t th[scope="row"], .decl__t th[scope="row"] {
  text-align: left; font-weight: 400; white-space: normal;
}

.nutri__t thead th:first-child, .decl__t thead th:first-child { text-align: left; }
.nutri__row--sub th[scope="row"] { padding-left: 1.4rem; color: var(--ink-soft); }
.nutri__row--energy th, .nutri__row--energy td { font-weight: 500; }

.nutri__note, .decl__est {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--ink-faint);
}

.nutri__legal {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--ink-faint);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
}

/* Pagina de declarație completă */
.notice {
  padding: var(--s-3);
  border-left: 3px solid var(--terra);
  background: var(--bg-alt);
  display: grid; gap: .6rem;
  font-size: var(--t-small);
  line-height: 1.6;
}

.decl__cat { padding-block: var(--s-4); border-top: 1px solid var(--line); }

.decl__cat-name {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
}

.decl {
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  display: grid; gap: .45rem;
  break-inside: avoid;
}

.decl__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.decl__name { font-size: 1.05rem; }
.decl__price { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.decl__line { font-size: var(--t-small); line-height: 1.55; }

.decl__label {
  display: inline-block; min-width: 7.5rem;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.decl__line--allergen { color: var(--terra); }
.decl__line--flag     { color: var(--terra); }
.decl__t { margin-top: .5rem; }

/* La tipărire: tot deschis, fără cerneală irosită */
@media print {
  .nutri, .nutri[open] { border-color: #999; }
  .nutri__panel { display: grid !important; }
  .nutri__btn { display: none; }
  .no-print, .nav, .footer, .progress { display: none !important; }
  .nutri__scroll { overflow: visible; }
  .decl { page-break-inside: avoid; }
  body { background: #fff; }
  a[href^="/"]::after { content: ""; }
}

/* ---------------------------------------------------------------------
   22. MASA (QR), SALĂ, FOAIA DE CODURI
   Trei ecrane cu trei contexte complet diferite de folosire — și de
   aceea trei tratamente diferite, nu același stil peste tot.
   --------------------------------------------------------------------- */

/* --- Pagina clientului, deschisă de pe telefon, la masă --- */
.tbl { padding-block: var(--s-6) var(--s-5); min-height: 100svh; }
.tbl__head { text-align: center; display: grid; gap: .4rem; margin-bottom: var(--s-4); }
.tbl__head .eyebrow { justify-content: center; }
.tbl__code { font-size: clamp(2.6rem, 14vw, 4.4rem); }

.tbl__actions { display: grid; gap: .6rem; }

.tbl__btn {
  display: grid; gap: .15rem;
  text-align: left;
  padding: 1.05rem var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--terra);
  transition: background var(--dur) var(--ease), transform .12s var(--ease);
  /* 64px: se apasă cu degetul mare, în mișcare, fără să nimerești greșit */
  min-height: 64px;
}

.tbl__btn:active { transform: scale(.985); }
.tbl__btn[disabled] { opacity: .55; }

.tbl__btn-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  line-height: 1;
}

.tbl__btn-hint { font-size: var(--t-small); color: var(--ink-faint); }
.tbl__btn.is-sending { opacity: .6; }
.tbl__btn.is-done { border-left-color: var(--verde); background: var(--bg-alt); }

.tbl__other { margin-top: .6rem; }

.tbl__other-btn {
  list-style: none; cursor: pointer;
  padding: .9rem var(--s-3);
  border: 1px dashed var(--line);
  font-size: var(--t-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  min-height: 48px;
  display: flex; align-items: center; justify-content: center;
}

.tbl__other-btn::-webkit-details-marker { display: none; }
.tbl__other-panel { display: grid; gap: .6rem; padding: var(--s-3) 0; }

.tbl__status {
  margin-top: var(--s-3);
  padding: 0; max-height: 0; overflow: hidden;
  text-align: center;
  font-size: var(--t-small);
  transition: max-height .3s var(--ease), padding .3s var(--ease);
}

.tbl__status.is-on { max-height: 8rem; padding: .85rem var(--s-3); border: 1px solid var(--line); }
.tbl__status--ok  { border-color: var(--verde) !important; color: var(--verde); }
.tbl__status--err { border-color: var(--err) !important; color: var(--err); }

.tbl__links { display: grid; gap: .5rem; margin-top: var(--s-4); }
.btn--wide { width: 100%; justify-content: center; text-align: center; }
.tbl__foot { margin-top: var(--s-4); text-align: center; line-height: 1.8; letter-spacing: .1em; }

/* --- Ecranul de sală, privit de la doi metri --- */
.floor { padding-block: var(--s-5); }

.floor__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.floor__title { font-size: var(--t-h2); }

.floor__live {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
}

.floor__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde);
  animation: floorPulse 2s infinite;
}

@keyframes floorPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.floor__list { display: grid; gap: .6rem; }

.floor__empty {
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-faint);
  border: 1px dashed var(--line);
}

.call {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--verde);
}

/* Culoarea urcă singură cu timpul de așteptare. Nimeni nu trebuie să
   citească secundele ca să vadă care masă e problema. */
.call--warn { border-left-color: var(--ember); }
.call--late { border-left-color: var(--err); background: rgba(179, 64, 31, .05); }
.call--ack  { opacity: .72; }

.call__table {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  text-transform: uppercase;
}

.call__type { font-weight: 500; }
.call__meta { font-size: var(--t-small); color: var(--ink-faint); }

.call__time {
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  color: var(--ink-soft);
}

.call--late .call__time { color: var(--err); font-weight: 500; }

/* --- Comanda pe ecranul de sală --- */

/* O comandă e mai înaltă decât o chemare: are linii. Cardul nu mai
   centrează pe verticală, altfel numărul mesei plutește pe la mijlocul
   unei liste de opt preparate, în loc să stea în dreptul primului. */
.call--comanda { align-items: start; }
.call--comanda .call__table { padding-top: .1rem; }

.call__linii {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  display: grid;
  gap: .18rem;
}

.call__linii li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .45rem;
  align-items: baseline;
  font-size: 1.05rem;
  line-height: 1.35;
}

/* Denumirea, stația și nota stau împreună în coloana a doua. Când se
   rupe rândul, se rup ele între ele — niciodată între cantitate și
   preparatul ei. */
.call__linie-corp {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
  min-width: 0;
}

/* Cantitatea, prima și în coloană proprie: de la doi metri se citește
   „3×" înainte de denumire, iar coloana fixă face ca două trei-uri să
   se vadă unul sub altul, nu împrăștiate după lungimea denumirii. */
.call__qty {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.call__nume { font-weight: 500; }

.call__statie,
.call__linie-nota {
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  padding: .05rem .35rem;
}

/* Nota clientului NU e o etichetă tehnică: e o cerere („fără ceapă").
   De asta rămâne cu literele ei, nu cu majuscule de sistem. */
.call__linie-nota {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
  border-color: var(--ember);
}

.call__nota {
  margin: .45rem 0 0;
  font-size: var(--t-small);
  color: var(--ink);
  border-left: 3px solid var(--ember);
  padding-left: .5rem;
}

.call--comanda .call__meta { margin-top: .4rem; }
.call__act { display: flex; gap: .4rem; flex-wrap: wrap; }
.call__ackd { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

.floor__tables { margin-top: var(--s-4); }
.floor__tables summary { cursor: pointer; font-size: var(--t-small); color: var(--ink-faint); padding: .6rem 0; }
.floor__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; margin-top: var(--s-2); }

.floor__table {
  padding: .6rem; text-align: center;
  border: 1px solid var(--line); background: var(--surface);
  display: grid; gap: .1rem;
}

.floor__table-code { font-family: var(--font-display); font-size: 1.1rem; }
.floor__table-sec  { font-size: var(--t-micro); color: var(--ink-faint); }

.floor__table[data-status="seated"]         { border-left: 3px solid var(--ember); }
.floor__table[data-status="reserved"]       { border-left: 3px solid var(--sand); }
.floor__table[data-status="ordered"],
.floor__table[data-status="food_served"]    { border-left: 3px solid var(--verde); }
.floor__table[data-status="bill_requested"] { border-left: 3px solid var(--terra); }
.floor__table[data-status="blocked"]        { opacity: .5; }

.pin__input { text-align: center; font-size: 1.6rem; letter-spacing: .5em; }
.pin__err { color: var(--err); font-size: var(--t-small); }

/* --- Foaia de coduri --- */
.qrs { padding-block: var(--s-5); }
.qrs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }

.qrs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.qrs__card {
  display: grid; gap: .6rem; justify-items: center;
  padding: var(--s-3);
  background: #fff;
  border: 1px dashed #9a9a9a;   /* linia de tăiere */
  text-align: center;
  break-inside: avoid;
}

.qrs__brand { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; }

/* Marginea albă face parte din cod: fără ea, scanerele confundă
   marginea codului cu ce e în jurul lui. */
.qrs__code { padding: 8px; background: #fff; }
.qrs__code svg { width: 148px; height: 148px; display: block; }

.qrs__cap { display: grid; gap: .1rem; }
.qrs__table { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.qrs__sec { font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: #777; }
.qrs__cta { font-size: var(--t-micro); line-height: 1.5; color: #666; }

@media print {
  .qrs { padding: 0; }
  .qrs__grid { grid-template-columns: repeat(3, 1fr); gap: 6mm; }
  .qrs__card { border-style: dashed; border-color: #bbb; }
  @page { margin: 10mm; }
}

/* --- Telefon --- */
@media (max-width: 640px) {
  .call {
    grid-template-columns: 4.2rem 1fr;
    grid-template-areas:
      "table body"
      "time  act";
    row-gap: .6rem;
  }
  .call__table { grid-area: table; }
  .call__body  { grid-area: body; }
  .call__time  { grid-area: time; }
  .call__act   { grid-area: act; justify-content: flex-end; }

  .decl__label { display: block; min-width: 0; margin-bottom: .1rem; }
  .qrs__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .qrs__code svg { width: 118px; height: 118px; }
}

/* Pagina unui preparat: fotografia lângă informații pe ecran lat, una
   sub alta pe telefon. Regula stă aici, nu inline, tocmai ca media
   query-ul de mai jos s-o poată rescrie. */
.product__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

.product__info { min-width: 0; }

@media (max-width: 860px) {
  .product__layout { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* Pe telefon, coloana cu numele nutrientului are nevoie de lățime
   minimă: altfel „din care acizi grași saturați” se rupe în patru
   rânduri și strică alinierea cifrelor de lângă. Dacă tabelul depășește
   ecranul, se derulează el, nu pagina. */
@media (max-width: 640px) {
  .nutri__t th[scope="row"] { min-width: 8.5rem; }
  .nutri__t th, .nutri__t td { padding: .45rem .5rem; }
}

/* Umbră care apare doar când tabelul chiar are ce derula.
   Tehnica: două straturi „local” (albe, se mișcă odată cu conținutul)
   acoperă două straturi „scroll” (degradeuri, fixe față de container).
   Când ești la capăt, stratul alb ascunde degradeul — deci umbra apare
   exact când mai e conținut dincolo de margine, fără JavaScript. */
.nutri__scroll {
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(21, 21, 24,.14), rgba(21, 21, 24,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(21, 21, 24,.14), rgba(21, 21, 24,0)) right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* =====================================================================
   MENIUL DIGITAL — cele cinci variante de afișare
   =====================================================================
   Toate arată aceleași date. Se schimbă densitatea și ce se vede întâi.
   Regulile comune (etichete de alergeni, prețuri) stau în blocurile
   existente mai sus; aici e doar ce e propriu fiecărei variante.
   ===================================================================== */

/* ---- Comutatorul de vedere ---------------------------------------- */
.vedere {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  padding-block: .5rem;
}
.vedere__l {
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: .5rem;
}
.vedere__b {
  font-size: var(--t-small); line-height: 1; padding: .48rem .8rem;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: color .18s, border-color .18s, background-color .18s;
}
.vedere__b:hover { color: var(--ink); border-color: var(--ink-faint); }
.vedere__b.is-on {
  background: var(--verde); border-color: var(--verde); color: var(--cream);
}

.chips--tight { gap: .25rem; }
.chip--gram { font-variant-numeric: tabular-nums; }

/* =====================================================================
   1 · CARTA — ca meniul tipărit
   ===================================================================== */
.carta__grup { padding-block: var(--s-5) var(--s-3); }
.carta__cap { margin-bottom: var(--s-3); border-bottom: 2px solid var(--ink); padding-bottom: .6rem; }
.carta__titlu {
  font-family: var(--font-display); font-size: var(--t-h2); line-height: 1;
  text-transform: uppercase; margin: 0;
}
.carta__sub { font-size: var(--t-small); color: var(--ink-soft); margin: .3rem 0 0; font-style: italic; }

/* Două coloane pe lat, una pe telefon — ca deschiderea unui carnet. */
.carta__coloane { columns: 2; column-gap: var(--s-5); }
@media (max-width: 860px) { .carta__coloane { columns: 1; } }

.carta__sectiune {
  break-inside: avoid-column;
  margin-bottom: var(--s-4);
  /* `inline-block` + lățime plină: fără el, Firefox rupe secțiunea
     între coloane în ciuda lui break-inside. */
  display: inline-block; width: 100%;
}
.carta__sectiune-titlu {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .1em;
  text-transform: uppercase; margin: 0 0 .7rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--line);
}
.carta__sectiune-sub {
  display: block; font-family: var(--font-body); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: none; color: var(--ink-faint);
  font-style: italic; margin-top: .15rem;
}

.carta__rand { margin-bottom: .85rem; break-inside: avoid; }
.carta__linie { display: flex; align-items: baseline; gap: .4rem; }
.carta__nume {
  font-weight: 500; color: var(--ink); text-decoration: none;
  text-underline-offset: 3px;
}
.carta__nume:hover { text-decoration: underline; }
.carta__punctat {
  flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-.22em);
}
.carta__pret { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.carta__desc { font-size: var(--t-small); color: var(--ink-soft); margin: .15rem 0 .3rem; max-width: 52ch; }
.carta__gram { color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =====================================================================
   2 · VETRINA — fotografia întâi
   ===================================================================== */
.vetrina__grup {
  font-family: var(--font-display); font-size: var(--t-h2); text-transform: uppercase;
  line-height: 1; margin: 0;
}
.vetrina__sectiune {
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 var(--s-2);
}
.vetrina__grila {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-3);
}
.vetrina__card { display: flex; flex-direction: column; }

.vetrina__foto {
  position: relative; display: block; aspect-ratio: 4 / 3; max-width: 100%;
  overflow: hidden; background: var(--bg-alt);
}
.vetrina__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fără fotografie: o placă de culoare cu inițiala. Arată voit, nu
   stricat — și nu minte despre ce arată preparatul. */
.vetrina__foto--fara { display: grid; place-items: center; }
.vetrina__initiala {
  font-family: var(--font-display); font-size: 5rem; line-height: 1;
  color: rgba(245, 237, 217, .22); user-select: none;
}
.vetrina__peste {
  position: absolute; inset: auto 0 0 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: .6rem;
  padding: 2.5rem .8rem .7rem;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
  color: #fff;
}
.vetrina__nume { font-weight: 500; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.vetrina__pret { font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.vetrina__jos { padding: .6rem .1rem 0; display: flex; flex-direction: column; gap: .4rem; }
.vetrina__desc { font-size: var(--t-small); color: var(--ink-soft); margin: 0; }

/* =====================================================================
   3 · LISTA — dens și rapid
   ===================================================================== */
.lst__grup {
  font-family: var(--font-display); font-size: var(--t-h3); text-transform: uppercase;
  letter-spacing: .06em; margin: var(--s-4) 0 var(--s-1);
}
.lst__sectiune { padding-block: var(--s-2); }
.lst__titlu {
  display: flex; align-items: baseline; gap: .5rem;
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 .4rem;
}
.lst__nr { font-family: var(--font-body); font-size: var(--t-micro); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.lst__randuri { border-top: 1px solid var(--line-soft); }
.lst__rand {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
}
.lst__rand:hover { background: var(--bg-alt); }
.lst__poza { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; display: block; }
.lst__poza--fara { background: var(--bg-alt); border: 1px solid var(--line-soft); }
.lst__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.lst__nume { font-size: var(--t-small); font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.lst__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: var(--t-micro); }
.lst__gram { color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lst__pret { font-size: var(--t-small); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }

/* =====================================================================
   4 · SCHEDA — un preparat pe ecran
   ===================================================================== */
.sch__bara {
  display: flex; align-items: baseline; gap: .4rem;
  padding-block: var(--s-2); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.sch__pozitie { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0; color: var(--ink); }
.sch__hint { margin-left: auto; }

/* Trecerea cu degetul o face CSS-ul, nu JavaScript-ul: merge și când
   scriptul nu s-a încărcat. */
.sch__pista {
  /* `flex-start`, nu întinderea implicită: altfel toate fișele capătă
     înălțimea celei mai înalte, iar un preparat fără poză și fără valori
     nutriționale ajunge un dreptunghi gol cu un link în subsol. */
  display: flex; align-items: flex-start; gap: var(--s-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter); padding-block: var(--s-2) var(--s-4);
  -webkit-overflow-scrolling: touch;
}
.sch__fisa { scroll-snap-align: center; flex: 0 0 min(560px, 88vw); }
.sch__interior {
  height: 100%; display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--surface); border: 1px solid var(--line);
  padding: var(--s-3);
}
.sch__sectiune { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.sch__nume { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.05; margin: .2rem 0 0; }
.sch__linie { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.sch__pret { font-size: 1.2rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.sch__gram { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sch__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; max-width: 100%; }
.sch__bloc { display: flex; flex-direction: column; gap: .35rem; }
.sch__eticheta {
  font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.sch__estimativ { font-style: normal; color: var(--terra); letter-spacing: .1em; }
.sch__desc { font-size: var(--t-small); color: var(--ink-soft); margin: 0; }
.sch__nutri { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.sch__nutri div { text-align: center; border: 1px solid var(--line-soft); padding: .45rem .2rem; }
.sch__nutri b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.sch__nutri span { font-size: var(--t-micro); color: var(--ink-faint); }
.sch__mai {
  margin-top: auto; font-size: var(--t-small); color: var(--terra);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Fără JavaScript și pe ecran îngust, fișele stau una sub alta. */
@media (max-width: 560px) {
  .sch__fisa { flex: 0 0 92vw; }
}

/* =====================================================================
   5 · TAVOLA — tot meniul, cu filtre
   ===================================================================== */
.tav__grup {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-family: var(--font-display); font-size: var(--t-h3); text-transform: uppercase;
  margin: var(--s-4) 0 var(--s-1); padding-bottom: .4rem;
  border-bottom: 2px solid var(--ink);
}
.tav__nr { font-family: var(--font-body); font-size: var(--t-micro); color: var(--ink-faint); letter-spacing: .1em; }
.tav__sectiune { padding-block: var(--s-2); }
.tav__titlu {
  font-family: var(--font-display); font-size: .92rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .5rem;
}
.tav__grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-2) var(--s-3); }
.tav__cel { display: flex; flex-direction: column; gap: .2rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-soft); }
.tav__nume { font-size: var(--t-small); font-weight: 500; color: var(--ink); text-decoration: none; }
.tav__nume:hover { text-decoration: underline; text-underline-offset: 3px; }
.tav__linie { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; font-size: var(--t-micro); }
.tav__pret { font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.tav__gram, .tav__kcal { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tav__desc { font-size: var(--t-micro); line-height: 1.4; color: var(--ink-soft); margin: .1rem 0 .2rem; }

/* Un carnet rămas fără nicio secțiune vizibilă dispare și el — altfel
   filtrul „fără gluten" lasă în pagină titlul „PIZZA" urmat de nimic. */
[data-group][hidden] { display: none !important; }

/* Alergeni deduși din text, neconfirmați încă de bucătărie. Marcați
   diferit: o listă propusă de un program nu are voie să arate la fel ca
   una verificată de un om. */
.chip--auto {
  border-style: dashed;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

/* =====================================================================
   IDENTITATEA DE PE INSTAGRAM, ADUSĂ PE SITE
   =====================================================================
   Trei lucruri lipseau, și toate trei sunt vizibile în poza de profil:
   perechea verde–roz, italiana ca registru de căldură, și tăcerea.
   ===================================================================== */

/* Semnătura în italiană — cuvintele lor din biografia contului.
   Mică, cu literă mică, în roz: exact tonul din care e făcută. */
.firma {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--blush);
  text-transform: lowercase;
}
/* Numele celuilalt local NU se scrie cu literă mică. Biografia de pe
   Instagram îl scrie „Trattorian Artisan Food"; e un nume propriu, al
   altcuiva, și nu are voie să cadă victimă unui text-transform. */
.firma span { font-style: normal; letter-spacing: .06em; text-transform: none; }

/* Perechea verde + roz.

   Pe Instagram, marca „ITALIEN" e scrisă în roz peste un cerc verde
   închis. Pe site, verdele era folosit doar pentru „e bine, a mers" —
   niciodată ca suprafață de brand. Aici devine ce e acolo: fundalul pe
   care stă numele.

   Roz-ul rămâne exclusiv pe închis. Pe crem, #FF94C7 n-are contrast
   pentru text și, mai important, nu așa e folosit la tipar. */
.block-basilico {
  background: var(--verde);
  color: var(--on-dark);
}
.block-basilico .eyebrow,
.block-basilico .link-arrow,
.block-basilico .gold,
.block-basilico .italic { color: var(--blush); }
.block-basilico .lead   { color: rgba(245, 237, 217, .78); }
.block-basilico .dim    { color: rgba(245, 237, 217, .56); }

/* Rândul care spune totul pe Instagram: ce, cât de des, unde.
   Fără adjective — alea sunt ale altor restaurante. */
.zilnic {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1.2rem;
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.block-basilico .zilnic,
.block-ink .zilnic,
.block-terra .zilnic { color: rgba(245, 237, 217, .5); }

/* ---------------------------------------------------------------------
   16. PLANUL SĂLII — mesele desenate unde stau
   ---------------------------------------------------------------------

   CULORILE STĂRILOR
   Sunt alese să se deosebească între ele de la doi metri, pe o tabletă
   cu ecranul plin de amprente, sub lumină caldă de restaurant. De asta
   nu sunt culorile pastelate ale mărcii: aici contează să se vadă, nu
   să fie frumos. Fiecare masă poartă și litera stării, fiindcă unul din
   doisprezece bărbați nu deosebește roșul de verde, iar ospătarii nu
   sunt aleși după vederea culorilor.
   --------------------------------------------------------------------- */
:root {
  --st-libera:  #E8E2D0;   /* nimic de făcut: aproape culoarea hârtiei */
  --st-rezerv:  #3E6E8E;   /* albastru: e vorba de viitor, nu de acum   */
  --st-ocupata: #C79A2E;   /* ocru: lumea mănâncă                       */
  --st-comanda: #D9720E;   /* portocaliu: bucătăria are treabă          */
  --st-servita: #8A7B3F;   /* ocru stins: s-a servit, masa curge        */
  --st-nota:    #B3401F;   /* roșu: cineva vrea să plece și așteaptă    */
  --st-platita: #2F7A5A;   /* verde-albastru: s-a încheiat cu bine      */
  --st-strans:  #7A7468;   /* gri: treabă de bus-boy                    */
  --st-blocata: #3A3A3E;   /* gri închis: nu se folosește azi           */
}

.plan__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3);
}
.plan__title { font-size: var(--t-h2); margin: .2rem 0 0; }

.plan__sectiuni { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--s-2); }
.plan__sec {
  font: inherit; font-size: var(--t-small); letter-spacing: .06em; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line);
}
.plan__sec.is-activ { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Pânza: proporția vine din baza de date, prin `aspect-ratio` pus în
   pagină. Aici doar o încadrăm și îi dăm un fundal de podea. */
.plan__panza {
  display: none;
  position: relative;
  width: 100%;
  max-height: 72vh;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 5% 5%,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 5% 5%,
    var(--bg-alt);
  overflow: hidden;
}
.plan__panza.is-activ { display: block; }

.plan__masa {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1em;
  border: 2px solid rgba(21,21,24,.28);
  background: var(--st-libera);
  color: var(--ink);
  font: inherit;
  font-size: clamp(.6rem, 1.5vw, .85rem);
  line-height: 1.05;
  cursor: pointer;
  padding: 0;
  transition: filter .15s var(--ease-out, ease), transform .15s ease;
}
.plan__masa:hover { filter: brightness(1.06); }
.plan__masa:active { transform: scale(.97); }

/* Formele sunt cele din baza de date. O masă rotundă desenată pătrat
   face planul să nu semene cu sala, iar atunci nu-l mai folosește
   nimeni. */
.plan__masa--round,
.plan__masa--oval  { border-radius: 50%; }
.plan__masa--square,
.plan__masa--rect  { border-radius: 6px; }
.plan__masa--booth { border-radius: 6px 6px 18px 18px; }
.plan__masa--bar   { border-radius: 999px; }

.plan__masa--libera  { background: var(--st-libera); }
.plan__masa--rezerv  { background: var(--st-rezerv);  color: var(--cream); border-color: rgba(0,0,0,.25); }
.plan__masa--ocupata { background: var(--st-ocupata); }
.plan__masa--comanda { background: var(--st-comanda); color: var(--cream); }
.plan__masa--servita { background: var(--st-servita); color: var(--cream); }
.plan__masa--nota    { background: var(--st-nota);    color: var(--cream); }
.plan__masa--platita { background: var(--st-platita); color: var(--cream); }
.plan__masa--strans  { background: var(--st-strans);  color: var(--cream); }
.plan__masa--blocata { background: var(--st-blocata); color: var(--on-dark-soft); }

.plan__cod   { font-family: var(--font-display); font-size: 1.25em; letter-spacing: .02em; }
.plan__scurt { display: none; }
.plan__timp  { font-size: .78em; opacity: .75; }

/* O masă care a chemat pulsează. Discret: e un semnal, nu o alarmă —
   alarmele într-o sală plină se ignoră după o oră. */
.plan__masa.are-chemare { box-shadow: 0 0 0 3px var(--ember); }
@media (prefers-reduced-motion: no-preference) {
  .plan__masa.are-chemare { animation: plan-puls 1.8s ease-in-out infinite; }
}
@keyframes plan-puls {
  50% { box-shadow: 0 0 0 7px rgba(211, 63, 32, .35); }
}

.plan__cheama {
  position: absolute; top: -.5em; right: -.5em;
  background: var(--ember); color: var(--cream);
  font-size: .72em; padding: .1em .45em; border-radius: 999px;
  white-space: nowrap;
}

.plan__legenda {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink-soft);
}
.plan__leg { display: inline-flex; align-items: center; gap: .4rem; }

.plan__bulina {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  font-style: normal; font-size: .8em; font-weight: 600;
  border: 1px solid rgba(21,21,24,.25);
  background: var(--st-libera); color: var(--ink);
}
.plan__bulina--rezerv  { background: var(--st-rezerv);  color: var(--cream); }
.plan__bulina--ocupata { background: var(--st-ocupata); }
.plan__bulina--comanda { background: var(--st-comanda); color: var(--cream); }
.plan__bulina--servita { background: var(--st-servita); color: var(--cream); }
.plan__bulina--nota    { background: var(--st-nota);    color: var(--cream); }
.plan__bulina--platita { background: var(--st-platita); color: var(--cream); }
.plan__bulina--strans  { background: var(--st-strans);  color: var(--cream); }
.plan__bulina--blocata { background: var(--st-blocata); color: var(--on-dark-soft); }

/* Foaia de schimbat starea */
.plan__foaie { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.plan__foaie[hidden] { display: none; }
.plan__foaie-fundal { position: absolute; inset: 0; background: rgba(21,21,24,.5); }
.plan__foaie-corp {
  position: relative; width: min(560px, 100%);
  background: var(--surface); border-radius: 14px 14px 0 0;
  padding: var(--s-3); box-shadow: 0 -10px 40px rgba(0,0,0,.25);
}
@media (min-width: 640px) {
  .plan__foaie { align-items: center; }
  .plan__foaie-corp { border-radius: 14px; }
}
.plan__foaie-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.plan__foaie-cap h2 { font-size: var(--t-h3); margin: 0; }
.plan__foaie-x { font: inherit; font-size: 1.6rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--ink-soft); }
.plan__foaie-info { font-size: var(--t-small); color: var(--ink-soft); margin: .3rem 0 var(--s-2); }

.plan__stari { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.plan__stare {
  display: flex; align-items: center; gap: .5rem;
  font: inherit; font-size: var(--t-small); text-align: left;
  padding: .6rem .7rem; border-radius: 8px; cursor: pointer;
  background: var(--bg-alt); color: var(--ink);
  border: 1px solid var(--line);
}
.plan__stare.is-acum { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Pe ecrane mici, litera stării înlocuiește cronometrul: într-un
   pătrat de 40 px nu încap amândouă, iar litera spune mai mult. */
@media (max-width: 560px) {
  .plan__timp  { display: none; }
  .plan__scurt { display: block; font-weight: 600; opacity: .8; }
}

/* Decorul: ce e în sală și nu e masă. Desenat stins, ca să nu fure
   privirea de la mese — un plan e despre mese, restul e ca să știi
   unde sunt ele. */
.plan__decor {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: rgba(21,21,24,.05);
  border-radius: 4px;
  font-size: clamp(.55rem, 1.2vw, .75rem);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  pointer-events: none;
}
.plan__decor--kitchen,
.plan__decor--pizza   { background: rgba(21,21,24,.10); }
.plan__decor--bar     { background: rgba(111,26,2,.14); color: var(--terra); }
.plan__decor--stairs  {
  background: repeating-linear-gradient(90deg, rgba(21,21,24,.14) 0 4px, transparent 4px 9px);
}
.plan__decor--wc      { background: rgba(21,21,24,.08); }
.plan__decor--vitrina { background: rgba(62,110,142,.28); border-color: rgba(62,110,142,.6); }
.plan__decor--bench   { background: rgba(21,21,24,.55); border-radius: 3px; }
.plan__decor--door    { background: rgba(24,73,10,.20); border-color: rgba(24,73,10,.5); }
.plan__decor--plant   { background: rgba(24,73,10,.14); border-radius: 50%; }
.plan__decor--text    { background: none; border: 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   17. FIȘA DE DATE A CLIENTULUI (cererea de factură)
   --------------------------------------------------------------------- */
.fisa { padding-block: var(--s-5); }
.wrap--ingust { max-width: 620px; }
.fisa__cap { margin-bottom: var(--s-4); }
.fisa__cap h1 { font-size: var(--t-h2); margin: .3rem 0 .6rem; }
.fisa__form { display: grid; gap: var(--s-3); }

/* Câmpul din care vine tot restul. Scos în evidență fiindcă e primul
   lucru de făcut, iar restul formularului se completează singur din el. */
.fisa__cui {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 10px; padding: var(--s-3);
}
.fisa__cui-rand { display: flex; gap: .5rem; align-items: stretch; }
.fisa__cui-rand .field__i { flex: 1; min-width: 0; }
.fisa__anaf { font-size: var(--t-small); color: var(--ink-soft); margin: .6rem 0 0; line-height: 1.5; }

.fisa__gdpr {
  border: 1px solid var(--line); border-radius: 10px;
  padding: var(--s-2) var(--s-3); background: var(--bg-alt);
}
.fisa__gdpr summary { cursor: pointer; font-size: var(--t-small); letter-spacing: .04em; text-transform: uppercase; }
.fisa__gdpr-text { font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); margin-top: var(--s-2); }
.fisa__gdpr-text p { margin: 0 0 .7rem; }
.fisa__gdpr-text strong { color: var(--ink); }

/* Semnătura. Înaltă cât să încapă un nume scris cu degetul pe telefon —
   sub 120 px oamenii scriu litere care se ating între ele. */
.semn { border: 1px solid var(--line); border-radius: 10px; padding: var(--s-3); background: var(--surface); }
.semn__cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.semn__sterge { font: inherit; font-size: var(--t-small); background: none; border: 0; cursor: pointer; color: var(--terra); text-decoration: underline; }
.semn__panza {
  display: block; width: 100%; height: 160px;
  border: 1px dashed var(--line); border-radius: 6px;
  background: #fff;
  touch-action: none;   /* degetul semnează, nu derulează pagina */
  cursor: crosshair;
}
.semn__panza--lipsa { border-color: var(--err); border-style: solid; }
.semn__nota { font-size: var(--t-micro); color: var(--ink-faint); line-height: 1.5; margin: .6rem 0 0; }

.fisa__gata { text-align: center; padding-block: var(--s-6); }
.fisa__gata h1 { font-size: var(--t-h2); margin: .4rem 0 var(--s-3); }
.fisa__cod { font-size: var(--t-lead); margin-bottom: var(--s-3); }
.fisa__mic { font-size: var(--t-small); color: var(--ink-faint); margin: var(--s-3) 0; }

/* Capcana pentru roboți: scoasă din pagină, dar nu `display:none` —
   unele programe completează numai câmpurile ascunse astfel. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   21. CÂMPURI DE FORMULAR PE SITE-UL PUBLIC
   =====================================================================

   Pagina de factură folosea `.field__l`, `.field__i`, `.field__e` și
   `.alerta` de când a fost scrisă, dar nicio regulă nu le definea — pe
   server arăta ca un formular HTML nestilizat. Aici sunt, o dată, ca să
   le folosească și cererea de factură, și intrarea în cont, și datele
   clientului.

   Numele rămân cele din HTML, nu invers: `.input` există deja și e
   folosit în altă parte. Redenumirea a douăzeci de câmpuri ca să iasă
   un nume mai frumos e felul în care se sparg pagini care mergeau.
   ===================================================================== */

.field__l {
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
}
.field__l b { color: var(--terra); font-weight: 400; }
.field__op { text-transform: none; letter-spacing: 0; }

.field__i,
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  padding: .8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  /* Sub 16px, Safari pe iPhone mărește pagina la atingerea câmpului, iar
     omul rămâne cu formularul ieșit din ecran. */
  font-size: 16px;
  font-weight: 300;
  font-family: inherit;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

.field__i:focus,
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--terra); }

.field__i::placeholder, .field input::placeholder, .field textarea::placeholder {
  color: var(--ink-faint);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23241F20' stroke-opacity='.5' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.4rem;
}

.field__e  { font-size: var(--t-small); color: var(--err); }
.field__aj { font-size: var(--t-small); color: var(--ink-faint); line-height: 1.5; font-weight: 300; }

/* Bifa. Zona de apăsat e tot rândul, nu pătrățelul de 16px — pe telefon,
   un pătrățel de 16px se ratează de fiecare dată. */
.check, .bifa {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  cursor: pointer;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  padding: .35rem 0;
}
.check input, .bifa input { margin-top: .15rem; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--terra); }

.alerta {
  padding: .85rem 1rem;
  border-left: 3px solid var(--line);
  background: var(--bg-alt);
  font-size: var(--t-small);
  line-height: 1.55;
  margin-bottom: var(--s-3);
}
.alerta--ok    { border-left-color: var(--ok);    }
.alerta--error { border-left-color: var(--err);   }

.btn--wide { width: 100%; }
.btn--rau  { --btn-bd: var(--err); color: var(--err); }
.btn--rau::before { background: var(--err); }
.btn--rau:hover   { color: var(--cream); border-color: var(--err); }

/* Pastila de stare — aceeași idee ca în panou, dar pe fundal crem. */
.pastila {
  display: inline-block;
  padding: .15rem .5rem;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  vertical-align: middle;
}
.pastila--ok       { color: var(--ok); }
.pastila--rau      { color: var(--err); }
.pastila--asteapta { color: var(--terra); }
.pastila--neutru   { color: var(--ink-faint); }

/* Alegerea notei, pe cererea de factură. */
.fisa__nota {
  padding: var(--s-3);
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
}


/* =====================================================================
   22. UȘA — /intrare
   ===================================================================== */

 /* Bara de sus e `position: fixed`, deci prima linie de text trebuie
    împinsă sub ea. Pe pagina de intrare asta se vede imediat: fără
    spațiul ăsta, „INTRĂ ÎN CONT" stă pe jumătate ascuns sub logo. */
.usa { padding-block: calc(var(--s-6) + var(--s-4)) var(--s-5); min-height: 70svh; }
.usa__wrap { max-width: 420px; }
.usa__t { font-size: var(--t-h2); margin: 0 0 .6rem; }
.usa__s { color: var(--ink-soft); line-height: 1.6; margin: 0 0 var(--s-4); }
.usa__form { display: grid; gap: var(--s-3); }
.usa__mic { font-size: var(--t-small); color: var(--ink-faint); line-height: 1.55; margin-top: var(--s-3); }

/* Codul: cifre rare și mari, ca să se vadă dintr-o privire dacă una e
   greșită. Font monospațiat, altfel 1 și 7 se confundă la tastat. */
.usa__cod {
  font-family: 'Courier New', Courier, monospace;
  font-size: 28px;
  letter-spacing: .5em;
  text-align: center;
  padding-left: .5em;
}

.usa__din-nou { margin-top: var(--s-2); }
.usa__link {
  font: inherit; font-size: var(--t-small);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--terra); text-decoration: underline;
}

.usa__personal {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-small);
  color: var(--ink-faint);
}


/* =====================================================================
   23. CONTUL CLIENTULUI — /cont
   ===================================================================== */

/* Bara contului. Se derulează pe orizontală pe telefon în loc să se rupă
   în trei rânduri care împing pagina în jos. */
.ctbar { border-bottom: 1px solid var(--line-soft); background: var(--bg-alt); }
.ctbar__in {
  display: flex; align-items: center; gap: var(--s-3);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ctbar__in::-webkit-scrollbar { display: none; }
.ctbar__l {
  padding: .9rem 0;
  font-size: var(--t-small);
  letter-spacing: .06em;
  color: var(--ink-soft);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.ctbar__l.is-active { color: var(--ink); border-bottom-color: var(--terra); }
.ctbar__iesi { margin-left: auto; }
.ctbar__l--iesi { font: inherit; font-size: var(--t-small); background: none; border: 0; cursor: pointer; color: var(--ink-faint); }

.ct { padding-block: var(--s-4) var(--s-6); }
/* Bara contului stă sub bara site-ului, care e fixată sus. */
.ctbar { margin-top: calc(var(--s-5) + var(--s-3)); }
.ct__ingust { max-width: 620px; }
.ct__t  { font-size: var(--t-h2); margin: 0 0 var(--s-4); }
.ct__h2 { font-size: var(--t-small); letter-spacing: .18em; text-transform: uppercase;
          color: var(--ink-faint); margin: var(--s-4) 0 var(--s-2); }
.ct__h  { font-size: var(--t-body); margin: 0 0 var(--s-2); }

.ct__card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
.ct__card--cald { border-left: 3px solid var(--terra); }
.ct__card--rece { border-left: 3px solid var(--err); }
.ct__card form  { display: grid; gap: var(--s-3); margin-top: var(--s-2); }

.ct__mare  { font-size: var(--t-lead); margin: 0 0 .3rem; }
.ct__mic   { font-size: var(--t-small); color: var(--ink-faint); line-height: 1.55; margin: 0; }
.ct__urias { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; margin: 0 0 .2rem; color: var(--terra); }
.ct__link  { font-size: var(--t-small); color: var(--terra); text-decoration: underline; }

.ct__lista-simpla { margin: 0 0 var(--s-3); padding-left: 1.1rem; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.9; }

/* Plitele: butoane mari, fiindcă pagina se deschide pe telefon. */
.ct__grila { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ct__plita {
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: var(--s-3);
  min-height: 120px;
  transition: border-color var(--dur) var(--ease);
}
.ct__plita:hover { border-color: var(--terra); }
.ct__plita--act  { border-left: 3px solid var(--terra); }
.ct__plita-n { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--terra); }
.ct__plita-t { font-size: var(--t-body); }
.ct__plita-s { font-size: var(--t-small); color: var(--ink-faint); line-height: 1.5; }

.ct__rez {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: var(--s-3);
  margin-bottom: .5rem;
}
.ct__rez--vechi { opacity: .6; background: transparent; }

/* Bara de progres spre nivelul următor. */
.ct__bara { height: 6px; background: var(--line-soft); margin: var(--s-2) 0 .6rem; }
.ct__bara span { display: block; height: 100%; background: var(--terra); }

/* Tabele simple pe site-ul public — aceleași nume ca în panou, ca să nu
   existe două limbaje pentru același lucru. */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line-soft); background: var(--surface); }
.ct table.tbl, table.tbl--nota { width: 100%; border-collapse: collapse; font-size: var(--t-small); padding: 0; min-height: 0; }
.ct table.tbl th, .ct table.tbl td,
table.tbl--nota th, table.tbl--nota td {
  padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.ct table.tbl th { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; }
.ct table.tbl .right, table.tbl--nota .right { text-align: right; }
table.tbl--nota tfoot td { border-bottom: 0; border-top: 2px solid var(--line); font-size: var(--t-body); }
.cell-main { display: block; }
.cell-sub  { display: block; font-size: var(--t-micro); color: var(--ink-faint); }

/* Pe telefon, tabelul devine listă: capul de coloană se mută în fața
   valorii, din `data-l`. Un tabel cu patru coloane pe 360px nu se
   citește, se ghicește. */
@media (max-width: 620px) {
  .ct table.tbl thead { display: none; }
  .ct table.tbl tr { display: block; border-bottom: 1px solid var(--line-soft); padding: .5rem 0; }
  .ct table.tbl td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .35rem .9rem; }
  .ct table.tbl td::before {
    content: attr(data-l);
    font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint); flex: 0 0 auto;
  }
  .ct__rez { flex-direction: column; align-items: stretch; gap: var(--s-2); }
}


/* =====================================================================
   24. BUTONUL DE CONT DIN BARA DE SUS
   ===================================================================== */

.nav__cont {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-small);
  letter-spacing: .06em;
  color: inherit;
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
}
.nav__cont:hover, .nav__cont.is-active { border-bottom-color: currentColor; }

/* Silueta de om, desenată în CSS. Ca și logo-ul, se colorează cu
   `currentColor`, deci merge și pe bara crem de peste hero, și pe cea
   neagră de pe restul paginilor — fără două fișiere. */
.nav__cont-ic {
  width: 17px; height: 17px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--ic-cont) center / contain no-repeat;
          mask: var(--ic-cont) center / contain no-repeat;
}
:root {
  --ic-cont: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* =====================================================================
   25. SALA — MESELE MELE ÎN FAȚĂ
   =====================================================================

   Ospătarul deschide ecranul ăsta în picioare, cu o mână, între două
   mese. Deci: ale lui sus, mari, cu o dungă colorată pe margine; restul
   sălii sub ele, strânse într-un rând pe care îl deschide doar dacă
   vrea. Nu ascunse — un om care trece pe lângă o masă care cere ceva se
   oprește, indiferent a cui e.
   ===================================================================== */

.floor__tura { font-size: var(--t-small); color: var(--on-dark-soft, rgba(0,0,0,.55)); margin: .2rem 0 0; }

.floor__ale { margin: var(--s-3) 0; }

.floor__sub {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--t-small);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 .7rem;
}
.floor__cate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem;
  border: 1px solid currentColor;
  font-size: var(--t-micro);
  letter-spacing: 0;
}

/* Dunga din stânga e singurul semn de care e nevoie. O culoare de fundal
   pe toată plăcuța ar intra în conflict cu culorile de stare ale mesei,
   care sunt informația mai urgentă. */
.floor__table--mea { border-left: 4px solid var(--terra, #6f1a02); }

.floor__empty--mic { font-size: var(--t-small); opacity: .7; margin: var(--s-3) 0; }

/* =====================================================================
   RECENZIILE DIN GOOGLE

   Atribuirea nu e un detaliu de stil aici: numele, poza şi cele două
   legături sunt condiţia în care avem voie să arătăm recenziile. De aia
   au loc în layout, nu sunt înghesuite ca o notă de subsol.
   ===================================================================== */

.review__cine { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }

.review__fata {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: rgba(255,255,255,.08);
}

.review--google .review__author a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.review--google .review__author a:hover { opacity: .75; }

.review-nota {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  opacity: .62;
  max-width: 62ch;
}
.review-nota a { color: inherit; }

/* =====================================================================
   POVESTEA CASEI

   Anul stă mare, în stânga, ca reper — pagina se citește ca o cronologie
   chiar dacă cineva doar o derulează cu degetul, fără să citească
   propozițiile. Pe telefon anul trece deasupra, nu alături: două coloane
   la 390px ar lăsa textului 40% din lățime.
   ===================================================================== */

.poveste {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  align-items: start;
}
.poveste__an {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1;
  opacity: .5;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .poveste { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* Citatul de pe peretele de la Trattorian. E în engleză pentru că așa e
   scris acolo — nu se traduce. */
.citat {
  margin: var(--s-2) 0;
  padding-left: var(--s-3);
  border-left: 2px solid currentColor;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-style: italic;
  line-height: 1.35;
  opacity: .9;
}

/* ---------- cele patru case ---------- */

.casa {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 100%;
}
.casa__an {
  font-family: var(--mono, monospace);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .55;
}
.casa h3 { font-size: 1.05rem; line-height: 1.25; }
.casa p { font-size: var(--t-small); }
.casa .dim { margin-top: .3rem; font-weight: 300; }

/* Casa de acum se vede că e cea de acum, fără să scrie „aici sunteți". */
.casa--acum { border-color: currentColor; }

/* Anul de sub logo, pe hero. Mai mic decât „il fratello maggiore", pentru
   că e o notă, nu o declarație. */
.firma--an {
  font-size: var(--t-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  margin-top: .2rem;
}

/* =====================================================================
   MENIUL SITE-ULUI, AŞEZAT CA CEL DE PE MASĂ  (varianta „qr")

   Cardurile vin din carta.css — aceeaşi foaie ca meniul QR, încărcată
   doar pe pagina asta. Aici stă numai ce ţine de site: bara de grupe
   (cea din meniul QR e altfel poziţionată, sub antetul ei) şi titlurile
   de carnet.
   ===================================================================== */

.meniu-bara {
  position: sticky;
  /* Sub bara de navigare a site-ului, nu peste ea. */
  top: var(--nav-h, 64px);
  z-index: 20;
  background: var(--bg);
  border-block: 1px solid var(--line);
  /* `clip`, nu `hidden`: `overflow-x: hidden` pe un strămoş anulează
     `position: sticky`. Ne-a costat o livrare în septembrie. */
  overflow-x: clip;
}

.meniu-bara__fasie {
  display: flex;
  gap: .4rem;
  /* Fâşia se opreşte la aceeaşi margine ca lista de carduri (720px, ca
     la masă), ca prima grupă să înceapă exact deasupra primului card.
     `max(1rem, …)` păstrează marginea pe ecran mic. */
  padding: .55rem max(1rem, calc((100vw - 720px) / 2));
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.meniu-bara__fasie::-webkit-scrollbar { display: none; }

.meniu-bara__b {
  flex: none;
  padding: .4rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.meniu-bara__b:hover { border-color: currentColor; }

/* Ancora să nu ajungă sub bara lipită. */
.meniu-qr__sectiune { scroll-margin-top: calc(var(--nav-h, 64px) + 4rem); }

.meniu-qr__cap { padding-block: var(--s-4) var(--s-2); }
.meniu-qr__titlu { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.meniu-qr__sub { font-size: var(--t-small); opacity: .6; }

/* O SINGURĂ COLOANĂ, LATĂ DE 720px, CA LA MASĂ.

   Până la 1.59.0, de la 900px în sus cardurile se aşezau pe două
   coloane. Motivul scris atunci era bun — la 1600px un card cu poză
   pătrată ar ocupa jumătate de monitor — dar răspunsul era greşit, şi
   se vedea punând cele două ecrane unul lângă altul: pe telefon
   semănau, pe laptop erau două meniuri diferite ale aceluiaşi
   restaurant. Exact lucrul pe care varianta asta există ca să-l evite.

   Meniul de la masă rezolvase deja problema lăţimii, altfel:
   `.carta { max-width: 720px; margin-inline: auto }` — o coloană cât o
   pagină de carte, în mijlocul ecranului. Aceeaşi măsură aici, pe
   învelişul întreg, ca titlul carnetului, numele secţiunii şi cardurile
   să stea pe aceeaşi linie verticală. Lăţimea e dată pe `.wrap`-urile
   dinăuntru, nu pe `.meniu-qr`, fiindcă bara lipită de sus e în afara
   lui şi trebuie să rămână lată cât ecranul — se trage cu degetul. */
.meniu-qr .wrap { max-width: 720px; }

/* Blocul de filtre, pliat. Vezi comentariul din pages/menu.php. */
.filtre-pliate {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
}
.filtre-pliate__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  cursor: pointer;
  list-style: none;
  min-height: 34px;
}
.filtre-pliate__cap::-webkit-details-marker { display: none; }

.filtre-pliate__semn {
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .55;
  transition: transform .18s ease;
}
.filtre-pliate[open] .filtre-pliate__semn { transform: rotate(-135deg) translate(-2px, -2px); }

/* =====================================================================
   PAGINILE LEGALE

   Text lung, citit rar, dar citit atent când e citit — de un client
   nemulțumit sau de un inspector. Deci: coloană îngustă, ierarhie
   limpede, tabele care se citesc și pe telefon.
   ===================================================================== */

.legal { max-width: 68ch; }

.legal h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}
.legal h2:first-child { margin-top: 0; }

.legal p, .legal ul { margin-bottom: var(--s-2); }
.legal ul { padding-left: 1.15rem; }
.legal li { margin-bottom: .35rem; }

/* Notele explicative — motivul din spatele unei reguli. Se disting de
   regula însăși, ca să nu fie citite ca obligații. */
.legal__nota {
  font-size: var(--t-small);
  opacity: .72;
  border-left: 2px solid var(--line);
  padding-left: var(--s-2);
}

.legal__tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  margin-bottom: var(--s-3);
}
.legal__tbl th,
.legal__tbl td {
  text-align: left;
  vertical-align: top;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--line);
}
.legal__tbl th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: var(--t-micro);
  opacity: .7;
}
.legal__tbl--firma td:first-child { width: 42%; opacity: .7; }

/* Un tabel de patru coloane nu încape pe 390px. Se derulează lateral,
   în containerul lui — nu împinge pagina. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.legal__adresa {
  font-style: normal;
  font-size: var(--t-small);
  line-height: 1.7;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.legal__vezi {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
}

/* ---------- rândul legal din subsol ---------- */

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  padding-top: var(--s-3);
  margin-top: var(--s-3);
  border-top: 1px solid var(--line-soft, rgba(255,255,255,.12));
  font-size: var(--t-small);
}
.footer__legal a { opacity: .7; }
.footer__legal a:hover { opacity: 1; }

/* =====================================================================
   COMUTATORUL DE LIMBĂ (bara de sus a site-ului)
   =====================================================================

   Un buton cu steagul curent, care se desface. Vezi partials/limbi.php
   pentru DE CE nu sunt șase butoane înșirate.

   `<details>` nu se închide singur când apeși în altă parte — asta e
   limita variantei fără JavaScript, și e o limită acceptabilă: se
   închide la a doua atingere pe buton, sau la navigare, care e oricum
   ce urmează după ce alegi o limbă. */

.limbi { position: relative; }

.limbi__buton {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .5rem;
  cursor: pointer;
  list-style: none;
  border-radius: 999px;
  font-size: .8125rem;
  line-height: 1;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.limbi__buton::-webkit-details-marker { display: none; }
.limbi__buton:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.limbi__buton:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.limbi__steag { font-size: 1.05em; line-height: 1; }
.limbi__cod   { font-weight: 600; letter-spacing: .04em; }

.limbi__sageata { opacity: .6; transition: transform .18s ease; }
.limbi[open] .limbi__sageata { transform: rotate(180deg); }

.limbi__lista {
  position: absolute;
  top: calc(100% + .4rem);
  inset-inline-end: 0;
  z-index: 60;

  min-width: 11rem;
  margin: 0;
  padding: .3rem;
  list-style: none;

  background: var(--surface, #fffdf7);
  border: 1px solid var(--line, #d8cbae);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}

.limbi__optiune {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink, #151518);
  font-size: .875rem;
  white-space: nowrap;
}
.limbi__optiune:hover { background: var(--bg-alt, #ece0c4); }
.limbi__optiune.is-acum { font-weight: 600; }
.limbi__optiune .limbi__cod { margin-inline-start: auto; opacity: .5; font-size: .75rem; }
.limbi__nume { unicode-bidi: isolate; }

/* Pe telefon, bara se desface pe verticală, iar lista n-are de ce să
   mai plutească: intră în rând cu celelalte legături. */
@media (max-width: 860px) {
  .limbi { width: 100%; }
  .limbi__lista {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0;
    background: none;
    min-width: 0;
  }
}

/* Semnul „tradus de program, neconfirmat" de lângă un punct de
   procedură. Mic, gri, fără subliniere — o notă, nu o alarmă. Punctul
   trebuie făcut oricum; semnul spune doar cui să-i ceară lămuriri dacă
   fraza sună ciudat. */
.proc__auto {
  margin-inline-start: .3rem;
  font-size: .8em;
  opacity: .45;
  text-decoration: none;
  border: 0;
  cursor: help;
}

/* =====================================================================
   ANUNȚURI — zona de lucru
   =====================================================================

   Ecranele astea se citesc pe telefon, în picioare, între două mese.
   Deci: ținte mari de atins, un singur lucru important pe rând, și
   niciun element decorativ care să ceară atenție. */

/* Cifra de necitite, pe plita din pagina de acasă. */
.lucru__bulina {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  margin-inline-start: .4rem;
  border-radius: 999px;
  background: var(--terra, #7E341B);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* Invitația de a porni notificările. Apare o singură dată în viața
   telefonului — după ce omul apasă, dispare pentru totdeauna. */
.anunt-push {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: .9rem 1rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--line, #d8cbae);
  border-left: 3px solid var(--terra, #7E341B);
  border-radius: 10px;
  background: var(--surface, #fffdf7);
}
.anunt-push p { margin: .25rem 0 0; }

.anunt-push__stare {
  margin: 0 0 1.2rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .85rem;
  line-height: 1.5;
}
.anunt-push__stare.is-bun { background: rgba(63,122,74,.12); }
.anunt-push__stare.is-rau { background: rgba(164,70,60,.12); }

/* ---- lista de anunțuri ---- */
.anunt-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.anunt-rand > a {
  display: grid;
  gap: .3rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line, #d8cbae);
  border-radius: 12px;
  background: var(--surface, #fffdf7);
  text-decoration: none;
  color: inherit;
}
.anunt-rand > a:active { transform: scale(.995); }

/* Necitit: dunga din stânga. Nu bold pe tot rândul — pe un ecran cu
   opt anunțuri necitite, opt rânduri îngroșate nu mai deosebesc nimic
   de nimic. */
.anunt-rand.is-nou > a { border-left: 3px solid var(--terra, #7E341B); }
.anunt-rand.is-urgent > a { border-color: var(--warn, #9A5B12); }

.anunt-rand__cap { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.anunt-rand__bulina {
  width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--terra, #7E341B); flex: 0 0 auto;
}
.anunt-rand__text { font-size: .875rem; opacity: .75; line-height: 1.45; }
.anunt-rand__jos  { font-size: .75rem; opacity: .55; }
.anunt-rand__cere { color: var(--warn, #9A5B12); }

/* ---- un anunț, întreg ---- */
.anunt {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line, #d8cbae);
  border-radius: 12px;
  background: var(--surface, #fffdf7);
}
.anunt--urgent { border-left: 3px solid var(--warn, #9A5B12); }
.anunt__eticheta { margin: 0 0 .5rem; }
.anunt__titlu { margin: 0 0 .3rem; font-size: 1.25rem; line-height: 1.25; }
.anunt__cine  { margin: 0 0 1rem; font-size: .78rem; opacity: .55; }

/* Textul anunțului: mai lat decât restul, fiindcă se citește, nu se
   scanează. Rândurile scurte obosesc ochiul pe un text de zece rânduri. */
.anunt__text { line-height: 1.65; }
.anunt__text + .anunt__confirm { margin-top: 1.4rem; }

.anunt__confirm {
  padding-top: 1rem;
  border-top: 1px solid var(--line, #d8cbae);
}
.anunt__confirmat {
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #d8cbae);
  font-size: .85rem;
  opacity: .7;
}


/* =====================================================================
   PONTAJUL, ORARUL ȘI FLUTURAȘUL — pe telefon

   Un singur buton mare pe stare. Ecranul se deschide în ușa localului,
   cu o mână ocupată, la ora unu noaptea: trei butoane deodată înseamnă
   că se apasă cel greșit, iar un „Ies” apăsat în loc de „Pauză”
   înseamnă o tură ruptă în două și un drum la manager.
   ===================================================================== */

.pont {
  text-align: center; padding: 1.6rem 1rem;
  border: 1px solid rgba(244,239,231,.14); margin-bottom: 1rem;
}
.pont--tura  { border-color: rgba(47,122,90,.45);  background: rgba(47,122,90,.08); }
.pont--pauza { border-color: rgba(217,164,65,.45); background: rgba(217,164,65,.08); }

.pont__stare {
  margin: 0; font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; opacity: .6;
}
.pont__ceas {
  margin: .3rem 0; font-size: 3rem; line-height: 1;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.pont__sub { margin: .3rem 0 0; font-size: .9rem; opacity: .75; }

.pont__geo {
  margin: 0 0 1rem; padding: .6rem .8rem; font-size: .84rem;
  border: 1px dashed rgba(244,239,231,.22); text-align: center;
}
.pont__geo--ok  { border-color: rgba(47,122,90,.5);  color: #8FCB8F; }
.pont__geo--rau { border-color: rgba(179,64,31,.55); color: #E08A6E; }

.pont__form { margin-bottom: 1rem; }
.pont__buton {
  display: block; width: 100%; padding: 1.35rem 1rem; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1.15rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #F4EFE7;
}
.pont__buton--intru { background: #2F7A5A; }
.pont__buton--ies   { background: #B3401F; }
.pont__buton--pauza { background: #9A5B12; }
.pont__buton--reiau { background: #2F7A5A; }
.pont__buton:active { filter: brightness(.88); }

.pont__feluri { display: flex; gap: .4rem; margin-bottom: .5rem; flex-wrap: wrap; }
.pont__fel { flex: 1 1 5rem; }
.pont__fel input { position: absolute; opacity: 0; width: 0; height: 0; }
.pont__fel span {
  display: block; text-align: center; padding: .5rem .3rem;
  border: 1px solid rgba(244,239,231,.2); font-size: .84rem;
}
.pont__fel input:checked + span { border-color: #D9A441; color: #D9A441; }

.pont__pauze, .pont__lista { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .88rem; }
.pont__pauze li, .pont__lista li {
  display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
  padding: .35rem 0; border-bottom: 1px solid rgba(244,239,231,.08);
}
.pont__pauze li:last-child, .pont__lista li:last-child { border-bottom: 0; }
.pont__stare-mic { font-style: normal; font-size: .76rem; opacity: .6; }
.pont__stare-mic--aprobat { color: #8FCB8F; opacity: 1; }
.pont__stare-mic--respins { color: #E08A6E; opacity: 1; }

/* --- orarul meu ------------------------------------------------------ */
.orar-meu { list-style: none; margin: 0 0 1rem; padding: 0; }
.orar-meu__zi {
  padding: .6rem 0; border-bottom: 1px solid rgba(244,239,231,.1);
  display: flex; flex-direction: column; gap: .3rem;
}
.orar-meu__zi.is-azi { background: rgba(217,164,65,.08); padding-inline: .6rem; }
.orar-meu__data { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.orar-meu__tura {
  display: block; border-left: 3px solid var(--dep, #8a8f98); padding-left: .6rem; font-size: .95rem;
}
.orar-meu__tura small { display: block; font-size: .78rem; opacity: .6; }
.orar-meu__ciorna { color: #D9A441; opacity: 1 !important; }

/* --- fluturașul ------------------------------------------------------ */
.flut { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .95rem; }
.flut li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid rgba(244,239,231,.08);
}
.flut strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.flut--tare  { font-weight: 600; }
.flut--rau strong { color: #E08A6E; }
.flut--total {
  border-top: 2px solid rgba(244,239,231,.25); border-bottom: 0;
  margin-top: .3rem; padding-top: .6rem; font-size: 1.1rem; font-weight: 700;
}


/* =====================================================================
   CALENDARUL ECHIPEI ȘI CERERILE — pe telefon

   O zi = un bloc, nu un tabel. Un tabel de paisprezece zile × patru
   secții se derulează lateral pe telefon, iar ce se derulează lateral
   nu se citește.
   ===================================================================== */

.cal__nav { display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .8rem; }

.cal__zi {
  border-top: 1px solid rgba(244,239,231,.12);
  padding: .9rem 0;
}
.cal__zi.is-azi { background: rgba(217,164,65,.07); padding-inline: .6rem; }
.cal__zi--interes { border-top-color: rgba(179,64,31,.5); }

.cal__data {
  margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; opacity: .6;
}
.cal__data span { opacity: .7; }
.cal__data em {
  font-style: normal; color: #D9A441; letter-spacing: .1em; margin-left: .4rem;
}

.cal__interes {
  margin: 0 0 .6rem; padding: .45rem .7rem; font-size: .88rem; font-weight: 600;
  border-left: 3px solid #D9A441; background: rgba(217,164,65,.1);
}
.cal__interes--varf { border-left-color: #E08A6E; background: rgba(179,64,31,.14); }
.cal__interes small { display: block; font-weight: 400; opacity: .75; }

.cal__gol { opacity: .45; }

.cal__sectie { margin-bottom: .6rem; }
.cal__sectie h3 {
  margin: 0 0 .25rem; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dep, #8a8f98);
}

.cal__ture { list-style: none; margin: 0; padding: 0; }
.cal__tura {
  display: grid; align-items: baseline; gap: .5rem;
  grid-template-columns: 5.6rem minmax(0, 1fr) auto;
  padding: .35rem 0; border-bottom: 1px solid rgba(244,239,231,.07);
}
.cal__tura:last-child { border-bottom: 0; }
.cal__tura.is-al-meu { background: rgba(47,122,90,.12); padding-inline: .4rem; }
.cal__tura.is-gol .cal__om { color: #E08A6E; font-weight: 600; font-size: .82rem; }
.cal__ore { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; }
.cal__om { overflow-wrap: anywhere; font-size: .95rem; }
.cal__om small { display: block; font-size: .74rem; opacity: .55; }
.cal__supl { color: #D9A441 !important; opacity: 1 !important; }

.cal__semn { font-style: normal; font-size: .72rem; color: #D9A441; white-space: nowrap; }
.cal__semn--cauta { color: #8FCB8F; }
.cal__b {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .74rem; color: rgba(244,239,231,.6); text-decoration: underline;
}

.cal__lipsa { margin: .5rem 0 0; font-size: .84rem; opacity: .6; }
.cal__lipsa span { white-space: nowrap; }

.cal__oferta {
  display: flex; gap: .8rem; align-items: center; justify-content: space-between;
  padding: .6rem 0; border-bottom: 1px solid rgba(244,239,231,.1); flex-wrap: wrap;
}
.cal__oferta:last-of-type { border-bottom: 0; }
.cal__oferta small { display: block; font-size: .78rem; opacity: .6; }
.cal__motiv { font-style: italic; }

/* --- cererile -------------------------------------------------------- */
.cer__bara { height: 8px; background: rgba(244,239,231,.12); margin: .4rem 0; }
.cer__bara i { display: block; height: 100%; background: #D9A441; }

.cer__lista { list-style: none; margin: .4rem 0 0; padding: 0; }
.cer__rand {
  display: flex; gap: .8rem; justify-content: space-between; align-items: flex-start;
  padding: .55rem 0; border-bottom: 1px solid rgba(244,239,231,.08);
  border-left: 3px solid transparent; padding-left: .5rem;
}
.cer__rand:last-child { border-bottom: 0; }
.cer__rand--aprobata { border-left-color: #2F7A5A; }
.cer__rand--respinsa { border-left-color: #B3401F; }
.cer__rand--trimisa  { border-left-color: #D9A441; }
.cer__rand small { display: block; font-size: .8rem; opacity: .6; }
.cer__nota { font-style: italic; }
.cer__stare { text-align: right; white-space: nowrap; }
.cer__stare em { font-style: normal; font-size: .78rem; opacity: .7; display: block; }

/* ===================================================================
   SALA DESENATĂ CA O SALĂ  (1.44.0)

   Trei lucruri noi, toate cu acelaşi scop: ospătarul nou să recunoască
   locul în care tocmai a intrat.

   1. SCAUNELE stau ÎN AFARA mesei, lipite de ea. De aceea masa capătă
      `overflow: visible` şi scaunele sunt poziţionate în procente: la
      redimensionare rămân unde trebuie, fără niciun calcul în JS.
   2. MOBILIERUL e desenat, nu un dreptunghi cu etichetă.
   3. CHEMAREA se aprinde PE masa ei. Peste pragul de întârziere,
      buclează — o chemare de şapte minute şi una de treizeci de secunde
      cer lucruri diferite, iar cifra singură nu se citeşte de la trei
      metri.
   =================================================================== */

/* Masa lasă scaunele să iasă din ea. `overflow:hidden` le-ar fi tăiat,
   iar scaunele tăiate arată a greşeală, nu a scaune. */
.plan__masa { overflow: visible; }

/* Conţinutul mesei se mută într-un „blat", ca scaunele să nu intre în
   rândul cu codul şi ora. */
.plan__blat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1em; border-radius: inherit;
}

/* Culoarea aleasă pe masă bate culoarea de stare — dar numai fundalul.
   Litera de stare rămâne, fiindcă un plan citit doar prin culoare nu se
   citeşte de unul din doisprezece bărbaţi. */
.plan__masa[style*="--masa-a"] { background: var(--masa-a); }

.plan__scaune { position: absolute; inset: 0; pointer-events: none; }
.plan__scaun {
  position: absolute;
  width: 26%; height: 26%;
  min-width: 7px; min-height: 7px;
  max-width: 18px; max-height: 18px;
  border-radius: 40% 40% 28% 28%;
  background: rgba(94, 66, 49, .85);
  box-shadow: inset 0 -30% 0 rgba(0,0,0,.14);
}
/* La masa rotundă scaunele sunt rotunde: n-au spătar drept. */
.plan__masa--round .plan__scaun,
.plan__masa--oval  .plan__scaun { border-radius: 50%; }

/* Mobila mesei: ce se vede pe blat. */
.plan__masa--m-masa_alba .plan__blat { box-shadow: inset 0 0 0 4px rgba(255,255,255,.75); }
.plan__masa--m-masa_inalta { border-width: 4px; }
.plan__masa--m-separeu     { border-radius: 6px 6px 22px 22px; }
.plan__masa--m-bar_loc     { border-radius: 999px; border-style: dashed; }
.plan__masa--m-terasa .plan__blat { box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }

.plan__nrscaune {
  font-size: .7em; opacity: .65; font-variant-numeric: tabular-nums;
}

/* --- decorul: desenul umple piesa ------------------------------------ */
.plan__decor { position: absolute; display: block; }
.mob__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plan__decor-et {
  position: absolute; inset: auto 0 6%; text-align: center;
  font-size: clamp(.55rem, 1.2vw, .78rem); font-weight: 600;
  color: var(--ink); text-shadow: 0 1px 2px rgba(255,255,255,.7);
  pointer-events: none;
}

/* --- chemarea, aşezată pe masa ei ------------------------------------ */
.plan__cheama {
  position: absolute; top: -8%; right: -8%;
  min-width: 2.1em; padding: .15em .4em;
  border-radius: 999px;
  background: var(--terra, #B3401F); color: #fff;
  font-size: .72em; font-weight: 700; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  z-index: 3;
}
.plan__cheama b { font-weight: 800; }

/* Peste prag: bătaie de inimă. Lentă dinadins — una rapidă ar fi
   alarmă de incendiu, iar o sală în care totul ţipă e o sală în care
   nimic nu se mai aude. */
.plan__cheama.e-tarziu { background: #8E1B08; animation: pz-puls 1.8s ease-in-out infinite; }
.plan__masa.e-tarziu   { box-shadow: 0 0 0 3px rgba(142,27,8,.55); }

@keyframes pz-puls {
  0%, 100% { transform: scale(1);    box-shadow: 0 2px 6px rgba(0,0,0,.28); }
  50%      { transform: scale(1.12); box-shadow: 0 2px 14px rgba(142,27,8,.6); }
}
@media (prefers-reduced-motion: reduce) {
  .plan__cheama.e-tarziu { animation: none; }
}

/* ---- sarcinile mele, pe telefon (1.45.0) ---------------------------- */
.lsc__lista { display: grid; gap: .7rem; }
.lsc__fisa {
  background: var(--bg, #fff); border: 1px solid var(--line);
  border-left: 5px solid var(--line); border-radius: 10px; padding: .8rem .9rem;
}
.lsc__fisa--urgenta { border-left-color: var(--err, #B3401F); }
.lsc__fisa--normala { border-left-color: var(--sand, #D9CFC2); }
.lsc__fisa--joasa   { border-left-color: rgba(21,21,24,.15); }
.lsc__fisa.e-tarziu { background: var(--err-bg, #FBF0EC); }

.lsc__cap { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; justify-content: space-between; }
.lsc__titlu { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.lsc__detaliu { margin: .45rem 0 0; font-size: .9rem; line-height: 1.5; }
.lsc__mic { margin: .45rem 0 0; font-size: .8rem; color: rgba(21,21,24,.55); }
.lsc__urgent { color: var(--err, #B3401F); font-weight: 700; }
.lsc__azi    { color: var(--terra, #B3401F); font-weight: 700; }

.lsc__act {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line);
}
/* Butoanele sunt mari dinadins: se apasă cu degetul, în bucătărie. */
.lsc__act .btn { min-height: 44px; }
.lsc__gata { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 100%; align-items: center; }
.lsc__gata .field__i { flex: 1 1 200px; min-height: 44px; }
.lsc__asteapta { font-size: .85rem; color: rgba(21,21,24,.55); }

/* ===================================================================
   FEREASTRA DE BUN VENIT  (1.46.0)

   Un pas pe ecran. Patru cereri deodată, la primul pas într-un local în
   care n-ai mâncat încă, se închid cu X.

   Jos pe telefon, la mijloc pe ecran mare: pe telefon, degetul stă jos,
   iar o fereastră care apare în mijloc cere o mişcare a mâinii ca să se
   închidă — şi exact aia o face enervantă.
   =================================================================== */

.bv { position: fixed; inset: 0; z-index: 120; display: flex; }
.bv[hidden] { display: none; }
.bv__fundal { position: absolute; inset: 0; background: rgba(21,21,24,.55); backdrop-filter: blur(2px); }

.bv__corp {
  position: relative; margin: auto auto 0; width: min(100%, 34rem);
  background: var(--ink, #151518); color: var(--on-dark, #F5EFE6);
  border-radius: 18px 18px 0 0;
  padding: 1.6rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0,0,0,.35);
  animation: bv-urca .32s cubic-bezier(.2,.8,.3,1);
}
@media (min-width: 640px) {
  .bv__corp { margin: auto; border-radius: 16px; padding: 1.8rem 1.7rem; }
}
@keyframes bv-urca { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bv__corp { animation: none; } }

.bv__x {
  position: absolute; top: .6rem; right: .8rem;
  border: 0; background: transparent; color: inherit; opacity: .5;
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: .2rem .4rem;
}
.bv__x:hover { opacity: 1; }

.bv__pasi  { margin: 0 0 .4rem; font-size: .72rem; letter-spacing: .12em;
             text-transform: uppercase; opacity: .55; }
.bv__titlu { margin: 0 0 .5rem; font-size: 1.35rem; line-height: 1.25; text-wrap: balance; }
.bv__text  { margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.6; opacity: .85; max-width: 42ch; }

.bv__act { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
/* Butoanele sunt mari: se apasă cu degetul, în picioare, pe stradă. */
.bv__act .btn { min-height: 48px; }
.bv__act .btn--quiet { color: inherit; opacity: .6; }
.bv__act .btn--quiet:hover { opacity: 1; background: transparent; }

/* =====================================================================
   PLANUL SĂLII CU PANOUL DE REZERVĂRI

   Planul în stânga, rezervările în dreapta. Nu e o alegere de aşezare:
   gazda de la intrare are telefonul la ureche şi trebuie să vadă în
   acelaşi cadru pe cine aşteaptă şi unde are loc. Două ecrane înseamnă
   un caiet pe recepţie, iar caietul nu ajunge niciodată în program.

   Pe tabletă în picioare şi pe telefon, panoul trece sub plan — în
   ordinea în care se lucrează: întâi vezi sala, apoi cine vine.
   ===================================================================== */

.plan--cu-panou {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-3, 1.5rem);
  align-items: start;
}

.plan__stanga { min-width: 0; }

.plan__panou {
  position: sticky;
  top: 1rem;
  border: 1px solid rgba(21,21,24,.14);
  background: #fff;
  max-height: calc(100svh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.plan__panou-file { display: flex; border-bottom: 1px solid rgba(21,21,24,.14); }

.plan__fila {
  flex: 1;
  padding: .7rem .5rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.plan__fila.is-activ { border-bottom-color: var(--ember, #B3401F); font-weight: 600; }

.plan__fila-nr {
  display: inline-block;
  min-width: 18px; padding: 0 .3rem;
  background: var(--ember, #B3401F); color: #fff;
  border-radius: 9px;
  font-size: .68rem; line-height: 17px;
  font-variant-numeric: tabular-nums;
}
.plan__fila-nr:empty { display: none; }

.plan__fila-corp { display: none; overflow-y: auto; padding: .5rem; }
.plan__fila-corp.is-activ { display: block; }

.plan__panou-nota { font-size: .76rem; opacity: .7; margin: .2rem .3rem .6rem; }

/* ---- o rezervare ---- */
.plan__rez, .plan__cer { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.plan__r {
  display: grid; gap: .15rem; width: 100%;
  padding: .55rem .6rem;
  border: 1px solid rgba(21,21,24,.14);
  background: #fff;
  font: inherit; text-align: left; cursor: pointer;
  border-left: 3px solid transparent;
}
.plan__r:hover { background: rgba(21,21,24,.03); }

/* Aleasă = ce urmează să pui pe plan. Se vede tare, fiindcă până o
   pui sau renunţi, apăsarea pe orice masă înseamnă altceva. */
.plan__r.e-aleasa { border-color: var(--ember, #B3401F); border-left-color: var(--ember, #B3401F); background: rgba(179,64,31,.07); }
.plan__r.e-acum   { border-left-color: #2f7a5a; }
.plan__r.e-tarziu { border-left-color: #B3401F; }
.plan__r.e-asezata { opacity: .62; }

.plan__r-sus { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.plan__r-ora { font-variant-numeric: tabular-nums; font-size: .82rem; opacity: .75; }
.plan__r-jos { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .74rem; opacity: .75; }
.plan__r-cand { font-variant-numeric: tabular-nums; }
.plan__r.e-tarziu .plan__r-cand { color: #B3401F; font-weight: 600; opacity: 1; }
.plan__r-masa { font-weight: 600; opacity: 1; }
.plan__r-fara { font-style: italic; }
.plan__r-ocazie, .plan__r-nota { font-size: .72rem; opacity: .7; }
.plan__r-ocazie { font-weight: 600; }

/* ---- ce cer mesele ---- */
.plan__c {
  display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center;
  width: 100%; padding: .5rem .6rem;
  border: 1px solid rgba(21,21,24,.14); background: #fff;
  font: inherit; text-align: left; cursor: pointer;
}
.plan__c:hover { background: rgba(21,21,24,.03); }
.plan__c.e-tarziu { border-color: rgba(179,64,31,.5); background: rgba(179,64,31,.06); }
.plan__c-masa { font-weight: 700; font-size: 1rem; min-width: 2ch; }
.plan__c-ce   { font-size: .78rem; }
.plan__c-ce i { opacity: .6; font-style: normal; }
.plan__c-timp { font-size: .74rem; opacity: .7; font-variant-numeric: tabular-nums; }
.plan__c.e-tarziu .plan__c-timp { color: #B3401F; font-weight: 600; opacity: 1; }
.plan__cer-gol { font-size: .8rem; opacity: .6; padding: .8rem .4rem; }

/* ---- mesele, când e aleasă o rezervare ----
   Nu se stinge nimic: gazda are voie să pună şase oameni la o masă de
   patru, iar o masă stinsă ar părea că n-are voie. Se ADAUGĂ un semn. */
.plan__masa.e-potrivita { outline: 3px solid #2f7a5a; outline-offset: 2px; }
.plan__masa.e-mica      { outline: 3px dashed #B3401F; outline-offset: 2px; }
.plan__masa.e-mare      { outline: 3px dotted #9a8c6a; outline-offset: 2px; }

/* ---- foaia mesei: blocuri noi ---- */
.plan__urmator {
  display: block; width: 100%;
  margin: .2rem 0 .9rem;
  padding: .8rem;
  border: 0; background: var(--ink, #151518); color: var(--cream, #F5EDD9);
  font: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer;
}
.plan__urmator:hover { background: var(--ember, #B3401F); }

.plan__foaie-bloc { margin-bottom: 1rem; }
.plan__foaie-titlu {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .55; margin: 0 0 .4rem;
}
.plan__foaie-mic { font-size: .74rem; opacity: .65; margin: -.2rem 0 .5rem; }

.plan__rez-cine { font-size: .9rem; margin: 0 0 .5rem; }
.plan__rez-butoane { display: flex; gap: .4rem; flex-wrap: wrap; }

.plan__aseaza { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; max-height: 220px; overflow-y: auto; }

.plan__as {
  display: grid; gap: .1rem; width: 100%;
  padding: .5rem .6rem;
  border: 1px solid rgba(21,21,24,.16); background: #fff;
  font: inherit; text-align: left; cursor: pointer;
  border-left: 3px solid rgba(21,21,24,.16);
}
.plan__as:hover { background: rgba(21,21,24,.04); }
.plan__as-cine  { font-size: .84rem; }
.plan__as-avert { font-size: .73rem; opacity: .8; }

.plan__as--bun  { border-left-color: #2f7a5a; }
.plan__as--mica { border-left-color: #B3401F; }
.plan__as--mica .plan__as-avert { color: #B3401F; }
.plan__as--mare { border-left-color: #9a8c6a; }

.plan__ospatari { display: flex; flex-wrap: wrap; gap: .3rem; }

.plan__om {
  padding: .4rem .6rem;
  border: 1px solid rgba(21,21,24,.18); background: #fff;
  font: inherit; font-size: .8rem; cursor: pointer;
}
.plan__om:hover { background: rgba(21,21,24,.05); }
.plan__om.is-acum { background: var(--ink, #151518); color: var(--cream, #F5EDD9); border-color: var(--ink, #151518); }
.plan__om i { font-style: normal; opacity: .6; font-size: .72rem; }
.plan__om.e-in-tura { border-color: rgba(47,122,90,.5); }

/* ---- rândul de răspuns ---- */
.plan__spune {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(120%);
  z-index: 60;
  max-width: min(560px, calc(100vw - 2rem));
  padding: .7rem 1rem;
  background: var(--ink, #151518); color: var(--cream, #F5EDD9);
  font-size: .86rem;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  transition: transform .2s;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.plan__spune.is-on { transform: translateX(-50%) translateY(0); }
.plan__spune--rau  { background: #8c2f16; }

@media (max-width: 1100px) {
  .plan--cu-panou { grid-template-columns: 1fr; }
  .plan__panou { position: static; max-height: none; }
  .plan__fila-corp { max-height: 46vh; }
}

/* =====================================================================
   NOTA CERUTĂ DE LA MASĂ, CU FELUL DE PLATĂ

   Clientul ŞTIE cum plăteşte în clipa în care apasă. Fără întrebarea
   asta, ospătarul pleacă cu nota, se întoarce după POS, şi pleacă iar —
   două drumuri pentru ceva ce se afla deja aici.

   Cele două butoane stau unul lângă altul, fiecare cât un deget: nu e
   un formular, e aceeaşi apăsare cu un detaliu.
   ===================================================================== */

.tbl__nota {
  margin-top: var(--s-3, 1.2rem);
  padding: var(--s-3, 1.2rem);
  border: 1px solid var(--line, rgba(21,21,24,.14));
  border-left: 3px solid var(--terra, #B3401F);
  background: var(--surface, #fff);
}

.tbl__nota-titlu {
  margin: 0 0 .7rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.tbl__nota-butoane { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* Butoanele de plată sunt mai scunde decât cele de chemare şi cu textul
   la mijloc: sunt o pereche, iar o pereche se citeşte dintr-o privire
   numai dacă e simetrică. */
.tbl__btn--plata {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: .8rem .6rem;
  border-left-width: 1px;
}
.tbl__btn--plata .tbl__btn-label { font-size: 1rem; font-weight: 600; }
.tbl__btn--plata:active { transform: scale(.985); }

/* 44px înălţime pe toată linia: bifa se apasă cu degetul mare, nu cu
   vârful unghiei. Pătratul singur are 20px — prea puţin pentru o mână
   care ţine şi un pahar. */
.tbl__nota-bifa {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .9rem;
  min-height: 44px;
  font-size: .95rem;
  cursor: pointer;
}
.tbl__nota-bifa input {
  width: 22px; height: 22px; flex: none;
  accent-color: var(--terra, #B3401F);
}

.tbl__nota-mic {
  margin: .3rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  opacity: .7;
}

/* Sub 340px — telefoanele mici, şi cele cu scrisul mărit — cele două
   butoane trec unul sub altul. Înghesuite, ar ajunge amândouă prea
   înguste ca să încapă cuvântul întreg. */
@media (max-width: 340px) {
  .tbl__nota-butoane { grid-template-columns: 1fr; }
}

/* =====================================================================
   OGLINDIREA ŞI MĂRIMEA SCRISULUI ÎN PLANUL SĂLII  (1.54.0)

   Piesa oglindită primeşte `--ox` / `--oy` (−1 sau 1) odată cu
   transformarea. Scrisul de pe ea se întoarce la loc: o masă în oglindă
   trebuie să-şi păstreze numărul citibil, altfel oglindirea ar face
   planul mai greu de citit în loc de mai adevărat.
   ===================================================================== */
.plan__masa  .plan__blat,
.plan__decor .plan__decor-et { transform: scale(var(--ox, 1), var(--oy, 1)); }

/* Pastila chemării stă în colţul mesei şi se mută odată cu ea — aşa şi
   trebuie, e a mesei ăleia. Dar cifra din ea se întoarce la loc: „7'"
   scris în oglindă nu se citeşte de la trei metri, care e toată treaba
   ei. */
.plan__masa .plan__cheama { transform: scale(var(--ox, 1), var(--oy, 1)); }

/* Mărimea scrisului, aleasă pe masă din editor. `--scris` e un raport
   (1 = cât a fost până acum), iar înmulţirea păstrează raporturile
   dintre număr, stare şi timp: cresc toate deodată. */
.plan__cod      { font-size: calc(1.25em * var(--scris, 1)); }
.plan__timp     { font-size: calc(.78em  * var(--scris, 1)); }
.plan__nrscaune { font-size: calc(.7em   * var(--scris, 1)); }
.plan__decor-et { font-size: calc(clamp(.55rem, 1.2vw, .78rem) * var(--scris, 1)); }

/* Masa fără jeton valid: loc gol, scris pe faţă, în locul unui cod QR
   care s-ar scana perfect şi ar duce la o pagină de eroare. */
.qrs__code--rupt {
  display: grid; gap: .3rem; align-content: center; text-align: center;
  width: 148px; height: 148px; box-sizing: border-box;
  border: 2px dashed #b3401f; color: #b3401f;
  padding: 10px; font-size: .68rem; line-height: 1.35;
}
.qrs__code--rupt strong { font-size: .8rem; letter-spacing: .04em; }

/* ═══════════════════════════════════════════════════════════════════
   OASPETELE CARE COMANDĂ DE LA MASĂ                          1.72.0
   ═══════════════════════════════════════════════════════════════════
   Ecranul ăsta se deschide pe telefonul unui client, în local, la
   lumină puţină, de către cineva care n-a mai văzut programul
   niciodată şi n-o să-l mai vadă. Deci: ţinte de 44 de pixeli, cifre
   `tabular-nums` ca totalul să nu joace, şi nimic care să depindă
   numai de culoare.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- ecranul oaspetelui ---------- */
.osp { max-width: 40rem; margin: 0 auto; padding: 0 1rem 6rem; }
.osp--nu { padding-top: 2rem; }
.osp__t { font-size: 1.4rem; margin: 1rem 0 .3rem; }
.osp__st { margin: 0 0 1rem; font-size: .92rem; }
.osp__cum {
  border-left: 3px solid #1f6f4a; padding: .6rem .8rem; margin-bottom: 1.1rem;
  background: rgba(31,111,74,.06); border-radius: 0 8px 8px 0; font-size: .88rem;
}
.osp__cauta { display: block; margin-bottom: 1rem; }
.osp__cauta .field__i { min-height: 48px; }
.osp__nimic { opacity: .6; padding: 1rem 0; }
.osp__jos { margin-top: 1.4rem; }

.osp-cat { margin-bottom: 1.2rem; }
.osp-cat__t { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin: 0 0 .45rem; }
.osp-cat__p { display: grid; gap: .4rem; }

.osp-p {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  min-height: 52px; padding: .55rem .8rem;
  border: 1px solid var(--linie, rgba(0,0,0,.14)); border-radius: 10px;
  background: #fff; font: inherit; cursor: pointer;
}
/* Stins cât aşteaptă încuviinţarea — dar tot lizibil: meniul e exact
   ce vrea omul să citească în minutele alea. */
.osp-p[disabled] { opacity: .75; cursor: default; }
.osp-p__n { flex: 1 1 auto; }
.osp-p__pr { font-variant-numeric: tabular-nums; opacity: .75; font-size: .88rem; }

.osp-foaie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff;
  border-top: 1px solid var(--linie, rgba(0,0,0,.16));
  box-shadow: 0 -6px 20px rgba(0,0,0,.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.osp-foaie__maner {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  min-height: 56px; padding: .6rem .9rem; border: 0; background: transparent;
  font: inherit; cursor: pointer;
}
.osp-foaie__cat {
  min-width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  border-radius: 999px; background: #151518; color: #fff; font-size: .86rem; font-weight: 700;
}
.osp-foaie__l { flex: 1 1 auto; text-align: left; font-weight: 600; }
.osp-foaie__tot { font-weight: 700; font-variant-numeric: tabular-nums; }
.osp-foaie__corp { max-height: 55vh; overflow-y: auto; padding: 0 .9rem .9rem; }
.osp-foaie__gol { opacity: .6; padding: .6rem 0; }

.osp-l {
  display: flex; align-items: flex-start; gap: .5rem; padding: .5rem 0;
  border-bottom: 1px solid var(--linie, rgba(0,0,0,.08));
}
/* Ce a cerut el e îngroşat, restul mesei nu: aşa vede dintr-o privire
   care e partea lui fără să ascundem nota celorlalţi. */
.osp-l.is-al-meu .osp-l__n { font-weight: 600; }
.osp-l__c { font-weight: 700; min-width: 1.6rem; font-variant-numeric: tabular-nums; }
.osp-l__n { flex: 1 1 auto; line-height: 1.3; }
.osp-l__n em { display: block; font-style: normal; font-size: .8rem; opacity: .7; font-weight: 400; }
.osp-l__p { font-variant-numeric: tabular-nums; }
.osp-l__st { font-size: .74rem; opacity: .6; align-self: center; }
.osp-l__x {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px;
  border: 1px solid var(--linie, rgba(0,0,0,.16)); background: transparent;
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
}

.osp-sert { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.osp-sert__fund { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.osp-sert__cutie {
  position: relative; width: 100%; max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 16px 16px 0 0; padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.osp-sert__cap { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.osp-sert__cap strong { flex: 1 1 auto; font-size: 1.05rem; }
.osp-sert__x {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--linie, rgba(0,0,0,.16)); background: transparent;
  font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.osp-sert__astept { opacity: .6; padding: .6rem 0; }
.osp-sert__cant { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: .9rem 0; }
.osp-sert__cant strong { min-width: 2rem; text-align: center; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.osp-sert__cant .btn { min-width: 52px; min-height: 44px; font-size: 1.2rem; }
.osp-sert__rau { color: #b3401f; margin: .4rem 0 .6rem; font-size: .9rem; }

.osp-g { border: 0; padding: 0; margin: 0 0 1rem; }
.osp-g__l { font-weight: 700; font-size: .92rem; padding: 0; }
.osp-g__cer { font-weight: 400; font-size: .76rem; color: #b3401f; }
.osp-g__aj { margin: .15rem 0 .4rem; font-size: .8rem; opacity: .7; }
.osp-g__o { display: grid; gap: .35rem; margin-top: .45rem; }
.osp-o {
  display: flex; align-items: center; gap: .6rem; min-height: 46px; padding: .4rem .6rem;
  border: 1px solid var(--linie, rgba(0,0,0,.14)); border-radius: 10px; cursor: pointer;
}
.osp-o input { width: 20px; height: 20px; flex: 0 0 auto; }
.osp-o em { font-style: normal; opacity: .7; font-variant-numeric: tabular-nums; }
.osp-o:has(input:checked) { border-color: #1f6f4a; background: rgba(31,111,74,.06); }

.osp__mesaj {
  position: fixed; left: 50%; bottom: 5.2rem; transform: translateX(-50%); z-index: 50;
  max-width: calc(100% - 2rem); padding: .55rem .9rem; border-radius: 10px;
  background: #151518; color: #fff; font-size: .9rem;
}
.osp__mesaj.e-rau { background: #b3401f; }

/* Butonul de pe pagina mesei scanate. */
.tbl__com { margin: 1rem 0 1.2rem; text-align: center; }
.tbl__com-b {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .7rem 1.4rem; width: 100%;
  border: 2px solid currentColor; border-radius: 12px;
  background: transparent; color: inherit; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.tbl__com-ce, .tbl__com-ast { margin: .5rem 0 0; font-size: .85rem; opacity: .75; }


/* =====================================================================
   INDICATORUL CU CINE ŢINE MASA — pe planul sălii
   =====================================================================

   O pastilă mică, lipită de colţul de sus-dreapta al mesei, cu
   iniţialele celui care o are în tura asta, în CULOAREA RAIONULUI.

   DE CE LÂNGĂ MASĂ ŞI NU PE EA
   Pe blat stau deja codul, starea şi cronometrul. A patra bucată de
   text acolo le-ar face pe toate patru ilizibile pe o masă de două
   persoane — iar planul se citeşte de la doi metri, în picioare.

   DE CE NU SE CHEAMĂ `plan__om`
   Fiindcă numele ăla era deja luat — de butoanele din lista de ospătari
   de pe acelaşi ecran. Prima scriere l-a folosit, iar regulile de aici
   s-au aplicat peste butoanele alea: cincisprezece elemente vopsite
   fără ca nimeni să fi cerut asta, şi niciun semn pe ecran că s-ar fi
   întâmplat ceva. Găsit uitându-mă la ce elemente poartă clasa, nu la
   cum arată pagina.

   DE CE CULOAREA RAIONULUI
   Iniţialele spun CINE. Culoarea spune UNDE se termină un raion şi
   începe altul — lucru pe care, pe un plan cu treizeci şi şase de mese,
   nu-l poate spune niciun text scris mic.
   --------------------------------------------------------------------- */
.plan__tine {
  position: absolute;
  top: -.45em; inset-inline-end: -.45em;
  z-index: 3;
  min-width: 1.5em; height: 1.5em;
  padding: 0 .25em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--om-c, #8a8f98);
  color: #fff;
  font-size: .62em; font-weight: 700; letter-spacing: .02em;
  line-height: 1;
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* Masa fără raion: gri, şi mai stins. Nu ascuns — omul tot îl ţine pe
   masa aia — dar fără să pretindă că griul e o culoare de raion. */
.plan__tine--fara { background: #8a8f98; opacity: .75; }

/* O masă care cheamă are deja destul pe ea; pastila se dă la o parte
   ca să nu acopere semnul de chemare. */
.plan__masa.are-chemare .plan__tine { top: -.45em; inset-inline-end: 1.1em; }