/* ============================================================
   Configuratore V2 — impaginazione "A" (scelta da Marco)
   Riepilogo stretto con checklist degli step, scelte compatte,
   dettaglio delle voci in una finestra, ultimo step orientato al contatto.
   Solo presentazione: markup, logica e prezzi restano quelli di preventivo.js.
   ============================================================ */

/* ---------- intestazione: niente riga "01 · 06 // CONFIGURAZIONE",
   il numero dello step va a destra dell'etichetta ---------- */
body.cfg-vx .cfg-right{position:relative}
body.cfg-vx .cfg-step-meta{position:absolute;right:clamp(28px,4vw,64px);top:calc(clamp(28px,4vw,40px) + 9px);margin:0;z-index:2}
body.cfg-vx .cfg-step-meta>span:last-child{display:none}
body.cfg-vx .cfg-right>.eyebrow{margin-top:0}

/* ---------- pulsanti in basso: stessa altezza, icona e testo sempre in riga ---------- */
body.cfg-vx .cfg-bottom .cb-actions{display:flex;align-items:center;gap:8px;flex:none}
body.cfg-vx .btn-prev,body.cfg-vx .btn-next{display:inline-flex !important;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px !important;height:44px;padding:0 20px !important;box-sizing:border-box;font-size:14px !important;line-height:1;white-space:nowrap;flex:none}
body.cfg-vx .btn-prev svg,body.cfg-vx .btn-next svg{flex:none;display:block}
body.cfg-vx .btn-prev{color:var(--text-2)}

/* ---------- riepilogo (desktop): prezzo, "vedi dettaglio", checklist ---------- */
@media (min-width:961px){
  body.cfg-vx .cfg-grid{grid-template-columns:minmax(340px,400px) 1fr}
  body.cfg-vx .cfg-left{padding:32px 30px;gap:20px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%)}
  body.cfg-vx .price-display{font-size:clamp(56px,5.2vw,84px)}
  body.cfg-vx .price-wrap .pl-disclaimer{white-space:normal}
  body.cfg-vx .cfg-right{padding:36px clamp(32px,4vw,64px)}
}
body.cfg-vx .cfg-left>.receipt-list{display:none}
body.cfg-vx .vx-more{align-self:flex-start;margin-top:6px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);font:500 12px var(--f-mono);letter-spacing:.06em;cursor:pointer;transition:border-color .2s,background .2s}
body.cfg-vx .vx-more:hover{border-color:var(--cyan);background:rgba(34,211,238,.06)}
body.cfg-vx .vx-steps{position:relative;z-index:1;list-style:none;margin:0;display:grid;gap:2px;padding:14px 0 0;border-top:1px dashed var(--line-2)}
body.cfg-vx .vx-steps button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:9px;box-sizing:border-box;font:500 12px var(--f-mono);letter-spacing:.06em;color:var(--text-3)}
body.cfg-vx .vx-steps button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
body.cfg-vx .vx-steps .vx-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);font-size:10px;flex:none}
body.cfg-vx .vx-steps .cur button{background:rgba(255,255,255,.05);color:var(--text)}
body.cfg-vx .vx-steps .cur .vx-n{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px -2px var(--cyan)}
body.cfg-vx .vx-steps .done button{color:var(--text-2)}
body.cfg-vx .vx-steps .done .vx-n{background:var(--cyan);border-color:var(--cyan);color:#07070a;font-size:0}
body.cfg-vx .vx-steps .done .vx-n::after{content:"✓";font-size:11px}

/* ---------- scelte compatte: icona · titolo/descrizione · prezzo ---------- */
body.cfg-vx .cfg-types{gap:10px}
body.cfg-vx .cfg-type{display:grid;grid-template-columns:42px 1fr auto;grid-template-areas:"ic t p" "ic d p";column-gap:14px;row-gap:3px;align-items:center;padding:16px 18px;border-radius:16px}
body.cfg-vx .cfg-type-head{display:contents}
body.cfg-vx .cfg-type-icon{grid-area:ic;width:42px;height:42px}
body.cfg-vx .cfg-type-check{position:absolute;top:10px;right:10px;width:16px;height:16px}
body.cfg-vx .cfg-type-check svg{width:9px;height:9px}
body.cfg-vx .cfg-type-title{grid-area:t;font-size:16.5px}
body.cfg-vx .cfg-type-d{grid-area:d;font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.cfg-vx .cfg-type-price{grid-area:p;margin:0;padding:0 0 0 6px;border:0;flex-direction:column;align-items:flex-end;gap:2px;font-size:9.5px}
body.cfg-vx .cfg-type-price b{font-size:17px}
body.cfg-vx .cfg-extra,body.cfg-vx .cfg-option{padding:13px 16px}

/* ---------- finestra "dettaglio" ---------- */
body.cfg-vx .vx-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
body.cfg-vx .vx-modal[hidden]{display:none}
body.cfg-vx .vx-scrim{position:absolute;inset:0;background:rgba(3,3,8,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:vxFade .25s ease}
body.cfg-vx .vx-panel{position:relative;width:min(480px,100%);max-height:min(640px,86vh);overflow:auto;padding:22px 24px 26px;border-radius:22px;border:1px solid var(--line-2);background:var(--solid,#0d0d14);box-shadow:0 40px 80px -30px rgba(0,0,0,.8);animation:vxUp .35s cubic-bezier(.2,.7,.2,1)}
body.cfg-vx .vx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
body.cfg-vx .vx-x{padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--text-2);font:500 11px var(--f-mono);letter-spacing:.06em;cursor:pointer;text-transform:none}
body.cfg-vx .vx-body{max-height:none;margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:10px}
body.cfg-vx .rl-value.promo{color:var(--lime)}
@keyframes vxFade{from{opacity:0}}
@keyframes vxUp{from{opacity:0;transform:translateY(16px)}}

/* ---------- ultimo step: recap in una riga + sconto, poi subito il form ---------- */
body.cfg-vx .cfg-final .ff-mini{display:none}
body.cfg-vx .cfg-final{gap:16px}
body.cfg-vx .cfg-promo{position:relative;display:grid;gap:6px;padding:16px 18px;border-radius:18px;border:1px solid color-mix(in oklab,var(--lime) 45%,transparent);background:radial-gradient(70% 120% at 100% 0%,color-mix(in oklab,var(--lime) 14%,transparent),transparent 60%),rgba(255,255,255,.025)}
body.cfg-vx .cfg-promo[hidden]{display:none}
body.cfg-vx .cp-recap{font:500 11px var(--f-mono);letter-spacing:.08em;color:var(--text-3);text-transform:uppercase}
body.cfg-vx .cp-main{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
body.cfg-vx .cp-prices{display:flex;align-items:baseline;gap:12px}
body.cfg-vx .cp-old{font:500 15px var(--f-mono);color:var(--text-3);text-decoration-thickness:1.5px}
body.cfg-vx .cp-new{font:600 clamp(28px,3vw,36px) var(--f-display);letter-spacing:-.03em;color:var(--lime);font-variant-numeric:tabular-nums}
body.cfg-vx .cp-badge{padding:6px 12px;border-radius:999px;background:var(--lime);color:#0b0f02;font:600 11px var(--f-mono);letter-spacing:.06em;white-space:nowrap}
body.cfg-vx .cp-t{font:600 15px var(--f-display);letter-spacing:-.01em;color:var(--text)}
body.cfg-vx .cp-d{margin:0;font-size:12.5px;line-height:1.45;color:var(--text-2)}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:960px){
  body.cfg-vx .cfg-left{display:none}
  body.cfg-vx .cfg-grid{grid-template-rows:1fr}
  body.cfg-vx .cfg-right{padding:18px 18px 112px !important}
  body.cfg-vx .cfg-step-meta{right:18px;top:27px}
  body.cfg-vx .cfg-right>.eyebrow{font-size:10px;padding:6px 10px;max-width:calc(100% - 64px)}
  body.cfg-vx .cfg-step-title{font-size:clamp(26px,7.4vw,34px)}
  body.cfg-vx .cfg-step-sub{font-size:14px}
  body.cfg-vx .cfg-stage{margin-top:16px}
  body.cfg-vx .cfg-type{padding:14px 16px}
  body.cfg-vx .cfg-bottom{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:14px 14px calc(12px + env(safe-area-inset-bottom)) !important;gap:8px}
  body.cfg-vx .cfg-progress{position:absolute;top:0;left:0;right:0;gap:2px;max-width:none}
  body.cfg-vx .cfg-progress .seg{height:2px;border-radius:0}
  body.cfg-vx .cfg-bottom .cb-actions{margin-left:auto}
  body.cfg-vx .vx-total{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;box-sizing:border-box;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;white-space:nowrap}
  body.cfg-vx .vx-total .vx-k{font:500 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
  body.cfg-vx .vx-total b{font:600 16px var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  body.cfg-vx .btn-prev{width:44px;padding:0 !important;font-size:0 !important;gap:0 !important}
  body.cfg-vx .btn-prev svg{width:18px;height:18px}
  body.cfg-vx .vx-modal{place-items:end stretch;padding:0}
  body.cfg-vx .vx-panel{width:100%;max-height:82vh;border-radius:22px 22px 0 0;padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  body.cfg-vx .cfg-promo{padding:14px 16px}
  body.cfg-vx .cfg-final .ff-row{gap:10px}
  body.cfg-vx .cfg-final label{margin-bottom:6px}
}
@media (min-width:961px){ body.cfg-vx .vx-total{display:none} }

/* tempi di consegna: sotto i 1200px una riga per opzione (in 3 colonne il testo si schiacciava) */
@media (max-width:1200px){
  body.cfg-vx .cfg-times{grid-template-columns:1fr;gap:10px}
  body.cfg-vx .cfg-time{display:grid;grid-template-columns:32px 1fr auto;grid-template-areas:"ic t p" "ic d p";column-gap:14px;row-gap:2px;align-items:center;padding:14px 16px}
  body.cfg-vx .cfg-time .ti-icon{grid-area:ic}
  body.cfg-vx .cfg-time .ti-t{grid-area:t}
  body.cfg-vx .cfg-time .ti-d{grid-area:d}
  body.cfg-vx .cfg-time .ti-p{grid-area:p;margin:0;white-space:nowrap}
  body.cfg-vx .cfg-time:hover{transform:none}
}