/* ============================================================================
   Menu Editor Engine — Prodotti Componibili: stile del wizard cliente.
   NB: usa la palette del MENU del cliente (var --cw-*, impostate inline
   all'apertura da mee-composable-wizard.js), NON il design system del brand:
   il wizard deve fondersi col tema che il ristoratore ha scelto per il menu.
   ========================================================================== */

.cw-overlay{
  position:fixed; inset:0; z-index:2147482000;
  background:var(--cw-bg,#fff); color:var(--cw-title,#111);
  display:flex; flex-direction:column;
  font-family:var(--cw-font,inherit);
  -webkit-tap-highlight-color:transparent;
}
.cw-overlay *{ box-sizing:border-box; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.cw-head{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--cw-border,#ccc);
  flex:0 0 auto;
}
.cw-head-t{ font-size:1.05rem; font-weight:700; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-x{
  width:40px; height:40px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--cw-border,#ccc); background:transparent;
  color:inherit; font-size:1.3rem; line-height:1; cursor:pointer;
}
.cw-progress{ height:4px; background:var(--cw-border,#ccc)55; flex:0 0 auto; }
.cw-progress-bar{ height:100%; background:var(--cw-price,#333);
  width:0; transition:width .25s ease; }

/* ── Body ───────────────────────────────────────────────────────────────── */
.cw-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 16px 22px; }
.cw-step-t{ font-size:1.25rem; font-weight:700; margin:2px 0 2px; }
.cw-step-rule{ font-size:.9rem; color:var(--cw-desc,#666); margin-bottom:4px; }
.cw-step-req{ display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:99px;
  border:1px solid var(--cw-border,#ccc); color:var(--cw-desc,#666); margin-bottom:12px; }

/* ── Opzioni ────────────────────────────────────────────────────────────── */
.cw-opts{ display:grid; gap:10px; }
.cw-opts.list{ grid-template-columns:1fr; }
.cw-opts.grid{ grid-template-columns:1fr 1fr; }
.cw-opt{
  position:relative; display:flex; gap:10px; align-items:flex-start;
  text-align:left; width:100%; padding:12px; cursor:pointer;
  border:2px solid var(--cw-border,#ccc); border-radius:12px;
  background:transparent; color:inherit; font:inherit;
  transition:border-color .15s ease, background .15s ease;
}
.cw-opts.grid .cw-opt{ flex-direction:column; }
.cw-opt:hover{ border-color:var(--cw-price,#333); }
.cw-opt.sel{ border-color:var(--cw-price,#333);
  background:color-mix(in srgb, var(--cw-price,#333) 8%, transparent); }
.cw-opt-img{ width:52px; height:52px; border-radius:9px; object-fit:cover; flex:0 0 auto; }
.cw-opts.grid .cw-opt-img{ width:100%; height:96px; }
.cw-opt-main{ flex:1; min-width:0; }
.cw-opt-name{ font-weight:600; font-size:.98rem; }
.cw-opt-price{ font-size:.9rem; color:var(--cw-price,#333); font-weight:600; margin-top:2px; }
.cw-opt-price.free{ color:var(--cw-desc,#666); font-weight:500; }
/* Segno di selezione: NON solo colore — c'è anche la spunta e il bordo pieno */
.cw-opt-check{ position:absolute; top:8px; right:8px; width:22px; height:22px;
  border-radius:50%; border:2px solid var(--cw-border,#ccc);
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  color:#fff; background:transparent; }
.cw-opt.sel .cw-opt-check{ background:var(--cw-price,#333); border-color:var(--cw-price,#333); }

/* Allergeni: icona + testo (mai solo colore) */
.cw-opt-alrg{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.cw-badge{ display:inline-flex; align-items:center; gap:3px; font-size:.72rem;
  padding:1px 6px; border-radius:99px; border:1px solid var(--cw-border,#ccc);
  color:var(--cw-desc,#555); }

/* Esaurito: opacità + etichetta testuale SEMPRE visibile + pattern a righe */
.cw-opt.out{ cursor:not-allowed; opacity:.55;
  background-image:repeating-linear-gradient(45deg,
    transparent, transparent 7px,
    color-mix(in srgb, var(--cw-border,#999) 40%, transparent) 7px,
    color-mix(in srgb, var(--cw-border,#999) 40%, transparent) 9px); }
.cw-out-tag{ display:inline-block; font-size:.72rem; font-weight:700;
  color:#fff; background:#9a3412; border-radius:5px; padding:1px 6px; margin-top:6px; }

/* Ripetizione / quantità (raddoppia lo stesso ingrediente) */
.cw-qty{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.cw-qty button{ width:32px; height:32px; border-radius:8px; border:1px solid var(--cw-border,#ccc);
  background:transparent; color:inherit; font-size:1.1rem; cursor:pointer; }
.cw-qty .n{ min-width:1.2em; text-align:center; font-weight:600; }

/* Metà e metà (composizione mista) */
.cw-split-toggle{ margin:12px 0 4px; }

/* ── Livello (slider a step) ────────────────────────────────────────────── */
.cw-level{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.cw-level-b{ flex:1 1 auto; min-width:64px; padding:12px 8px; text-align:center;
  border:2px solid var(--cw-border,#ccc); border-radius:12px; background:transparent;
  color:inherit; font:inherit; font-weight:600; cursor:pointer; }
.cw-level-b.sel{ border-color:var(--cw-price,#333);
  background:color-mix(in srgb, var(--cw-price,#333) 12%, transparent); }

/* ── Footer sticky (totale + navigazione) ───────────────────────────────── */
.cw-foot{ flex:0 0 auto; border-top:1px solid var(--cw-border,#ccc);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--cw-bg,#fff); }
.cw-hint{ font-size:.85rem; color:#9a3412; margin-bottom:8px; min-height:1.1em; }
.cw-foot-row{ display:flex; align-items:center; gap:12px; }
.cw-total{ font-size:1.15rem; font-weight:700; }
.cw-total small{ font-weight:500; font-size:.8rem; color:var(--cw-desc,#666); }
.cw-nav{ margin-left:auto; display:flex; gap:8px; }
.cw-btn{ padding:12px 20px; border-radius:12px; font:inherit; font-weight:700;
  cursor:pointer; border:2px solid var(--cw-price,#333); }
.cw-btn.primary{ background:var(--cw-price,#333); color:var(--cw-bg,#fff); }
.cw-btn.ghost{ background:transparent; color:inherit; border-color:var(--cw-border,#ccc); }
.cw-btn[disabled]{ opacity:.45; cursor:not-allowed; }
/* Upsell: due bottoni di peso visivo COMPARABILE (§10.5) */
.cw-upsell-actions{ display:flex; gap:10px; }
.cw-upsell-actions .cw-btn{ flex:1; text-align:center; }

/* ── Riepilogo / Scontrino ──────────────────────────────────────────────── */
.cw-alrg-agg{ border:1px solid var(--cw-border,#ccc); border-radius:12px;
  padding:12px; margin-bottom:16px; }
.cw-alrg-agg h4{ margin:0 0 8px; font-size:.85rem; text-transform:uppercase;
  letter-spacing:.03em; color:var(--cw-desc,#666); }
.cw-alrg-agg .cw-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.cw-sum-row{ display:flex; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--cw-border,#ccc)55; }
.cw-sum-row .lbl{ min-width:0; }
.cw-sum-row .lbl b{ display:block; }
.cw-sum-row .lbl span{ font-size:.85rem; color:var(--cw-desc,#666); }
.cw-sum-edit{ background:none; border:none; color:var(--cw-price,#333);
  text-decoration:underline; cursor:pointer; font:inherit; font-size:.85rem; flex:0 0 auto; }
.cw-sum-tot{ display:flex; justify-content:space-between; font-size:1.2rem;
  font-weight:800; padding-top:14px; }

.cw-receipt-code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.5rem; font-weight:800; letter-spacing:.12em; text-align:center;
  padding:10px; border:2px dashed var(--cw-border,#ccc); border-radius:12px; margin:8px 0 14px; }
.cw-receipt-time{ text-align:center; color:var(--cw-desc,#666); font-size:.85rem; margin-bottom:14px; }
.cw-receipt-cta{ text-align:center; font-weight:600; color:var(--cw-desc,#666); margin-top:14px; }

/* Riga menu del prodotto componibile (CTA "Componi") */
.cw-compose-btn{ display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:99px; font:inherit; font-weight:700; cursor:pointer;
  border:2px solid var(--cw-row-price,#333); color:var(--cw-row-price,#333); background:transparent; }
.cw-compose-btn:hover{ background:color-mix(in srgb, var(--cw-row-price,#333) 10%, transparent); }
.cw-compose-from{ font-weight:500; font-size:.85rem; opacity:.85; }

/* ── Menu componibile intero: schermata cliente (landing) ───────────────────
   Mostrata nel menu pubblico quando il menu è di tipo "componibile": testata +
   invito a comporre. "Componi" apre lo stesso wizard dell'anteprima editor.
   Usa i colori del menu passati inline (title/bg/desc/border), non il brand. */
.mee-comp-landing{ max-width:520px; margin:8px auto 0; padding:6px 4px 10px; text-align:center; }
.mee-comp-title{ font-size:1.5rem; font-weight:800; margin:6px 0 4px; }
.mee-comp-sub{ font-size:.98rem; line-height:1.5; opacity:.9; margin:0 auto 14px; max-width:420px; }
.mee-comp-steps{ list-style:none; margin:0 auto 20px; padding:0; max-width:360px;
  display:flex; flex-direction:column; gap:8px; text-align:left; }
.mee-comp-steps li{ display:flex; align-items:center; gap:12px; font-size:1rem; font-weight:600;
  border:1px solid var(--cbd,#ccc); border-radius:12px; padding:10px 14px; }
.mee-comp-stepn{ flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800;
  background:color-mix(in srgb, var(--ctx,#333) 12%, transparent); color:var(--ctx,#333); }
.mee-comp-start{ display:inline-flex; align-items:center; gap:8px; margin:2px auto 6px;
  padding:14px 28px; border:none; border-radius:99px; font:inherit; font-size:1.05rem;
  font-weight:800; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.16); }
.mee-comp-start:hover{ filter:brightness(1.06); }
.mee-comp-start:active{ transform:translateY(1px); }

/* ── Accessibilità ──────────────────────────────────────────────────────── */
.cw-overlay :focus-visible{ outline:3px solid var(--cw-price,#333); outline-offset:2px; border-radius:8px; }
@media (prefers-reduced-motion: reduce){
  .cw-overlay, .cw-overlay *{ transition:none !important; animation:none !important; }
}
@media (max-width:360px){ .cw-opts.grid{ grid-template-columns:1fr; } }