/* ============================================================
   ALL YOU CAN EAT (AED 99) PAGE — "Tokyo Night Dining, Samurai Blue"
   Premium redesign. Reuses booking-form hooks from reservations.js.
   ============================================================ */

/* ---------- HERO ---------- */
.ayce-hero{ position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(90% 70% at 82% 8%, rgba(84,199,218,0.16), transparent 55%),
    radial-gradient(60% 60% at 10% 100%, rgba(84,199,218,0.08), transparent 60%),
    linear-gradient(180deg,#080809,#0e0f10 55%,#0a0a0b);
  border-bottom:1px solid var(--border); }
.ayce-hero__grain{ position:absolute; inset:0; z-index:-1; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ayce-hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding-top:calc(var(--site-header-height) + clamp(1.5rem,4vw,3rem)); padding-bottom:clamp(2.5rem,6vw,4.5rem); }
@media (max-width:920px){ .ayce-hero__grid{ grid-template-columns:1fr; } }
.ayce-hero__eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--samurai-blue);
  font-size:.8rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.ayce-hero__eyebrow .sakura{ width:16px; height:16px; }
.ayce-hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); margin-top:.6rem; line-height:1.02; }

/* Mega price */
.price-mega{ display:flex; align-items:flex-start; gap:.5rem; margin-top:1.1rem; }
.price-mega .cur{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,3vw,2.2rem); color:var(--samurai-blue); margin-top:.7rem; }
.price-mega .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(5rem,17vw,10.5rem); line-height:.78;
  color:var(--samurai-blue); text-shadow:0 8px 60px rgba(84,199,218,.45); letter-spacing:-.02em; }
.price-mega .meta{ display:flex; flex-direction:column; margin-top:.6rem; }
.price-mega .meta .per{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--text-strong); line-height:1; }
.price-mega .meta .sub{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); margin-top:4px; }
.ayce-hero__lead{ color:var(--text-muted); font-size:var(--fs-500); max-width:46ch; margin-top:.6rem; }
.ayce-hero__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.ayce-hero__micro{ display:flex; flex-wrap:wrap; gap:1.1rem; margin-top:1rem; }
.ayce-hero__micro a{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.88rem; color:var(--text); }
.ayce-hero__micro svg{ width:17px; height:17px; color:var(--samurai-blue); }
.ayce-hero__note{ margin-top:1.2rem; max-width:52ch; }

/* Hero art */
.ayce-hero__art{ position:relative; min-height:340px; }
@media (max-width:920px){ .ayce-hero__art{ min-height:280px; } }
.ayce-hero__art .watermark{ position:absolute; inset:0; margin:auto; width:min(80%,440px); color:rgba(84,199,218,.10); z-index:0; }
.ayce-hero__art figure{ position:absolute; border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-lg); }
.ayce-hero__art img{ width:100%; height:100%; object-fit:cover; }
.ayce-hero__art .a1{ inset-inline-end:0; top:4%; width:60%; aspect-ratio:4/5; z-index:2; }
.ayce-hero__art .a2{ inset-inline-start:0; top:26%; width:47%; aspect-ratio:4/3; z-index:3; box-shadow:var(--glow-cyan),var(--shadow-lg); }
.ayce-hero__art .a3{ inset-inline-end:14%; bottom:0; width:40%; aspect-ratio:1; z-index:1; }
@media (max-width:520px){ .ayce-hero__art .a1{ width:68%; } .ayce-hero__art .a2{ width:54%; } .ayce-hero__art .a3{ display:none; } }

/* ---------- Value band (cyan-tinted) ---------- */
.ayce-band{ background:linear-gradient(180deg, rgba(84,199,218,.10), rgba(84,199,218,.04)); border-block:1px solid rgba(84,199,218,.2); }
.ayce-band__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
@media (max-width:760px){ .ayce-band__row{ grid-template-columns:1fr 1fr; } }
.ayce-band__item{ display:flex; align-items:center; gap:10px; padding:1.1rem .4rem; }
.ayce-band__item svg{ width:22px; height:22px; color:var(--samurai-blue); flex:none; }
.ayce-band__item b{ display:block; color:var(--text-strong); font-size:.95rem; }
.ayce-band__item span{ font-size:.76rem; color:var(--text-dim); }

/* ---------- Warm ivory panel ---------- */
.ivory{ background:linear-gradient(180deg,var(--panel-ivory),var(--panel-ivory-2)); color:var(--on-ivory); position:relative; }
.ivory .eyebrow{ color:var(--samurai-blue-dark); }
.ivory h2,.ivory h3,.ivory h4,.ivory strong{ color:var(--on-ivory); }
.ivory p,.ivory li{ color:var(--on-ivory-muted); }
.ivory .btn--ghost{ border-color:var(--ivory-line); color:var(--on-ivory); }
.ivory .btn--ghost:hover{ background:rgba(41,33,27,.06); border-color:var(--samurai-blue-dark); }
.ivory .lead{ color:var(--on-ivory-muted); }
.stat-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:560px){ .stat-cards{ grid-template-columns:1fr 1fr 1fr; gap:.6rem; } }
.stat-card{ background:#fff; border:1px solid var(--ivory-line); border-radius:16px; padding:1.2rem 1rem; text-align:center; box-shadow:0 8px 24px rgba(41,33,27,.06); }
.stat-card b{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,5vw,2.6rem); color:var(--samurai-blue-dark); line-height:1; }
.stat-card span{ font-size:.8rem; color:var(--on-ivory-muted); font-weight:600; }
.ivory-note{ border-inline-start:3px solid var(--samurai-blue); background:rgba(84,199,218,.1); border-radius:10px; padding:.9rem 1.1rem; color:var(--on-ivory-muted); font-size:.88rem; }

/* ---------- Included menu ---------- */
.incl-figure{ position:relative; }
.incl-figure img{ width:100%; border-radius:18px; border:1px solid var(--border); box-shadow:var(--glow-cyan),var(--shadow-lg); }
.incl-figure .sakura{ position:absolute; inset-inline-end:-10px; top:-10px; width:56px; height:56px; color:rgba(84,199,218,.4); }
.incl-figcap{ font-size:.8rem; color:var(--text-dim); margin-top:.6rem; text-align:center; }

/* ---------- How it works (connected steps) ---------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; position:relative; }
@media (max-width:780px){ .flow{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .flow{ grid-template-columns:1fr; } }
.flow-card{ position:relative; background:linear-gradient(180deg,#161616,#101010); border:1px solid var(--border); border-radius:18px; padding:1.4rem 1.2rem; }
.flow-card:hover{ border-color:rgba(84,199,218,.4); }
.flow-card .num{ width:44px; height:44px; border-radius:50%; background:var(--grad-blue); color:var(--on-blue); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.1rem; margin-bottom:.9rem; box-shadow:var(--glow-cyan); }
.flow-card h4{ font-size:1.05rem; }
.flow-card p{ color:var(--text-muted); font-size:.88rem; margin-top:.35rem; }

/* ---------- Rules ---------- */
.rules-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
@media (max-width:640px){ .rules-grid{ grid-template-columns:1fr; } }
.rule-item{ display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem 1.1rem; }
.rule-item svg{ width:22px; height:22px; color:var(--samurai-blue); flex:none; margin-top:1px; }
.rule-item b{ display:block; color:var(--text-strong); font-size:.95rem; }
.rule-item span{ color:var(--text-muted); font-size:.84rem; }
.rules-more{ margin-top:1rem; border:1px solid var(--border); border-radius:14px; background:var(--bg-3); overflow:hidden; }
.rules-more summary{ list-style:none; cursor:pointer; padding:1rem 1.2rem; font-weight:600; color:var(--text-strong); display:flex; justify-content:space-between; align-items:center; }
.rules-more summary::-webkit-details-marker{ display:none; }
.rules-more summary .chev{ width:20px; height:20px; color:var(--samurai-blue); transition:transform var(--dur); }
.rules-more[open] summary .chev{ transform:rotate(180deg); }
.rules-more__body{ padding:0 1.2rem 1.1rem; }
.rules-more__body li{ color:var(--text-muted); margin:.35rem 0; list-style:disc; margin-inline-start:1.1rem; }

/* ---------- Booking card + numbered stepper (overrides menu.css .stepper) ---------- */
.book-card{ background:linear-gradient(180deg,#141414,#0e0e0e); border:1px solid var(--border); border-radius:22px; padding:clamp(1.2rem,3vw,2rem); box-shadow:var(--shadow-lg); }
.ayce-page .stepper{ display:flex; align-items:center; list-style:none; padding:0; margin:0 0 1.6rem; }
.ayce-page .stepper li{ flex:1; display:flex; align-items:center; min-width:0; height:auto; background:none; border-radius:0; }
.ayce-page .stepper li:last-child{ flex:0 0 auto; }
.ayce-page .stepper .dot{ width:30px; height:30px; flex:none; border-radius:50%; border:2px solid var(--border); display:grid; place-items:center; font-family:var(--font-display); font-size:.8rem; font-weight:700; color:var(--text-dim); background:var(--bg-2); }
.ayce-page .stepper .bar{ flex:1; height:2px; background:var(--border); margin:0 6px; }
.ayce-page .stepper li:last-child .bar{ display:none; }
.ayce-page .stepper li[data-state="active"] .dot{ border-color:var(--samurai-blue); color:var(--samurai-blue); box-shadow:0 0 0 4px rgba(84,199,218,.16); }
.ayce-page .stepper li[data-state="done"] .dot{ background:var(--grad-blue); border-color:transparent; color:var(--on-blue); }
.ayce-page .stepper li[data-state="done"] .bar{ background:var(--grad-blue); }
.book-card .step h3{ font-size:1.3rem; }
.book-review{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem 1.2rem; }

/* ---------- Final CTA band ---------- */
.ayce-final{ position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(180deg, rgba(84,199,218,.12), rgba(10,10,10,0)) , var(--bg-2); border-top:1px solid rgba(84,199,218,.2); }
.ayce-final .sakura{ position:absolute; inset-inline-start:50%; top:-30px; transform:translateX(-50%); width:120px; height:120px; color:rgba(84,199,218,.08); }