:root{--accent:#e11d48;--accent2:#be123c;--searchbg:#fff;--bottomH:80px;--navBg:var(--accent);--navFg:#fff}
*{box-sizing:border-box}
body{margin:0;background:#f6f7fb;font-family:system-ui,-apple-system,Segoe UI,Roboto}
.phone{max-width:430px;margin:0 auto;padding:16px 16px calc(var(--bottomH) + 22px)}
.cardx{background:rgba(255,255,255,.92);border:1px solid rgba(17,24,39,.10);border-radius:22px;box-shadow:0 16px 40px rgba(17,24,39,.10)}
.hero{padding:16px;border-radius:24px;background:linear-gradient(135deg, rgba(225,29,72,.98), rgba(190,18,60,.92));color:#fff}
.row{display:flex;gap:12px;align-items:center}
/* ===== Premium mobile-safe topbar (logo + menu) ===== */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}
.menu-icon{margin-left:auto}
@media (max-width:420px){
  .logo{width:56px;height:56px;border-radius:16px}
  .iconbtn{width:48px;height:48px;border-radius:16px}
}
/* Darker premium status card */
.statusCard{
  background:rgba(2,6,23,.72);
  border:1px solid rgba(255,255,255,.14);
}

.logo{width:64px;height:64px;object-fit:contain;border-radius:18px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.25)}
.restHead{flex:1;min-width:0}
.restName{font-weight:950;font-size:22px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.restSub{margin-top:4px;opacity:.9;font-weight:750;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

h1{margin:0;font-size:24px;line-height:1.1}
.sub{opacity:.9}
.search{margin-top:10px;background:var(--searchbg);border:1px solid rgba(17,24,39,.10);border-radius:14px;padding:7px 10px;display:flex;gap:10px;align-items:center}
.search input{border:none;outline:none;width:100%;font-size:15px;background:transparent}
/* Categories: scrollable, NO scrollbar, tighter spacing */
.catbar{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:6px;padding:6px 6px 2px;margin-top:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.catbar::-webkit-scrollbar{height:0;width:0;display:none}
.catbar{scrollbar-width:none;-ms-overflow-style:none}
.cat{flex:0 0 auto;width:98px;text-align:center;scroll-snap-align:start}
.cat img{width:84px;height:84px;object-fit:contain;border-radius:20px;border:1px solid rgba(17,24,39,.10);background:#fff;padding:6px;box-shadow:0 10px 24px rgba(17,24,39,.10)}
.cat .t{margin-top:7px;font-weight:900;color:#111827;font-size:13px;line-height:1.1}

@media (max-width:430px){
  .catbar{gap:6px;padding:6px 6px 2px}
  .cat{width:94px}
  .cat img{width:82px;height:82px}
}

@media (max-width:360px){
  .cat{width:92px}
  .cat img{width:80px;height:80px}
}
.section{margin-top:14px}
.section h2{margin:0 0 10px 0;font-size:20px;color:#111827}
.grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px}
.prod{padding:10px}
.prod{position:relative}
.favBtn{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:999px;border:1px solid rgba(17,24,39,.10);background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(0,0,0,.10);color:#ef4444;cursor:pointer}
.favBtn svg{width:18px;height:18px}
.favBtn.active{background:#ef4444;border-color:rgba(255,255,255,.25);color:#fff}
.favBtn:active{transform:scale(.98)}
.prod img{width:100%;height:110px;object-fit:contain;border-radius:16px;border:1px solid rgba(17,24,39,.10);background:#fff;padding:10px}
.prod img.ph-img{
  object-fit:contain;
  padding:10px;
  max-width:72%;
  max-height:72%;
  margin:0 auto;
  display:block;
  filter:grayscale(15%);
  opacity:.95;
}
.prod .name{margin-top:8px;font-weight:800;color:#111827}
.prod .desc{color:#6b7280;font-size:12px;min-height:32px}
.prod .bottom{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.price{font-weight:900}
.add{border:none;border-radius:14px;background:var(--accent);color:#fff;font-weight:900;width:40px;height:40px;box-shadow:0 12px 24px rgba(225,29,72,.22)}
.iconbtn{border:none;border-radius:18px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 18px 36px rgba(17,24,39,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.iconbtn:hover{transform:translateY(-1px);box-shadow:0 22px 44px rgba(17,24,39,.22);border-color:rgba(255,255,255,.5)}
.iconbtn:active{transform:translateY(0)}
.iconbtn .ico{width:24px;height:24px;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}

.cart-icon{font-size:0;}
.cart-icon:disabled{opacity:.55;box-shadow:none}
.acct-icon{margin-right:10px;font-size:0;}
.cta{width:100%;border:none;border-radius:18px;background:var(--accent);color:#fff;font-size:16px;font-weight:900;padding:14px 16px;box-shadow:0 16px 30px rgba(225,29,72,.22);position:relative}
.badge{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.25)}

/* Floating cart (always visible) */
.floating-cart{display:none !important}
.floating-cart:active{transform:translateY(1px)}
.floating-cart__icon{font-size:18px}
.floating-cart__total{font-weight:900}
.floating-cart__badge{background:var(--accent);color:#fff;border-radius:999px;font-size:12px;padding:2px 7px;line-height:1;min-width:18px;text-align:center;font-weight:900}

@supports(padding:max(0px)){
  .floating-cart{bottom:max(16px, env(safe-area-inset-bottom))}
}
.small{color:#6b7280;font-size:12px}
.modal{position:fixed;inset:0;background:rgba(17,24,39,.50);display:none;align-items:flex-end;justify-content:center;padding:12px;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:220}
.modal .panel{width:min(430px,100%);background:#fff;border-radius:24px;padding:14px 14px calc(18px + var(--bottomH));border:1px solid rgba(17,24,39,.10);max-height:calc(100dvh - 24px - var(--bottomH));overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal.show{display:flex}

/* ===== Order status (En attente de confirmation) - premium ===== */
.statusPanel{position:relative;padding:18px 18px calc(18px + var(--bottomH));background:linear-gradient(180deg,#ffffff, #fff7f7);border:1px solid rgba(185,28,28,.14);box-shadow:0 28px 70px rgba(0,0,0,.22)}
.statusClose{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:16px;border:1px solid rgba(17,24,39,.10);background:rgba(255,255,255,.85);backdrop-filter:blur(10px);font-size:22px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center}
.statusHeader{display:flex;gap:12px;align-items:center;padding-right:52px}
.statusIcon{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.20);font-size:20px}
.statusTitle{font-weight:950;font-size:18px;letter-spacing:.2px}
.statusSub{margin-top:2px;font-size:12px;color:rgba(17,24,39,.65)}
.statusBody{margin-top:12px}
.statusPill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#111827;color:#fff;font-weight:900;font-size:12px}
.statusProgress{height:10px;border-radius:999px;background:rgba(17,24,39,.08);overflow:hidden;margin-top:10px}
.statusBar{height:100%;width:12%;border-radius:999px;background:linear-gradient(90deg,var(--accent), #fb7185)}
.statusText{margin-top:10px;color:rgba(17,24,39,.72);font-size:13px;line-height:1.35}
.statusSteps{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.statusSteps .step{display:flex;flex-direction:column;gap:6px;align-items:center;font-size:11px;color:rgba(17,24,39,.65);text-align:center}
.statusSteps .dot{width:10px;height:10px;border-radius:999px;background:rgba(17,24,39,.18)}
.statusSteps .step.active{color:#111827;font-weight:900}
.statusSteps .step.active .dot{background:var(--accent)}
.statusSteps .step.done .dot{background:rgba(16,185,129,.9)}

@media (max-width:380px){
  .statusSteps{grid-template-columns:repeat(2,1fr)}
}
.cart-line{border:1px solid rgba(17,24,39,.10);border-radius:18px;padding:10px;margin-top:10px}
.cart-line .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.cart-line .name{font-weight:900;color:#111827}
.cart-line .opts{margin-top:4px;color:#6b7280;font-size:12px}
.cart-line .actions{display:flex;gap:6px;align-items:center;margin-top:10px;flex-wrap:wrap}
.qty{width:52px;padding:10px 8px;text-align:center;border-radius:14px;border:1px solid rgba(17,24,39,.10)}
.btnx{border:none;border-radius:14px;background:#111827;color:#fff;font-weight:900;padding:10px 10px;font-size:14px}
.btnx.danger{background:#ef4444}
.btnx.ghost{background:#f3f4f6;color:#111827;border:1px solid rgba(17,24,39,.10)}
.cart-line .actions .btnx{white-space:nowrap}

/* --- Checkout: professional mode/payment controls --- */
.field{margin:14px 0}
.field-label{font-size:13px;color:#6b7280;margin:0 0 8px 2px;font-weight:900}

/* hide radios (labels are clickable) */
.segmented input,.pay-grid input{position:absolute;opacity:0;pointer-events:none}

/* MODE: segmented control */
.segmented{background:#f3f4f6;border-radius:16px;padding:4px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.segmented label{display:flex;align-items:center;justify-content:center;height:44px;border-radius:14px;font-size:14px;font-weight:900;color:#111827;cursor:pointer;user-select:none;transition:transform .06s ease, background .18s ease, box-shadow .18s ease, outline-color .18s ease}
.segmented input:checked + label{background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.10);outline:2px solid rgba(239,68,68,.25)}
.segmented label:active{transform:scale(.985)}

/* PAIEMENT: clean grid */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-grid label{background:#fff;border:1px solid rgba(17,24,39,.12);border-radius:16px;height:46px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#111827;cursor:pointer;user-select:none;transition:transform .06s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease}
.pay-grid label:active{transform:scale(.985)}
.pay-grid input:checked + label{border-color:rgba(239,68,68,.60);box-shadow:0 10px 24px rgba(239,68,68,.12);background:rgba(239,68,68,.06)}
.pay-grid .pay-full{grid-column:1 / -1}

@media (max-width:420px){
  .segmented label{height:42px;font-size:13px}
  .pay-grid label{height:44px;font-size:13px}
}
.opt-group{border:1px solid rgba(17,24,39,.10);border-radius:18px;padding:10px;margin-top:10px}
.opt-title{font-weight:900}
.opt-item{display:flex;justify-content:space-between;gap:10px;padding:10px 8px;border-radius:14px}
.opt-item:hover{background:#f6f7fb}

/* Restaurant information card (concept like screenshot) */
.rest-card{padding:14px}
.rest-head{display:flex;gap:12px;align-items:center}
.rest-logo{width:64px;height:64px;object-fit:contain;border-radius:18px;background:#fff;border:1px solid rgba(17,24,39,.10)}
.rest-title{font-weight:950;color:#111827;font-size:18px;line-height:1.15}
.rest-tags{margin-top:4px;color:#6b7280;font-weight:700}
.rest-divider{height:1px;background:rgba(17,24,39,.10);margin:12px 0}
.rest-lines{display:grid;gap:10px}
.rest-line{display:flex;gap:10px;align-items:flex-start;color:#111827}
.rest-ico{width:22px;display:flex;justify-content:center;opacity:.8}
.rest-line .txt{flex:1;white-space:pre-line}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(16,185,129,.14);color:#065f46;font-weight:900;font-size:12px}
.rest-actions{display:flex;gap:10px;margin-top:12px}
.rest-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid rgba(17,24,39,.12);color:#111827;text-decoration:none;font-weight:900}
.rest-btn.outline{border-color:color-mix(in srgb, var(--accent) 55%, rgba(17,24,39,.12));color:color-mix(in srgb, var(--accent) 80%, #111827)}
.rest-btn.outline:active{transform:scale(.99)}
.map{margin-top:12px;border-radius:18px;overflow:hidden;border:1px solid rgba(17,24,39,.10)}
.map iframe{display:block;width:100%;height:220px;border:0}
.copyright{margin-top:12px;padding-top:10px;border-top:1px solid rgba(17,24,39,.08);color:#6b7280;font-size:12px;text-align:center}

.campaign-slider{margin-top:10px;border-radius:22px;overflow:hidden;background:transparent;border:0;box-shadow:0 18px 46px rgba(0,0,0,.10)}
.campaign-track{display:flex;transition:transform .35s ease;will-change:transform}

/* Premium campaign card (theme-aligned) */
/* Default = theme gradient with WHITE text; admin can override per-campaign via campaign_bg / campaign_color */
.campaign-slide{min-width:100%;position:relative;cursor:pointer;background:var(--campBg, linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #000 0%), color-mix(in srgb, var(--accent2) 90%, #000 0%)));color:var(--campText, #ffffff)}
.campaign-slide::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg, rgba(239,68,68,1), rgba(220,38,38,1));}
.campaign-slide::after{content:"";position:absolute;inset:0;border:1px solid rgba(17,24,39,.08);border-left:0;border-radius:22px;pointer-events:none}

.campaign-slide .campaign-blur{display:none}

.campaign-inner{position:relative;z-index:1;display:flex;gap:12px;align-items:center;padding:14px 14px 14px 16px}
.campaign-img{width:74px;height:74px;object-fit:contain;flex:0 0 auto;border-radius:18px;background:#fff;border:1px solid rgba(17,24,39,.08)}
.campaign-text{flex:1;min-width:0}
.campaign-text .ct{font-weight:950;font-size:17px;line-height:1.15;color:inherit;letter-spacing:.2px}
.campaign-text .tx{margin-top:5px;opacity:.92}
.campaign-text .ct,.campaign-text .tx{ text-shadow: 0 10px 26px rgba(0,0,0,.18); }
.campaign-cta{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);color:var(--navFg);padding:9px 12px;border-radius:999px;font-weight:900}
.campaign-cta .arr{display:inline-flex;width:22px;height:22px;border-radius:999px;align-items:center;justify-content:center;background:rgba(255,255,255,.20)}
.campaign-slide:active{transform:scale(.995)}

/* =========================
   Premium header widgets
   ========================= */
.statusCard{flex:1 1 auto;min-width:0;background:rgba(17,24,39,.55);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:14px 16px;margin-top:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 46px rgba(0,0,0,.18)}
.statusCard .stRow{display:grid;grid-template-columns:62px 1fr;align-items:start;gap:10px;margin:4px 0}
.statusCard .stRow span{opacity:.78;font-size:10px;font-weight:850;letter-spacing:.25px}
.statusCard .stRow b{font-weight:950;font-size:13px;line-height:1.18;white-space:normal;overflow:visible;text-align:right;word-break:break-word}
.menu-icon{ }

/* =========================
   Premium drawer
   ========================= */
.drawer{position:fixed;inset:0;display:none;background:rgba(17,24,39,.52);z-index:210}
.drawer.show{display:block}
.drawer-panel{position:absolute;left:0;top:0;bottom:0;width:min(360px,86vw);background:#0b1220;color:#fff;padding:18px;display:flex;flex-direction:column;gap:12px;border-top-right-radius:26px;border-bottom-right-radius:26px;box-shadow:0 34px 90px rgba(0,0,0,.45);box-sizing:border-box;overflow-y:auto;overflow-x:hidden;padding-bottom:24px}
.drawer-head{display:flex;align-items:flex-start;gap:10px}
.drawer-name{font-weight:950;font-size:18px;line-height:1.15}
.drawer-sub{opacity:.85;font-weight:700;margin-top:2px;font-size:13px}
.drawer-close{margin-left:auto;border:none;background:rgba(255,255,255,.10);color:#fff;width:40px;height:40px;border-radius:14px;font-size:22px;line-height:1;cursor:pointer}
.drawer-info{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px;
  display:grid;
  gap:10px
}
.drawer-info .di{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:0}
.drawer-info .di span{opacity:.78;font-weight:850;font-size:12px;flex:0 0 86px}
.drawer-info .di b{font-weight:950;font-size:12px;text-align:right;flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;}

.drawer-map{
  margin-top:10px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.drawer-map iframe{
  width:100%;
  height:170px;
  border:0;
  display:block;
  filter:saturate(1.05) contrast(1.02);
}
.drawer-actions{display:grid;gap:10px;margin-top:4px}
.drawer-item{border:none;background:rgba(255,255,255,.08);color:#fff;padding:12px 14px;border-radius:16px;font-weight:900;text-align:left;cursor:pointer}
.drawer-item:active{transform:scale(.99)}
.drawer-logout{border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;padding:12px 14px;border-radius:16px;font-weight:950;cursor:pointer}

/* =========================
   Premium bottom navigation
   ========================= */
.bottomNav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(430px,100%);z-index:120;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--navBg);border-top-left-radius:26px;border-top-right-radius:26px;box-shadow:0 -18px 50px rgba(0,0,0,.20)}
.navRow{margin-top:0px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.navBtn{flex:1;border:none;background:transparent;color:color-mix(in srgb, var(--navFg) 92%, transparent);display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;border-radius:16px;cursor:pointer}
.navBtn svg{width:22px;height:22px;color:var(--navFg)}
.navBtn span{font-size:11px;font-weight:900;letter-spacing:.2px}
.navBtn:active{background:rgba(255,255,255,.10)}

.navCart{position:relative;flex:0 0 78px;height:62px;border:none;cursor:pointer;color:var(--navFg);background:#fff;border-radius:22px;display:flex;align-items:center;justify-content:center;transform:translateY(-14px);box-shadow:0 22px 60px rgba(0,0,0,.28)}
.navCart svg{width:26px;height:26px;color:var(--accent)}
.navCart:disabled{opacity:.7;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.navCart .cartHalo{position:absolute;inset:-10px;border-radius:28px;background:rgba(255,255,255,.22);filter:blur(0);pointer-events:none}
.navCart .cartBadge{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:950;box-shadow:0 10px 20px rgba(0,0,0,.22)}

/* Ensure page content not hidden by nav on very short screens */
@media (max-height:740px){
  :root{--bottomH:86px}
  .bottomNav{padding-top:8px}
  .navCart{transform:translateY(-10px)}
}

/* Hide old restaurant info card (moved into bottom/drawer) */
#restInfoCard{display:none !important}

.campaign-dots{display:flex;gap:6px;justify-content:center;padding:10px 0 12px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.campaign-dots .dot{width:8px;height:8px;border-radius:999px;border:0;background:rgba(17,24,39,.18);padding:0}
.campaign-dots .dot.active{background:color-mix(in srgb, var(--accent) 70%, rgba(17,24,39,.18))}

@media (max-width:420px){
  .campaign-img{width:68px;height:68px}
  .campaign-inner{padding:12px 12px 12px 14px}
}


/* Premium hero layout fixes */
.hero .row{flex-wrap:wrap}

/* ==========================
   Commandes (plein écran)
   ========================== */
.sheet{position:fixed;inset:0;z-index:140;background:#0b0f16;display:flex;flex-direction:column;transform:translateY(110%);transition:transform .28s ease;}
.sheet.show{transform:translateY(0);}
.sheetTop{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;color:#fff}
.sheetTitle{font-weight:950;font-size:16px;letter-spacing:.2px}
.sheetBack{width:40px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center}
.sheetBack svg{width:18px;height:18px}
.sheetBody{flex:1;overflow:auto;padding:0 14px calc(var(--bottomH) + 18px)}
.sheetCard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px;color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-top:12px}
.sheetCard .small{color:rgba(255,255,255,.80)}
.dateInput{border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;padding:10px 12px}
.orderRow{padding:14px 14px;border-radius:18px;margin-top:12px;background:linear-gradient(180deg, rgba(225,29,72,.16), rgba(255,255,255,.05));border:1px solid rgba(225,29,72,.28);box-shadow:0 18px 46px rgba(0,0,0,.22);cursor:pointer;transition:transform .12s ease, background .12s ease, border-color .12s ease}
.orderMeta{display:flex;justify-content:space-between;align-items:center;gap:10px}
.orderId{font-weight:950}
.orderStatus{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.orderItems{margin-top:8px;font-size:12px;opacity:.85;line-height:1.35}


/* ===== Premium header brand block ===== */
.topbar{display:flex;align-items:center;gap:10px}
.brandBlock{min-width:0;display:flex;flex-direction:column;gap:2px}
.brandName{font-weight:950;font-size:16px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brandSub{font-size:11px;opacity:.82;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-icon{margin-left:auto}

/* ===== Premium orders cards & detail (light cards) ===== */
.orderRow{
  padding:14px 14px;
  border-radius:18px;
  margin-top:12px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 16px 40px rgba(2,6,23,.12);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position:relative;
  color:#0f172a;
}
.orderRow::before{
  content:"";
  position:absolute;
  left:0; top:12px; bottom:12px;
  width:4px;
  border-radius:999px;
  background:var(--accent);
}
.orderRow:active{transform:scale(.99)}
.orderTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.orderId{font-weight:950}
.orderMeta{font-size:12px;opacity:.75;margin-top:4px}
.orderStatus{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:950;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.04);
  color:#0f172a;
  white-space:nowrap;
}
.orderStatus.st-acc{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.24);color:#14532d}
.orderStatus.st-liv{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.24);color:#1e3a8a}
.orderStatus.st-ann{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.24);color:#7f1d1d}
.orderStatus.st-prep{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.26);color:#7c2d12}
.orderItems{margin-top:10px;font-size:12px;color:rgba(15,23,42,.78);line-height:1.45}
.orderDetail{margin-top:14px}

/* Orders detail (premium) */
.detailBackRow{display:flex;align-items:center;gap:10px;margin:10px 0}
.detailBackBtn{border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.08);color:#fff;font-weight:950;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.detailBackBtn:active{transform:scale(.99)}

.detailCard{padding:16px;border-radius:24px;background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 26px 90px rgba(2,6,23,.18);position:relative;overflow:hidden}
.detailCard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg, var(--accent), rgba(225,29,72,.35));}
.detailHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-left:6px}
.detailTitle{font-weight:950;font-size:16px;color:#0f172a;letter-spacing:.2px}
.detailSub{margin-top:4px;font-size:12px;color:#64748b}
.detailMeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.detailGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.detailItem{padding:12px 12px;border-radius:16px;background:linear-gradient(180deg, rgba(225,29,72,.06), rgba(15,23,42,.02));border:1px solid rgba(15,23,42,.08)}
.detailItem .k{font-size:11px;letter-spacing:.2px;color:#64748b}
.detailItem .v{margin-top:5px;font-weight:950;font-size:13px;color:#0f172a;overflow-wrap:anywhere}

.detailSection{margin-top:12px;padding:12px 12px;border-radius:18px;background:#fff;border:1px solid rgba(15,23,42,.08)}
.detailSectionTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:950;color:#0f172a}
.detailSectionTitle .muted{font-weight:800;font-size:12px;color:#64748b}
.detailList{margin-top:10px}
.detailLine{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(15,23,42,.08);align-items:flex-start}
.detailLine:last-child{border-bottom:none}
.detailLine .lhs{min-width:0;color:#0f172a}
.detailLine .rhs{font-weight:950;white-space:nowrap;flex:0 0 auto;min-width:92px;text-align:right;color:#0f172a}
.detailOpt{margin-top:4px;font-size:12px;color:#64748b}

@media (max-width:380px){
  .detailGrid{grid-template-columns:1fr;}
  .detailLine .rhs{min-width:78px;}
}


/* ===== Favoris list ===== */
.favRow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;margin-top:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);box-shadow:0 14px 34px rgba(0,0,0,.20);cursor:pointer}
.favRow:active{transform:scale(.99)}
.favImg{width:64px;height:64px;object-fit:contain;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:#fff;padding:10px;flex:0 0 auto}
.favMid{min-width:0;flex:1}
.favName{font-weight:950}
.favDesc{font-size:12px;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.favPrice{margin-top:6px;font-weight:950}
.favRemove{width:32px;height:32px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font-weight:950;flex:0 0 auto;cursor:pointer}
.favRemove:active{transform:scale(.98)}

/* ===== Bottom bar shape tweaks ===== */
.bottomNav{padding:6px 12px calc(6px + env(safe-area-inset-bottom));border-top-left-radius:34px;border-top-right-radius:34px}
.navCart{height:58px;border-radius:24px;transform:translateY(-12px)}

/* ===== Premium account modal ===== */
.accountPanel{max-width:520px}
.accountPanel #accTitle{font-size:18px;letter-spacing:.2px}
.accountPanel .btnx.ghost{border-radius:16px}
.accountPanel .search{border-radius:16px;background:rgba(255,255,255,.92)}
.accountPanel .cta{border-radius:16px}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:rgba(17,24,39,.92);color:#fff;z-index:120;min-width:220px;max-width:min(92vw,520px);
  padding:12px 14px;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .18s ease, transform .18s ease;
  display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
.toast.success{background:rgba(22,163,74,.92)}
.toast.error{background:rgba(220,38,38,.92)}

/* ===== Fly-to-cart animation ===== */
.flyItem{position:fixed;z-index:140;left:0;top:0;width:46px;height:46px;border-radius:16px;
  background:rgba(255,255,255,.98);box-shadow:0 16px 40px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}
.flyItem img{width:100%;height:100%;object-fit:contain;padding:8px}

/* ===== Loyalty / Fidélité ===== */
.loyHeader{display:flex;align-items:center;justify-content:space-between;gap:12px}
.loyTitle{font-weight:950;font-size:16px;letter-spacing:.2px;line-height:1.1}
.loyBadge{flex:0 0 auto;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.08);
  padding:6px 10px;border-radius:999px;font-weight:950;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.10)}
.loyProgressWrap{background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.06);padding:10px;border-radius:16px}
.loyProgress{height:10px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.loyProgressBar{height:100%;border-radius:999px;background:linear-gradient(90deg, var(--accent, #ff4d6d), rgba(255,255,255,.15))}
.loyActions{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px}
.loyActions .btnx.ghost{flex:0 0 auto}
.loyActions .cta{flex:1}

@media (max-width:420px){
  .loyActions{flex-direction:column;align-items:stretch}
  .loyActions .btnx.ghost{width:100%}
}

.loyRewardsList{display:flex;flex-direction:column;gap:10px}
.loyRewardRow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 12px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  /* The app uses a dark UI with a light text default in some places.
     Keep these white cards readable everywhere. */
  color:#111}
.loyRewardRow .lhs{min-width:0}
.loyRewardRow .ttl{font-weight:950}
.loyRewardRow .sub{font-size:12px;opacity:.75;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loyRewardRow .pill{flex:0 0 auto;font-size:12px;font-weight:900;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.08)}
.loyRewardRow .useBtn{flex:0 0 auto}

/* Messages inbox */
.msgList{display:flex;flex-direction:column;gap:10px}
.msgItem{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px 14px;cursor:pointer}
.msgItem.unread{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.08)}
.msgTop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.msgTitle{font-weight:900}
.msgDate{font-size:12px;opacity:.7;white-space:nowrap}
.msgBody{margin-top:6px;font-size:13px;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}