/* ────────────────────────────────
   Eden Roc Cap Cana — Menu Styles
   ──────────────────────────────── */

:root {
  --navy:      #0B1D34;
  --gold:      #C8A96A;
  --gold-lt:   #d9bc88;
  --cream:     #F6F3EE;
  --white:     #FFFFFF;
  --text:      #0B1D34;
  --muted:     #7a7264;
  --green:     #4a7c59;
  --rose:      #b85c6e;
  --border:    rgba(200, 169, 106, 0.25);

  --header-h: 64px;
  --tabs-h:   48px;
  --bottom-h: 68px;

  --ff-display: 'Old Standard TT', Georgia, serif;
  --ff-body:    'Montserrat', sans-serif;

  --shadow-card: 0 2px 16px rgba(11, 29, 52, 0.07);
  --radius: 4px;
  --t: 0.25s ease;
}

.old-standard-tt-regular {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  font-style: normal;
}

.old-standard-tt-bold {
  font-family: "Old Standard TT", serif;
  font-weight: 700;
  font-style: normal;
}

.old-standard-tt-regular-italic {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  font-style: italic;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body {
  font-family: var(--ff-body);
  background: var(--cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  padding-top: calc(var(--header-h) + var(--tabs-h));
  padding-bottom: calc(var(--bottom-h) + 16px);
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ══ ALLERGEN OVERLAY ══ */
.allergen-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(11, 29, 52, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.allergen-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.allergen-popup {
  background: var(--white);
  border-radius: 8px;
  padding: 36px 32px 28px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(11,29,52,0.22);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.allergen-overlay.open .allergen-popup {
  transform: translateY(0) scale(1);
}

.allergen-popup__close {
  position: absolute;
  top: 12px; right: 14px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  border-radius: 50%;
  transition: background var(--t), color var(--t);
}
.allergen-popup__close:hover { background: var(--cream); color: var(--navy); }

.allergen-popup__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.allergen-popup__icon svg { width: 26px; height: 26px; }

/* icon color variants driven by JS data-type attr on popup */
.allergen-popup[data-type="crustacean"] .allergen-popup__icon,
.allergen-popup[data-type="shellfish"]  .allergen-popup__icon { background: #fdebd0; color: #c97b2d; }
.allergen-popup[data-type="fish"]       .allergen-popup__icon { background: #d6eaf8; color: #2471a3; }
.allergen-popup[data-type="nuts"]       .allergen-popup__icon,
.allergen-popup[data-type="peanuts"]    .allergen-popup__icon { background: #fef9e7; color: #b7950b; }
.allergen-popup[data-type="gluten"]     .allergen-popup__icon { background: #fdf2f8; color: #a93226; }
.allergen-popup[data-type="milk"]       .allergen-popup__icon { background: #eaf4fb; color: #1a6696; }
.allergen-popup[data-type="egg"]        .allergen-popup__icon { background: #fefefe; color: #b7950b; }
.allergen-popup[data-type="sesame"]     .allergen-popup__icon { background: #f5f5f5; color: #666; }
.allergen-popup[data-type="mustard"]    .allergen-popup__icon { background: #fef9e7; color: #d4ac0d; }
.allergen-popup[data-type="celery"]     .allergen-popup__icon { background: #eafaf1; color: #1e8449; }
.allergen-popup[data-type="sulphite"]   .allergen-popup__icon { background: #f4f6f7; color: #717d7e; }
.allergen-popup[data-type="soya"]       .allergen-popup__icon { background: #eaf7f0; color: #1d6a39; }
.allergen-popup[data-type="lupins"]     .allergen-popup__icon { background: #f5eef8; color: #7d3c98; }

.allergen-popup__number {
  font-family: var(--ff-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.allergen-popup__name {
  font-family: var(--ff-display);
  font-size: 1.73rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.allergen-popup__desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ══ HEADER ══ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}
.icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  border-radius: 50%;
  transition: background var(--t);
}
.icon-btn:hover { background: var(--cream); }

.logo { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.logo-monogram { line-height: 0; }
.logo-text { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.logo-name {
  font-family: var(--ff-display);
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.18em; color: var(--navy);
}
.logo-sub {
  font-family: var(--ff-body);
  font-size: 0.48rem; font-weight: 500;
  letter-spacing: 0.28em; color: var(--gold); margin-top: 1px;
}

/* ══ TABS ══ */
.tabs-nav {
  position: fixed;
  top: var(--header-h); left: 0; right: 0;
  z-index: 99; height: var(--tabs-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.tabs-scroll {
  display: flex; align-items: stretch; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; padding: 0 16px;
}
.tabs-scroll::-webkit-scrollbar { display: none; }
.tab {
  flex-shrink: 0; padding: 0 18px;
  font-family: var(--ff-body); font-size: 0.68rem;
  font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
}
.tab:hover { color: var(--navy); }
.tab.active { color: var(--navy); border-bottom-color: var(--gold); font-weight: 600; }

/* ══ MAIN ══ */
.main { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.menu-section {
  padding: 40px 0 20px;
  scroll-margin-top: calc(var(--header-h) + var(--tabs-h) + 16px);
}
.section-title {
  font-family: var(--ff-display);
  font-size: 1.65rem; font-weight: 400;
  letter-spacing: 0.04em; color: var(--navy);
  text-align: center; margin-bottom: 10px;
}
.divider-ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 28px;
}
.divider-ornament span {
  display: block; width: 60px; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}
.divider-ornament span:last-child {
  background: linear-gradient(to left, transparent, var(--gold));
}

/* ══ CARDS GRID ══ */
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* ══ DISH CARD ══ */
.dish-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: row;
  border: 1px solid var(--border);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
}
.dish-card.visible { opacity: 1; transform: translateY(0); }
.dish-card:hover { box-shadow: 0 6px 28px rgba(11, 29, 52, 0.12); transform: translateY(-2px); }
.dish-card.visible:hover { transform: translateY(-2px); }

.dish-img-wrap { flex-shrink: 0; width: 120px; height: 120px; overflow: hidden; }
.dish-img { transition: transform 0.4s ease; }
.dish-card:hover .dish-img { transform: scale(1.05); }

.dish-body {
  flex: 1; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
}

/* ── Dish header row ── */
.dish-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 8px;
}
.dish-name {
  font-family: var(--ff-display);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--navy); line-height: 1.3;
}

/* ── Badges cluster ── */
.dish-badges { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }

.dish-badge {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t), box-shadow var(--t);
  cursor: default;
}
.dish-badge:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

.dish-badge--vegan {
  background: #eafaf1;
  color: var(--green);
  border: 1.5px solid rgba(74,124,89,0.3);
}
.dish-badge--wellness {
  background: #fdeef1;
  color: var(--rose);
  border: 1.5px solid rgba(184,92,110,0.3);
}
.dish-badge--chef {
  background: #fdf8ee;
  color: var(--gold);
  border: 1.5px solid rgba(200,169,106,0.4);
}

/* ── Dish text ── */
.dish-desc { font-size: 0.72rem; line-height: 1.5; color: var(--navy); font-weight: 400; }
.dish-note { font-size: 0.64rem; line-height: 1.5; color: var(--muted); font-style: italic; }

/* ── Dish footer ── */
.dish-footer {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 4px;
}
.dish-price {
  font-family: var(--ff-body); font-size: 0.82rem;
  font-weight: 600; color: var(--navy);
}
.dish-price em { font-style: normal; font-size: 0.6rem; font-weight: 400; color: var(--muted); }

/* ── Allergen tags (now buttons) ── */
.allergen-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

.tag {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-body);
  font-size: 0.58rem; font-weight: 600; color: var(--navy);
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
  position: relative;
}
.tag:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  transform: scale(1.2);
}
.tag:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Pulse ring on hover */
.tag::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tag:hover::after {
  opacity: 0.25;
  transform: scale(1.3);
}

/* ══ FOOTER ══ */
.menu-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  padding: 28px 20px 24px;
  margin-top: 32px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(200,169,106,0.2);
}
.footer-raw { font-size: 0.762rem; line-height: 1.55; font-style: italic; color: rgba(255,255,255,0.55); flex: 1; min-width: 200px; }
.footer-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.762rem; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.8);
}
.footer-note { font-size: 0.64rem; line-height: 1.6; margin-bottom: 10px; }
.footer-allergens { font-size: 0.6rem; line-height: 1.7; color: rgba(255,255,255,0.55); margin-bottom: 12px; }
.footer-allergens strong { color: rgba(255,255,255,0.75); }
.footer-tax { font-size: 0.72rem; color: rgba(255,255,255,0.75); }

/* ══ BOTTOM NAV ══ */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100; height: var(--bottom-h);
  background: var(--white); border-top: 1px solid var(--border);
  display: flex; align-items: stretch;
}
.bottom-nav__item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  color: var(--muted);
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--t); padding-bottom: 8px;
}
.bottom-nav__item:hover, .bottom-nav__item.active { color: var(--gold); }

/* ══ SKELETON LOADING ══ */
.skeleton {
  background: linear-gradient(90deg, #e8e0d4 25%, #f6f3ee 50%, #e8e0d4 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite linear;
  border-radius: 4px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text { height: 12px; margin-bottom: 8px; width: 100%; }
.skeleton-title { height: 24px; width: 60%; margin: 0 auto 16px; }
.skeleton-img { width: 120px; height: 120px; }
@media (min-width: 600px) {
  .skeleton-img { width: 100%; height: 200px; }
}

/* ══ IMAGE PLACEHOLDER ══ */
.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8e0d4, #d4c9b5);
  color: var(--gold);
}
.image-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.6;
}

/* ══ BADGE TOOLTIPS ══ */
.badge-tooltip {
  position: absolute;
  background: var(--navy);
  color: var(--white);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.badge-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.badge-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy);
}

/* ══ RESPONSIVE ══ */
@media (min-width: 600px) {
  .main { padding: 0 24px; }
  .dish-card { flex-direction: column; }
  .dish-img-wrap { width: 100%; height: 200px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .dish-body { padding: 18px 20px; }
  .dish-name { font-size: 0.85rem; }
}
@media (min-width: 900px) {
  body { padding-top: calc(var(--header-h) + var(--tabs-h)); padding-bottom: 0; }
  .bottom-nav { display: none; }
  .header { padding: 0 40px; }
  .tabs-scroll { padding: 0 40px; }
  .tab { padding: 0 22px; font-size: 0.7rem; }
  .main { padding: 0 40px; }
  .cards-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .dish-img-wrap { height: 220px; }
  .dish-name { font-size: 0.88rem; }
  .dish-desc { font-size: 0.75rem; }
  .dish-price { font-size: 0.9rem; }
  .section-title { font-size: 2rem; }
  .menu-section { padding: 56px 0 24px; }
}
@media (min-width: 1200px) {
  .main { padding: 0 60px; }
  .header { padding: 0 60px; }
  .tabs-scroll { padding: 0 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .dish-card { opacity: 1; transform: none; transition: none; }
  .allergen-popup { transition: none; }
}