/* ============================================================
   pages/meniu.css — Meniu Styles v2
   ============================================================ */

/* ── Tab-uri ─────────────────────────────────────────────── */
.meniu-tabs {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center; margin-bottom: 3rem;
}
.meniu-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-label); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .6rem 1.1rem;
  border: 1.5px solid var(--mist); border-radius: 99px;
  background: transparent; color: var(--stone);
  cursor: pointer; transition: all .25s;
}
.meniu-tab:hover { border-color: var(--amber); color: var(--amber); }
.meniu-tab.active {
  background: var(--forest-deep); border-color: var(--forest-deep); color: var(--parchment);
}
.meniu-tab-icon { font-size: 1rem; }
.meniu-tab-cnt {
  background: rgba(0,0,0,.1); border-radius: 99px;
  padding: .08rem .42rem; font-size: .58rem; line-height: 1.5;
}
.meniu-tab.active .meniu-tab-cnt { background: rgba(247,242,232,.15); }

/* ── Sectiune ────────────────────────────────────────────── */
.meniu-section { display: none; }
.meniu-section.active { display: block; animation: fadeIn .4s ease; }
.meniu-cat-wrap { max-width: 900px; margin: 0 auto; }

/* ── Hero imagine categorie ──────────────────────────────── */
.meniu-cat-hero {
  position: relative; border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 2.5rem;
  aspect-ratio: 16/5; min-height: 180px;
  box-shadow: var(--shadow-md);
}
.meniu-cat-hero img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.meniu-cat-hero:hover img { transform: scale(1.03); }
.meniu-cat-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(27,46,26,.78) 0%, rgba(27,46,26,.25) 100%);
  display: flex; flex-direction: column;
  justify-content: center; padding: 2rem 2.5rem;
}
.meniu-cat-hero-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.meniu-cat-hero-title {
  font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.2rem);
  color: var(--warm-white); margin-bottom: .5rem;
}
.meniu-cat-hero-desc {
  font-family: var(--font-label); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber-pale);
}

/* ── Header categorie fara imagine ──────────────────────── */
.meniu-cat-header {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.5rem 0; margin-bottom: 2rem;
  border-bottom: 2px solid var(--parchment);
}
.meniu-cat-header-icon { font-size: 2.5rem; flex-shrink: 0; }
.meniu-cat-title-text { font-family: var(--font-display); font-size: 1.8rem; color: var(--forest-deep); }
.meniu-cat-subtitle {
  font-family: var(--font-label); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber); margin-top: .25rem;
}

/* ── Grid preparate ──────────────────────────────────────── */
.meniu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,260px), 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

/* ── Card preparat ───────────────────────────────────────── */
.meniu-card {
  background: var(--warm-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--parchment);
  overflow: hidden;
  transition: all .3s ease;
  display: flex; flex-direction: column;
}
.meniu-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: rgba(200,137,42,.25);
}

/* Card cu poza */
.meniu-card--photo .meniu-card-img-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3;
}
.meniu-card--photo .meniu-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.meniu-card--photo:hover .meniu-card-img { transform: scale(1.06); }
.meniu-card-badge {
  position: absolute; top: .75rem; right: .75rem;
  font-family: var(--font-label); font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .65rem; border-radius: 99px; color: #fff;
}
.meniu-card-badge--new { background: var(--amber); }
.meniu-card-badge--veg { background: #4caf50; }
.meniu-card-badge--hot { background: #e74c3c; }

/* Card body */
.meniu-card-body {
  padding: 1rem 1.1rem; flex: 1;
  display: flex; flex-direction: column; gap: .4rem;
}
.meniu-card-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: .5rem;
}
.meniu-card-name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600;
  color: var(--forest-deep); line-height: 1.25; flex: 1;
}
.meniu-card-desc {
  font-size: .84rem; color: var(--stone);
  font-style: italic; line-height: 1.4; flex: 1;
}
.meniu-card-footer {
  display: flex; align-items: center;
  justify-content: space-between; margin-top: .5rem;
  padding-top: .5rem; border-top: 1px solid var(--parchment);
}
.meniu-card-price {
  font-family: var(--font-label); font-size: .88rem; font-weight: 700;
  color: var(--amber); letter-spacing: .04em;
}
.meniu-card-alergen {
  font-family: var(--font-label); font-size: .6rem;
  color: var(--stone); letter-spacing: .04em;
}

/* Badge-uri inline (card fara poza) */
.meniu-item__badge {
  display: inline-block; font-family: var(--font-label);
  font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .15rem .5rem;
  border-radius: 99px; color: #fff; flex-shrink: 0;
}
.meniu-item__badge--new { background: var(--amber); }
.meniu-item__badge--veg { background: #4caf50; }
.meniu-item__badge--hot { background: #e74c3c; }

/* ── Disclaimer ──────────────────────────────────────────── */
.meniu-disclaimer {
  text-align: center; color: var(--stone); font-size: .82rem;
  margin-top: 3rem; padding: 1.5rem 2rem;
  background: var(--parchment); border-radius: var(--radius-md);
}
.allergens-legend {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center; margin-top: 1rem;
}
.allergen-tag {
  background: var(--warm-white); border: 1px solid var(--mist);
  border-radius: 4px; padding: .25rem .6rem;
  font-family: var(--font-label); font-size: .65rem; color: var(--stone);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .meniu-cat-hero-overlay { padding: 1.25rem 1.5rem; }
  .meniu-cat-hero-title   { font-size: 1.4rem; }
  .meniu-cat-hero-icon    { font-size: 1.8rem; }
  .meniu-grid             { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .meniu-grid { grid-template-columns: 1fr; }
}

/* v3.0 — loc pregătit pentru poza fiecărui produs */
.meniu-card-img-wrap--placeholder {
  background: linear-gradient(135deg, rgba(27,46,26,.07), rgba(200,137,42,.12));
  border-bottom: 1px solid var(--parchment);
}
.meniu-card-placeholder {
  width: 100%; height: 100%; min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; text-align: center; padding: 1rem; color: var(--stone);
}
.meniu-card-placeholder__icon { font-size: 1.6rem; opacity: .85; }
.meniu-card-placeholder__label { font-family: var(--font-label); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--forest-deep); }
.meniu-card-placeholder small { font-size: .55rem; line-height: 1.35; opacity: .62; word-break: break-word; max-width: 100%; }

/* ── Catalog original la final de pagină ───────────────────── */
.meniu-archive {
  margin-top: 3rem;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #1c1f22 0%, #0d0f11 100%);
  color: #f7f2e8;
  box-shadow: 0 18px 38px rgba(15, 18, 20, .16);
}
.meniu-archive__head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 1.35rem;
}
.meniu-archive__head h2 {
  color: #fff;
  margin: .5rem 0 .55rem;
}
.meniu-archive__head p {
  color: rgba(247,242,232,.78);
  line-height: 1.7;
}
.menu-film-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem .2rem 1.25rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,137,42,.8) rgba(255,255,255,.08);
}
.menu-film-strip::-webkit-scrollbar { height: 12px; }
.menu-film-strip::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}
.menu-film-strip::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(200,137,42,.85), rgba(244,209,138,.85));
  border-radius: 999px;
  border: 2px solid rgba(13,15,17,.25);
}
.menu-film-frame {
  min-width: 300px;
  width: min(82vw, 340px);
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0;
}
.menu-film-frame__inner {
  position: relative;
  padding: 26px 14px;
  border-radius: 18px;
  background: #0b0b0b;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.28);
}
.menu-film-frame__inner::before,
.menu-film-frame__inner::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 14px;
  background-image: radial-gradient(circle, rgba(247,242,232,.82) 30%, transparent 31%);
  background-size: 24px 14px;
  background-repeat: repeat-x;
  opacity: .55;
}
.menu-film-frame__inner::before { top: 6px; }
.menu-film-frame__inner::after { bottom: 6px; }
.menu-film-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: #202225;
}
.menu-film-frame figcaption {
  margin-top: .65rem;
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(247,242,232,.84);
  text-align: center;
}
.menu-film-strip__hint {
  margin: .7rem 0 0;
  text-align: center;
  font-size: .75rem;
  color: rgba(247,242,232,.6);
}

@media (max-width: 640px) {
  .meniu-archive { padding: 1.15rem; }
  .menu-film-frame { min-width: 265px; }
}


/* v3.0.2 — fotografie mare + bandă film pentru meniul original */
.menu-feature-frame {
  max-width: 760px;
  margin: 1.4rem auto 1.15rem;
  padding: 1rem;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 44%), #0b0b0b;
  box-shadow: 0 18px 45px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.06);
}
.menu-feature-frame img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 14px;
  background: #202225;
}
.menu-feature-frame figcaption {
  margin-top: .75rem;
  color: rgba(247,242,232,.9);
  text-align: center;
  font-weight: 700;
  letter-spacing: .03em;
}
.menu-film-strip--thumbs {
  align-items: stretch;
  padding-top: 1.15rem;
}
.menu-film-thumb {
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
  padding: 0;
  color: inherit;
}
.menu-film-thumb .menu-film-frame__inner {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.menu-film-thumb:hover .menu-film-frame__inner,
.menu-film-thumb.active .menu-film-frame__inner {
  transform: translateY(-4px);
  border-color: rgba(244,209,138,.62);
  box-shadow: inset 0 0 0 1px rgba(244,209,138,.20), 0 16px 28px rgba(0,0,0,.34);
}
.menu-film-thumb.active .menu-film-frame__caption {
  color: var(--amber-pale);
}
.menu-film-frame__caption {
  display: block;
  margin-top: .65rem;
  font-size: .76rem;
  letter-spacing: .04em;
  color: rgba(247,242,232,.84);
}
@media (max-width:640px){
  .menu-feature-frame{padding:.65rem;border-radius:16px;}
  .menu-feature-frame img{max-height:72vh;}
}

/* v3.0.3 — bandă film foto mult mai mică decât imaginea mare */
.menu-feature-frame {
  max-width: 860px;
}
.menu-film-strip--thumbs {
  gap: .65rem;
  padding: .85rem .1rem 1rem;
}
.menu-film-thumb {
  min-width: 116px;
  width: 116px;
  flex: 0 0 116px;
}
.menu-film-thumb .menu-film-frame__inner {
  padding: 14px 8px;
  border-radius: 12px;
}
.menu-film-thumb .menu-film-frame__inner::before,
.menu-film-thumb .menu-film-frame__inner::after {
  left: 5px;
  right: 5px;
  height: 8px;
  background-size: 16px 8px;
}
.menu-film-thumb .menu-film-frame__inner::before { top: 3px; }
.menu-film-thumb .menu-film-frame__inner::after { bottom: 3px; }
.menu-film-thumb img {
  aspect-ratio: 2 / 3;
  border-radius: 5px;
}
.menu-film-frame__caption {
  font-size: .63rem;
  line-height: 1.35;
  margin-top: .42rem;
}
.menu-film-strip::-webkit-scrollbar { height: 8px; }
.menu-film-strip::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
}
.menu-film-strip::-webkit-scrollbar-thumb {
  border-width: 1px;
}
@media (max-width:640px){
  .menu-film-thumb,
  .menu-film-thumb { min-width: 98px; width: 98px; flex-basis: 98px; }
  .menu-film-thumb .menu-film-frame__inner { padding: 12px 7px; }
  .menu-film-frame__caption { font-size: .58rem; }
}

/* v3.0.4 — polish real pentru banda film foto */
.menu-film-strip--thumbs {
  position: relative;
  gap: .85rem;
  padding: 1.15rem .9rem 1.25rem;
  border-radius: 24px;
  background:
    linear-gradient(180deg, #181818 0%, #090909 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 16px 34px rgba(0,0,0,.26);
  scrollbar-color: rgba(214,180,111,.95) rgba(255,255,255,.08);
}
.menu-film-strip--thumbs::before,
.menu-film-strip--thumbs::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 12px;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to right,
      rgba(245,238,219,.95) 0 8px,
      transparent 8px 20px
    );
  opacity: .45;
}
.menu-film-strip--thumbs::before { top: 8px; }
.menu-film-strip--thumbs::after { bottom: 8px; }
.menu-film-thumb {
  position: relative;
  z-index: 1;
  min-width: 128px;
  width: 128px;
  flex: 0 0 128px;
}
.menu-film-thumb .menu-film-frame__inner {
  position: relative;
  padding: 18px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #242424 0%, #111111 100%);
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 14px rgba(0,0,0,.24);
}
.menu-film-thumb .menu-film-frame__inner::before,
.menu-film-thumb .menu-film-frame__inner::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 8px;
  background: repeating-linear-gradient(to right, rgba(248,241,224,.92) 0 6px, transparent 6px 14px);
  opacity: .42;
}
.menu-film-thumb .menu-film-frame__inner::before { top: 5px; }
.menu-film-thumb .menu-film-frame__inner::after { bottom: 5px; }
.menu-film-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4px;
  filter: saturate(.95) contrast(1.02);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}
.menu-film-thumb .menu-film-frame__caption {
  display: block;
  margin-top: .45rem;
  padding: 0 .15rem;
  font-size: .62rem;
  line-height: 1.35;
  color: rgba(247,242,232,.75);
}
.menu-film-thumb:hover .menu-film-frame__inner,
.menu-film-thumb.active .menu-film-frame__inner {
  transform: translateY(-4px) rotate(-.4deg);
  border-color: rgba(244,209,138,.58);
  box-shadow: inset 0 0 0 1px rgba(244,209,138,.18), 0 16px 24px rgba(0,0,0,.38);
}
.menu-film-thumb:nth-child(even):hover .menu-film-frame__inner,
.menu-film-thumb:nth-child(even).active .menu-film-frame__inner {
  transform: translateY(-4px) rotate(.35deg);
}
.menu-film-thumb.active .menu-film-frame__caption {
  color: var(--amber-pale);
}
@media (max-width:640px) {
  .menu-film-strip--thumbs { padding: 1rem .7rem 1.05rem; }
  .menu-film-thumb {
    min-width: 110px;
    width: 110px;
    flex-basis: 110px;
  }
  .menu-film-thumb .menu-film-frame__inner { padding: 15px 8px; }
}