/* ===== Bebas Neue → Anton alias =====
   The real Bebas Neue ships only latin / latin-ext glyphs and renders
   Vietnamese diacritics inconsistently (the lowercase Vietnamese chars
   in dish names like "Há Cảo Tôm" fall through to a different font and
   visually break against Bebas Neue's cap-styled lowercase). Anton is a
   near-identical narrow all-caps display font with a real `vietnamese`
   subset (U+1EA0-1EF9 etc.). We alias Anton's font files under the
   'Bebas Neue' family name so every existing inline style keeps working
   without touching JSX. These declarations sit ABOVE the Bunny <link>
   in HTML, so they win for the family. */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.bunny.net/anton/files/anton-latin-400-normal.woff2) format('woff2'),
       url(https://fonts.bunny.net/anton/files/anton-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.bunny.net/anton/files/anton-latin-ext-400-normal.woff2) format('woff2'),
       url(https://fonts.bunny.net/anton/files/anton-latin-ext-400-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.bunny.net/anton/files/anton-vietnamese-400-normal.woff2) format('woff2'),
       url(https://fonts.bunny.net/anton/files/anton-vietnamese-400-normal.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* ===== FLAMINGO RELAXING — Design Tokens ===== */
:root {
  --paper: #f5ecd9;
  --paper-dark: #ebdcc0;
  --paper-light: #faf3e3;
  --espresso: #3a2418;
  --espresso-soft: #5a3a28;
  --espresso-ink: #2a1810;
  --vietnam-red: #a8261c;
  --vietnam-red-dark: #7d1a13;
  --bamboo: #5a7a3a;
  --bamboo-dark: #3f5828;
  --gold: #c89858;
  --rose: #d4a89a;
  --heart: #e89890;
  --shadow-warm: 0 4px 14px rgba(58, 36, 24, 0.12);
  --shadow-deep: 0 12px 32px rgba(58, 36, 24, 0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Hard horizontal-overflow clamp on the root elements. Mobile Chrome can
   still allow horizontal swipe even with `overflow-x: hidden` on body alone
   when descendant elements (e.g. the rotated hero marquee) extend past the
   viewport — applying it on html as well plus an explicit max-width breaks
   that path. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Lora', Georgia, serif;
  color: var(--espresso);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(232, 152, 144, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(90, 122, 58, 0.06) 0%, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.14 0 0 0 0 0.09 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

#root { overflow-x: hidden; max-width: 100%; }

h1, h2, h3, h4 { font-family: 'Bebas Neue', 'Anton', Impact, sans-serif; letter-spacing: 0.02em; line-height: 1.05; }
.script { font-family: 'Caveat', 'Brush Script MT', cursive; font-weight: 600; }
.serif { font-family: 'Lora', Georgia, serif; }
.sans { font-family: 'Inter', system-ui, sans-serif; }
.mono-tag { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; }

a { color: inherit; }

/* ===== Pinselstrich-Banner ===== */
.brush-banner {
  display: inline-block;
  position: relative;
  padding: 0.6em 1.6em;
  color: var(--paper-light);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
  z-index: 1;
}
.brush-banner::before {
  content: '';
  position: absolute;
  inset: -2px -8px;
  background: var(--espresso);
  z-index: -1;
  clip-path: polygon(2% 18%, 8% 8%, 18% 14%, 32% 6%, 48% 12%, 62% 4%, 78% 14%, 92% 8%, 98% 22%, 96% 78%, 99% 92%, 88% 88%, 72% 96%, 56% 86%, 40% 94%, 24% 84%, 12% 92%, 4% 80%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.brush-banner.red::before { background: var(--vietnam-red); }
.brush-banner.green::before { background: var(--bamboo); }

/* ===== Stamp (rotes Siegel) ===== */
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--vietnam-red);
  color: var(--paper-light);
  border-radius: 50%;
  font-family: 'Bebas Neue', sans-serif;
  text-align: center;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--vietnam-red), inset 0 0 18px rgba(0,0,0,0.18);
  transform: rotate(-6deg);
  position: relative;
}
.stamp::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.35);
  pointer-events: none;
}

/* ===== Cards ===== */
.paper-card {
  background: var(--paper-light);
  border: 1.5px solid rgba(58, 36, 24, 0.18);
  border-radius: 6px;
  position: relative;
}
.paper-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(58, 36, 24, 0.18);
  border-radius: 4px;
  pointer-events: none;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-primary { background: var(--vietnam-red); color: var(--paper-light); box-shadow: var(--shadow-warm); }
.btn-primary:hover { background: var(--vietnam-red-dark); transform: translateY(-2px); box-shadow: var(--shadow-deep); }
.btn-dark { background: var(--espresso); color: var(--paper-light); box-shadow: var(--shadow-warm); }
.btn-dark:hover { background: var(--espresso-ink); transform: translateY(-2px); box-shadow: var(--shadow-deep); }
.btn-ghost { background: transparent; color: var(--espresso); border: 2px solid var(--espresso); }
.btn-ghost:hover { background: var(--espresso); color: var(--paper-light); }

/* ===== Decorative dotted line ===== */
.dotted-line {
  flex: 1;
  border-bottom: 2.5px dotted rgba(58, 36, 24, 0.3);
  margin: 0 0.8rem;
  transform: translateY(-0.35em);
}

/* ===== Heart ===== */
.heart {
  display: inline-block;
  width: 12px; height: 12px;
  background: var(--heart);
  transform: rotate(-45deg);
  position: relative;
  vertical-align: middle;
  margin: 0 0.3em;
}
.heart::before, .heart::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  background: var(--heart);
  border-radius: 50%;
}
.heart::before { top: -6px; left: 0; }
.heart::after { top: 0; left: 6px; }

/* ===== Section ===== */
section {
  padding: 6rem 1.5rem;
  position: relative;
}
.container { max-width: 1240px; margin: 0 auto; }

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-header h2 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  margin-top: 0.4rem;
}
.section-header .kicker {
  font-family: 'Caveat', cursive;
  font-size: 1.6rem;
  color: var(--vietnam-red);
}

/* ===== Bambus-Ornament Ecken ===== */
.corner-ornament {
  position: absolute;
  width: 90px; height: 90px;
  pointer-events: none;
  opacity: 0.55;
}
.corner-ornament.tl { top: 18px; left: 18px; border-top: 2px solid var(--espresso); border-left: 2px solid var(--espresso); border-top-left-radius: 6px; }
.corner-ornament.tr { top: 18px; right: 18px; border-top: 2px solid var(--espresso); border-right: 2px solid var(--espresso); border-top-right-radius: 6px; }
.corner-ornament.bl { bottom: 18px; left: 18px; border-bottom: 2px solid var(--espresso); border-left: 2px solid var(--espresso); border-bottom-left-radius: 6px; }
.corner-ornament.br { bottom: 18px; right: 18px; border-bottom: 2px solid var(--espresso); border-right: 2px solid var(--espresso); border-bottom-right-radius: 6px; }
.corner-ornament::before {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--espresso);
  border-radius: 4px;
  opacity: 0.7;
}
.corner-ornament.tl::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.corner-ornament.tr::before { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.corner-ornament.bl::before { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.corner-ornament.br::before { bottom: 8px; right: 8px; border-left: none; border-top: none; }

/* ===== Animations ===== */
@keyframes fadeUp {
  from { transform: translateY(24px); }
  to { transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-12px) rotate(var(--rot, 0deg)); }
}
@keyframes steam {
  0% { opacity: 0; transform: translateY(0) scale(1); }
  30% { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-40px) scale(1.4); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(168, 38, 28, 0.45); }
  100% { box-shadow: 0 0 0 18px rgba(168, 38, 28, 0); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(8px, -10px) rotate(4deg); }
}

.fade-in {
  opacity: 1;
  animation: fadeUp 0.9s ease;
}
.fade-in.delay-1 { animation-delay: 0.15s; }
.fade-in.delay-2 { animation-delay: 0.3s; }
.fade-in.delay-3 { animation-delay: 0.45s; }
.fade-in.delay-4 { animation-delay: 0.6s; }

.float { animation: float 4.5s ease-in-out infinite; }

/* ===== Live status badge ===== */
.live-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
}
.live-dot.open { background: var(--bamboo); animation: pulseRing 1.6s infinite; }
.live-dot.closed { background: var(--vietnam-red); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper-dark); }
::-webkit-scrollbar-thumb { background: var(--espresso); border-radius: 5px; }

/* ===== Utility ===== */
.flex { display: flex; }
.center { display: flex; align-items: center; justify-content: center; }
.text-center { text-align: center; }
.text-red { color: var(--vietnam-red); }
.text-green { color: var(--bamboo); }
.text-paper { color: var(--paper-light); }
.bg-paper { background: var(--paper); }
.bg-paper-dark { background: var(--paper-dark); }
.bg-espresso { background: var(--espresso); color: var(--paper-light); }

/* ===== Image placeholder ===== */
.img-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(58,36,24,0.05) 0 8px,
      rgba(58,36,24,0.10) 8px 16px),
    var(--paper-dark);
  border: 1.5px dashed rgba(58, 36, 24, 0.35);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--espresso-soft);
  font-family: 'Inter', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem;
  overflow: hidden;
}

/* ===== Responsive =====
   Standardised breakpoints across the site:
     <= 480 px   small phones (iPhone SE, narrow Android)
     <= 768 px   large phones / small tablets in portrait
     <= 1024 px  tablets / small laptops
     >  1024 px  desktop
   Existing component-level media queries should be migrated toward these.   Tap targets are sized to ≥44 px on touch surfaces. */
@media (max-width: 1024px) {
  section { padding: 5rem 1.4rem; }
}

@media (max-width: 768px) {
  section { padding: 3.5rem 1.1rem; }
  h1 { font-size: clamp(2.4rem, 11vw, 4.4rem) !important; }
  .section-header { margin-bottom: 2.4rem; }
  .section-header .kicker { font-size: 1.35rem; }
  .btn { padding: 0.85rem 1.3rem; font-size: 1rem; min-height: 44px; }
  .brush-banner { padding: 0.5em 1.2em; }
  .corner-ornament { width: 60px; height: 60px; }
}

@media (max-width: 480px) {
  section { padding: 3rem 0.9rem; }
  h1 { font-size: clamp(2.2rem, 12vw, 3.6rem) !important; }
  h2, h3 { letter-spacing: 0.015em; }
  .container { width: 100%; }
  .section-header .kicker { font-size: 1.2rem; }
  .corner-ornament { width: 48px; height: 48px; }
  .stamp { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--vietnam-red), inset 0 0 14px rgba(0,0,0,0.18); }
  /* Allow horizontal swipe on long tab strips */
  body { overflow-x: hidden; }
}

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