:root {
  --bg:#fdf8ec; --bg2:#f5edd6; --card:#ffffff;
  --navy:#1e3a5f; --navy2:#2c4a73;
  --orange:#ff6b00; --orange2:#ff9944;
  --text:#1e3a5f; --text2:#5a6f8a; --text3:#8a9bb0;
  --border:#e8dcb8;
  --green:#2d8659; --red:#d63031;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { color:var(--orange); }
.wrap { max-width:600px; margin:0 auto; padding:0 20px; }
@media(min-width:768px)  { .wrap { max-width:720px; } }
@media(min-width:1100px) { .wrap { max-width:880px; padding:0 28px; } }
@media(min-width:768px)  { .menu-item .mi-photo { width:96px; height:96px; } }

/* ===== HERO ===== */
.hero {
  text-align:center; padding:36px 20px 24px;
  background:linear-gradient(180deg,#fdf8ec 0%,#e8dcb8 100%);
}
.hero img.logo {
  display:block;          /* force its own row — was inline so on wide
                             screens it shared the line with the
                             .hero-pretitle pill below, pushing the
                             logo off-center */
  width:240px; max-width:75%; border-radius:18px;
  margin:0 auto 14px;
}
/* Pre-title pill — 'Inside Sushi Ari Coolum Beach' so customers
   immediately know where to come (no separate CHIBURS signage). */
.hero .hero-pretitle {
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:#1e3a5f;
  padding:7px 14px; border-radius:50px;
  font-size:12px; font-weight:700; letter-spacing:0.3px;
  text-decoration:none;
  border:1.5px solid var(--orange);
  box-shadow:0 4px 14px rgba(255,107,0,0.18);
  margin-bottom:10px;
  transition:transform .15s, box-shadow .15s;
}
.hero .hero-pretitle:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,107,0,0.28); }
.hero .hero-pretitle b { color:var(--orange); font-weight:800; }
@media (max-width:480px) { .hero .hero-pretitle { font-size:11px; padding:6px 12px; } }
.hero h1.hero-h1 {
  font-size:22px; font-weight:800; color:var(--navy); line-height:1.3;
  margin:0 auto 10px; max-width:520px; letter-spacing:-0.2px;
}
@media(min-width:768px) { .hero h1.hero-h1 { font-size:26px; } }
.hero .tagline {
  font-size:11px; color:var(--orange); letter-spacing:3px; font-weight:700;
  text-transform:uppercase;
}
.hero .sub {
  color:var(--text2); font-size:13.5px; margin-top:6px; font-weight:500;
}

/* ===== HOOK / EMAIL CAPTURE (above the fold) ===== */
.hook {
  background:linear-gradient(135deg,#fff,#f5edd6);
  border:2px solid var(--orange);
  border-radius:16px; padding:24px 22px; margin:20px 0 12px;
  text-align:center; position:relative; overflow:hidden;
}
.hook::before {
  content:''; position:absolute; top:-50%; right:-30%;
  width:200px; height:200px; background:radial-gradient(circle,rgba(255,107,0,0.15),transparent 70%);
  pointer-events:none;
}
.hook h2 {
  font-size:24px; color:var(--orange); margin-bottom:6px; line-height:1.2;
  font-weight:900; letter-spacing:0.5px;
}
.hook .hook-sub {
  color:var(--text); font-size:14px; line-height:1.5; margin-bottom:18px;
}
.hook .hook-sub strong { color:var(--orange2); }

.form { position:relative; z-index:1; }
.form input[type=email] {
  width:100%; padding:14px 16px; background:#ffffff;
  border:1.5px solid #c9b88f; color:var(--text);
  border-radius:10px; font-size:15px; font-weight:500;
  margin-bottom:10px;
}
.form input[type=email]:focus {
  outline:none; border-color:var(--orange);
}
.form input[type=email]::placeholder { color:#9aa8b8; }
.consent-row {
  display:flex; gap:10px; align-items:flex-start; margin-bottom:12px;
  text-align:left; padding:0 4px;
}
.consent-row input[type=checkbox] {
  width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--orange);
}
.consent-row label {
  font-size:11px; color:var(--text2); line-height:1.5;
}
.consent-row label a { color:var(--orange); text-decoration:underline; }
/* Honeypot — hidden from humans */
.hp-field { position:absolute; left:-9999px; opacity:0; pointer-events:none; }

.form button {
  width:100%; padding:15px; background:var(--orange); color:#fff;
  border:none; border-radius:10px; font-size:16px; font-weight:800;
  cursor:pointer; letter-spacing:0.5px; transition:transform 0.15s;
}
.form button:hover { background:var(--orange2); }
.form button:active { transform:scale(0.98); }
.form button:disabled { background:#c9b88f; cursor:not-allowed; }

.thank-you {
  display:none; padding:20px 16px; text-align:center;
  background:rgba(6,193,103,0.1); border:1.5px solid var(--green);
  border-radius:10px; margin-bottom:12px;
}
.thank-you.show { display:block; }
.thank-you h3 { color:var(--green); font-size:17px; margin:8px 0 4px; font-weight:800; }
.thank-you p { color:var(--text); font-size:13px; line-height:1.5; }
.thank-you-check {
  width:54px; height:54px; margin:0 auto 4px;
  border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:900;
  box-shadow:0 4px 14px rgba(6,193,103,0.35);
  animation:thankPop .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes thankPop { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }

.error-msg {
  display:none; padding:10px 14px; text-align:center;
  background:rgba(255,48,8,0.1); border:1px solid var(--red);
  border-radius:8px; margin-bottom:10px; color:#d63031; font-size:12px;
}
.error-msg.show { display:block; }

/* ===== ORDER BUTTONS ===== */
.order-btns {
  display:flex; gap:10px; padding:8px 0 4px; flex-wrap:wrap;
}
.order-btn {
  flex:1; min-width:140px; display:flex; align-items:center; justify-content:center;
  gap:8px; padding:14px 20px; border-radius:12px; font-size:14px; font-weight:700;
  text-decoration:none; transition:transform 0.15s; text-align:center;
}
.order-btn:active { transform:scale(0.97); }
.order-btn.uber { background:var(--green); color:#fff; }
.order-btn.door { background:var(--red); color:#fff; }

/* ===== ABOUT ===== */
.section { padding:28px 0; }

/* Page anchor nav — fixed to top of viewport at all times so it's
   always one tap away. Body gets a matching padding-top so the hero
   starts right below the nav (not hidden behind it).
   Mobile: scrolls horizontally if pills overflow.
   Desktop: pills centered. */
/* MOBILE / TABLET (default): 3 columns × 2 rows grid so all 6 jump
   links are visible at a glance — no horizontal scroll. Each pill
   gets equal width inside its column. */
.page-nav {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  padding:8px 10px;
  background:rgba(255,255,255,0.96);
  -webkit-backdrop-filter:saturate(180%) blur(6px);
          backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid rgba(232,220,184,0.7);
  position:fixed; top:0; left:0; right:0; z-index:150;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
  transition:top .2s;
}
.page-nav a {
  display:flex; align-items:center; justify-content:center;
  gap:5px;
  padding:9px 8px; border-radius:999px;
  background:#fff8f0; color:var(--navy);
  font-size:13px; font-weight:700;
  text-decoration:none;
  border:1px solid #f0d9a8;
  white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s, transform .1s;
}
.page-nav a:hover { background:var(--orange); color:#fff; border-color:var(--orange); }
.page-nav a:active { transform:scale(0.97); }

/* DESKTOP: switch to single-row flex centred bar — wider screens have
   room for all 6 pills inline. */
@media (min-width:1100px) {
  .page-nav {
    display:flex; flex-wrap:nowrap;
    justify-content:center;
    gap:8px;
    padding:10px 20px;
  }
  .page-nav a { padding:8px 14px; }
}

/* Push body content down by the nav height so the hero starts below
   the fixed bar. 2-row grid is taller on phones; desktop is single
   row so the offset shrinks. */
body { padding-top:96px; }
@media (min-width:1100px) { body { padding-top:58px; } }

/* When the store-closed banner (#closedBanner, ~36 px tall) is
   injected by cart.js, banner sits at top:0 and the nav slides below
   it. Body padding grows by the banner height. */
body.has-closed-banner .page-nav { top:36px; }
body.has-closed-banner { padding-top:132px; }
@media (min-width:1100px) { body.has-closed-banner { padding-top:94px; } }

/* So smooth-scroll anchor jumps don't tuck section headings under the
   fixed nav (~54-58 px tall). */
html { scroll-behavior:smooth; }
section[id], #pickup, #menu, #reviews, #delivery, #hours, #how, #story, #faq {
  scroll-margin-top:72px;
}

/* Inline contextual anchor links — used inside paragraphs to cross-link
   sections (menu ↔ pickup ↔ reviews ↔ delivery). Subtle dotted
   underline so the body copy reads naturally; orange on hover. */
.inline-anchor {
  color:var(--orange);
  text-decoration:underline dotted;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  font-weight:700;
  transition:color .15s, background .15s;
  border-radius:3px;
  padding:0 1px;
}
.inline-anchor:hover {
  color:#fff; background:var(--orange);
  text-decoration:none;
}

/* Menu intro line — subtle, sits between H2 and the menu items */
.menu-intro {
  text-align:center; color:var(--text2);
  font-size:13.5px; line-height:1.6;
  margin:0 auto 18px; max-width:560px;
}

/* "Why CHIBURS" bullets in the story section — keyword-rich UL,
   designed to be scannable on mobile (where most traffic is). */
.why-list {
  max-width:560px; margin:18px auto 0;
  padding:0; list-style:none;
}
.why-list li {
  position:relative;
  padding:11px 14px 11px 38px;
  margin-bottom:8px;
  background:#fff;
  border:1px solid #e8dcb8;
  border-radius:10px;
  font-size:13.5px;
  color:var(--text);
  line-height:1.55;
  box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.why-list li::before {
  content:'✓';
  position:absolute; left:14px; top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  background:var(--orange); color:#fff;
  font-size:11px; font-weight:900;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.why-list li b { color:var(--navy); font-weight:800; }
@media (max-width:520px) {
  .why-list li { font-size:13px; padding:10px 12px 10px 36px; }
}

/* Pickup section — Sushi Ari address callout + ordered step list */
#pickup .pickup-card {
  background:linear-gradient(135deg,#fff,#f5edd6);
  border:3px solid var(--orange);
  border-radius:18px;
  padding:24px 20px; text-align:center;
  box-shadow:0 4px 14px rgba(255,107,0,0.15);
}
#pickup .pickup-emoji { font-size:36px; margin-bottom:8px; }
#pickup .pickup-eyebrow {
  font-size:11px; color:var(--orange); font-weight:800;
  letter-spacing:2.5px; text-transform:uppercase; margin-bottom:6px;
}
#pickup .pickup-name {
  font-size:26px; font-weight:900; color:var(--navy);
  letter-spacing:0.5px; margin-bottom:8px; line-height:1.2;
}
#pickup .pickup-name b { color:var(--navy); }
#pickup .pickup-addr {
  font-size:14px; color:var(--text); line-height:1.6;
  margin-bottom:14px; font-style:normal;
}
#pickup .pickup-callout {
  background:rgba(255,107,0,0.1); border-radius:10px;
  padding:12px 16px; font-size:13px; color:var(--text);
  line-height:1.6; margin-bottom:14px;
}
#pickup .pickup-callout strong { color:var(--orange); }
#pickup .pickup-callout-sub { font-size:12px; color:var(--text2); }
#pickup .pickup-maps-btn {
  display:inline-block; background:var(--orange); color:#fff;
  padding:12px 24px; border-radius:10px; font-size:14px;
  font-weight:800; text-decoration:none; letter-spacing:0.3px;
  box-shadow:0 3px 10px rgba(255,107,0,0.35);
  transition:transform .15s, box-shadow .15s;
}
#pickup .pickup-maps-btn:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(255,107,0,0.45); }

#pickup .pickup-steps-card {
  background:#fff; border:1px solid #e8dcb8; border-radius:14px;
  padding:18px 20px 14px; margin-top:14px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
#pickup .pickup-steps-title {
  font-size:15px; font-weight:800; color:var(--navy);
  margin:0 0 12px; text-align:center;
}
#pickup .pickup-steps {
  margin:0 0 10px; padding-left:24px;
  font-size:14px; color:var(--text); line-height:1.6;
}
#pickup .pickup-steps li { padding:6px 0; }
#pickup .pickup-steps li b { color:var(--navy); }
#pickup .pickup-steps-hint {
  font-size:12px; color:var(--text2); line-height:1.55;
  margin:8px 0 0; padding:10px 12px;
  background:rgba(255,193,7,0.1); border-radius:8px;
  border-left:3px solid #ffc107;
}

/* FAQ accordion — visible mirror of the FAQPage JSON-LD schema. */
#faq .faq-list { max-width:680px; margin:18px auto 0; }
#faq .faq-item {
  background:#fff; border:1px solid #e8dcb8; border-radius:12px;
  padding:14px 18px; margin-bottom:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.03);
  transition:box-shadow .15s, border-color .15s;
}
#faq .faq-item[open] { border-color:var(--orange); box-shadow:0 4px 14px rgba(255,107,0,0.1); }
#faq .faq-item summary {
  font-size:15px; font-weight:700; color:var(--navy);
  cursor:pointer; line-height:1.4;
  list-style:none; position:relative; padding-right:28px;
}
#faq .faq-item summary::-webkit-details-marker { display:none; }
#faq .faq-item summary::after {
  content:'+'; position:absolute; right:0; top:-2px;
  font-size:22px; font-weight:300; color:var(--orange);
  transition:transform .2s;
}
#faq .faq-item[open] summary::after { transform:rotate(45deg); }
#faq .faq-item p {
  color:var(--text); font-size:14px; line-height:1.65;
  margin:10px 0 2px;
}
@media (max-width:520px) {
  #faq .faq-item { padding:12px 16px; }
  #faq .faq-item summary { font-size:14px; }
  #faq .faq-item p { font-size:13.5px; }
}

.section-title {
  font-size:11px; color:var(--orange); text-align:center; margin-bottom:14px;
  text-transform:uppercase; letter-spacing:2.5px; font-weight:700;
}
.section h2 {
  font-size:22px; text-align:center; color:var(--navy); margin-bottom:8px; font-weight:800;
}
.section .lead {
  color:var(--text2); font-size:14.5px; text-align:center; line-height:1.65;
  max-width:480px; margin:0 auto;
}

/* ===== HOW IT WORKS ===== */
.how {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin-top:18px;
}
.how-step {
  background:var(--card); border:1px solid #e8dcb8; border-radius:12px;
  padding:16px 10px; text-align:center;
}
.how-step .icon { font-size:24px; margin-bottom:6px; }
.how-step .h-title { font-size:11px; color:var(--orange); font-weight:700; margin-bottom:2px; text-transform:uppercase; letter-spacing:0.5px; }
.how-step .h-desc { font-size:10px; color:var(--text2); line-height:1.4; }

/* ===== MENU ===== */
.menu-cat { margin-bottom:22px; }
.cat-name {
  font-size:12px; font-weight:700; color:var(--orange2); margin-bottom:8px;
  display:flex; align-items:center; gap:6px;
  padding-bottom:6px; border-bottom:1px solid #e8dcb8;
  text-transform:uppercase; letter-spacing:1px;
}
.cat-name .small { font-size:9px; color:var(--text3); font-weight:400; text-transform:none; letter-spacing:0; margin-left:auto; }
.menu-item {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:12px 0; border-bottom:1px solid rgba(30,58,95,0.08);
}
.menu-item:last-child { border-bottom:none; }
/* When cart.js injects a photo thumbnail it adds .has-photo on the row.
   The row gains a right-side image; price + add button (existing flex column)
   stay in their wrapper between the description and the photo. */
.menu-item.has-photo { gap:10px; }
.menu-item.has-photo > :first-child { flex:1; min-width:0; }
.menu-item .mi-photo {
  width:80px; height:80px; flex-shrink:0; border-radius:10px;
  overflow:hidden; background:#f0e6c8;
}
.menu-item .mi-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.mi-name { font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; }
.mi-desc { font-size:13px; color:var(--text2); margin-top:4px; line-height:1.5; }
.mi-price {
  font-size:17px; font-weight:800; color:var(--orange); white-space:nowrap; margin-left:14px;
}

/* ===== TRUST BADGES ===== */
.badges {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;
}
.badge {
  background:var(--card); border:1px solid #e8dcb8; border-radius:10px;
  padding:14px 12px; text-align:center;
}
.badge .b-icon { font-size:22px; margin-bottom:4px; }
.badge .b-title { font-size:11px; color:var(--orange); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.badge .b-desc { font-size:10px; color:var(--text2); margin-top:2px; line-height:1.4; }

/* ===== INFO BLOCK ===== */
.info { text-align:center; padding:24px 0; }
.info-item { margin-bottom:18px; }
.info-label { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:5px; }
.info-value { font-size:14px; color:var(--navy); font-weight:600; line-height:1.5; }
.info-value a { color:var(--orange); text-decoration:none; }

/* ===== STICKY MOBILE CTA ===== */
.sticky-cta {
  position:fixed; bottom:0; left:0; right:0; background:var(--bg2);
  border-top:2px solid var(--orange); padding:10px 14px;
  display:none; z-index:100;
  box-shadow:0 -8px 24px rgba(30,58,95,0.15);
}
.sticky-cta.show { display:flex; gap:8px; }
.sticky-cta .s-text { flex:1; align-self:center; font-size:11px; color:var(--text2); line-height:1.3; }
.sticky-cta .s-text strong { color:var(--orange); display:block; font-size:13px; }
.sticky-cta button {
  background:var(--orange); color:#fff; border:none; padding:10px 16px;
  border-radius:8px; font-size:13px; font-weight:700; cursor:pointer;
}

/* ===== FOOTER ===== */
.footer {
  text-align:center; padding:32px 20px 100px;
  color:var(--text3); font-size:11px; line-height:1.7;
  border-top:1px solid #e8dcb8; margin-top:24px;
}
.footer a { color:var(--text2); margin:0 6px; }
.footer .ig-fb {
  display:flex; gap:12px; justify-content:center; margin:16px 0;
}
.footer .ig-fb a {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  text-decoration:none; transition:transform .15s, box-shadow .15s;
  margin:0;
}
.footer .ig-fb a:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(30,58,95,0.15); }
.footer .ig-fb a svg { width:22px; height:22px; display:block; }
.footer .ig-fb a.ig {
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
.footer .ig-fb a.fb { background:#1877f2; }
.footer .ig-fb a.ig svg, .footer .ig-fb a.fb svg { fill:#fff; }

@media(min-width:600px){
  .hero img.logo { width:300px; }
  .hook h2 { font-size:28px; }
}

/* ===== ADD-TO-CART BUTTON ===== */
.mi-add {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:none;
  background:var(--orange); color:#fff; font-size:22px; font-weight:700;
  line-height:1; cursor:pointer; flex-shrink:0;
  transition: transform .12s, background .12s;
  box-shadow:0 2px 6px rgba(255,107,0,0.35);
}
.mi-add:hover { background:var(--orange2); }
.mi-add:active { transform:scale(0.92); }

/* ===== FLOATING CART CHIP ===== */
.cart-chip {
  position:fixed; bottom:18px; left:50%;
  transform:translateX(-50%) translateY(180%);
  display:none; align-items:center; gap:10px;
  background:var(--orange); color:#fff;
  padding:13px 20px; border-radius:50px; cursor:pointer;
  font-size:14px; font-weight:700; letter-spacing:0.3px;
  z-index:200; box-shadow:0 8px 24px rgba(255,107,0,0.45);
  transition: transform .25s ease;
  white-space:nowrap; user-select:none;
}
.cart-chip.show { display:inline-flex; transform:translateX(-50%) translateY(0); }
.cart-chip.flash { animation: chipPulse .35s ease; }
@keyframes chipPulse {
  0% { transform:translateX(-50%) scale(1); }
  50% { transform:translateX(-50%) scale(1.08); }
  100% { transform:translateX(-50%) scale(1); }
}
.cart-chip-icon { font-size:18px; }
.cart-chip-qty {
  background:rgba(255,255,255,0.25);
  padding:2px 8px; border-radius:10px; font-size:12px; font-weight:800;
}
.cart-chip-total { font-weight:800; }
.cart-chip-cta {
  font-size:12px; opacity:0.95;
  border-left:1px solid rgba(255,255,255,0.35); padding-left:10px;
}

/* ===== IMAGE LIGHTBOX ===== */
.menu-item .mi-photo { cursor:zoom-in; }
.lightbox {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.92);
  align-items:center; justify-content:center; padding:20px;
  flex-direction:column; gap:14px;
}
.lightbox.show { display:flex; animation:lbFade .2s ease; }
@keyframes lbFade { from{opacity:0} to{opacity:1} }
.lightbox img {
  max-width:100%; max-height:80vh; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:lbZoom .25s ease;
}
@keyframes lbZoom { from{transform:scale(0.92);opacity:0} to{transform:scale(1);opacity:1} }
.lightbox-caption {
  color:#fff; font-size:15px; font-weight:600; text-align:center;
  max-width:90%; letter-spacing:0.3px;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
.lightbox-close {
  position:absolute; top:14px; right:14px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.1); border:1.5px solid rgba(255,255,255,0.4);
  color:#fff; font-size:24px; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover { background:rgba(255,255,255,0.2); }

/* ===== CART MODAL ===== */
.cart-modal { display:none; position:fixed; inset:0; z-index:300; }
.cart-modal.show { display:block; }
.cart-backdrop {
  position:absolute; inset:0; background:rgba(30,58,95,0.55);
}
.cart-panel {
  position:absolute; bottom:0; left:0; right:0;
  max-height:92vh; overflow-y:auto;
  background:var(--bg); border-radius:18px 18px 0 0;
  padding:14px 18px 28px;
  box-shadow:0 -12px 36px rgba(30,58,95,0.25);
  animation: slideUp .25s ease;
}
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media(min-width:600px) {
  .cart-panel {
    bottom:auto; top:50%; left:50%; right:auto;
    transform:translate(-50%, -50%);
    width:540px; max-height:88vh;
    border-radius:18px;
    animation:none;
  }
}
.cart-grip { width:48px; height:4px; background:#c9b88f; border-radius:4px; margin:0 auto 10px; }
.cart-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.cart-header h3 { font-size:18px; color:var(--navy); font-weight:800; }
.cart-close {
  width:32px; height:32px; border:none; background:transparent;
  font-size:24px; color:var(--text2); cursor:pointer; line-height:1;
}
.cart-empty { text-align:center; color:var(--text2); padding:32px 20px; font-size:14px; }

.cart-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px; margin:0 -12px;
  border-bottom:1px solid #e8dcb8; gap:12px;
  border-radius:8px;
  transition:background-color .3s ease;
}
.cart-row:last-child { border-bottom:none; }
.cart-row.just-added {
  animation:cartRowFlash 1.6s ease-out 1;
}
@keyframes cartRowFlash {
  0%   { background:rgba(255,107,0,0.28); transform:scale(1.01); }
  60%  { background:rgba(255,107,0,0.12); transform:scale(1); }
  100% { background:rgba(255,107,0,0); transform:scale(1); }
}
.cart-row-info { flex:1; min-width:0; }
.cart-row-name { font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; }
.cart-row-mods { font-size:12.5px; color:var(--text2); margin-top:4px; line-height:1.45; }
.cart-row-price { font-size:14px; color:var(--orange); font-weight:700; margin-top:4px; }

.cart-suggest {
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#fff5eb,#ffe8d1); border:2px solid var(--orange);
  border-radius:12px; padding:12px 14px; margin:10px 0;
}
.cart-suggest-text { flex:1; font-size:13px; color:var(--navy); font-weight:600; line-height:1.3; }
.cart-suggest-actions { display:flex; gap:6px; flex-shrink:0; }
.cart-suggest-go {
  background:var(--orange); color:#fff; border:none; padding:8px 14px;
  border-radius:8px; font-size:12px; font-weight:800; cursor:pointer;
}
.cart-suggest-go:hover { background:var(--orange2); }
.cart-suggest-dismiss {
  width:28px; height:28px; border:none; background:transparent;
  color:#8a9bb0; font-size:18px; line-height:1; cursor:pointer;
}

/* ===== CART RECOMMENDATIONS (last-mile cross-sell, before checkout) ===== */
.cart-reco { margin:18px 0 6px; padding-top:14px; border-top:1px dashed #e8dcb8; }
.cart-reco-title { font-size:12px; font-weight:800; color:var(--orange2); letter-spacing:1.2px; text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.cart-reco-grid {
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.cart-reco-card {
  flex:0 0 auto; width:128px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:8px 8px 10px; text-align:center;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
}
.cart-reco-photo {
  width:100%; aspect-ratio:1/1; border-radius:8px; overflow:hidden;
  background:#f0e6c8; margin-bottom:6px;
}
.cart-reco-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.cart-reco-name { font-size:12px; font-weight:700; color:var(--navy); line-height:1.3; min-height:32px; margin-bottom:2px; }
.cart-reco-price { font-size:13px; color:var(--orange); font-weight:800; margin:0 0 8px; }
.cart-reco-add {
  width:100%; padding:8px; background:var(--orange); color:#fff;
  border:none; border-radius:8px; font-size:12px; font-weight:800; cursor:pointer;
  letter-spacing:0.3px; margin-top:auto;
}
.cart-reco-add:hover { background:var(--orange2); }
.cart-reco-add:active { transform:scale(0.97); }
.cart-row-was {
  font-size:11px; color:var(--text3); text-decoration:line-through;
  font-weight:500; margin-right:4px;
}
.cart-qty {
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #e8dcb8; border-radius:24px;
  padding:3px;
}
.cart-qty button {
  width:28px; height:28px; border-radius:50%; border:none;
  background:var(--orange); color:#fff; cursor:pointer;
  font-weight:700; font-size:14px; line-height:1;
}
.cart-qty button:active { transform:scale(0.92); }
.cart-qty span { min-width:18px; text-align:center; font-weight:800; color:var(--navy); font-size:14px; }

.cart-section { margin:18px 0 6px; }
.cart-section-title {
  font-size:11px; color:var(--orange); text-transform:uppercase;
  letter-spacing:1.5px; font-weight:700; margin-bottom:8px;
}
.promo-row { display:flex; gap:8px; }
.promo-row input {
  flex:1; padding:11px 12px; border:1.5px solid #c9b88f;
  border-radius:8px; font-size:14px;
  font-family:'SF Mono',Menlo,monospace;
  text-transform:uppercase; letter-spacing:2px;
}
.promo-row input:focus { outline:none; border-color:var(--orange); }
.promo-row button {
  padding:11px 16px; background:var(--navy); color:#fff;
  border:none; border-radius:8px; font-weight:700; font-size:13px; cursor:pointer;
}
.promo-row button:active { transform:scale(0.97); }
.promo-status { font-size:12px; margin-top:6px; min-height:16px; color:var(--text2); }

.customer-grid { display:grid; gap:8px; }
.customer-grid input {
  padding:11px 12px; border:1.5px solid #c9b88f; border-radius:8px;
  font-size:14px; font-family:inherit;
}
.customer-grid input:focus { outline:none; border-color:var(--orange); }

.cart-summary {
  border-top:2px dashed #e8dcb8;
  padding-top:14px; margin-top:14px;
}
.cart-summary-row {
  display:flex; justify-content:space-between;
  font-size:13px; color:var(--text); margin-bottom:6px;
}
.cart-summary-total {
  display:flex; justify-content:space-between;
  font-size:18px; font-weight:800; color:var(--navy);
  margin-top:8px; padding-top:8px; border-top:1px solid #e8dcb8;
}
.cart-checkout {
  width:100%; padding:16px; background:var(--orange); color:#fff;
  border:none; border-radius:12px; font-size:16px; font-weight:800;
  cursor:pointer; margin-top:14px; letter-spacing:0.3px;
}
.cart-checkout:hover { background:var(--orange2); }
.cart-checkout:disabled { background:#c9b88f; cursor:not-allowed; }
.checkout-error { color:#d63031; font-size:12px; text-align:center; margin-top:8px; min-height:16px; }
.cart-pickup-note {
  font-size:11px; color:var(--text2); text-align:center; margin-top:10px;
  line-height:1.5;
}

/* ===== Hero trust badge — small inline pill in the hero (auto-loads from /api/reviews) ===== */
.hero-trust {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px;
  background:#fff; color:#3c4043;
  padding:9px 16px; border-radius:50px;
  text-decoration:none; font-family:inherit;
  box-shadow:0 6px 18px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.06);
  font-size:13px; font-weight:700;
  transition:transform .18s, box-shadow .18s;
  animation:heroTrustPop .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-trust:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.18); }
.hero-trust svg { width:18px; height:18px; flex-shrink:0; }
.hero-trust-num { color:var(--orange); font-weight:900; font-size:15px; font-variant-numeric:tabular-nums; }
.hero-trust-stars { color:#fdc845; font-size:12px; letter-spacing:1.5px; line-height:1; }
.hero-trust-count { color:#7a8aa3; font-size:11px; font-weight:700; }
@keyframes heroTrustPop { from { transform:scale(0.8); opacity:0; } to { transform:scale(1); opacity:1; } }
@media (max-width:480px) {
  .hero-trust { font-size:12px; padding:8px 14px; }
  .hero-trust-stars { font-size:11px; }
}

/* ===== Google reviews — hero card ===== */
#reviews { position:relative; }
/* When reviews section is positioned right after hero, give it more breathing room above */
#reviews.rev-prominent { padding-top:8px; }
#reviews.rev-prominent .section-title { color:var(--orange); font-size:13px; letter-spacing:3px; }
#reviews.rev-prominent h2 { font-size:30px; line-height:1.15; margin-bottom:6px; }
@media (max-width:560px) { #reviews.rev-prominent h2 { font-size:24px; } }
/* Live count subtitle that says "X verified reviews — updated weekly" */
#reviews .rev-livecount {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:#5a6f8a; margin-bottom:14px;
  background:rgba(52, 168, 83, 0.08); border:1px solid rgba(52, 168, 83, 0.2);
  padding:5px 12px; border-radius:20px;
}
#reviews .rev-livecount-dot { width:8px; height:8px; border-radius:50%; background:#34A853; box-shadow:0 0 0 3px rgba(52,168,83,0.2); animation:livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
#reviews .rev-livecount b { color:#1e3a5f; font-weight:800; }
#reviews .rev-hero {
  position:relative;
  margin:18px auto 0;
  background:linear-gradient(135deg, #ffffff 0%, #fff5e6 100%);
  border:1px solid rgba(255,107,0,0.18);
  border-radius:22px;
  padding:28px 32px;
  box-shadow:0 18px 50px -20px rgba(255,107,0,0.18), 0 4px 12px rgba(0,0,0,0.04);
  overflow:hidden;
  max-width:760px;
}
#reviews .rev-hero-glow {
  position:absolute; inset:-50% -20% auto auto;
  width:500px; height:500px;
  background:radial-gradient(circle at center, rgba(255,107,0,0.18), transparent 60%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
}
#reviews .rev-hero-grid {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
}
@media (max-width:640px) {
  #reviews .rev-hero { padding:22px 20px; border-radius:18px; }
  #reviews .rev-hero-grid { grid-template-columns:1fr; gap:18px; text-align:center; }
}

/* LEFT pane */
#reviews .rev-hero-left { display:flex; flex-direction:column; gap:10px; }
#reviews .rev-hero-glogo { display:flex; align-items:center; gap:10px; }
#reviews .rev-hero-glogo svg { width:36px; height:36px; flex-shrink:0; }
#reviews .rev-hero-glabel { font-size:18px; font-weight:800; color:#3c4043; letter-spacing:0.2px; }
#reviews .rev-hero-tagline { font-size:13px; color:#5a6f8a; font-weight:600; }
@media (max-width:640px) {
  #reviews .rev-hero-glogo { justify-content:center; }
  #reviews .rev-hero-tagline { text-align:center; }
}

/* RIGHT pane — rating */
#reviews .rev-hero-right {
  display:flex; flex-direction:column; gap:6px;
  border-left:1px solid rgba(255,107,0,0.18); padding-left:32px;
}
@media (max-width:640px) {
  #reviews .rev-hero-right { border-left:none; border-top:1px solid rgba(255,107,0,0.18); padding-left:0; padding-top:18px; align-items:center; }
}
#reviews .rev-hero-rating { display:flex; align-items:baseline; gap:6px; }
@media (max-width:640px) { #reviews .rev-hero-rating { justify-content:center; } }
#reviews .rev-hero-num {
  font-size:64px; font-weight:900; color:var(--orange);
  font-variant-numeric:tabular-nums; line-height:1;
  text-shadow:0 4px 16px rgba(255,107,0,0.18);
}
#reviews .rev-hero-outof { font-size:18px; color:#7a8aa3; font-weight:700; }
#reviews .rev-hero-stars { font-size:24px; letter-spacing:3px; line-height:1; color:#fdc845; }
#reviews .rev-hero-count { font-size:13px; color:#5a6f8a; font-weight:600; margin-top:2px; }
#reviews .rev-hero-actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
@media (max-width:640px) { #reviews .rev-hero-actions { justify-content:center; } }

#reviews .rev-cta {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:10px;
  font-size:13px; font-weight:700;
  text-decoration:none; transition:all .15s;
  white-space:nowrap;
}
#reviews .rev-cta.primary { background:var(--orange); color:#fff; box-shadow:0 4px 12px rgba(255,107,0,0.3); }
#reviews .rev-cta.primary:hover { background:var(--orange2); transform:translateY(-1px); box-shadow:0 6px 16px rgba(255,107,0,0.4); }
#reviews .rev-cta.secondary { background:#fff; color:#3c4043; border:1px solid #dadce0; }
#reviews .rev-cta.secondary:hover { background:#f8f9fa; border-color:#3c4043; }

/* ===== Review carousel — auto-scrolling marquee of cards (data-driven) ===== */
#reviews .rev-carousel {
  position:relative; margin-top:22px;
  overflow:hidden;
  /* fade out on edges so cards "appear/disappear" gracefully */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
#reviews .rev-carousel-track {
  display:flex; gap:14px;
  width:max-content;
  /* JS sets --rev-duration based on number of cards so speed feels right */
  animation:revScroll var(--rev-duration, 40s) linear infinite;
  will-change:transform;
}
#reviews .rev-carousel:hover .rev-carousel-track,
#reviews .rev-carousel:focus-within .rev-carousel-track { animation-play-state:paused; }
@keyframes revScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); } /* exact half — we duplicate the cards once for a seamless loop */
}
@media (prefers-reduced-motion: reduce) {
  #reviews .rev-carousel-track { animation:none; transform:none; flex-wrap:wrap; }
}

#reviews .rev-card {
  background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:16px; padding:18px 20px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  transition:transform .18s, box-shadow .18s;
  /* fixed width so the marquee timing is consistent regardless of text length */
  flex:0 0 300px; width:300px;
  box-sizing:border-box;
}
#reviews .rev-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.1); }
#reviews .rev-card .rh { display:flex; align-items:center; gap:10px; }
#reviews .rev-card .rh img { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#f8f9fa; }
#reviews .rev-card .rh .who { flex:1; min-width:0; }
#reviews .rev-card .rh .name { font-size:13px; font-weight:800; color:#1e3a5f; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#reviews .rev-card .rh .when { font-size:10px; color:#7a8aa3; margin-top:2px; }
#reviews .rev-card .rh .rh-glogo { width:18px; height:18px; flex-shrink:0; opacity:0.85; margin-left:auto; }
#reviews .rev-card .rstars { color:#fdc845; font-size:15px; letter-spacing:2px; line-height:1; }
#reviews .rev-card .rtext { font-size:13px; color:#3c4043; line-height:1.6; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
#reviews .rev-card .rquote {
  font-family:Georgia, 'Times New Roman', serif;
  font-size:42px; line-height:0.6; color:rgba(255,107,0,0.18);
  height:18px; margin-bottom:-6px;
}
@media (max-width:520px) {
  #reviews .rev-card { flex:0 0 260px; width:260px; padding:16px 18px; }
}

/* ===== Floating chip — fixed bottom-right pill, fades in on scroll past hero ===== */
.rev-float {
  position:fixed; bottom:20px; right:20px; z-index:90;
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:#3c4043;
  padding:10px 14px; border-radius:50px;
  text-decoration:none; font-family:inherit;
  box-shadow:0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
  border:1px solid rgba(0,0,0,0.08);
  transition:transform .2s, box-shadow .2s, opacity .3s;
  opacity:0; transform:translateY(20px);
  pointer-events:none;
  font-size:13px; font-weight:700;
}
.rev-float.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.rev-float:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,0.2); }
.rev-float svg { width:18px; height:18px; flex-shrink:0; }
.rev-float .rev-float-num { color:var(--orange); font-weight:900; font-size:14px; font-variant-numeric:tabular-nums; }
.rev-float .rev-float-stars { color:#fdc845; font-size:11px; letter-spacing:1px; line-height:1; }
.rev-float .rev-float-count { color:#7a8aa3; font-size:11px; font-weight:600; }
@media (max-width:480px) {
  .rev-float { bottom:16px; right:50%; transform:translate(50%, 20px); padding:9px 12px; font-size:12px; }
  .rev-float.show { transform:translate(50%, 0); }
  .rev-float .rev-float-stars { display:none; }
}

/* Source / featured pills inside review cards */
#reviews .rev-card.featured { border:1px solid rgba(255,107,0,0.35); box-shadow:0 0 0 1px rgba(255,107,0,0.15) inset; }
#reviews .rev-card .rfeat { display:inline-block; font-size:9px; font-weight:800; letter-spacing:0.8px; color:#fff; background:var(--orange); padding:2px 6px; border-radius:6px; margin-left:6px; vertical-align:middle; text-transform:uppercase; }
#reviews .rev-card .rsrc { display:inline-block; font-size:9px; font-weight:800; letter-spacing:0.8px; color:#fff; padding:2px 6px; border-radius:6px; margin-left:4px; vertical-align:middle; text-transform:uppercase; background:#7a8aa3; }
#reviews .rev-card .rsrc-doordash { background:#ff3008; }
#reviews .rev-card .rsrc-ubereats { background:#06c167; }
#reviews .rev-card .rsrc-instagram { background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); }

/* ===== Promo modal — shown after clicking "Leave a review" ===== */
.rev-promo-modal { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:18px; }
.rev-promo-modal.show { display:flex; animation:revPromoIn .25s ease-out; }
.rev-promo-bg { position:absolute; inset:0; background:rgba(8,16,32,0.65); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.rev-promo-card {
  position:relative; background:#fff; border-radius:22px; padding:28px 26px 22px;
  max-width:420px; width:100%;
  box-shadow:0 25px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,107,0,0.15);
  text-align:center;
  animation:revPromoCardIn .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes revPromoIn { from { opacity:0; } to { opacity:1; } }
@keyframes revPromoCardIn { from { transform:scale(0.85) translateY(20px); opacity:0; } to { transform:scale(1) translateY(0); opacity:1; } }
.rev-promo-close {
  position:absolute; top:10px; right:14px; background:transparent; border:none;
  font-size:26px; line-height:1; color:#94a3b8; cursor:pointer; padding:4px 10px; border-radius:8px;
  font-family:inherit;
}
.rev-promo-close:hover { color:#1e3a5f; background:rgba(0,0,0,0.04); }
.rev-promo-burst { font-size:48px; line-height:1; margin-bottom:6px; animation:revBurstWiggle 1.6s ease-in-out infinite; }
@keyframes revBurstWiggle { 0%,100% { transform:rotate(-6deg) scale(1); } 50% { transform:rotate(6deg) scale(1.08); } }
.rev-promo-card h3 { font-size:22px; font-weight:900; color:#1e3a5f; margin:4px 0 6px; line-height:1.25; letter-spacing:-0.3px; }
.rev-promo-sub { font-size:14px; color:#5a6f8a; margin:0 0 18px; line-height:1.5; }
.rev-promo-sub b { color:var(--orange); font-weight:900; }
.rev-promo-code-wrap { position:relative; margin:0 0 16px; }
.rev-promo-code-label { font-size:10px; font-weight:800; letter-spacing:2px; color:#94a3b8; text-transform:uppercase; margin-bottom:6px; }
.rev-promo-code {
  display:block; width:100%;
  background:linear-gradient(135deg,#fff8f0,#ffeacc);
  border:2px dashed var(--orange);
  border-radius:12px;
  padding:14px 18px;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:28px; font-weight:900; letter-spacing:4px;
  color:var(--orange); cursor:pointer;
  transition:transform .15s, background .15s;
}
.rev-promo-code:hover { background:linear-gradient(135deg,#ffeacc,#ffd699); transform:scale(1.02); }
.rev-promo-code:active { transform:scale(0.98); }
.rev-promo-copied {
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  background:#1e3a5f; color:#fff; padding:6px 14px; border-radius:20px;
  font-size:12px; font-weight:700; opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.rev-promo-copied.show { opacity:1; }
.rev-promo-fine { font-size:11px; color:#94a3b8; margin:0 0 16px; line-height:1.5; }
.rev-promo-go {
  display:block; background:var(--orange); color:#fff !important; text-decoration:none;
  padding:13px 18px; border-radius:12px; font-weight:800; font-size:14px;
  letter-spacing:0.3px; margin-bottom:8px;
  box-shadow:0 4px 14px rgba(255,107,0,0.35);
  transition:transform .15s, box-shadow .15s;
}
.rev-promo-go:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,107,0,0.45); }
.rev-promo-later {
  background:transparent; border:none; color:#7a8aa3; font-size:12px; cursor:pointer;
  padding:8px; font-family:inherit; text-decoration:underline;
}
.rev-promo-later:hover { color:#1e3a5f; }
@media (max-width:420px) {
  .rev-promo-card { padding:24px 20px 18px; border-radius:18px; }
  .rev-promo-card h3 { font-size:19px; }
  .rev-promo-code { font-size:24px; padding:12px 14px; }
}

/* "Leave a Google review" CTA inside the hook's thank-you card */
.hook-review-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:#4285F4; color:#fff !important;
  padding:11px 20px; border-radius:10px;
  font-weight:800; font-size:13px; letter-spacing:0.3px;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(66,133,244,0.35);
  transition:transform .15s, box-shadow .15s;
}
.hook-review-cta:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(66,133,244,0.45); }
.hook-review-cta.flash { animation:hookFlash 1.6s ease-in-out 2; }
@keyframes hookFlash {
  0%,100% { transform:scale(1); box-shadow:0 4px 14px rgba(66,133,244,0.35); }
  50%     { transform:scale(1.06); box-shadow:0 8px 28px rgba(66,133,244,0.6); }
}

/* When user clicks "Leave a review" elsewhere and we scroll them to the
   hook, briefly highlight the form so they notice it. */
.hook.flash { animation:hookFormFlash 1.6s ease-in-out; }
@keyframes hookFormFlash {
  0%,100% { box-shadow:0 8px 22px rgba(0,0,0,0.06); }
  50%     { box-shadow:0 0 0 4px rgba(255,107,0,0.45), 0 8px 22px rgba(0,0,0,0.1); }
}

/* Email-form variant of the promo modal — DEPRECATED, kept for cleanliness
   in case anything still references these classes. The modal itself is no
   longer rendered (showReviewPromoModal now scrolls to the hook instead). */
.rev-promo-form { display:flex; flex-direction:column; gap:10px; margin:6px 0 12px; }
.rev-promo-form input[type="email"] {
  width:100%; box-sizing:border-box;
  padding:13px 15px;
  border:1.5px solid #dadce0; border-radius:12px;
  font-size:15px; font-family:inherit; color:#1e3a5f;
  -webkit-appearance:none;
  transition:border-color .15s, box-shadow .15s;
}
.rev-promo-form input[type="email"]:focus {
  outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,107,0,0.15);
}
.rev-promo-consent {
  display:flex; align-items:flex-start; gap:8px;
  font-size:11px; color:#5a6f8a; line-height:1.4;
  text-align:left; cursor:pointer; padding:2px 0;
}
.rev-promo-consent input { margin-top:2px; flex-shrink:0; cursor:pointer; }
.rev-promo-submit {
  width:100%; background:var(--orange); color:#fff; border:none;
  padding:14px 18px; border-radius:12px; font-weight:800; font-size:15px;
  cursor:pointer; font-family:inherit; letter-spacing:0.3px;
  box-shadow:0 4px 14px rgba(255,107,0,0.35);
  transition:transform .15s, box-shadow .15s, opacity .15s;
}
.rev-promo-submit:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,107,0,0.45); }
.rev-promo-submit:disabled { opacity:0.6; cursor:wait; }
.rev-promo-error {
  background:#fef2f2; border:1px solid #fca5a5; color:#b91c1c;
  padding:8px 12px; border-radius:8px;
  font-size:12px; margin-top:4px; text-align:left;
}
/* Sent (success) state */
.rev-promo-check {
  width:64px; height:64px; margin:0 auto 8px;
  border-radius:50%; background:#34A853; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; font-weight:900;
  animation:revCheckPop .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:0 6px 18px rgba(52,168,83,0.4);
}
@keyframes revCheckPop { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }