/* ==========================================================================
   O'Hara Meals — single-page customer PWA
   Mobile-first. Desktop gets a centred app-width column, never a stretched
   mobile layout. Palette taken from the O'Hara index design.
   ========================================================================== */

:root{
  --teal:#0b3a3f;            /* header */
  --teal-deep:#072a2e;
  --ink:#0d0d0f;             /* page background */
  --ink-2:#151517;
  --card:#ffffff;
  --text:#15161a;
  --muted:#6b6f76;
  --orange:#f3761f;          /* ADD buttons, prices */
  --orange-2:#f6a01f;        /* bottom card */
  --maroon:#8c1c15;          /* meal tabs */
  --maroon-2:#6d1410;
  --line:rgba(255,255,255,.12);
  --ok:#1f9254;
  --danger:#c0392b;
  --app-w:460px;             /* the app column width on tablet/desktop */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:#fff;
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--safe-b) + 8px);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
a{color:inherit}

/* The one rule that makes desktop look like an app, not a stretched phone. */
.wrap{width:100%;max-width:var(--app-w);margin:0 auto;padding:0 12px}

/* ---------------------------------------------------------------- header */
.app-header{background:var(--teal);position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;text-decoration:none;min-width:0}
.brand-logo{height:38px;width:auto}
.brand-logo.is-missing{display:none}
.brand-logo.is-missing + .brand-fallback{display:block}
.brand-fallback{display:none;line-height:1.05}
.brand-name{display:block;font:italic 700 25px/1 Georgia,"Times New Roman",serif;letter-spacing:.5px}
.brand-tag{display:block;font-size:6.5px;letter-spacing:.055em;color:rgba(255,255,255,.7);
  text-transform:uppercase;margin-top:3px;white-space:nowrap}
.account-chip{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;padding:4px}
.account-name{font-size:13px;letter-spacing:.14em;text-transform:uppercase;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(160deg,#37c9b0,#1aa88f);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.avatar svg{width:24px;height:24px;fill:#fff}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------- slider */
.app-main{padding-top:12px}
.slider{position:relative;margin-bottom:14px}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;scrollbar-width:none;border-radius:var(--radius)}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;border-radius:var(--radius);overflow:hidden;background:#123;aspect-ratio:16/12;position:relative}
.slide img{width:100%;height:100%;object-fit:cover}
.slide-fallback{width:100%;height:100%;display:grid;place-content:center;text-align:center;padding:18px;
  background:radial-gradient(120% 120% at 20% 0%,#14555c 0%,#0b3a3f 55%,#07272b 100%)}
.slide-fallback b{display:block;font:italic 700 22px/1.2 Georgia,serif}
.slide-fallback span{display:block;margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.78)}
.dots{display:flex;gap:6px;justify-content:center;margin-top:9px}
.dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.3)}
.dots button[aria-selected=true]{background:var(--orange);width:18px;border-radius:99px}

/* ------------------------------------------------------------ meal tabs */
.meals{display:flex;flex-direction:column;gap:8px}
.menu-loading{color:#9aa0a6;text-align:center;padding:26px 0;font-size:14px}
.meal{border-radius:10px;overflow:hidden}
.meal-tab{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(180deg,var(--maroon),var(--maroon-2));color:#fff;border:0;
  padding:10px 14px;text-align:left;border-radius:10px}
.meal-tab .t-label{font-size:14px;font-weight:700;letter-spacing:.06em}
.meal-tab .t-time{display:block;font-size:9.5px;letter-spacing:.03em;color:rgba(255,255,255,.8);margin-top:2px;font-weight:400}
.meal-tab .chev{transition:transform .25s ease;flex:0 0 auto}
.meal-tab .chev svg{width:16px;height:16px;fill:#fff}
.meal[open] .meal-tab .chev{transform:rotate(180deg)}
.meal-tab .t-count{font-size:11px;color:rgba(255,255,255,.85)}

/* Accordion body: height animation without JS measuring on every frame. */
.meal-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.meal.open .meal-panel{grid-template-rows:1fr}
.meal-panel > div{overflow:hidden}
.meal-title{text-align:center;font:700 19px/1.2 -apple-system,Arial,sans-serif;letter-spacing:.04em;margin:16px 0 12px;text-transform:uppercase}

/* ----------------------------------------------------------- food cards */
.food-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding-bottom:6px}
.food-card{background:var(--card);color:var(--text);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.food-media{aspect-ratio:1/1;background:#e9e4dc;position:relative;overflow:hidden}
.food-media img{width:100%;height:100%;object-fit:cover}
.food-ph{width:100%;height:100%;display:grid;place-content:center;gap:6px;text-align:center;padding:10px;
  background:linear-gradient(150deg,#f0e7d8,#dccfb8)}
.food-ph .ph-mark{font:italic 700 30px/1 Georgia,serif;color:#a8926c}
.food-ph small{font-size:9.5px;color:#8a7c63;letter-spacing:.04em}
.veg-dot{position:absolute;top:8px;left:8px;width:16px;height:16px;border:2px solid var(--ok);border-radius:3px;background:#fff;display:grid;place-content:center}
.veg-dot i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:block}
.veg-dot.nonveg{border-color:var(--danger)}
.veg-dot.nonveg i{background:var(--danger)}
.tag{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.68);color:#fff;font-size:9px;letter-spacing:.06em;
  padding:3px 7px;border-radius:99px;text-transform:uppercase}
.food-info{padding:9px 10px 11px;display:flex;flex-direction:column;flex:1}
.food-name{font-size:13px;line-height:1.28;font-weight:500;margin:0 0 2px}
.food-desc{font-size:10.5px;color:var(--muted);line-height:1.3;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.food-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px}
.price-col{display:flex;flex-direction:column;line-height:1.1}
.price-now{color:var(--orange);font-size:19px;font-weight:600}
.price-was{color:#9aa0a6;font-size:11px;text-decoration:line-through}
.add-col{display:flex;flex-direction:column;align-items:center;gap:2px}
.add-lbl{font-size:8.5px;letter-spacing:.1em;color:var(--muted)}
.add-btn{width:30px;height:30px;border-radius:50%;border:0;background:var(--orange);color:#fff;display:grid;place-content:center;
  font-size:20px;line-height:1;padding:0 0 2px;box-shadow:0 3px 8px rgba(243,118,31,.4)}
.add-btn:active{transform:scale(.9)}
.qty-stepper{display:flex;align-items:center;gap:8px;background:var(--orange);border-radius:99px;padding:3px 6px}
.qty-stepper button{width:22px;height:22px;border:0;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;
  display:grid;place-content:center;font-size:15px;line-height:1;padding:0}
.qty-stepper b{color:#fff;font-size:13px;min-width:14px;text-align:center}
.sold-out{font-size:10px;color:var(--danger);letter-spacing:.05em;text-transform:uppercase}

/* ---------------------------------------------------------------- footer */
/* Dark footer. The final page section, immediately after the interaction
   card, which now occupies real document space above it. */
.app-footer{background:#08090a;color:#f4f0e8;padding:22px 0 26px;margin-top:26px;
  border-top:1px solid rgba(255,255,255,.09)}
.install-row{display:flex;gap:8px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.install-btn{background:var(--orange);color:#fff;border:0;border-radius:99px;padding:11px 20px;font-size:12px;letter-spacing:.09em;font-weight:600}
.install-btn.ghost{background:transparent;color:#f4f0e8;border:1.5px solid rgba(255,255,255,.35)}
.footer-title{text-align:center;font-weight:700;font-size:14px;margin:0 0 12px;color:#fff}
.footer-badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-bottom:12px}
.footer-badges img{height:34px;width:auto;object-fit:contain}
.badge-text{font-size:10px;color:#cfc9be;border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:5px 8px}
.footer-meta{text-align:center;font-size:10.5px;color:#9aa0a6;margin:0 0 10px;line-height:1.5}
.footer-links{text-align:center;font-size:11.5px;margin:0}
.footer-links a{color:var(--orange-2);text-decoration:none}

/* ============================ BOTTOM CUSTOMER CARD ====================== */
/* Permanent page section — NOT a bottom sheet and NOT viewport-docked.
   The card sits in normal document flow between the menu and the footer, so it
   grows and shrinks in place as its state changes and the footer simply reflows
   beneath it. No position:fixed, no bottom anchoring, no height reservation. */
.dock{position:relative;
  width:100%;
  background:linear-gradient(180deg,var(--orange-2),#ef8f13);
  border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  margin:8px 0 4px;
  padding-bottom:14px;
  display:flex;flex-direction:column}
.dock-handle{width:100%;padding:10px 16px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;color:#2a1a05}
.dock-grip{width:38px;height:4px;border-radius:99px;background:rgba(0,0,0,.28)}
.dock-peek{font-size:12.5px;font-weight:700;letter-spacing:.03em;min-height:16px}
/* min-height:0 lets this flex child actually shrink, so tall states (Create
   Account, Cart, Review, Order status) scroll inside the card instead of
   pushing it past the viewport. */
/* No max-height and no internal scrolling: the card is in document flow, so a
   tall state simply makes the page longer and the footer moves down — which is
   the intended behaviour. */
.dock-body{flex:0 0 auto;padding:2px 18px 18px;color:#2a1a05}
.dock-handle{flex:0 0 auto;cursor:default}
/* Persistent AI row. flex:0 0 auto keeps it a fixed part of the shell, so it
   never shrinks and never scrolls with .dock-body beneath it. */
.dock-ai{flex:0 0 auto;padding:0 18px;display:flex;flex-direction:column;align-items:center}

/* ---- AI voice states: idle | connecting | listening | speaking ---- */
.ai-mic-wrap{position:relative;display:grid;place-items:center;width:52px;height:52px;margin:2px auto 0}
.ai-mic-wrap .mic{position:relative;z-index:2;margin:0}

/* Ripples expand outward from the mic while a turn is active. */
.ai-ripple{position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;opacity:0;pointer-events:none;z-index:1}
.dock-ai[data-voice=listening] .ai-ripple,
.dock-ai[data-voice=speaking]  .ai-ripple{animation:ai-ripple 1.8s cubic-bezier(.2,.6,.3,1) infinite}
.dock-ai[data-voice=listening] .ai-ripple:nth-child(2),
.dock-ai[data-voice=speaking]  .ai-ripple:nth-child(2){animation-delay:.6s}
.dock-ai[data-voice=listening] .ai-ripple:nth-child(3),
.dock-ai[data-voice=speaking]  .ai-ripple:nth-child(3){animation-delay:1.2s}
@keyframes ai-ripple{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.5);opacity:0}}

/* Mic colour per state. Idle keeps the original indigo. */
.dock-ai[data-voice=listening] .ai-ripple{color:#28c76f}
.dock-ai[data-voice=speaking]  .ai-ripple{color:#22b8cf}
.dock-ai[data-voice=connecting] .mic{background:radial-gradient(circle at 30% 25%,#f5b342,#d98216)}
.dock-ai[data-voice=listening]  .mic{background:radial-gradient(circle at 30% 25%,#3fdc86,#12a052);box-shadow:0 0 0 4px rgba(40,199,111,.25),0 6px 16px rgba(0,0,0,.28)}
.dock-ai[data-voice=speaking]   .mic{background:radial-gradient(circle at 30% 25%,#3fd0e6,#0b7285);box-shadow:0 0 0 4px rgba(34,184,207,.25),0 6px 16px rgba(0,0,0,.28)}
.dock-ai[data-voice=connecting] .mic{animation:ai-pulse 1.1s ease-in-out infinite}
@keyframes ai-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Live waveform under the mic, driven by real frequency data. */
.ai-wave{display:none;align-items:flex-end;justify-content:center;gap:3px;height:22px;margin:8px 0 0}
.dock-ai[data-voice=listening] .ai-wave,
.dock-ai[data-voice=speaking]  .ai-wave{display:flex}
.ai-wave i{display:block;width:3px;height:3px;border-radius:99px;background:#2a1a05;opacity:.75;
  transition:height .08s linear}
.dock-ai[data-voice=listening] .ai-wave i{background:#0f7a3d}
.dock-ai[data-voice=speaking]  .ai-wave i{background:#075c6e}

.ai-status{min-height:16px;margin:7px 0 0;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(42,26,5,.82);text-align:center}
.ai-stop{margin:8px 0 2px;background:#141416;color:#fff;border:0;border-radius:99px;
  padding:7px 18px;font-size:11px;font-weight:700;letter-spacing:.1em}
.ai-stop[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .ai-ripple,.dock-ai[data-voice=connecting] .mic{animation:none!important}
  .ai-wave i{transition:none}
}

.dock h2{font-size:19px;margin:0 0 4px;font-weight:800;letter-spacing:.01em}
.dock p{margin:0 0 10px;font-size:13.5px;line-height:1.4}
.dock .lead{text-align:center;font-size:16px;line-height:1.5;font-weight:500}
.dock .center{text-align:center}
.mic{width:52px;height:52px;border-radius:50%;margin:2px auto 10px;display:grid;place-content:center;
  background:radial-gradient(circle at 30% 25%,#6f7bf7,#3b2fb5);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.28);border:0}
.mic svg{width:22px;height:22px;fill:#fff}
.mic small{display:none}

.btn-dark{display:block;width:100%;background:#141416;color:#fff;border:0;border-radius:99px;
  padding:15px 18px;font-size:13.5px;letter-spacing:.1em;font-weight:700;text-align:center;text-decoration:none}
.btn-dark:active{transform:scale(.985)}
.btn-dark[disabled]{opacity:.55}
.btn-line{display:block;width:100%;background:transparent;color:#2a1a05;border:1.6px solid rgba(0,0,0,.42);
  border-radius:99px;padding:12px 18px;font-size:12.5px;letter-spacing:.08em;font-weight:700;margin-top:9px}
.link-btn{background:none;border:0;color:#2a1a05;text-decoration:underline;font-size:13px;padding:6px}
.dock-alt{text-align:center;margin-top:11px;font-size:13px}

/* forms inside the card */
.dock-form{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.dock-form input,.dock-form select{width:100%;border:0;border-radius:11px;padding:13px 14px;font-size:15px;
  background:rgba(255,255,255,.94);color:#15161a}
.dock-form input:focus,.dock-form select:focus{outline:2px solid #2a1a05;outline-offset:1px}
.dock-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dock-err{background:rgba(160,20,10,.92);color:#fff;border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:8px}
.dock-note{font-size:11.5px;color:rgba(42,26,5,.78);margin-top:2px}

/* cart lines */
.cart-list{list-style:none;padding:0;margin:6px 0 10px}
.cart-list li{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.14)}
.cart-list .c-name{flex:1;font-size:13.5px;line-height:1.25}
.cart-list .c-price{font-size:13.5px;font-weight:700;min-width:56px;text-align:right}
.mini-step{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.14);border-radius:99px;padding:2px 5px}
.mini-step button{width:21px;height:21px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:1;padding:0;display:grid;place-content:center}
.mini-step b{font-size:12.5px;min-width:12px;text-align:center}
.totals-mini{list-style:none;padding:0;margin:0 0 12px;font-size:13px}
.totals-mini li{display:flex;justify-content:space-between;padding:3px 0}
.totals-mini li.grand{border-top:1.5px solid rgba(0,0,0,.3);margin-top:5px;padding-top:8px;font-size:16px;font-weight:800}
.totals-mini li.credit{color:#0f5c33;font-weight:600}

/* tracking ladder */
.track{list-style:none;padding:0;margin:12px 0 14px}
.track li{position:relative;padding:0 0 18px 28px;font-size:13.5px}
.track li:before{content:'';position:absolute;left:6px;top:14px;bottom:-4px;width:2px;background:rgba(0,0,0,.2)}
.track li:last-child:before{display:none}
.track li i{position:absolute;left:0;top:1px;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(0,0,0,.35);background:transparent;display:grid;place-content:center;font-style:normal;font-size:9px;color:#fff}
.track li.done i{background:#141416;border-color:#141416}
.track li.done i:after{content:'✓'}
.track li.now i{background:#141416;border-color:#141416;box-shadow:0 0 0 4px rgba(0,0,0,.18)}
.track li.now i:after{content:'●';font-size:7px}
.track li.done:before{background:#141416}
.track .t-name{font-weight:700}
.track .t-time{display:block;font-size:11px;color:rgba(42,26,5,.72);margin-top:1px}
.track li:not(.done):not(.now) .t-name{opacity:.55;font-weight:500}
.order-no{font-size:12px;letter-spacing:.08em;font-weight:700;opacity:.85}
.state-badge{display:inline-block;background:#141416;color:#fff;border-radius:99px;padding:5px 13px;font-size:11.5px;letter-spacing:.08em;font-weight:700;margin-bottom:8px}
.big-tick{width:56px;height:56px;border-radius:50%;background:#141416;color:#fff;display:grid;place-content:center;font-size:28px;margin:4px auto 10px}
.avatar-pick{display:flex;align-items:center;gap:12px;margin-top:2px}
.avatar-pick .prev{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-content:center;overflow:hidden;flex:0 0 auto}
.avatar-pick .prev img{width:100%;height:100%;object-fit:cover}
.avatar-pick .prev svg{width:26px;height:26px;fill:#8a7c63}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.62);display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-card{background:#fff;color:#15161a;border-radius:18px;padding:22px;max-width:340px;width:100%}
.modal-card h2{margin:0 0 12px;font-size:19px}
.ios-steps{margin:0 0 14px;padding-left:20px;font-size:14px;line-height:1.7}
.modal-note{font-size:12px;color:var(--muted);margin:0 0 16px}

/* ---------------------------------------------------------------- toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + var(--safe-b));
  background:#141416;color:#fff;padding:11px 18px;border-radius:99px;font-size:13px;z-index:95;
  box-shadow:var(--shadow);max-width:88vw;text-align:center}
.toast[hidden]{display:none}
.toast.err{background:#9d2418}

/* ------------------------------------------------------------ responsive */
@media (min-width:520px){
  :root{--app-w:480px}
  .food-name{font-size:14px}
}
@media (min-width:900px){
  :root{--app-w:520px}
  body{background:#08090a}
  .app-header,.app-footer{box-shadow:0 0 0 1px rgba(255,255,255,.05)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}