/* ============================================================================
   Commande resto (.ord-*) — modal panier, recu, timeline.

   Extrait de manger.css le 2026-07-22 : ces regles y etaient coincees AU MILIEU du bloc
   .resto-thumb, alors que order.js est aussi charge par /voyager, qui ne charge PAS manger.css.
   Resultat : le modal de commande s'affichait sans aucun style sur cette page. Toute page qui
   charge order.js doit desormais charger order.css.
   ============================================================================ */
.ord-cta { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; margin-top:8px;
  border:none; border-radius:13px; background:linear-gradient(135deg,#6750A4,#7F67BE); color:#fff; font-size:15px; font-weight:800; cursor:pointer; }
.ord-cta:active { transform:scale(.98); }
.ord-overlay { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.5); display:flex; align-items:flex-end; justify-content:center; }
.ord-sheet { width:100%; max-width:560px; max-height:92vh; background:var(--card-bg,#fff); border-radius:20px 20px 0 0; display:flex; flex-direction:column; overflow:hidden; }
.ord-head { display:flex; align-items:center; gap:8px; padding:16px; border-bottom:1px solid var(--border,#eee); position:relative; }
.ord-head b { font-size:17px; font-weight:900; } .ord-head span { color:var(--text-muted,#888); font-size:13px; }
.ord-x { margin-left:auto; background:none; border:none; font-size:26px; line-height:1; color:var(--text-muted,#888); cursor:pointer; }
.ord-body { overflow-y:auto; padding:12px 16px 16px; }
.ord-loading, .ord-empty { text-align:center; color:#888; padding:40px 16px; }
.ord-cat { font-size:13px; font-weight:800; color:var(--primary,#6750A4); margin:14px 0 6px; text-transform:uppercase; letter-spacing:.4px; }
.ord-item { display:flex; gap:11px; align-items:center; padding:9px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.ord-item.oos { opacity:.5; }
.ord-item img, .ord-ph { width:56px; height:56px; border-radius:11px; object-fit:cover; flex:0 0 56px; display:flex; align-items:center; justify-content:center; background:rgba(103, 80, 164,.1); color:#6750A4; }
.ord-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ord-info b { font-size:14.5px; font-weight:700; }
.ord-info small { font-size:11.5px; color:var(--text-muted,#888); }
.ord-allerg { color:#b45309 !important; }
.ord-price { font-size:13px; font-weight:800; color:var(--primary,#6750A4); }
.ord-oosbadge { font-size:10px; font-weight:800; color:#b91c1c; }
.ord-opt { margin-top:4px; padding:6px 8px; border-radius:9px; border:1px solid rgba(0,0,0,.14); font-size:12.5px; width:100%; box-sizing:border-box; }
.ord-qty { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.ord-qty button { width:30px; height:30px; border-radius:50%; border:none; background:rgba(103, 80, 164,.12); color:#6750A4; font-size:18px; font-weight:800; cursor:pointer; }
.ord-qty span { min-width:18px; text-align:center; font-weight:800; }
.ord-foot { margin-top:16px; }
.ord-ful-row { display:flex; gap:8px; margin:8px 0; }
.ord-ful, .ord-pay { flex:1; padding:11px; border-radius:11px; border:1.5px solid var(--border,#ddd); background:transparent; color:var(--text,#222); font-size:13px; font-weight:700; cursor:pointer; }
.ord-ful.on, .ord-pay.on { border-color:#6750A4; background:rgba(103, 80, 164,.1); color:#6750A4; }
.ord-field { display:block; font-size:12px; font-weight:700; color:var(--text-muted,#888); margin:8px 0 0; }
.ord-field input { width:100%; padding:11px; border-radius:11px; border:1px solid rgba(0,0,0,.14); font-size:15px; box-sizing:border-box; margin-top:4px; }
.ord-consent { font-size:11.5px; color:var(--text-muted,#888); background:rgba(0,0,0,.04); padding:10px; border-radius:10px; margin:10px 0; line-height:1.4; }
.ord-prepay { font-size:12px; color:#b45309; background:rgba(245,158,11,.12); padding:10px; border-radius:10px; margin:8px 0; }
.ord-submit { width:100%; display:flex; align-items:center; justify-content:space-between; padding:15px 18px; margin-top:12px;
  border:none; border-radius:13px; background:linear-gradient(135deg,#6750A4,#7F67BE); color:#fff; font-size:16px; font-weight:800; cursor:pointer; }
.ord-submit:disabled { opacity:.5; }
.ord-receipt { text-align:center; padding:8px 4px 16px; }
.ord-rcheck i { font-size:54px; color:#16a34a; }
.ord-receipt h3 { margin:10px 0 2px; font-size:20px; }
.ord-rsub { color:var(--text-muted,#888); font-size:13px; margin-bottom:14px; }
.ord-timeline { display:flex; justify-content:space-between; margin:16px 0; position:relative; }
.ord-tl-step { flex:1; text-align:center; position:relative; }
.ord-tl-step .dot { display:block; width:14px; height:14px; border-radius:50%; background:#ccc; margin:0 auto 5px; }
.ord-tl-step.done .dot { background:#6750A4; }
.ord-tl-step.cur .dot { box-shadow:0 0 0 4px rgba(103, 80, 164,.25); }
.ord-tl-step label { font-size:10px; color:var(--text-muted,#888); }
.ord-tl-step.done label { color:var(--text,#222); font-weight:700; }
.ord-tl-cancel { color:#b91c1c; font-weight:700; padding:10px; }
.ord-rlines { text-align:left; border-top:1px solid var(--border,#eee); padding-top:10px; }
.ord-rline { display:flex; justify-content:space-between; padding:4px 0; font-size:14px; }
.ord-rtotal { display:flex; justify-content:space-between; padding:10px 0 0; margin-top:6px; border-top:2px solid var(--border,#eee); font-size:16px; font-weight:900; }
.ord-paybox { text-align:left; background:rgba(103, 80, 164,.06); border-radius:13px; padding:14px; margin-top:14px; }
.ord-paybox p { font-size:13px; margin:6px 0; }
.ord-ussd { display:block; text-align:center; font-size:20px; font-weight:900; letter-spacing:1px; color:#6750A4; padding:12px; background:#fff; border-radius:11px; text-decoration:none; margin:8px 0; }
.ord-proofbtn { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:11px; background:#6750A4; color:#fff; font-weight:700; font-size:14px; cursor:pointer; }
.ord-proofmsg { font-size:12.5px; color:var(--text-muted,#888); margin-top:8px; }
@media (prefers-color-scheme: dark) {
  .ord-opt, .ord-field input { background:#12151f; color:#eee; border-color:rgba(255,255,255,.14); }
  .ord-ussd { background:#12151f; }
}

/* Paiement en Tsiky : bouton pleine largeur (3e moyen, sous la paire sur-place/MoMo). */
.ord-pay-tsiky { display:flex; align-items:center; justify-content:center; gap:8px; }
.ord-pay-tsiky i { color:inherit; font-size:inherit; }
.ord-tsiky-hint { font-size:11.5px; line-height:1.45; color:var(--text-muted,#888); margin:6px 0 0; }
.ord-tsiky-hint.short { color:#b45309; font-weight:700; }

/* ============================================================================
   Refonte « app de vente » (2026-07-23) : cartes produit → modal produit (galerie
   + options + quantité) → barre panier flottante → checkout.
   ============================================================================ */
.ord-sheet .ord-body { flex:1 1 auto; min-height:0; }

/* — Cartes produit (vue menu) — */
.ord-cards { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:6px; }
.ord-card { display:flex; flex-direction:column; border:1px solid var(--border,rgba(0,0,0,.08)); border-radius:15px; overflow:hidden;
  background:var(--card-bg,#fff); cursor:pointer; transition:transform .08s, box-shadow .15s; }
.ord-card:active { transform:scale(.98); }
.ord-card.oos { opacity:.55; cursor:default; }
.ord-card-img { position:relative; width:100%; aspect-ratio:4/3; background:rgba(103,80,164,.1); }
.ord-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.ord-card-img.ord-ph { display:flex; align-items:center; justify-content:center; color:#6750A4; font-size:26px; }
.ord-card-count { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; font-size:10.5px; font-weight:700;
  padding:2px 7px; border-radius:20px; display:flex; align-items:center; gap:4px; }
.ord-card-body { padding:9px 10px 10px; display:flex; flex-direction:column; gap:3px; flex:1; }
.ord-card-body b { font-size:13.5px; font-weight:700; line-height:1.25; }
.ord-card-body small { font-size:11px; color:var(--text-muted,#888); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ord-card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:5px; gap:6px; }
.ord-add { font-size:11.5px; font-weight:800; color:#fff; background:linear-gradient(135deg,#6750A4,#7F67BE); padding:5px 10px; border-radius:20px; white-space:nowrap; }
.ord-add i { font-size:10px; }

/* — Barre panier flottante (bas du sheet) — */
.ord-cartbar { flex:0 0 auto; display:flex; align-items:center; gap:10px; width:100%; border:none; cursor:pointer;
  padding:15px 18px; background:linear-gradient(135deg,#6750A4,#7F67BE); color:#fff; font-size:15px; font-weight:800; }
.ord-cartbar span:nth-child(2) { flex:1; text-align:left; }
.ord-cartbar-n { background:rgba(255,255,255,.28); border-radius:20px; min-width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; padding:0 7px; }
.ord-cartbar-spacer { height:4px; }

/* — Modal produit — */
.ord-prod { display:flex; flex-direction:column; height:100%; max-height:92vh; position:relative; }
.ord-prod-x { position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; margin:0; }
.ord-prod-scroll { overflow-y:auto; }
.ord-gal { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; background:rgba(103,80,164,.1); }
.ord-gal::-webkit-scrollbar { display:none; }
.ord-gal.ord-ph { display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; color:#6750A4; font-size:40px; }
.ord-gal-img { flex:0 0 100%; width:100%; aspect-ratio:16/10; object-fit:cover; scroll-snap-align:center; }
.ord-gal-dots { display:flex; justify-content:center; gap:6px; margin:-22px 0 8px; position:relative; }
.ord-gal-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 2px rgba(0,0,0,.4); }
.ord-gal-dot.on { background:#fff; }
.ord-prod-info { padding:14px 16px 18px; }
.ord-prod-info h3 { margin:0 0 6px; font-size:19px; font-weight:900; }
.ord-prod-desc { font-size:13.5px; color:var(--text-muted,#777); line-height:1.5; margin:0 0 10px; }
.ord-optgroup { margin:12px 0; }
.ord-optgroup > label { display:block; font-size:12.5px; font-weight:800; color:var(--text-muted,#888); margin-bottom:7px; }
.ord-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ord-chip { padding:9px 13px; border-radius:11px; border:1.5px solid var(--border,#ddd); background:transparent; color:var(--text,#222); font-size:13px; font-weight:700; cursor:pointer; }
.ord-chip.on { border-color:#6750A4; background:rgba(103,80,164,.1); color:#6750A4; }
.ord-chip b { font-weight:800; }
.ord-prod-qty { display:flex; align-items:center; justify-content:space-between; margin:16px 0 6px; font-size:14px; font-weight:700; }
.ord-stepper { display:flex; align-items:center; gap:14px; }
.ord-stepper button { width:38px; height:38px; border-radius:50%; border:none; background:rgba(103,80,164,.12); color:#6750A4; font-size:20px; font-weight:800; cursor:pointer; }
.ord-stepper b { font-size:17px; min-width:20px; text-align:center; }
.ord-prod-add span { display:flex; align-items:center; gap:8px; }

/* — Checkout (récap panier éditable) — */
.ord-back { display:inline-flex; align-items:center; gap:8px; background:none; border:none; color:#6750A4; font-size:13.5px; font-weight:700; cursor:pointer; padding:4px 0 10px; }
.ord-clines { display:flex; flex-direction:column; }
.ord-cline { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.ord-cline-g { flex:1; min-width:0; }
.ord-cline-g b { font-size:14px; font-weight:700; display:block; }
.ord-cline-g small { font-size:11.5px; color:var(--text-muted,#888); }
.ord-cline-p { font-size:13.5px; font-weight:800; white-space:nowrap; min-width:70px; text-align:right; }
@media (prefers-color-scheme: dark) {
  .ord-card { background:#1c2030; border-color:rgba(255,255,255,.08); }
  .ord-chip { background:#12151f; color:#eee; border-color:rgba(255,255,255,.14); }
  .ord-chip.on { background:rgba(179,157,219,.2); color:#B39DDB; border-color:#B39DDB; }
}