/* OK energia — percorso di attivazione online. Stessa tavolozza della landing. */
:root{
  --navy:#042C53; --navy-d:#021B36; --navy-dd:#01101f; --navy2:#0C447C; --blue:#185FA5; --blue-l:#85B7EB;
  --amber:#EF9F27; --amber-l:#FFB74D; --amber-d:#412402;
  --ink:#E8EEF6; --muted:#8FA6C2; --line:rgba(133,183,235,.14);
  --ok:#3ad07a; --err:#ff7b7b; --err-bg:rgba(255,123,123,.1);
  --jak:'Plus Jakarta Sans',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--jak);background:var(--navy-dd);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

.glow{position:fixed;border-radius:50%;filter:blur(120px);opacity:.5;z-index:0;pointer-events:none}
.glow.a{width:560px;height:560px;background:radial-gradient(circle,#0C447C,transparent 70%);top:-200px;right:-140px}
.glow.b{width:520px;height:520px;background:radial-gradient(circle,rgba(239,159,39,.20),transparent 70%);bottom:-220px;left:-200px}

/* nav */
header{position:relative;z-index:5}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:16px}
.logo{display:flex;align-items:center;gap:11px}
.logo .lt{font-size:21px;letter-spacing:-0.02em}
.logo .lt b{font-weight:800}.logo .lt span{font-weight:400}
.logo .lt .reg{font-size:9px;vertical-align:super;font-weight:600;color:var(--blue-l)}
.help{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.help a{color:var(--ink);font-weight:600;white-space:nowrap}
.help a:hover{color:var(--amber)}

/* layout */
main{position:relative;z-index:1;flex:1;padding:12px 0 72px}
.shell{max-width:640px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(133,183,235,.1);border:1px solid var(--line);border-radius:100px;padding:8px 16px;font-size:12.5px;font-weight:600;color:var(--blue-l);margin-bottom:18px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
h1{font-weight:800;letter-spacing:-0.035em;line-height:1.08;font-size:clamp(30px,5vw,44px)}
h1 .am{color:var(--amber);font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.01em}
.lead{color:var(--muted);margin-top:12px;font-size:16px;max-width:520px}

/* stepper */
.steps{display:flex;gap:6px;margin:30px 0 22px;list-style:none;counter-reset:s}
.steps li{flex:1;height:5px;border-radius:100px;background:rgba(133,183,235,.16);position:relative}
.steps li.done{background:var(--amber)}
.steps li.cur{background:linear-gradient(90deg,var(--amber),var(--amber-l))}
.steplbl{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--muted);font-weight:600;letter-spacing:.02em;margin-bottom:22px}
.steplbl b{color:var(--ink)}

/* card */
.card{background:linear-gradient(180deg,rgba(5,47,88,.75),rgba(2,27,54,.85));border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
#app.entra .card{animation:rise .28s cubic-bezier(.2,.7,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.card h2{font-size:22px;font-weight:800;letter-spacing:-0.025em;line-height:1.25}
.card .hint{color:var(--muted);font-size:15px;margin-top:6px}
.card h3{font-size:13px;font-weight:800;color:var(--amber);letter-spacing:.02em;text-transform:uppercase;margin:26px 0 10px}

/* form */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:18px}
.grid .full{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.f label .req{color:var(--amber)}
.f input,.f select,.f textarea{width:100%;background:rgba(133,183,235,.07);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-family:var(--jak);font-size:15.5px;padding:13px 14px;outline:none;transition:border-color .15s,background .15s;min-width:0}
.f select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238FA6C2' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.f select option{color:#0b1b2e;background:#fff}
.f input::placeholder{color:rgba(143,166,194,.7)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:rgba(239,159,39,.5);background:rgba(133,183,235,.11)}
.f input[aria-invalid="true"],.f select[aria-invalid="true"]{border-color:rgba(255,123,123,.6)}
.f .sub{font-size:13.5px;color:var(--muted)}
.f input:disabled{opacity:.6}
.prefix{display:flex;align-items:center;gap:8px;background:rgba(133,183,235,.07);border:1px solid var(--line);border-radius:12px;padding:0 0 0 14px}
.prefix span{color:var(--muted);font-weight:700;font-size:15px;white-space:nowrap}
.prefix input{border:none;background:none;flex:1}
.prefix:focus-within{border-color:rgba(239,159,39,.5)}

.chk{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(133,183,235,.05);cursor:pointer;font-size:15px;line-height:1.5}
.chk input{margin-top:2px;accent-color:var(--amber);width:22px;height:22px;flex:none}
.chk>span>b{color:var(--ink);font-weight:500}
.chk>span>b b{font-weight:800}
.chk .sub{display:block;color:var(--muted);font-size:13.5px;margin-top:4px}
.chk + .chk{margin-top:8px}

.seg{display:flex;gap:8px;margin-top:16px}
.seg button{flex:1;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(133,183,235,.06);color:var(--muted);font-weight:700;font-size:14.5px;cursor:pointer;transition:all .15s}
.seg button[aria-pressed="true"]{background:rgba(239,159,39,.16);border-color:rgba(239,159,39,.5);color:var(--ink)}

/* OTP */
.otp{display:flex;gap:8px;margin-top:18px;justify-content:center}
.otp input{width:46px;height:56px;text-align:center;font-size:24px;font-weight:800;letter-spacing:0;background:rgba(133,183,235,.07);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-family:var(--jak);outline:none}
.otp input:focus{border-color:rgba(239,159,39,.55);background:rgba(133,183,235,.12)}
.resend{margin-top:16px;font-size:14px;color:var(--muted);text-align:center}
.resend button{background:none;border:none;color:var(--blue-l);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-size:14px;min-height:44px;padding:10px 8px}
.resend button:disabled{color:var(--muted);text-decoration:none;cursor:default}

/* upload */
.drop{margin-top:14px;border:1.5px dashed rgba(133,183,235,.35);border-radius:16px;padding:22px 18px;text-align:center;background:rgba(133,183,235,.05);cursor:pointer;transition:border-color .15s,background .15s;position:relative}
.drop:hover,.drop.over{border-color:var(--amber);background:rgba(239,159,39,.07)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop .t{font-weight:700;font-size:15px}
.drop .s{color:var(--muted);font-size:12.5px;margin-top:4px}
.drop.has{border-style:solid;border-color:rgba(58,208,122,.5);background:rgba(58,208,122,.06)}
.drop.has .t{color:var(--ok)}
.drop .rm{position:absolute;top:8px;right:8px;background:rgba(1,16,31,.6);border:1px solid var(--line);color:var(--ink);border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:16px;line-height:1;z-index:2}

/* buttons */
.actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;border-radius:14px;padding:15px 26px;min-height:48px;cursor:pointer;border:none;transition:transform .14s,box-shadow .2s,opacity .15s;white-space:normal;text-align:center;line-height:1.25;background:var(--amber);color:var(--amber-d)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(239,159,39,.4)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn.ghost{background:rgba(133,183,235,.08);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{box-shadow:none;background:rgba(133,183,235,.14)}
.btn.link{background:none;color:var(--blue-l);padding:10px 8px;min-height:44px;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.btn.link.mod{font-size:13.5px;margin:-10px 0}
.steplbl .btn.link{padding:10px 0 10px 12px;margin:-10px 0}
.btn.link:hover{box-shadow:none;transform:none;color:var(--amber)}
.btn.wide{width:100%}
.spin{width:16px;height:16px;border:2.5px solid rgba(65,36,2,.35);border-top-color:var(--amber-d);border-radius:50%;animation:rot .8s linear infinite}
.ghost .spin{border-color:rgba(232,238,246,.3);border-top-color:var(--ink)}
@keyframes rot{to{transform:rotate(360deg)}}

/* alerts */
.alert{margin-top:16px;padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.5;border:1px solid}
.alert.err{background:var(--err-bg);border-color:rgba(255,123,123,.35);color:#ffc4c4}
.alert.ok{background:rgba(58,208,122,.08);border-color:rgba(58,208,122,.35);color:#b6f0cf}
.alert.info{background:rgba(133,183,235,.08);border-color:var(--line);color:#CBD9EA}
.alert ul{margin:6px 0 0 18px}

/* offer */
.offer{margin-top:18px;border:1px solid rgba(239,159,39,.35);border-radius:18px;padding:22px;background:linear-gradient(135deg,rgba(239,159,39,.12),rgba(12,68,124,.25))}
.offer .big{font-size:clamp(34px,7vw,46px);font-weight:800;letter-spacing:-0.04em;line-height:1}
.offer .big small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:6px}
.offer .lbl{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.offer .row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.offer .row:first-of-type{margin-top:16px}
.offer .row b{font-weight:800}
.offer .save{color:var(--ok);font-weight:800}
.payoff{font-family:var(--serif);font-style:italic;color:var(--blue-l);font-size:17px;margin-top:14px}

/* summary list */
.kv{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kv div{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:14px;border-top:1px solid var(--line)}
.kv div:first-child{border-top:none}
.kv span{color:var(--muted)}
.kv b{text-align:right;font-weight:700}

/* progress screen */
.wait{text-align:center;padding:14px 0 6px}
.wait .ring{width:56px;height:56px;border-radius:50%;border:4px solid rgba(133,183,235,.2);border-top-color:var(--amber);margin:0 auto 18px;animation:rot 1s linear infinite}
.wait p{color:var(--muted);font-size:14.5px}
.done{text-align:center;padding:10px 0}
.done .ck{width:72px;height:72px;margin:0 auto 18px}
.stores{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.store{position:relative;display:flex;align-items:center;gap:11px;background:rgba(133,183,235,.06);border:1px solid var(--line);color:var(--muted);border-radius:14px;padding:11px 20px 11px 17px}
.store .st{line-height:1.15;text-align:left}
.store .st small{display:block;font-size:10px;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.05em}
.store .st b{font-size:16px;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.store .soon{position:absolute;top:-9px;right:-7px;background:var(--amber);color:var(--amber-d);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:8px}

.small{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.6}
.small a{color:var(--blue-l);text-decoration:underline;text-underline-offset:2px}

/* footer */
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:26px 0;background:var(--navy-dd);font-size:12.5px;color:var(--muted)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.foot .links{display:flex;gap:18px;flex-wrap:wrap}
.foot a{color:var(--muted);transition:color .15s}
.foot a:hover{color:var(--ink)}
.legal{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.6}

@media(max-width:640px){
  .wrap{padding:0 18px}
  .nav{height:70px}
  .help .lbl{display:none}
  main{padding:4px 0 56px}
  .card{padding:22px 18px;border-radius:18px}
  .grid{grid-template-columns:1fr}
  .otp input{width:44px;height:54px;font-size:22px}
  .actions .btn:not(.link){flex:1}
  .kv div{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px}
  .kv b{text-align:left;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%;gap:2px 10px}
  .kv .kv-edit div{padding:0}
  .kv .kv-edit .f{gap:6px}
  .docs li{min-height:44px}
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── v3: validazione per campo, aiuti, fiducia, ripresa ── */
.f input,.f select,.f textarea,.prefix input{font-size:16px}
button,input,select,a.btn{touch-action:manipulation}
.ferr{display:block;font-size:13.5px;color:var(--err);margin-top:4px;line-height:1.4}
.ferr::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--err);margin-right:6px;vertical-align:middle}
.f input[aria-invalid="true"],.f select[aria-invalid="true"]{border-color:rgba(255,123,123,.7);background:rgba(255,123,123,.06)}
.f input.okv{border-color:rgba(58,208,122,.5)}
.f .aiuto{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.f .aiuto .btn.link,.help summary{font-size:13.5px;padding:10px 0;min-height:44px;display:inline-flex;align-items:center;gap:6px;color:var(--blue-l);text-decoration:underline;text-underline-offset:2px;cursor:pointer;background:none;border:none;font-family:var(--jak)}
.help{margin-top:8px;border:1px solid var(--line);border-radius:12px;background:rgba(133,183,235,.05);padding:10px 14px}
.help summary{list-style:none;display:flex;align-items:center;gap:8px;font-weight:600}
.help summary::-webkit-details-marker{display:none}
.help[open] summary{margin-bottom:8px}
.help p{font-size:13.5px;color:#CBD9EA;margin:6px 0}
.help .bill{width:100%;max-width:340px;display:block;margin:8px 0}
.chooser{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(239,159,39,.06)}
.chooser p{font-size:13.5px;font-weight:700;margin-bottom:8px}
.chooser .seg{margin-top:0;flex-wrap:wrap}
.chooser .seg button{flex:1 1 40%;padding:10px 8px;font-size:13.5px}
.trust{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:18px 0 0;font-size:13px;color:var(--muted)}
.trust li{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.trust svg{flex:none;margin-top:2px}
.ico{display:inline-block;vertical-align:-3px;margin-right:6px}
.tag{display:inline-flex;align-items:center;gap:6px;background:rgba(58,208,122,.14);color:#b6f0cf;border:1px solid rgba(58,208,122,.35);border-radius:100px;padding:5px 12px;font-size:12px;font-weight:700}
.tempo{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);margin-top:14px}
.next{counter-reset:n;list-style:none;margin-top:14px;text-align:left}
.next li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.next li::before{counter-increment:n;content:counter(n);flex:none;width:26px;height:26px;border-radius:50%;background:rgba(239,159,39,.18);color:var(--amber);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.next li b{display:block}
.drop.mini{padding:14px;margin-top:8px}
@media(max-width:640px){.trust{grid-template-columns:1fr}}

/* Passo 5: documenti precontrattuali */
.docs{list-style:none;margin:10px 0 0;padding:0}
.docs li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(133,183,235,.05);margin-top:8px;font-size:14px}
.docs a{color:var(--ink);font-weight:700;text-decoration:none;flex:1}
.docs a:hover{color:var(--amber);text-decoration:underline}
.docs .tipo{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 6px}

/* Passo 5: riga del riepilogo in modifica */
.kv .kv-edit{display:block;padding:12px 14px;border:1px solid rgba(239,159,39,.5);border-radius:12px;background:rgba(239,159,39,.05);margin-top:8px}
.kv .kv-edit>span{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:10px}
.kv .kv-edit .grid{margin-top:0}

/* dentro .kv le regole '.kv div' (flex, padding, bordo) vanno annullate per la mini-form */
.kv .kv-edit div{display:block;padding:0;border-top:none;justify-content:flex-start;gap:0}
.kv .kv-edit .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:18px}
.kv .kv-edit .f{display:flex;flex-direction:column;gap:6px}
.kv .kv-edit .actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;align-items:center}
.kv .kv-edit .prefix{display:flex}
.kv .kv-edit b{text-align:left}
.kv .kv-edit .grid{margin-top:0}

/* campo compilato correttamente (classe okv messa da setErr) */
.f input.okv{border-color:rgba(58,208,122,.55);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233ad07a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.kv .kv-edit .actions{margin-top:10px}

/* suggerimenti di indirizzo (Google via Omnia) */
.sugg{list-style:none;margin:6px 0 0;padding:4px;border:1px solid rgba(239,159,39,.45);border-radius:12px;background:#031f3b;max-height:260px;overflow:auto;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.sugg li{padding:12px 12px;min-height:44px;border-radius:8px;font-size:15px;color:var(--ink);cursor:pointer;line-height:1.35}
.sugg li:hover,.sugg li.on{background:rgba(239,159,39,.16)}
.sugg li.fonte{font-size:11.5px;color:var(--muted);min-height:0;padding:6px 12px 4px;cursor:default;text-align:right}