/* ===== Shared calculator component styles (dark, Zio Ricco) =====
   Da usare INSIEME a /pages.css: la testata (.topbar), i pulsanti (.cta),
   la CTA finale (.cta-band/.cta-card) e il footer (.site) vengono da lì.
   Qui c'è solo l'impianto del calcolatore: form, campi, esito, tabelle. */

:root{
  --giallo:#F4C430; --rosa:#F49BC1; --blu:#B9A8FF;
  --bordo:rgba(215,226,234,.16); --tenue:#9aa3b2; --testo:#D7E2EA;
  --card:rgba(255,255,255,.03); --card-hi:rgba(255,255,255,.05);
  --verde:#1f9d78; --verde-bg:rgba(31,157,120,.16);
  --ambra:#c98a1e; --ambra-bg:rgba(201,138,30,.16);
  --rosso:#d15048; --rosso-bg:rgba(209,80,72,.16);
}

/* --- testata pagina calcolatore --- */
.calc-head{position:relative;text-align:center;padding:3rem 0 1.6rem;overflow:hidden}
.calc-head::before{content:"";position:absolute;top:-45%;left:50%;transform:translateX(-50%);
  width:80%;height:120%;background:radial-gradient(50% 50% at 50% 30%, rgba(120,80,220,.16), transparent 70%);pointer-events:none}
.calc-head .eyebrow{display:inline-block;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;
  color:var(--rosa);margin-bottom:.8rem;position:relative}
.calc-head h1{font-weight:900;text-transform:uppercase;line-height:1.05;letter-spacing:-.02em;
  font-size:clamp(1.9rem,5.4vw,3.2rem);position:relative;color:#fff}
.calc-head p.lead{color:var(--testo);opacity:.7;font-weight:300;max-width:46rem;margin:1rem auto 0;
  font-size:clamp(.98rem,1.7vw,1.18rem);position:relative}

/* --- griglia form + risultato --- */
.calc-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;padding-bottom:1rem}
@media(min-width:940px){
  .calc-grid{grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:start}
  .calc-out{position:sticky;top:88px}
}

/* --- card di input --- */
.cbox{background:var(--card);border:1px solid var(--bordo);border-radius:22px;padding:1.4rem 1.5rem;margin-bottom:1.2rem}
.cbox:last-child{margin-bottom:0}
.cbox h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--rosa);
  margin-bottom:1.1rem;font-weight:700;display:flex;align-items:center;gap:.55rem}
.cbox .num{width:22px;height:22px;border-radius:50%;background:var(--giallo);color:#0C0C0C;
  font-size:.72rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}

.fields{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:560px){.fields.due{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.86rem;font-weight:600;color:#fff;margin-bottom:.4rem}
.field .hint{display:block;font-weight:300;font-size:.76rem;color:var(--tenue);margin-top:.4rem;line-height:1.45}

/* niente frecce sui number (coprirebbero € e %) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field input[type=number],.field input[type=text],.field select{
  width:100%;padding:.65rem .8rem;border:1px solid var(--bordo);border-radius:10px;
  font-size:1rem;font-family:inherit;color:#fff;background:rgba(255,255,255,.03)}
.field select option{background:#161326;color:#fff}
.field input:focus,.field select:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 3px rgba(155,140,255,.18)}
.field input::placeholder{color:rgba(215,226,234,.32)}

/* campo con simbolo € % affiancato */
.sym{display:flex;align-items:stretch}
.sym .s{flex:none;display:flex;align-items:center;justify-content:center;min-width:40px;padding:0 .7rem;
  border:1px solid var(--bordo);background:rgba(255,255,255,.06);color:var(--tenue);font-size:.9rem;font-weight:600}
.sym .s.sx{border-right:none;border-radius:10px 0 0 10px}
.sym .s.dx{border-left:none;border-radius:0 10px 10px 0}
.sym .s.sx + input{border-radius:0 10px 10px 0}
.sym input:first-child{border-radius:10px 0 0 10px}

/* toggle segmentato (radio) */
.seg{display:flex;gap:.4rem;flex-wrap:wrap;background:rgba(255,255,255,.03);border:1px solid var(--bordo);
  border-radius:12px;padding:.3rem}
.seg label{flex:1;min-width:90px;margin:0;text-align:center;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:.55rem .6rem;border-radius:9px;font-size:.82rem;font-weight:600;color:var(--testo);transition:.15s}
.seg input:checked + span{background:var(--giallo);color:#0C0C0C}

/* slider */
.slider-row{display:flex;align-items:center;gap:.9rem}
.slider-row .sym{width:130px;flex:none}
.slider-row input[type=range]{flex:1;min-width:0;accent-color:var(--blu)}

/* dettagli avanzati */
details.adv{border:1px dashed var(--bordo);border-radius:12px;padding:0 1rem;margin-top:1rem;background:rgba(255,255,255,.02)}
details.adv summary{cursor:pointer;padding:.85rem 0;font-size:.84rem;font-weight:600;color:var(--blu);
  list-style:none;display:flex;align-items:center;gap:.5rem}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"+";font-weight:800;width:12px;flex:none}
details.adv[open] summary::before{content:"\2212"}
details.adv .fields{padding-bottom:1rem}

/* --- pannello risultato --- */
.esito{border-radius:22px;padding:1.4rem 1.5rem;color:#fff;background:var(--verde)}
.esito.attenzione{background:var(--ambra)}
.esito.critico{background:var(--rosso)}
.esito .verdetto{font-size:1.35rem;font-weight:800;line-height:1.25;margin-bottom:.6rem;font-family:'Kanit',sans-serif}
.esito .etichetta{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;opacity:.85;margin-bottom:.15rem;font-weight:600}
.esito .cifra{font-size:2.3rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-family:'Kanit',sans-serif}
.esito .cifra .u{font-size:1rem;font-weight:500;opacity:.85}
.esito .nota{font-size:.86rem;margin-top:.7rem;opacity:.95;line-height:1.5}
.esito .secondo{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.28)}
.esito .secondo .cifra{font-size:1.7rem}
.esito .duetto{display:flex;gap:1.2rem;flex-wrap:wrap}
.esito .duetto > div{flex:1;min-width:110px}

/* tabella dettaglio */
.rows{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:1.1rem;
  background:var(--card);border:1px solid var(--bordo);border-radius:16px;overflow:hidden}
.rows td{padding:.7rem .95rem;border-bottom:1px solid var(--bordo);vertical-align:top}
.rows tr:last-child td{border-bottom:none}
.rows td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:#fff;white-space:nowrap}
.rows td:first-child{color:var(--testo);opacity:.85}
.rows tr.tot td{border-top:2px solid var(--giallo);background:rgba(244,196,48,.08);color:var(--giallo);font-size:1.02rem;font-weight:700}
.rows tr.tot td:last-child{color:var(--giallo)}
.rows .sub{display:block;font-size:.76rem;color:var(--tenue);font-weight:400;margin-top:.15rem}

/* barra composizione */
.bar{display:flex;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--bordo);margin-top:1.1rem}
.bar > span{display:block;height:100%}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .9rem;margin-top:.7rem;font-size:.78rem}
.legend .it{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.legend .lb{display:flex;align-items:center;gap:.4rem;min-width:0}
.legend .dot{width:10px;height:10px;border-radius:3px;flex:none}
.legend .vl{font-variant-numeric:tabular-nums;color:var(--tenue);white-space:nowrap}

/* avvisi */
.tips{display:grid;gap:.55rem;margin-top:1.1rem}
.tip{display:flex;gap:.6rem;padding:.7rem .85rem;border-radius:12px;font-size:.86rem;line-height:1.5;background:rgba(155,140,255,.1);color:var(--blu)}
.tip.ok{background:var(--verde-bg);color:#7fe3c2}
.tip.warn{background:var(--ambra-bg);color:#f0c886}
.tip.err{background:var(--rosso-bg);color:#f2a8a2}
.tip .i{flex:none;font-weight:800}
.tip b{color:#fff;font-weight:700}

/* pulsante calcola + azioni */
.actions{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
.btn-calc{flex:1;min-width:180px;padding:.85rem 1.4rem;border-radius:9999px;border:none;cursor:pointer;
  font-family:'Kanit',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.92rem;
  color:#0C0C0C;background:var(--giallo);transition:transform .15s ease}
.btn-calc:hover{transform:scale(1.02)}
.btn-ghost{padding:.85rem 1.3rem;border-radius:9999px;background:transparent;border:1px solid var(--bordo);
  color:var(--testo);font-family:'Kanit',sans-serif;font-weight:600;cursor:pointer;font-size:.9rem}
.btn-ghost:hover{background:rgba(255,255,255,.05)}

/* nota metodologica */
.metodo{margin-top:1.4rem;padding:1.1rem 1.3rem;background:var(--card);border:1px solid var(--bordo);
  border-radius:16px;font-size:.8rem;color:var(--tenue);line-height:1.65}
.metodo strong{color:var(--testo)}
.metodo .t{display:block;font-weight:700;color:var(--rosa);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;margin-bottom:.5rem}

/* placeholder risultato prima del calcolo */
.ghost-out{border:1px dashed var(--bordo);border-radius:22px;padding:2.4rem 1.5rem;text-align:center;color:var(--tenue)}
.ghost-out .ic{font-size:2.4rem;display:block;margin-bottom:.6rem;opacity:.5}