/* ---------------------------------------------------------------------------
   Onboarding pubblico (abbonati.html, attiva.html) — stesso linguaggio visivo
   della landing e delle pagine legali. Richiede legal.css caricato PRIMA
   (font-face + reset + palette). Qui solo i componenti del wizard.
   Palette: #0b1a33 navy, #0e1b33 testo, #43506b corpo, #1e7ff5/#0a5fe0 blu,
   #ff6a1a/#ff3d00 arancio, #f7f9fc sfondo.
   Mobile-first: base = 375px, media query solo in allargamento.
   --------------------------------------------------------------------------- */

.ob-wrap { max-width: 880px; margin: 0 auto; padding: 28px 16px 72px; }
@media (min-width: 700px) { .ob-wrap { padding: 44px 40px 90px; } }

.ob-head { text-align: center; margin-bottom: 22px; }
.ob-head h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(26px, 4vw, 38px); line-height: 1.12; letter-spacing: -0.7px;
  color: #0e1b33; margin: 14px 0 8px;
}
.ob-head p { font-size: 15.5px; color: #6b788f; margin: 0; }

/* ---- Stepper -------------------------------------------------------------- */
.ob-stepper {
  display: flex; gap: 6px; margin: 0 0 22px; padding: 4px 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ob-stepper::-webkit-scrollbar { display: none; }
.ob-step-pill {
  flex: 1 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: #8b98af;
  background: #fff; border: 1px solid rgba(14,27,51,0.08);
}
.ob-step-pill .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11.5px; font-weight: 800;
  background: rgba(14,27,51,0.06); color: #8b98af;
}
.ob-step-pill.is-current { color: #0a5fe0; border-color: rgba(30,127,245,0.4); background: rgba(30,127,245,0.06); }
.ob-step-pill.is-current .n { background: linear-gradient(135deg, #1e7ff5, #0a5fe0); color: #fff; }
.ob-step-pill.is-done { color: #087443; border-color: rgba(8,116,67,0.25); }
.ob-step-pill.is-done .n { background: rgba(8,116,67,0.12); color: #087443; }

/* ---- Card / pannelli ------------------------------------------------------ */
.ob-card {
  background: #fff; border: 1px solid rgba(14,27,51,0.08); border-radius: 20px;
  padding: 22px 18px; box-shadow: 0 18px 44px -30px rgba(14,27,51,0.35);
}
@media (min-width: 700px) { .ob-card { padding: 30px 32px; } }
.ob-card h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: -0.3px; color: #0e1b33; margin: 0 0 4px;
}
.ob-card .ob-sub { font-size: 14px; color: #6b788f; margin: 0 0 18px; }

/* ---- Form ----------------------------------------------------------------- */
.ob-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) {
  .ob-grid { grid-template-columns: 1fr 1fr; }
  .ob-grid .span2 { grid-column: span 2; }
}
.ob-field label {
  display: block; font-size: 13px; font-weight: 700; color: #0e1b33; margin-bottom: 6px;
}
.ob-field label .opt { font-weight: 600; color: #8b98af; }
.ob-field input, .ob-field select {
  width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 15px;
  color: #0e1b33; background: #fbfcfe; border: 1px solid rgba(14,27,51,0.14);
  outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ob-field input:focus, .ob-field select:focus {
  border-color: #1e7ff5; box-shadow: 0 0 0 3px rgba(30,127,245,0.15); background: #fff;
}
.ob-field input[aria-invalid="true"] { border-color: #d92d20; }
.ob-field .hint { font-size: 12.5px; color: #8b98af; margin-top: 5px; }
.ob-field .err { display: none; font-size: 12.5px; font-weight: 600; color: #d92d20; margin-top: 5px; }
.ob-field.has-err .err { display: block; }

/* ---- Alert / messaggi ----------------------------------------------------- */
.ob-alert {
  display: none; border-radius: 12px; padding: 12px 15px; margin: 0 0 16px;
  font-size: 14px; font-weight: 600; line-height: 1.5;
}
.ob-alert.is-on { display: block; }
.ob-alert.err { background: rgba(217,45,32,0.07); border: 1px solid rgba(217,45,32,0.35); color: #b42318; }
.ob-alert.ok { background: rgba(8,116,67,0.07); border: 1px solid rgba(8,116,67,0.3); color: #087443; }
.ob-alert.info { background: rgba(30,127,245,0.07); border: 1px solid rgba(30,127,245,0.3); color: #0a5fe0; }
.ob-alert a { color: inherit; }

/* ---- Bottoni -------------------------------------------------------------- */
.ob-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; align-items: center; }
.ob-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease; text-decoration: none;
}
.ob-btn.primary {
  color: #fff; background: linear-gradient(135deg, #1e7ff5, #0a5fe0);
  box-shadow: 0 12px 26px -12px rgba(10,95,224,0.6);
}
.ob-btn.accent {
  color: #fff; background: linear-gradient(135deg, #ff6a1a, #ff3d00);
  box-shadow: 0 14px 28px -12px rgba(255,90,18,0.65);
}
.ob-btn.ghost { color: #0e1b33; background: #fff; border-color: rgba(14,27,51,0.16); }
.ob-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ob-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ob-btn.is-busy { opacity: 0.7; cursor: progress; }
.ob-btn .spin {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff; animation: obspin 0.7s linear infinite; display: none;
}
.ob-btn.is-busy .spin { display: inline-block; }
.ob-btn.ghost .spin { border-color: rgba(14,27,51,0.2); border-top-color: #0e1b33; }
@keyframes obspin { to { transform: rotate(360deg); } }
.ob-actions .grow { flex: 1; }

/* ---- Upload visura -------------------------------------------------------- */
.ob-drop {
  border: 2px dashed rgba(30,127,245,0.4); border-radius: 16px; padding: 26px 16px;
  text-align: center; background: rgba(30,127,245,0.03); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ob-drop:hover, .ob-drop.is-over { border-color: #0a5fe0; background: rgba(30,127,245,0.07); }
.ob-drop .big { font-size: 15.5px; font-weight: 700; color: #0e1b33; }
.ob-drop .sm { font-size: 13px; color: #8b98af; margin-top: 5px; }
.ob-file {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 12px 14px; border-radius: 12px; background: #fbfcfe;
  border: 1px solid rgba(14,27,51,0.1); font-size: 14px;
}
.ob-file .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #0e1b33; }
.ob-file .meta { color: #8b98af; font-size: 12.5px; flex-shrink: 0; }
.ob-file .rm {
  border: 0; background: none; color: #d92d20; font-weight: 700; font-size: 13px;
  cursor: pointer; padding: 4px 8px; border-radius: 8px; flex-shrink: 0;
}
.ob-file .rm:hover { background: rgba(217,45,32,0.08); }

/* ---- Card piani ----------------------------------------------------------- */
.ob-plans { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .ob-plans { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.ob-plan {
  position: relative; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 2px solid rgba(14,27,51,0.1); border-radius: 18px;
  padding: 20px 18px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.ob-plan:hover:not(.is-off) { border-color: rgba(30,127,245,0.45); }
.ob-plan.is-sel { border-color: #0a5fe0; box-shadow: 0 14px 34px -20px rgba(10,95,224,0.5); }
.ob-plan.is-sel::after {
  content: '✓'; position: absolute; top: 12px; right: 12px;
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e7ff5, #0a5fe0); color: #fff; font-size: 13px; font-weight: 800;
}
.ob-plan .pname {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 0.5px; text-transform: uppercase; color: #0a5fe0;
}
.ob-plan .pprice { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -1px; color: #0e1b33; }
.ob-plan .pprice .per { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: #8b98af; }
.ob-plan .pdesc { font-size: 13.5px; line-height: 1.55; color: #4a5670; flex: 1; }
.ob-plan.is-off { cursor: not-allowed; background: #f4f6fa; border-color: rgba(14,27,51,0.08); }
.ob-plan.is-off .pname, .ob-plan.is-off .pprice { color: #9aa5ba; }
.ob-plan.is-off .pdesc { color: #9aa5ba; }
.ob-plan .pbadge {
  align-self: flex-start; display: inline-flex; padding: 4px 10px; border-radius: 999px;
  background: rgba(217,45,32,0.08); border: 1px solid rgba(217,45,32,0.25);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; color: #b42318;
}
.ob-plan .pwhy {
  font-size: 13px; line-height: 1.5; color: #7a4a2a; background: rgba(255,106,26,0.07);
  border: 1px dashed rgba(255,106,26,0.5); border-radius: 10px; padding: 9px 11px;
}
.ob-plan .pcta { font-size: 13.5px; font-weight: 700; color: #0a5fe0; text-decoration: underline; cursor: pointer; }

/* ---- OTP ------------------------------------------------------------------ */
.ob-otp {
  width: 100%; max-width: 260px; text-align: center; letter-spacing: 10px;
  font-family: 'Space Grotesk', monospace; font-size: 26px; font-weight: 700;
  padding: 12px 8px 12px 18px; border-radius: 14px; color: #0e1b33;
  border: 1px solid rgba(14,27,51,0.16); background: #fbfcfe; outline: none;
}
.ob-otp:focus { border-color: #1e7ff5; box-shadow: 0 0 0 3px rgba(30,127,245,0.15); }

/* ---- Contratto ------------------------------------------------------------ */
.ob-contract {
  height: min(46vh, 420px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(14,27,51,0.14); border-radius: 14px; background: #fbfcfe;
  padding: 16px 16px 22px;
}
.ob-contract pre {
  margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.8px;
  line-height: 1.65; color: #2e3a52; white-space: pre-wrap; word-break: break-word;
}
.ob-scrollnote {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: #b23c00;
}
.ob-scrollnote.is-ok { color: #087443; }
.ob-checks { margin-top: 18px; border: 0; padding: 0; min-inline-size: 0; }
.ob-checks:disabled { opacity: 0.45; }
.ob-check { display: flex; gap: 11px; align-items: flex-start; padding: 9px 2px; }
.ob-check input[type="checkbox"] {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; accent-color: #0a5fe0; cursor: pointer;
}
.ob-check label { font-size: 14px; line-height: 1.55; color: #43506b; cursor: pointer; }
.ob-check label b { color: #0e1b33; }
.ob-check .tag { font-size: 12px; font-weight: 700; color: #8b98af; }
.ob-vessatorie {
  margin-top: 18px; border-radius: 14px; padding: 16px;
  background: rgba(255,106,26,0.05); border: 1.5px solid rgba(255,106,26,0.45);
}
.ob-vessatorie h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700;
  color: #8a2f00; margin: 0 0 8px;
}
.ob-vessatorie .formula { font-size: 13.5px; line-height: 1.6; color: #5c4632; margin: 0 0 10px; }
.ob-sign { margin-top: 18px; border-top: 1px solid rgba(14,27,51,0.08); padding-top: 18px; }

/* ---- Riepilogo / successo ------------------------------------------------- */
.ob-summary { display: grid; grid-template-columns: 1fr; gap: 6px 18px; margin: 14px 0; }
@media (min-width: 640px) { .ob-summary { grid-template-columns: auto 1fr; } }
.ob-summary dt { font-size: 13px; font-weight: 700; color: #8b98af; }
.ob-summary dd { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #0e1b33; overflow-wrap: anywhere; }
.ob-done { text-align: center; padding: 14px 4px; }
.ob-done .ico {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff;
  background: linear-gradient(135deg, #1e7ff5, #0a5fe0); box-shadow: 0 16px 34px -14px rgba(10,95,224,0.6);
}
.ob-done h2 { margin-bottom: 8px; }
.ob-done p { font-size: 15px; color: #43506b; margin: 0 0 8px; }

/* ---- Requisiti password (attiva.html) ------------------------------------- */
.ob-reqs { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.ob-reqs li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #6b788f; }
.ob-reqs li::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: rgba(14,27,51,0.07); display: inline-block;
  background-position: center; background-repeat: no-repeat;
}
.ob-reqs li.is-ok { color: #087443; font-weight: 600; }
.ob-reqs li.is-ok::before {
  background-color: rgba(8,116,67,0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23087443' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* honeypot: fuori schermo, mai display:none (alcuni bot lo saltano) */
.ob-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }