/* =========================================================================
   Meniu flipbook — stiluri proprii, fără dependenţe.
   Nu foloseşte Tailwind: template-ul trebuie să funcţioneze fără build.
   ========================================================================= */

.fb {
  --fb-bg:        #f3f4f6;
  --fb-panel:     #ffffff;
  --fb-text:      #111827;
  --fb-muted:     #6b7280;
  --fb-line:      #e5e7eb;
  --fb-accent:    #059669;
  --fb-accent-tx: #ffffff;
  --fb-shadow:    0 10px 30px rgba(0,0,0,.14);
  --fb-bar:       56px;

  position: fixed;
  inset: 0;
  /* Fără strat propriu: aşa bannerul de cookie-uri şi butonul de WhatsApp
     (z-50, la nivel de pagină) rămân deasupra şi rămân utilizabile. Lupa, care
     trebuie să acopere tot, are z-index 60 şi trece peste ele. */
  display: flex;
  flex-direction: column;
  background: var(--fb-bg);
  color: var(--fb-text);
  font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

.fb[data-theme="dark"] {
  --fb-bg:    #0b1220;
  --fb-panel: #111827;
  --fb-text:  #f3f4f6;
  --fb-muted: #9ca3af;
  --fb-line:  #1f2937;
  --fb-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* ---------- bara de sus ---------- */
.fb__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--fb-bar);
  padding: 0 10px;
  background: var(--fb-panel);
  border-bottom: 1px solid var(--fb-line);
  z-index: 30;
}
.fb__title { flex: 1 1 auto; min-width: 0; max-width: 46%; }
.fb__title b { display: block; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb__title span { display: block; font-size: 12px; color: var(--fb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fb__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--fb-line); border-radius: 10px;
  background: var(--fb-panel); color: var(--fb-text);
  font-size: 13px; font-weight: 550; cursor: pointer;
  transition: background .15s ease, transform .06s ease;
  -webkit-tap-highlight-color: transparent;
}
.fb__btn:hover  { background: color-mix(in srgb, var(--fb-panel) 88%, var(--fb-text)); }
.fb__btn:active { transform: scale(.96); }
.fb__btn[disabled] { opacity: .38; cursor: default; }
.fb__btn--primary { background: var(--fb-accent); border-color: var(--fb-accent); color: var(--fb-accent-tx); }
.fb__btn--primary:hover { background: color-mix(in srgb, var(--fb-accent) 85%, #000); }
.fb__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.fb__btn span { display: none; }
@media (min-width: 1180px) { .fb__btn span { display: inline; } }

/* Grupul de acţiuni nu se micşorează: altfel butoanele se suprapun. */
.fb__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.fb__actions .fb__btn { flex: 0 0 auto; }

.fb__count {
  min-width: 58px; text-align: center;
  font-variant-numeric: tabular-nums; font-size: 13px; color: var(--fb-muted);
}

/* ---------- scena ---------- */
.fb__stage {
  flex: 1 1 auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* Toate gesturile din scenă sunt ale noastre. `pan-y pinch-zoom` nu e recunoscut
     peste tot, iar o valoare neparsată cade pe `auto`, adică browserul confiscă
     glisarea orizontală. Scena nu derulează, deci `none` e şi corect, şi sigur. */
  touch-action: none;
}
.fb__book { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
/* Cartea închisă ocupă doar jumătatea dreaptă; o centrăm ca să arate a carte închisă. */
.fb__book.is-closed { transform: translateX(-25%); }
/* Cartea închisă stă lipită în dreapta, cu jumătatea stângă goală. Centrarea
   plus alunecarea la deschidere elimină senzaţia de salt. */
.fb__book { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.fb__book.is-closed { transform: translateX(-25%); }

.fb__book img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--fb-panel); }

/* Ecran întreg propriu, pentru browserele care nu-l oferă pentru elemente
   oarecare (Safari pe iPhone). */
.fb.is-fs { z-index: 9999; }

/* ---------- bara de jos, pe mobil ---------- */
.fb__dock {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--fb-panel); border-top: 1px solid var(--fb-line);
}
@media (min-width: 900px) { .fb__dock { display: none; } }

/* ---------- miniaturi ---------- */
.fb__thumbs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--fb-panel); border-top: 1px solid var(--fb-line);
  transform: translateY(110%); transition: transform .32s cubic-bezier(.22,.61,.36,1);
  box-shadow: var(--fb-shadow);
}
.fb__thumbs.is-open { transform: none; }
.fb__thumbs-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
.fb__thumbs-head b { font-size: 13px; }
.fb__thumbs-list { display: flex; gap: 10px; overflow-x: auto; padding: 4px 12px 14px; scrollbar-width: thin; }
.fb__thumb {
  flex: 0 0 auto; width: 74px; border: 2px solid transparent; border-radius: 8px;
  background: none; padding: 0; cursor: pointer; overflow: hidden; line-height: 0;
}
.fb__thumb img { width: 100%; height: auto; display: block; border-radius: 6px; }
.fb__thumb b { display: block; font-size: 11px; line-height: 18px; color: var(--fb-muted); text-align: center; }
.fb__thumb.is-current { border-color: var(--fb-accent); }
.fb__thumb.is-current b { color: var(--fb-accent); }

/* ---------- lupă ---------- */
.fb__zoom {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(8,12,20,.94); touch-action: none;
}
.fb__zoom.is-open { display: block; }
.fb__zoom-img {
  position: absolute; top: 50%; left: 50%;
  transform-origin: center center;
  will-change: transform;
  max-width: none; user-select: none; -webkit-user-drag: none;
}
.fb__zoom-bar {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 14px;
  background: rgba(17,24,39,.9); box-shadow: var(--fb-shadow);
}
.fb__zoom-bar .fb__btn { background: transparent; border-color: rgba(255,255,255,.22); color: #fff; }
.fb__zoom-bar .fb__btn:hover { background: rgba(255,255,255,.12); }
.fb__zoom-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: rgba(17,24,39,.9); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ---------- încărcare ---------- */
.fb__loader {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 10px; color: var(--fb-muted); font-size: 14px; z-index: 40;
  background: var(--fb-bg);
}
.fb__loader.is-done { display: none; }
.fb__spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--fb-line); border-top-color: var(--fb-accent);
  animation: fb-spin .8s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }

/* ---------- indiciu de răsfoire ---------- */
.fb__hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 26; display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(17,24,39,.82); color: #fff; font-size: 13px;
  pointer-events: none; transition: opacity .35s ease;
}
.fb__hint.is-gone { opacity: 0; }
.fb__hint svg { width: 17px; height: 17px; animation: fb-nudge 1.7s ease-in-out infinite; }
@keyframes fb-nudge { 0%,100% { transform: translateX(4px); } 50% { transform: translateX(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .fb__book, .fb__thumbs, .fb__hint svg { transition: none; animation: none; }
}

/* ---------- telefon ---------- */
@media (max-width: 899px) {
  /* Navigarea, miniaturile şi lupa stau în bara de jos, la degetul mare.
     În bara de sus rămân doar titlul, contorul, tema şi ecranul întreg. */
  #fb-prev, #fb-next, #fb-thumbs-btn, #fb-zoom-btn, #fb-info-btn { display: none; }
  .fb__title { max-width: none; }
  .fb__bar { gap: 6px; padding: 0 8px; }
  .fb__count { min-width: 46px; font-size: 12px; }
}

/* Site-ul are propriul buton de temă, fixat peste bara noastră. Îl ascundem
   doar pe acest şablon — bara are deja unul, iar suprapunerea făcea butoanele
   ilizibile. Bannerul de cookie-uri şi butonul de WhatsApp rămân neatinse. */
body.has-flipbook [data-theme-toggle],
body.has-flipbook #theme-toggle { display: none !important; }

/* ---------- lupă pe pagină (doar mouse) ---------- */
.fbx__pane { cursor: pointer; }

.fb__pagezoom {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
  background: rgba(17,24,39,.72); color: #fff;
  cursor: zoom-in; opacity: 0;
  transition: opacity .18s ease, background .18s ease;
}
.fb__pagezoom svg { width: 18px; height: 18px; }
.fb__pagezoom:hover { background: rgba(17,24,39,.92); }
.fbx__pane:hover .fb__pagezoom { opacity: 1; }

/* Pe ecrane tactile nu există hover, iar bara de jos are deja lupă. */
@media (hover: none), (max-width: 899px) {
  .fb__pagezoom { display: none; }
}

/* =========================================================================
   Motorul propriu de răsfoire — transformări 3D CSS, fără biblioteci.

   O pagină care se întoarce e o "foaie" cu două feţe, rotită în jurul cotorului.
   Faţa din spate e oglindită, iar `backface-visibility` decide care se vede.
   Totul e accelerat de placa video, deci merge bine şi pe telefoane modeste.
   ========================================================================= */

.fbx {
  position: relative;
  /* Valoarea concretă se pune din JS, pe măsura lăţimii cărţii. */
  perspective: 1400px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  user-select: none;
  -webkit-user-select: none;
}

.fbx__pane {
  position: absolute; top: 0; height: 100%;
  overflow: hidden;
  background: var(--fb-panel);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
.fbx__pane img { width: 100%; height: 100%; object-fit: contain; display: block; }

.fbx__pane--left  { left: 0;   width: 50%; }
.fbx__pane--right { left: 50%; width: 50%; }

/* Pe telefon există o singură pagină, pe toată lăţimea. */
.fbx.is-single .fbx__pane--left  { display: none; }
.fbx.is-single .fbx__pane--right { left: 0; width: 100%; }

/* Când se vede o singură pagină — coperta la început, ori o filă rămasă singură
   la final — cartea ar sta lipită într-o jumătate, cu un gol alături. Nu citeşte
   ca o carte închisă, ci ca o pagină rătăcită. O centrăm, şi lăsăm deschiderea
   să alunece lin la loc. */
.fbx { transition: transform .5s cubic-bezier(.22,.61,.36,1); }

.fbx.is-closed .fbx__pane--left  { visibility: hidden; }
.fbx.is-closed                   { transform: translateX(-25%); }

.fbx.is-closed-back .fbx__pane--right { visibility: hidden; }
.fbx.is-closed-back                   { transform: translateX(25%); }

.fbx.is-single { transition: none; transform: none !important; }

/* ---------- foaia care se întoarce ---------- */
.fbx__leaf {
  position: absolute; top: 0; height: 100%; width: 50%;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 5;
}
.fbx.is-single .fbx__leaf { width: 100%; }

.fbx__leaf--fwd  { left: 50%; transform-origin: left center; }
.fbx__leaf--back { left: 0;   transform-origin: right center; }
/* Pe telefon cotorul e în stânga şi nu se mută. Fila se roteşte în jurul lui în
   ambele sensuri — doar direcţia diferă, exact ca la o carte ţinută deschisă la
   o singură pagină. Mutarea balamalei dintr-o parte în alta arăta ca şi cum
   cartea şi-ar schimba cotorul de la o filă la alta. */
/* Pe telefon cotorul e în stânga şi nu se mută. */
.fbx.is-single .fbx__leaf--fwd,
.fbx.is-single .fbx__leaf--back { left: 0; transform-origin: left center; }

.fbx__face {
  position: absolute; inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--fb-panel);
}
.fbx__face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fbx__face--back { transform: rotateY(180deg); }

/* Umbra de sub foaie: dă senzaţia de grosime şi de hârtie care se ridică. */
.fbx__shade {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,0) 42%);
  opacity: 0;
}
.fbx__leaf--back .fbx__shade {
  background: linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,0) 42%);
}

/* Umbra proiectată pe pagina de dedesubt, cât foaia e ridicată. */
.fbx__cast {
  position: absolute; top: 0; height: 100%; width: 50%;
  pointer-events: none; z-index: 4; opacity: 0;
  background: linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);
}
.fbx.is-single .fbx__cast { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .fbx__leaf { transition: none !important; }
}

/* Pe iPhone, apăsarea lungă pe o imagine deschide meniul de sistem şi anulează
   gestul în curs. Le oprim doar în interiorul cărţii. */
.fbx img, .fbx__face img, .fbx__pane img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* =========================================================================
   Pagina de dedesubt nu mai derulează.

   Vizorul acoperă tot ecranul, dar conţinutul public al restaurantului rămâne
   în pagină (pentru indexare), iar corpul rămânea derulabil. Pe telefon asta
   însemna că orice gest care nu era perfect orizontal era revendicat de browser
   drept derulare, iar răsfoirea se anula — de aici senzaţia că glisarea nu merge.
   ========================================================================= */
html.has-flipbook,
body.has-flipbook {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
  touch-action: none;
}

/* ---------- panou cu detaliile restaurantului ---------- */
.fb__sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
  max-height: 82vh; display: flex; flex-direction: column;
  background: var(--fb-panel); border-top: 1px solid var(--fb-line);
  border-radius: 18px 18px 0 0; box-shadow: var(--fb-shadow);
  transform: translateY(110%);
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.fb__sheet.is-open { transform: none; }

.fb__sheet-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--fb-line);
}
.fb__sheet-head b { font-size: 15px; }

/* Cardul e lung: îi dăm derulare proprie, fără să deblocăm pagina de dedesubt. */
.fb__sheet-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; touch-action: pan-y;
  padding: 0 0 calc(12px + env(safe-area-inset-bottom));
}