/* InstaFood App — design system aligned with brand */
:root{
  --noir: #0a0a0a;
  --noir-2: #161412;
  --noir-3: #1f1c19;
  --brique: #2a201a;
  --cheddar: #ffb100;
  --cheddar-clair: #ffe18a;
  --cheddar-fonce: #d67b00;
  --rouge: #c8421c;
  --rouge-clair: #e85a35;
  --creme: #f4ede4;
  --creme-2: #d8cdb8;
  --vert: #34a853;
  --vert-dark: #1e7a3a;

  --font-chunk: 'Bagel Fat One', 'Impact', sans-serif;
  --font-display: 'Anton', 'Impact', sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-body: 'Manrope', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; margin:0; padding:0; }
html,body{
  background:#0a0a0a;
  color:var(--creme);
  font-family:var(--font-body);
  height:100%;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body{
  background-image:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'><rect width='100%25' height='100%25' fill='%23161412'/><g fill='none' stroke='%23000' stroke-width='2' opacity='.6'><path d='M0,40 L240,40 M0,80 L240,80'/><path d='M60,0 L60,40 M180,0 L180,40 M0,40 L0,80 M120,40 L120,80 M240,40 L240,80 M60,80 L60,120 M180,80 L180,120'/></g><g fill='%23000' opacity='.25'><rect x='0' y='0' width='60' height='40'/><rect x='120' y='0' width='60' height='40' fill='%23090807' opacity='.5'/><rect x='180' y='40' width='60' height='40' opacity='.6'/><rect x='60' y='80' width='60' height='40' opacity='.5'/></g></svg>");
  background-size:240px 120px;
}
img{ display:block; max-width:100%; height:auto; }
button{ cursor:pointer; font-family:inherit; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
input,textarea,select{ font-family:inherit; }
::-webkit-scrollbar{ width:0; height:0; }

/* ============ STAGE / FRAMES ============ */
.stage{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  padding:18px;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:14px;
  padding:10px 14px;
  background:rgba(10,10,10,.7);
  border:1px solid rgba(255,177,0,.18);
  border-radius:14px;
  backdrop-filter:blur(8px);
}
.topbar__brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-chunk);
  font-size:1.1rem; letter-spacing:.02em;
}
.topbar__brand strong{ color:var(--cheddar); }
.topbar__brand img{ width:28px; height:28px; border-radius:6px; background:#000; }
.topbar__roles{ display:flex; gap:6px; padding:4px; background:#000; border-radius:999px; border:1px solid #2a201a; }
.topbar__role{
  padding:8px 14px; font-size:.75rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:999px; color:rgba(244,237,228,.6);
  transition:all .25s ease;
  display:flex; align-items:center; gap:6px;
}
.topbar__role.active{ background:var(--cheddar); color:var(--noir); box-shadow:0 3px 0 var(--cheddar-fonce); }
.topbar__role:not(.active):hover{ color:var(--creme); }
.topbar__role .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.6; }
.topbar__role.active .dot{ background:var(--noir); opacity:1; }
.topbar__hint{ font-size:.72rem; color:rgba(244,237,228,.5); letter-spacing:.1em; text-transform:uppercase; }

.if-supa-status{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:99px;
  font-size:.68rem; font-weight:800; letter-spacing:.08em;
  background:rgba(255,177,0,.1); color:rgba(244,237,228,.6);
  border:1px solid #2a201a;
}
.if-supa-status[data-state="on"]{
  background:rgba(52,168,83,.14); color:var(--vert); border-color:rgba(52,168,83,.4);
}
.if-supa-status[data-state="off"]{
  background:rgba(200,66,28,.1); color:rgba(244,237,228,.6); border-color:#2a201a;
}

.frames{
  flex:1; min-height:0;
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:24px;
  justify-items:center; align-items:center;
}
@media (max-width:1280px){ .frames{ grid-template-columns: 1fr; } .frame:not(.frame--active){ display:none; } }

.frame{
  width:380px; height:780px; max-height:calc(100vh - 110px);
  background:#000;
  border-radius:42px;
  padding:8px;
  border:2px solid #2a201a;
  box-shadow:
    0 0 0 6px #161412,
    0 30px 60px rgba(0,0,0,.6),
    0 0 60px rgba(255,177,0,.06);
  position:relative;
  display:flex; flex-direction:column;
}
.frame__label{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  font-family:var(--font-display);
  letter-spacing:.2em; font-size:.78rem;
  color:rgba(244,237,228,.55);
  display:flex; align-items:center; gap:8px;
}
.frame__label .pulse{
  width:8px; height:8px; border-radius:50%; background:var(--vert);
  box-shadow:0 0 0 0 rgba(52,168,83,.6);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(52,168,83,.6); }
  70%{ box-shadow:0 0 0 10px rgba(52,168,83,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,168,83,0); }
}
.screen{
  flex:1; min-height:0;
  background:var(--noir);
  border-radius:34px;
  overflow:hidden;
  position:relative;
  display:flex; flex-direction:column;
  contain: layout style;
}
.screen > *{ flex-shrink: 0; }
.screen > .scroll{ flex-shrink: 1; }
.screen__notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:110px; height:26px;
  background:#000; border-radius:14px;
  z-index:50;
}
.statusbar{
  height:42px; padding:14px 26px 6px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.7rem; font-weight:700;
  position:relative; z-index:40;
  color:var(--creme);
}
.statusbar__icons{ display:flex; gap:5px; align-items:center; }

.scroll{
  flex:1 1 0%; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior: contain;
}
.scroll::-webkit-scrollbar{ display:none; }

/* ============ CLIENT APP ============ */
.c-header{
  padding:6px 18px 14px;
  background:linear-gradient(180deg, rgba(255,177,0,.12) 0%, rgba(10,10,10,0) 100%);
}
.c-greet{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.c-greet__hi{ font-size:.78rem; color:rgba(244,237,228,.6); letter-spacing:.04em; }
.c-greet__name{ font-family:var(--font-chunk); font-size:1.4rem; line-height:1; margin-top:2px; }
.c-greet__name strong{ color:var(--cheddar); }
.c-avatar{
  width:42px; height:42px; border-radius:14px;
  background:#000; border:2px solid var(--cheddar);
  display:grid; place-items:center; font-family:var(--font-chunk);
  color:var(--cheddar); font-size:1rem;
}
.c-address{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:rgba(255,177,0,.08);
  border:1px solid rgba(255,177,0,.22);
  border-radius:14px;
}
.c-address__icon{
  width:34px; height:34px; border-radius:10px;
  background:var(--cheddar); color:#000;
  display:grid; place-items:center;
  box-shadow:0 3px 0 var(--cheddar-fonce);
  flex-shrink:0;
}
.c-address__txt{ flex:1; min-width:0; }
.c-address__label{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,237,228,.55); }
.c-address__addr{ font-size:.85rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-address__eta{ font-size:.74rem; color:var(--cheddar); font-weight:800; }
.c-address__chev{ color:rgba(244,237,228,.5); }

.c-modes{
  display:flex; gap:6px; padding:4px;
  background:#000; border:1px solid #2a201a;
  border-radius:14px; margin:12px 18px;
}
.c-mode{
  flex:1; padding:10px 8px;
  font-size:.7rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:10px; color:rgba(244,237,228,.55);
  transition:all .2s ease;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.c-mode.active{ background:var(--cheddar); color:#000; box-shadow:0 2px 0 var(--cheddar-fonce); }

.c-search{
  margin:0 18px 12px;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:var(--noir-3);
  border:1px solid #2a201a;
  border-radius:14px;
}
.c-search input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--creme); font-size:.88rem;
}
.c-search input::placeholder{ color:rgba(244,237,228,.4); }

.c-promo{
  margin:0 18px 14px;
  padding:14px;
  background:
    linear-gradient(135deg, rgba(255,177,0,.95), rgba(214,123,0,.95));
  color:#0a0a0a;
  border-radius:18px;
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 6px 0 var(--cheddar-fonce);
}
.c-promo::after{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.4) 0 6%, transparent 7%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.25) 0 4%, transparent 5%),
    radial-gradient(circle at 15% 70%, rgba(0,0,0,.15) 0 5%, transparent 6%);
  pointer-events:none;
}
.c-promo__emo{ font-size:2rem; }
.c-promo__txt{ flex:1; position:relative; z-index:2; }
.c-promo__title{ font-family:var(--font-chunk); font-size:1.05rem; line-height:1.05; }
.c-promo__sub{ font-size:.74rem; font-weight:700; opacity:.8; margin-top:2px; }

.c-section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin:18px 18px 10px;
}
.c-section-title h3{
  font-family:var(--font-display);
  font-size:1.2rem; letter-spacing:.06em;
  text-transform:uppercase;
}
.c-section-title a{ font-size:.72rem; color:var(--cheddar); font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

.c-cats{
  display:flex; gap:10px; padding:2px 18px 6px;
  overflow-x:auto;
}
.c-cats--sticky{
  padding:8px 18px 10px;
  background:rgba(10,10,10,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #2a201a;
  position:relative; z-index:5;
}
.c-cat__count{
  display:inline-block; margin-top:2px;
  padding:1px 6px; border-radius:99px;
  background:rgba(0,0,0,.18);
  font-size:.6rem; font-weight:800;
}
.c-cat:not(.active) .c-cat__count{ background:#000; color:rgba(244,237,228,.5); }
.c-cat{
  flex-shrink:0; min-width:84px; padding:12px 10px;
  background:var(--noir-3);
  border:1px solid #2a201a;
  border-radius:14px;
  text-align:center;
  transition:all .25s ease;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.c-cat.active{ background:var(--cheddar); border-color:var(--cheddar); color:#000; box-shadow:0 3px 0 var(--cheddar-fonce); transform:translateY(-2px); }
.c-cat__icon{ font-size:1.3rem; }
.c-cat__name{ font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; line-height:1.1; }

.c-product-list{ padding:6px 18px 130px; display:flex; flex-direction:column; gap:12px; }
.c-card{
  background:var(--noir-3);
  border:1px solid #2a201a;
  border-radius:18px;
  padding:10px;
  display:flex; gap:12px;
  position:relative;
  transition:all .2s ease;
}
.c-card:active{ transform:scale(.98); }
.c-card__img{
  width:88px; height:88px; flex-shrink:0;
  border-radius:14px; overflow:hidden;
  background:#000;
  position:relative;
}
.c-card__img img{ width:100%; height:100%; object-fit:cover; }
.c-card__info{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:4px; }
.c-card__name{ font-family:var(--font-display); font-size:1rem; letter-spacing:.04em; line-height:1.1; }
.c-card__desc{ font-size:.72rem; color:rgba(244,237,228,.55); line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.c-card__bot{ display:flex; align-items:center; justify-content:space-between; }
.c-card__price{ font-family:var(--font-chunk); color:var(--cheddar); font-size:1.1rem; }
.c-card__add{
  width:36px; height:36px; border-radius:12px;
  background:var(--cheddar); color:#000;
  font-size:1.2rem; font-weight:900;
  display:grid; place-items:center;
  box-shadow:0 3px 0 var(--cheddar-fonce);
  transition:transform .15s ease;
}
.c-card__add:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--cheddar-fonce); }
.c-card__add.in-cart{ background:var(--vert); box-shadow:0 3px 0 var(--vert-dark); }
.c-card__qty{ display:flex; align-items:center; gap:8px; }
.c-card__qty button{
  width:28px; height:28px; border-radius:8px;
  background:#000; color:var(--cheddar);
  font-size:1rem; font-weight:900;
  display:grid; place-items:center;
  border:1px solid #2a201a;
}
.c-card__qty span{ font-weight:800; min-width:18px; text-align:center; font-size:.9rem; }

.tag{
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 7px;
  font-size:.58rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:999px;
  position:absolute;
}
.tag--bestseller{ background:var(--cheddar); color:#000; top:6px; left:6px; }
.tag--new{ background:var(--rouge); color:var(--creme); top:6px; left:6px; }
.tag--spicy{ background:#fff; color:var(--rouge); top:6px; right:6px; }

/* Bottom nav */
.c-bnav{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(10,10,10,.94);
  border:1px solid #2a201a;
  border-radius:22px;
  padding:8px 4px;
  backdrop-filter:blur(10px);
  z-index:60;
}
.c-bnav__btn{
  flex:1; padding:8px 4px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.62rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  color:rgba(244,237,228,.5);
  transition:color .2s ease;
  position:relative;
}
.c-bnav__btn.active{ color:var(--cheddar); }
.c-bnav__btn .icn{ font-size:1.15rem; }
.c-bnav__badge{
  position:absolute; top:2px; right:18%;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--rouge); color:#fff;
  border-radius:999px;
  font-size:.62rem; font-weight:800;
  display:grid; place-items:center;
  border:2px solid var(--noir);
}

/* ===== Product detail / sheet ===== */
.sheet{
  position:absolute; inset:0;
  background:rgba(0,0,0,.7);
  z-index:70;
  display:flex; align-items:flex-end;
  animation:fadein .25s ease;
}
@keyframes fadein{ from{opacity:0;} to{opacity:1;} }
.sheet__inner{
  width:100%; max-height:92%;
  background:var(--noir);
  border-radius:24px 24px 0 0;
  display:flex; flex-direction:column;
  animation:slideup .35s cubic-bezier(.4,.2,.2,1);
  overflow:hidden;
}
@keyframes slideup{ from{transform:translateY(60%);} to{transform:translateY(0);} }
.sheet__handle{
  width:44px; height:4px; background:rgba(244,237,228,.3);
  border-radius:99px; margin:10px auto;
  flex-shrink:0;
}
.sheet__close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(10,10,10,.7); color:#fff;
  font-size:1.1rem; font-weight:700;
  display:grid; place-items:center;
  z-index:5;
}
.sheet__body{ flex:1 1 0%; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.sheet__body::-webkit-scrollbar{ display:none; }
.sheet__hero{ height:200px; position:relative; background:#000; }
.sheet__hero img{ width:100%; height:100%; object-fit:cover; }
.sheet__hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(10,10,10,1) 100%);
}
.sheet__content{ padding:0 20px 24px; }
.sheet__name{ font-family:var(--font-chunk); font-size:1.6rem; line-height:1; margin-top:-30px; position:relative; z-index:2; }
.sheet__price-row{ display:flex; align-items:baseline; justify-content:space-between; margin-top:10px; }
.sheet__price{ font-family:var(--font-display); color:var(--cheddar); font-size:1.8rem; letter-spacing:.04em; }
.sheet__prep{ font-size:.72rem; color:rgba(244,237,228,.6); letter-spacing:.1em; text-transform:uppercase; }
.sheet__desc{ margin-top:8px; color:rgba(244,237,228,.75); font-size:.9rem; line-height:1.5; }

.opt-group{ margin-top:18px; }
.opt-group__h{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display);
  font-size:1rem; letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.opt-group__h span{ font-size:.7rem; color:var(--cheddar); }
.opt-list{ display:flex; flex-wrap:wrap; gap:8px; }
.opt-chip{
  padding:9px 14px; font-size:.78rem; font-weight:700;
  background:var(--noir-3); border:1.5px solid #2a201a;
  border-radius:999px; transition:all .2s ease;
}
.opt-chip.selected{ background:var(--cheddar); color:#000; border-color:var(--cheddar); box-shadow:0 2px 0 var(--cheddar-fonce); }

.qty-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:20px; padding:10px;
  background:var(--noir-3); border-radius:14px;
}
.qty-row__label{ font-size:.78rem; color:rgba(244,237,228,.7); }
.qty-ctrl{ display:flex; align-items:center; gap:14px; }
.qty-ctrl button{
  width:36px; height:36px; border-radius:10px;
  background:#000; color:var(--cheddar);
  font-size:1.2rem; font-weight:900;
  display:grid; place-items:center;
  border:1px solid #2a201a;
}
.qty-ctrl span{ font-family:var(--font-display); font-size:1.2rem; min-width:24px; text-align:center; }

.sheet__cta{
  padding:14px 18px 22px;
  background:var(--noir);
  border-top:1px solid #2a201a;
}
.btn-primary{
  width:100%; padding:16px;
  background:var(--cheddar); color:#000;
  font-family:var(--font-display); font-size:.95rem;
  letter-spacing:.08em; text-transform:uppercase; font-weight:900;
  border-radius:14px;
  box-shadow:0 5px 0 var(--cheddar-fonce);
  display:flex; align-items:center; justify-content:space-between;
  transition:all .2s ease;
}
.btn-primary:active{ transform:translateY(2px); box-shadow:0 3px 0 var(--cheddar-fonce); }
.btn-primary span{ display:inline-flex; align-items:center; gap:8px; }
.btn-ghost{
  width:100%; padding:14px;
  background:transparent; border:1.5px solid var(--creme);
  color:var(--creme); font-weight:800;
  border-radius:14px;
  letter-spacing:.06em; text-transform:uppercase; font-size:.8rem;
}

/* ===== Cart screen ===== */
.cart-list{ padding:14px 18px 0; display:flex; flex-direction:column; gap:10px; }
.cart-item{
  display:flex; gap:12px; align-items:center;
  padding:10px;
  background:var(--noir-3); border-radius:14px;
  border:1px solid #2a201a;
}
.cart-item__img{ width:56px; height:56px; border-radius:10px; overflow:hidden; flex-shrink:0; background:#000; }
.cart-item__img img{ width:100%; height:100%; object-fit:cover; }
.cart-item__main{ flex:1; min-width:0; }
.cart-item__name{ font-weight:800; font-size:.88rem; }
.cart-item__opt{ font-size:.7rem; color:rgba(244,237,228,.55); margin-top:2px; line-height:1.3; }
.cart-item__price{ font-family:var(--font-chunk); color:var(--cheddar); font-size:.95rem; margin-top:2px; }
.cart-item__qty{ display:flex; align-items:center; gap:8px; }
.cart-item__qty button{ width:26px; height:26px; border-radius:8px; background:#000; color:var(--cheddar); border:1px solid #2a201a; font-weight:900; }
.cart-item__qty span{ font-weight:800; min-width:18px; text-align:center; font-size:.88rem; }

.coupon{
  margin:14px 18px;
  display:flex; gap:8px;
  background:var(--noir-3); border:1px dashed var(--cheddar); border-radius:14px;
  padding:10px 12px;
  align-items:center;
}
.coupon__emo{ font-size:1.2rem; }
.coupon input{
  flex:1; background:transparent; border:none; outline:none; color:var(--creme); font-size:.82rem;
}
.coupon button{ font-size:.7rem; font-weight:800; color:var(--cheddar); letter-spacing:.08em; text-transform:uppercase; }

.summary{
  margin:0 18px;
  background:var(--noir-3); border:1px solid #2a201a;
  border-radius:14px; padding:12px;
}
.summary__row{ display:flex; justify-content:space-between; padding:5px 0; font-size:.86rem; color:rgba(244,237,228,.8); }
.summary__row strong{ color:var(--creme); }
.summary__row.total{ border-top:1px dashed #2a201a; margin-top:6px; padding-top:10px; font-family:var(--font-display); font-size:1.1rem; }
.summary__row.discount{ color:var(--vert); }

.gold-card{
  margin:14px 18px;
  padding:12px 14px;
  background:linear-gradient(135deg,#1a1408,#0a0a0a);
  border:1px solid var(--cheddar);
  border-radius:14px;
  display:flex; align-items:center; gap:12px;
}
.gold-card__star{ font-size:1.6rem; }
.gold-card__txt{ flex:1; }
.gold-card__title{ font-family:var(--font-display); color:var(--cheddar); font-size:.86rem; letter-spacing:.08em; }
.gold-card__pts{ font-size:.74rem; color:rgba(244,237,228,.7); }
.gold-card__bar{ height:5px; background:#2a201a; border-radius:99px; margin-top:5px; overflow:hidden; }
.gold-card__bar > div{ height:100%; background:linear-gradient(90deg, var(--cheddar) 0%, var(--cheddar-clair) 100%); border-radius:99px; transition:width .6s ease; }

/* ===== Tracking screen ===== */
.track-map{
  height:280px; position:relative;
  background:#1a1a1a;
}
.track-map .leaflet-container{ height:100%; width:100%; background:#111; }
.track-back{
  position:absolute; top:50px; left:14px; z-index:500;
  width:42px; height:42px; border-radius:50%;
  background:#000; color:var(--creme);
  display:grid; place-items:center;
  border:1px solid #2a201a;
  font-size:1rem;
}
.track-card{
  margin:-20px 14px 0;
  background:var(--noir);
  border:1px solid #2a201a;
  border-radius:20px;
  padding:16px;
  position:relative; z-index:10;
}
.track-eta{
  font-family:var(--font-chunk);
  font-size:1.8rem; color:var(--cheddar);
  line-height:1;
}
.track-eta-sub{ font-size:.8rem; color:rgba(244,237,228,.6); margin-top:3px; }
.track-status{
  margin-top:8px;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  background:rgba(52,168,83,.16);
  border:1px solid rgba(52,168,83,.4);
  color:var(--vert);
  border-radius:99px;
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.steps{
  margin:16px 14px 0;
  background:var(--noir-3); border:1px solid #2a201a;
  border-radius:18px; padding:16px;
}
.step{
  display:flex; gap:14px; padding:8px 0;
  position:relative;
}
.step + .step::before{
  content:''; position:absolute;
  left:13px; top:-12px; height:14px;
  border-left:2px dashed #2a201a;
}
.step.done + .step::before{ border-left-color:var(--cheddar); }
.step__dot{
  width:28px; height:28px; border-radius:50%;
  background:#000; border:2px solid #2a201a;
  display:grid; place-items:center;
  flex-shrink:0;
  color:rgba(244,237,228,.5);
  font-size:.78rem;
}
.step.done .step__dot{ background:var(--cheddar); border-color:var(--cheddar); color:#000; box-shadow:0 0 0 4px rgba(255,177,0,.18); }
.step.active .step__dot{ background:var(--cheddar); border-color:var(--cheddar); color:#000; animation:spin 2s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.step__info{ flex:1; }
.step__title{ font-size:.88rem; font-weight:800; }
.step__time{ font-size:.72rem; color:rgba(244,237,228,.5); }
.step.done .step__title, .step.active .step__title{ color:var(--creme); }
.step:not(.done):not(.active) .step__title{ color:rgba(244,237,228,.5); }

.driver-row{
  margin:14px 14px 0;
  background:var(--noir-3); border:1px solid #2a201a;
  border-radius:18px; padding:12px;
  display:flex; align-items:center; gap:12px;
}
.driver-avatar{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--cheddar), var(--rouge));
  color:#000; font-family:var(--font-chunk);
  display:grid; place-items:center; font-size:1.05rem;
  flex-shrink:0;
}
.driver-info{ flex:1; min-width:0; }
.driver-name{ font-weight:800; font-size:.92rem; }
.driver-meta{ font-size:.72rem; color:rgba(244,237,228,.6); display:flex; gap:8px; align-items:center; }
.driver-actions{ display:flex; gap:6px; }
.driver-action{
  width:38px; height:38px; border-radius:50%;
  background:#000; border:1.5px solid var(--cheddar); color:var(--cheddar);
  display:grid; place-items:center;
  font-size:1rem;
}
.driver-action.green{ background:var(--vert); border-color:var(--vert); color:#000; }

/* ===== DRIVER APP ===== */
.d-header{
  padding:8px 16px 12px;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, rgba(255,177,0,.08), transparent);
}
.d-online{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; background:rgba(52,168,83,.16);
  border:1px solid var(--vert); color:var(--vert);
  border-radius:99px;
  font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.d-online .dot{ width:8px; height:8px; border-radius:50%; background:var(--vert); animation:pulse 1.6s infinite; }
.d-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin:0 16px 12px;
}
.d-stat{
  padding:12px; background:var(--noir-3);
  border:1px solid #2a201a; border-radius:14px;
  text-align:center;
}
.d-stat__val{ font-family:var(--font-chunk); font-size:1.3rem; color:var(--cheddar); line-height:1; }
.d-stat__lbl{ font-size:.62rem; color:rgba(244,237,228,.55); letter-spacing:.08em; text-transform:uppercase; margin-top:4px; }

.d-order-card{
  margin:0 16px 12px;
  background:var(--noir-3);
  border:1.5px solid #2a201a;
  border-radius:18px;
  padding:14px;
  position:relative;
}
.d-order-card.new{
  border-color:var(--cheddar);
  background:linear-gradient(180deg, rgba(255,177,0,.06), rgba(10,10,10,0));
  animation:newPulse 2.5s ease-in-out infinite;
}
@keyframes newPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,177,0,.4); }
  50%{ box-shadow:0 0 0 8px rgba(255,177,0,0); }
}
.d-order-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:10px;
}
.d-order-id{ font-family:var(--font-display); color:var(--cheddar); font-size:1.05rem; letter-spacing:.06em; }
.d-order-time{ font-size:.7rem; color:rgba(244,237,228,.55); }
.d-order-pay{ font-family:var(--font-chunk); color:var(--cheddar); font-size:1.4rem; line-height:1; }
.d-order-pay-sub{ font-size:.66rem; color:rgba(244,237,228,.55); letter-spacing:.06em; text-transform:uppercase; }

.d-route{
  display:flex; flex-direction:column; gap:6px;
  padding:10px; background:#000; border-radius:12px;
  margin:8px 0;
}
.d-route__leg{ display:flex; gap:10px; align-items:center; font-size:.76rem; }
.d-route__dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.d-route__dot.pickup{ background:var(--cheddar); }
.d-route__dot.drop{ background:var(--vert); }
.d-route__line{ width:2px; height:8px; background:#2a201a; margin-left:4px; }
.d-route__addr{ font-weight:700; color:var(--creme); }
.d-route__sub{ font-size:.7rem; color:rgba(244,237,228,.55); }

.d-order-actions{ display:flex; gap:8px; margin-top:8px; }
.d-btn-accept{
  flex:2; padding:12px; background:var(--cheddar); color:#000;
  font-family:var(--font-display); font-size:.84rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:900;
  border-radius:12px;
  box-shadow:0 3px 0 var(--cheddar-fonce);
}
.d-btn-decline{
  flex:1; padding:12px; background:transparent;
  border:1.5px solid #2a201a; color:rgba(244,237,228,.7);
  font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:.72rem;
  border-radius:12px;
}

.d-current{
  margin:0 16px 12px;
  background:var(--noir-3);
  border:1px solid var(--cheddar);
  border-radius:18px;
  padding:14px;
}
.d-current__h{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px;
}
.d-current__label{
  font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cheddar);
  display:flex; align-items:center; gap:6px;
}
.d-current__id{ font-family:var(--font-display); color:var(--creme); }

.d-stage-bar{
  display:flex; gap:4px; margin:10px 0 14px;
}
.d-stage-bar > div{
  flex:1; height:6px; border-radius:99px;
  background:#2a201a;
}
.d-stage-bar > div.done{ background:var(--cheddar); }
.d-stage-bar > div.active{ background:var(--cheddar); animation:pulse2 1.4s ease-in-out infinite; }
@keyframes pulse2{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

/* ===== KITCHEN ===== */
.k-header{
  padding:8px 16px 12px;
  display:flex; align-items:center; justify-content:space-between;
}
.k-mode{
  display:flex; gap:4px; margin:0 16px 10px;
  background:#000; padding:4px; border-radius:12px;
  border:1px solid #2a201a;
}
.k-mode__btn{
  flex:1; padding:8px 10px; font-size:.7rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:8px; color:rgba(244,237,228,.55);
}
.k-mode__btn.active{ background:var(--cheddar); color:#000; }
.k-mode__btn .cnt{
  display:inline-block; margin-left:6px;
  padding:1px 6px; border-radius:99px;
  background:rgba(0,0,0,.18); font-size:.6rem;
}

.k-ticket{
  margin:0 16px 12px;
  background:var(--noir-3);
  border:1.5px solid #2a201a;
  border-radius:16px;
  padding:14px;
  position:relative;
  overflow:hidden;
}
.k-ticket.urgent{
  border-color:var(--rouge);
  background:linear-gradient(180deg, rgba(200,66,28,.12), rgba(10,10,10,0));
}
.k-ticket__top{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:10px;
}
.k-ticket__num{ font-family:var(--font-chunk); font-size:1.3rem; color:var(--cheddar); line-height:1; }
.k-ticket__mode{ font-size:.62rem; color:rgba(244,237,228,.6); letter-spacing:.1em; text-transform:uppercase; margin-top:2px; }
.k-timer{
  font-family:var(--font-display); font-size:1.2rem;
  letter-spacing:.04em;
  color:var(--cheddar);
}
.k-timer.warn{ color:var(--rouge-clair); animation:blink 1s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.4; } }
.k-timer-sub{ font-size:.62rem; color:rgba(244,237,228,.55); letter-spacing:.06em; text-transform:uppercase; }

.k-items{ margin:8px 0; display:flex; flex-direction:column; gap:6px; }
.k-line{
  display:flex; gap:10px; align-items:center;
  padding:8px 10px;
  background:#000; border-radius:10px;
  border:1px solid #2a201a;
  transition:all .25s ease;
}
.k-line.done{ opacity:.42; }
.k-line.done .k-line__name{ text-decoration:line-through; }
.k-line__qty{
  width:26px; height:26px; flex-shrink:0;
  background:var(--cheddar); color:#000;
  border-radius:8px;
  display:grid; place-items:center;
  font-weight:900; font-size:.84rem;
}
.k-line__main{ flex:1; min-width:0; }
.k-line__name{ font-weight:800; font-size:.84rem; }
.k-line__opt{ font-size:.66rem; color:rgba(244,237,228,.5); }
.k-line__check{
  width:26px; height:26px; border-radius:8px;
  background:transparent; border:1.5px solid #2a201a;
  color:rgba(244,237,228,.4);
  display:grid; place-items:center;
}
.k-line.done .k-line__check{ background:var(--vert); border-color:var(--vert); color:#000; }

.k-actions{ display:flex; gap:8px; margin-top:10px; }
.k-btn-ready{
  flex:1; padding:12px;
  background:var(--vert); color:#000;
  font-family:var(--font-display); font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; font-weight:900;
  border-radius:12px;
  box-shadow:0 3px 0 var(--vert-dark);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.k-btn-ready:disabled{ opacity:.4; box-shadow:none; }
.k-btn-flag{
  width:46px; padding:12px;
  background:transparent;
  border:1.5px solid #2a201a;
  border-radius:12px; color:rgba(244,237,228,.7);
}

/* Notif toast */
.toast{
  position:absolute; top:48px; left:14px; right:14px;
  z-index:200;
  background:linear-gradient(135deg,#fff3c0 0%, var(--cheddar) 100%);
  color:#000; padding:10px 14px;
  border-radius:14px;
  display:flex; gap:10px; align-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.5), 0 4px 0 var(--cheddar-fonce);
  font-weight:800; font-size:.82rem;
  animation:toastIn .35s ease, toastOut .35s ease 2.6s forwards;
}
@keyframes toastIn{ from{ transform:translateY(-30px); opacity:0; } }
@keyframes toastOut{ to{ transform:translateY(-30px); opacity:0; } }
.toast__emo{ font-size:1.4rem; }

/* Inline icons (simple line) */
.i{
  width:1em; height:1em; display:inline-block; vertical-align:-.12em;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ============ ONBOARDING / CHECKOUT / RECEIPT ============ */
.onb{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:30px 24px; text-align:center;
}
.onb__dots{
  display:flex; gap:8px; margin-bottom:32px;
}
.onb__dots span{ width:8px; height:8px; border-radius:99px; background:#2a201a; transition:all .3s ease; }
.onb__dots span.on{ width:24px; background:var(--cheddar); }
.onb__emo{ font-size:5rem; margin-bottom:16px; animation:onbFloat 3s ease-in-out infinite; }
.onb__logo{
  width:200px; height:200px;
  border-radius:30px;
  margin-bottom:18px;
  animation:onbFloat 3.5s ease-in-out infinite;
  filter: drop-shadow(0 12px 24px rgba(255,177,0,.35));
}
@keyframes onbFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.onb__title{ font-family:var(--font-chunk); font-size:1.8rem; line-height:1.05; margin-bottom:10px; }
.onb__sub{ font-size:.95rem; color:rgba(244,237,228,.7); line-height:1.5; max-width:280px; margin-bottom:30px; }
.onb__form{ width:100%; max-width:300px; margin-bottom:20px; }
.onb__label{ display:block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cheddar); font-weight:800; margin:14px 0 6px; text-align:left; }
.onb__input{
  width:100%; padding:14px 16px;
  background:var(--noir-3); border:1.5px solid #2a201a;
  border-radius:12px; color:var(--creme);
  font-size:1rem; outline:none;
  transition:border-color .2s ease;
}
.onb__input:focus{ border-color:var(--cheddar); }

/* Checkout */
.co-section{ margin-top:18px; }
.co-section__h{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:.84rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(244,237,228,.7);
  margin-bottom:8px;
}
.co-input{
  width:100%; padding:12px 14px;
  background:var(--noir-3); border:1px solid #2a201a;
  border-radius:12px; color:var(--creme);
  font-size:.9rem; outline:none;
  margin-bottom:8px;
  transition:border-color .2s ease;
}
.co-input:focus{ border-color:var(--cheddar); }
.co-pill{
  flex:1; padding:11px 8px;
  background:var(--noir-3); border:1px solid #2a201a;
  border-radius:12px; color:var(--creme);
  font-weight:800; font-size:.78rem; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.co-pill.on{ background:var(--cheddar); color:#000; border-color:var(--cheddar); box-shadow:0 3px 0 var(--cheddar-fonce); }

.co-pay{ display:flex; flex-direction:column; gap:8px; }
.co-pay__opt{
  display:flex; gap:12px; align-items:center;
  padding:12px 14px;
  background:var(--noir-3); border:1.5px solid #2a201a;
  border-radius:12px;
  transition:all .2s ease;
  width:100%;
}
.co-pay__opt.on{ border-color:var(--cheddar); background:rgba(255,177,0,.06); }
.co-pay__radio{
  width:22px; height:22px; border-radius:50%;
  border:2px solid #2a201a;
  display:grid; place-items:center;
  flex-shrink:0;
}
.co-pay__radio.on{ background:var(--cheddar); border-color:var(--cheddar); color:#000; }
.btn-primary:disabled{ opacity:.5; transform:none; box-shadow:none; cursor:not-allowed; }

/* Receipt */
.receipt{
  background:var(--creme);
  color:#0a0a0a;
  padding:24px 26px 18px;
  font-family:'Courier New', 'IBM Plex Mono', monospace;
}
.receipt__head{ text-align:center; padding-bottom:12px; }
.receipt__divider{
  border-top:2px dashed #000;
  margin:10px 0;
}
@media print {
  body * { visibility: hidden; }
  .receipt, .receipt * { visibility: visible; }
  .receipt{ position:absolute; left:0; top:0; width:100%; }
}

/* Cancel button */
.cancel-order{
  margin:14px 14px 0;
  padding:12px;
  background:transparent;
  border:1.5px dashed var(--rouge);
  border-radius:12px;
  color:var(--rouge-clair);
  font-weight:800; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase;
  width:calc(100% - 28px);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.cancel-order:active{ background:rgba(200,66,28,.1); }

/* SOLO mode — single app fullscreen for /livreur-app/, /cuisine-app/ + mobile clients */
.stage--solo{ padding:0; }
.frames--solo{
  grid-template-columns: 1fr !important;
  width:100%; height:100%;
  display:flex; align-items:stretch; justify-content:center;
  gap:0;
}
.stage--solo .frame{
  width:100%; max-width:520px;
  height:100vh; height:100dvh;
  max-height:none;
  border-radius:0;
  border:none;
  box-shadow:none;
  padding:0;
  background:#000;
}
.stage--solo .frame__label{ display:none; }
.stage--solo .screen{
  border-radius:0;
  height:100%;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.stage--solo .screen__notch{ display:none; }
.stage--solo .statusbar{ display:none; }
.stage--solo .c-bnav{
  left: 8px; right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0));
}
@media (max-width:600px){ .stage--solo .frame{ max-width:100%; } }

/* Universal touch-target safety on small screens */
@media (max-width: 480px){
  .c-bnav__btn{ min-height:48px; }
  .c-card__add, .driver-action{ min-width:40px; min-height:40px; }
  .btn-primary{ min-height:50px; font-size:.88rem; padding:14px; }
  .opt-chip{ min-height:36px; }
  .c-mode{ flex-wrap:wrap; }
  .c-mode button{ min-height:42px; }
  .sheet__cta{ padding-bottom: calc(18px + env(safe-area-inset-bottom, 0)); }
  .c-product-list{ padding-bottom: 160px; }
  .c-card{ padding:8px; gap:10px; }
  .c-card__img{ width:72px; height:72px; }
  .c-card__name{ font-size:.9rem; }
  .c-card__desc{ font-size:.68rem; -webkit-line-clamp:2; }
  .c-card__price{ font-size:1rem; }
  .c-header{ padding:6px 14px 10px; }
  .c-greet__name{ font-size:1.2rem; }
  .c-section-title{ margin:14px 14px 8px; }
  .c-section-title h3{ font-size:1.05rem; }
  .c-cats{ padding:6px 14px; gap:8px; }
  .c-cat{ min-width:74px; padding:10px 8px; }
  .c-cats--sticky{ padding:8px 14px; }
  .sheet__inner{ max-height: 94vh; max-height: 94dvh; }
  .sheet__hero{ height:160px; }
  .sheet__name{ font-size:1.3rem; margin-top:-26px; }
  .k-ticket{ padding:11px; }
  .k-ticket__num{ font-size:1.1rem; }
  .k-line{ padding:6px 8px; }
  .d-stats{ gap:6px; }
  .d-stat{ padding:10px 6px; }
  .d-stat__val{ font-size:1.1rem; }
  .d-stat__lbl{ font-size:.56rem; }
  .d-order-card, .d-current{ padding:11px; }
  .topbar{ padding:6px 8px; }
  .topbar__brand{ font-size:.95rem; }
  .topbar__hint{ display:none; }
  .topbar__role{ padding:7px 11px; font-size:.7rem; }
  .if-supa-status{ font-size:.6rem; padding:3px 7px; }
  .receipt{ padding:18px 16px 12px; }
}

/* Landscape phones — compact further */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){
  .stage{ padding:6px; }
  .frame{ max-height: 96vh; }
  .c-header{ padding-bottom:6px; }
  .c-greet{ margin-bottom:6px; }
  .c-promo{ padding:8px 10px; }
  .c-promo__emo{ font-size:1.4rem; }
  .onb__logo{ width:140px; height:140px; }
  .onb__title{ font-size:1.2rem; }
  .onb__sub{ font-size:.82rem; margin-bottom:14px; }
}

/* Very small phones (iPhone SE 1st gen, etc.) */
@media (max-width: 360px){
  .c-card__img{ width:64px; height:64px; }
  .c-card__name{ font-size:.84rem; }
  .btn-primary{ font-size:.78rem; letter-spacing:.04em; padding:13px; }
  .c-promo__title{ font-size:.95rem; }
  .opt-chip{ padding:8px 10px; font-size:.74rem; }
  .qty-ctrl button{ width:32px; height:32px; }
  .c-cat__name{ font-size:.6rem; }
  .c-mode{ flex-direction: row; }
  .c-mode button{ font-size:.62rem; padding:9px 4px; gap:4px; }
  .topbar__roles{ padding:3px; }
  .topbar__role{ padding:6px 9px; font-size:.62rem; }
}

/* Solo mode on tiny screen — bnav always above home indicator */
.stage--solo .c-bnav{
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

@media (max-width:520px){
  .stage{ padding:10px; }
  .topbar{ flex-wrap:wrap; gap:8px; padding:8px; }
  .topbar__hint{ display:none; }
  .frame{ width:100%; max-width:380px; height:calc(100vh - 120px); }
}


/* =====================================================================
   V10.44.9 — APP OVERLAP GUARD
   Objectif : empêcher les boutons / CTA / champs de se superposer dans
   l'app client, cuisine, livreur et admin, sans toucher aux images.
   ===================================================================== */

/* Base layout safety */
*, *::before, *::after { box-sizing: border-box; }

.stage--solo,
.stage--solo .frames--solo,
.stage--solo .frame,
.stage--solo .screen {
  width: 100%;
  min-width: 0;
}

.stage--solo .screen {
  overflow: hidden;
}

/* Empêche le contenu scrollable de passer sous la barre de navigation client. */
.stage--solo .scroll {
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

/* Barre client : zone cliquable stable, sans chevauchement entre les 4 boutons. */
.stage--solo .c-bnav {
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  min-height: 66px;
  max-width: calc(100% - 16px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  box-sizing: border-box;
  overflow: visible;
}

.stage--solo .c-bnav__btn {
  min-width: 0;
  min-height: 50px;
  width: 100%;
  overflow: hidden;
  justify-content: center;
  touch-action: manipulation;
}

.stage--solo .c-bnav__btn > span:last-child {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage--solo .c-bnav__badge {
  top: 0;
  right: 18%;
  z-index: 2;
  pointer-events: none;
}

/* CTA fixes : aucun bouton pleine largeur ne doit déborder ou se coller à un autre. */
.stage--solo button,
.stage--solo a,
.stage--solo input,
.stage--solo textarea,
.stage--solo select,
.stage--solo [role="button"] {
  max-width: 100%;
}

.stage--solo .btn-primary,
.stage--solo .btn-ghost,
.stage--solo .co-pay__opt,
.stage--solo .co-pill,
.stage--solo .c-mode button,
.stage--solo .k-btn-ready,
.stage--solo .k-btn-flag,
.stage--solo .driver-action,
.stage--solo .cancel-order {
  touch-action: manipulation;
  position: relative;
}

/* Cart / checkout : espace respirant avant le bas de l'écran. */
.stage--solo .cart-list,
.stage--solo .co-section:last-child {
  margin-bottom: 18px;
}

/* Product cards : le bouton + reste dans sa colonne, sans manger le prix. */
.stage--solo .c-card__bot {
  gap: 8px;
  min-width: 0;
}

.stage--solo .c-card__price {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage--solo .c-card__add,
.stage--solo .c-card__qty button {
  flex: 0 0 auto;
}

/* Sheet produit : CTA toujours visible, contenu jamais caché dessous. */
.stage--solo .sheet {
  padding-top: env(safe-area-inset-top, 0px);
}

.stage--solo .sheet__inner {
  max-height: min(94vh, 94dvh);
}

.stage--solo .sheet__body {
  padding-bottom: 12px;
  scroll-padding-bottom: 96px;
}

.stage--solo .sheet__cta {
  flex: 0 0 auto;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 3;
}

.stage--solo .sheet__close {
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
}

/* Cuisine / livreur : éviter collisions dans les lignes d'action. */
.stage--solo .k-actions,
.stage--solo .driver-actions,
.stage--solo .d-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: nowrap;
}

.stage--solo .k-actions > *,
.stage--solo .driver-actions > *,
.stage--solo .d-actions > * {
  min-width: 0;
}

/* Très petits écrans : on réduit le texte, pas les zones cliquables. */
@media (max-width: 360px) {
  .stage--solo .c-bnav {
    left: 6px;
    right: 6px;
    max-width: calc(100% - 12px);
    min-height: 64px;
  }

  .stage--solo .c-bnav__btn {
    font-size: .54rem;
    letter-spacing: .025em;
    padding-left: 2px;
    padding-right: 2px;
  }

  .stage--solo .c-bnav__badge {
    right: 12%;
  }

  .stage--solo .scroll {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }
}

/* Landscape mobile : la navigation reste utilisable, sans couvrir tout l'écran. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .stage--solo .c-bnav {
    min-height: 54px;
    padding-top: 5px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
  }

  .stage--solo .c-bnav__btn {
    min-height: 42px;
    font-size: .56rem;
  }

  .stage--solo .scroll {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}


/* V10.44.11 — App client : retour, CTA checkout visible, historique unifié */
.app-back-button{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top,0px));
  left:12px;
  z-index:65;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,177,0,.35);
  color:var(--cheddar);
  font-weight:900;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.checkout-top-cta{
  margin:14px 0 10px;
  min-height:52px;
  box-shadow:0 4px 0 var(--cheddar-fonce), 0 0 22px rgba(255,177,0,.16);
}
.stage--solo .sheet__cta{
  position:sticky;
  bottom:0;
  background:linear-gradient(180deg, rgba(10,10,10,.92), #0a0a0a);
  z-index:8;
}
.stage--solo .sheet__body{
  scroll-padding-bottom:132px;
  padding-bottom:18px;
}
.stage--solo .co-pay__opt:not(.on){display:none!important;}


/* V10.44.12 — précommande propre app client */
.preorder-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.preorder-grid .co-input{
  min-height:44px;
}
.co-pill:disabled{
  opacity:.42;
  filter:grayscale(1);
  cursor:not-allowed;
}
@media (max-width:380px){
  .preorder-grid{grid-template-columns:1fr;}
}


/* ===== V10.44.13 DRIVER APP — Glovo-grade cockpit guard ===== */
.d-header--premium{
  gap:10px;
  padding:10px 14px 10px;
  position:relative;
  z-index:4;
}
.d-top-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5px;
  min-width:155px;
}
.d-mini{
  min-height:34px;
  padding:6px 7px;
  border-radius:10px;
  border:1px solid #2a201a;
  background:rgba(255,255,255,.03);
  color:rgba(244,237,228,.72);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.d-mini.is-on{
  border-color:var(--vert);
  color:var(--vert);
  background:rgba(52,168,83,.12);
}
.d-mini--ghost{opacity:.78}
.d-error{
  margin:0 14px 10px;
  padding:10px 12px;
  border:1px solid rgba(200,66,28,.55);
  background:rgba(200,66,28,.13);
  color:var(--rouge-clair);
  border-radius:14px;
  font-size:.74rem;
  line-height:1.35;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}
.d-error__btn{
  min-height:32px;
  padding:6px 10px;
  border-radius:9px;
  background:rgba(0,0,0,.35);
  color:var(--creme);
  font-size:.66rem;
  font-weight:900;
  white-space:nowrap;
}
.d-stats--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin:0 14px 10px;
}
.d-stats--4 .d-stat{padding:10px 5px}
.d-stats--4 .d-stat__val{font-size:1.08rem}
.d-stats--4 .d-stat__lbl{font-size:.51rem;line-height:1.1}
.d-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:0 14px 10px;
  padding:4px;
  background:rgba(0,0,0,.36);
  border:1px solid #241b16;
  border-radius:14px;
  position:relative;
  z-index:3;
}
.d-tabs button{
  min-height:36px;
  padding:8px 5px;
  border-radius:10px;
  color:rgba(244,237,228,.62);
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.d-tabs button.active{
  background:linear-gradient(180deg,var(--cheddar),var(--cheddar-fonce));
  color:#111;
  box-shadow:0 3px 0 rgba(120,70,0,.6);
}
.d-scroll{
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
.d-empty{
  margin:20px 16px;
  padding:28px 18px;
  text-align:center;
  color:rgba(244,237,228,.62);
  background:var(--noir-3);
  border:1px dashed #2a201a;
  border-radius:18px;
}
.d-empty__title{
  font-family:var(--font-display);
  font-size:.94rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--creme);
  margin:8px 0 5px;
}
.d-empty__text{font-size:.74rem;line-height:1.35}
.d-order-card--available,
.d-order-card--current,
.d-order-card--history{
  margin:0 14px 12px!important;
  padding:13px!important;
  overflow:hidden;
}
.d-client-box{
  padding:9px 10px;
  background:#000;
  border:1px solid rgba(255,255,255,.04);
  border-radius:12px;
  margin-bottom:8px;
  font-size:.76rem;
}
.d-client-line{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  color:var(--creme);
}
.d-client-line strong{font-weight:900}
.d-address{
  margin-top:5px;
  color:rgba(244,237,228,.66);
  line-height:1.35;
  overflow-wrap:anywhere;
}
.d-notes{
  margin-top:5px;
  color:rgba(255,177,0,.78);
  line-height:1.32;
  font-size:.71rem;
}
.d-items{
  display:grid;
  gap:4px;
  margin:8px 0;
}
.d-item{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:6px;
  align-items:center;
  padding:6px 8px;
  border-radius:9px;
  background:rgba(255,255,255,.035);
  font-size:.72rem;
}
.d-item span{color:var(--cheddar);font-weight:900}
.d-item strong{font-weight:800;color:rgba(244,237,228,.82);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-item--more{
  display:block;
  color:rgba(244,237,228,.55);
  text-align:center;
}
.d-money-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:8px 0;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,177,0,.08);
  border:1px solid rgba(255,177,0,.18);
  font-size:.72rem;
  color:rgba(244,237,228,.65);
}
.d-money-row strong{font-family:var(--font-display);color:var(--cheddar);font-size:.95rem}
.d-secondary-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin:8px 0;
}
.d-secondary{
  min-height:34px;
  display:grid;
  place-items:center;
  padding:7px 5px;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  border:1px solid #2a201a;
  color:rgba(244,237,228,.74);
  font-size:.65rem;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}
.d-action-grid{
  display:grid;
  grid-template-columns:1.55fr .85fr;
  gap:7px;
  margin-top:9px;
}
.d-action-stack{
  display:grid;
  gap:7px;
  margin-top:9px;
}
.d-btn-accept,
.d-btn-decline{
  min-height:42px;
  display:grid;
  place-items:center;
  text-align:center;
  width:100%;
  touch-action:manipulation;
}
.d-btn-green{
  background:var(--vert)!important;
  box-shadow:0 3px 0 var(--vert-dark)!important;
}
.d-btn-full{width:100%}
.d-final{
  margin-top:8px;
  padding:9px 10px;
  border-radius:10px;
  text-align:center;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.72rem;
}
.d-final--delivered{
  background:rgba(52,168,83,.14);
  border:1px solid var(--vert);
  color:var(--vert);
}
.d-final--cancelled,
.d-final--rejected{
  background:rgba(200,66,28,.14);
  border:1px solid var(--rouge);
  color:var(--rouge-clair);
}
.d-history-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 14px 12px;
}
.d-history-summary div{
  padding:12px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,177,0,.11),rgba(255,255,255,.025));
  border:1px solid rgba(255,177,0,.22);
}
.d-history-summary strong{
  display:block;
  font-family:var(--font-chunk);
  color:var(--cheddar);
  font-size:1.2rem;
  line-height:1;
}
.d-history-summary span{
  display:block;
  margin-top:5px;
  color:rgba(244,237,228,.55);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
@media (max-width:390px){
  .d-top-actions{grid-template-columns:1fr;min-width:74px}
  .d-mini{min-height:28px;font-size:.52rem;padding:4px 5px}
  .d-header--premium{align-items:flex-start}
  .d-stats--4{grid-template-columns:repeat(2,1fr)}
  .d-tabs button{font-size:.58rem}
  .d-secondary-actions{grid-template-columns:1fr}
  .d-action-grid{grid-template-columns:1fr}
}
@media (orientation:landscape) and (max-height:520px){
  .d-header--premium{padding:8px 12px}
  .d-stats--4{grid-template-columns:repeat(4,1fr)}
  .d-stat{padding:8px 5px}
  .d-tabs{margin-bottom:8px}
}

/* V10.44.14 — Kitchen KDS premium no-overlap + touch-safe */
.k-header--premium{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px 8px;
  flex-shrink:0;
}
.k-head-actions{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:54%;
}
.k-open-toggle,.k-logout{
  min-height:32px;
  border-radius:999px;
  padding:7px 10px;
  font-size:.62rem;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid rgba(255,177,0,.22);
  touch-action:manipulation;
  white-space:nowrap;
}
.k-open-toggle.open{color:var(--vert);background:rgba(52,168,83,.11);border-color:rgba(52,168,83,.38)}
.k-open-toggle.closed{color:var(--rouge-clair);background:rgba(200,66,28,.13);border-color:rgba(200,66,28,.38)}
.k-logout{color:rgba(244,237,228,.72);background:rgba(255,255,255,.04)}
.k-stats--4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  padding:0 14px 10px;
  flex-shrink:0;
}
.k-stats--4 div{
  padding:10px 6px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,177,0,.10),rgba(255,255,255,.025));
  border:1px solid rgba(255,177,0,.16);
  text-align:center;
  min-width:0;
}
.k-stats--4 div.warn{border-color:rgba(200,66,28,.45);background:rgba(200,66,28,.13)}
.k-stats--4 strong{display:block;color:var(--cheddar);font-family:var(--font-chunk);font-size:1.05rem;line-height:1}
.k-stats--4 span{display:block;margin-top:5px;color:rgba(244,237,228,.56);font-size:.53rem;font-weight:950;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-closed-banner,.k-error{
  margin:0 14px 10px;
  padding:10px 12px;
  border-radius:14px;
  font-size:.72rem;
  font-weight:850;
  line-height:1.25;
  flex-shrink:0;
}
.k-closed-banner{background:rgba(255,177,0,.11);border:1px solid rgba(255,177,0,.22);color:var(--cheddar)}
.k-error{background:rgba(200,66,28,.13);border:1px solid rgba(200,66,28,.38);color:var(--rouge-clair)}
.k-mode--premium{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  padding:0 14px 10px;
  flex-shrink:0;
}
.k-mode--premium .k-mode__btn{
  min-height:38px;
  padding:7px 5px;
  line-height:1.05;
  white-space:normal;
  touch-action:manipulation;
}
.k-scroll{padding-bottom:16px;overflow-y:auto;min-height:0}
.k-empty{margin:20px 16px;padding:28px 18px;text-align:center;color:rgba(244,237,228,.6);background:var(--noir-3);border:1px dashed #2a201a;border-radius:18px}
.k-empty-title{font-family:var(--font-display);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--creme);margin:8px 0 4px}
.k-ticket--premium{margin:0 14px 12px;overflow:hidden}
.k-client-box{padding:9px 10px;background:#000;border-radius:12px;margin-bottom:8px;font-size:.78rem;border:1px solid rgba(255,255,255,.05)}
.k-address,.k-note,.k-preorder{font-size:.7rem;margin-top:4px;line-height:1.25;color:rgba(244,237,228,.62);word-break:break-word}
.k-preorder{color:var(--cheddar);font-weight:850}
.k-note{color:var(--cheddar)}
.k-actions--premium{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:stretch;
}
.k-actions--premium button{
  min-height:42px;
  width:100%;
  display:grid;
  place-items:center;
  text-align:center;
  touch-action:manipulation;
  line-height:1.1;
  white-space:normal;
}
.k-btn-green{background:var(--vert)!important;box-shadow:0 3px 0 var(--vert-dark)!important}
.k-btn-gold{background:linear-gradient(135deg,#ffcf56,#ff9f1a)!important;color:#120b05!important;box-shadow:0 3px 0 #9b5e00!important}
.k-final{padding:9px 12px;border-radius:11px;text-align:center;font-weight:950;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.k-final--delivered{background:rgba(52,168,83,.14);border:1px solid var(--vert);color:var(--vert)}
.k-final--cancelled,.k-final--refused,.k-final--rejected{background:rgba(200,66,28,.14);border:1px solid var(--rouge);color:var(--rouge-clair)}
@media (max-width:390px){
  .k-header--premium{align-items:flex-start;padding-top:10px}
  .k-head-actions{max-width:58%;gap:5px}
  .k-open-toggle,.k-logout{font-size:.55rem;padding:6px 7px;min-height:30px}
  .k-stats--4{grid-template-columns:repeat(2,1fr)}
  .k-mode--premium{grid-template-columns:repeat(2,1fr)}
  .k-actions--premium{grid-template-columns:1fr}
}
@media (orientation:landscape) and (max-height:520px){
  .k-header--premium{padding:8px 12px}
  .k-stats--4{grid-template-columns:repeat(4,1fr);padding-bottom:7px}
  .k-mode--premium{padding-bottom:7px}
}

/* V10.44.15 — Admin app cockpit no-overlap + Glovo-grade controls */
.screen--admin{background:radial-gradient(circle at top,#1b1207 0%,#050403 46%,#020202 100%)}
.admin-app-header{gap:10px;align-items:flex-start}.admin-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.admin-sync-note{margin:8px 14px 0;padding:8px 10px;border:1px solid rgba(245,180,55,.18);border-radius:12px;background:rgba(255,255,255,.035);font-size:.68rem;color:rgba(244,237,228,.62)}.admin-tabs{overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:10px 12px 6px}.admin-tabs::-webkit-scrollbar{display:none}.admin-tabs .k-mode__btn{min-width:max-content;flex:0 0 auto}.admin-scroll{padding:12px 12px 94px;scroll-padding-bottom:110px}.admin-list{display:flex;flex-direction:column;gap:12px}.admin-order-card{background:linear-gradient(180deg,rgba(22,14,7,.96),rgba(7,5,3,.97));border:1px solid rgba(245,180,55,.20);border-radius:20px;padding:14px;box-shadow:0 14px 40px rgba(0,0,0,.34);overflow:hidden}.admin-order-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px}.admin-order-top b{font-size:.95rem;color:#fff}.admin-status{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;font-weight:900;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(244,237,228,.78);white-space:nowrap}.admin-status.waiting_driver,.admin-status.ready,.admin-status.ready_for_pickup{background:rgba(245,180,55,.18);color:#ffd56a}.admin-status.delivered{background:rgba(74,222,128,.16);color:#7dffaf}.admin-status.cancelled,.admin-status.rejected,.admin-status.refused,.admin-status.suspended{background:rgba(248,113,113,.16);color:#ff9b9b}.admin-status.available{background:rgba(74,222,128,.16);color:#7dffaf}.admin-status.busy{background:rgba(245,180,55,.18);color:#ffd56a}.admin-order-meta,.admin-order-address,.admin-order-total{font-size:.72rem;color:rgba(244,237,228,.64);line-height:1.35;margin-top:5px}.admin-order-address{color:rgba(244,237,228,.78)}.admin-order-total{font-weight:900;color:#f7d77d}.admin-order-items{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.admin-order-items span{font-size:.62rem;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(244,237,228,.72);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-actions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.admin-actions-grid button{min-height:38px;border:0;border-radius:13px;padding:9px 8px;font-size:.68rem;font-weight:900;color:#120d03;background:linear-gradient(135deg,#ffd76a,#b87916);box-shadow:0 10px 22px rgba(245,180,55,.16);cursor:pointer}.admin-actions-grid button:disabled{opacity:.35;filter:grayscale(.8);cursor:not-allowed}.admin-actions-grid button.danger{color:#fff;background:linear-gradient(135deg,#ef4444,#7f1d1d)}.admin-finance-grid{display:grid;grid-template-columns:1fr auto;gap:8px 10px;margin-top:10px;font-size:.82rem}.admin-finance-grid span{color:rgba(244,237,228,.6)}.admin-finance-grid b{color:#ffd76a}.admin-event-row{display:grid;grid-template-columns:1fr;gap:3px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035)}.admin-event-row b{font-size:.78rem;color:#ffd76a}.admin-event-row span{font-size:.72rem;color:rgba(244,237,228,.75)}.admin-event-row small{font-size:.63rem;color:rgba(244,237,228,.45)}@media(max-width:390px){.admin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-actions-grid{grid-template-columns:1fr}.admin-order-card{padding:12px}.admin-app-header{padding-inline:12px}.admin-tabs{padding-inline:10px}.admin-scroll{padding-inline:10px}}