/* ===================================================================
   VB Forms — STILE BASE (comune a tutti i form)
   Caricato automaticamente dal plugin "VB Forms".
   Si attiva sui form con le classi:  vb-form vb-dark
   Le eccezioni di un singolo form vanno in: assets/css/varianti.css
=================================================================== */

.vb-form.vb-dark{
  --brand:#00A1DC;
  --brand-hover:#33B5E4;
  --txt:#FFFFFF;
  --txt-mute:rgba(255,255,255,.45);
  --field:rgba(255,255,255,.06);
  --field-hover:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.14);

  /* >>> ALTEZZA MINIMA del box (solo desktop).
         Il box cresce liberamente col contenuto: questo e' solo il
         minimo, per non farlo diventare minuscolo negli step corti.
         Mettilo a 0 se vuoi adattamento totalmente libero. <<< */
  --box-min-h:380px;

  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  max-width:760px;
  margin:0 auto;

  /* il box */
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px 32px;

  /* struttura verticale: altezza guidata dal contenuto */
  display:flex;
  flex-direction:column;
  min-height:var(--box-min-h);
  height:auto;
  overflow:visible;
  box-sizing:border-box;

  /* il cambio di altezza e' accompagnato, non scatta */
  transition:min-height .35s cubic-bezier(.22,.61,.36,1);
}
.vb-form.vb-dark *{box-sizing:border-box}

/* progress bar: fissa in alto, non scorre */
.vb-form.vb-dark .frm_progress_bar,
.vb-form.vb-dark .frm_rootline_group{
  flex:none;
  margin:0 0 22px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.vb-form.vb-dark .frm_rootline_title{color:var(--txt-mute);font-size:12.5px}
.vb-form.vb-dark .frm_rootline .frm_current_page .frm_rootline_title{
  color:var(--brand);font-weight:700;
}

/* AREA CAMPI: cresce col contenuto, niente scroll interno.
   Cosi con Personen + Geschaeft spuntati insieme tutte le
   assicurazioni restano visibili, senza tagli. */
.vb-form.vb-dark .frm_fields_container{
  flex:1 1 auto;
  overflow:visible;
  padding-right:0;
}

/* PULSANTI: ancorati in basso, sempre visibili */
.vb-form.vb-dark .frm_submit{
  flex:none;
  margin:0;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:12px;
}

/* ---------- campi ---------- */
.vb-form.vb-dark .frm_form_field{margin-bottom:22px}
.vb-form.vb-dark .frm_form_field:last-child{margin-bottom:4px}

/* Campi brevi affiancati su desktop; su mobile tornano a una colonna. */
.vb-form.vb-dark .frm_fields_container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;align-items:start}
.vb-form.vb-dark .frm_fields_container > .frm_form_field:has(textarea),
.vb-form.vb-dark .frm_fields_container > .frm_section_heading,
.vb-form.vb-dark .frm_fields_container > .frm_submit{grid-column:1/-1}
@media (max-width:767px){.vb-form.vb-dark .frm_fields_container{display:block}}
.vb-form.vb-dark .frm_form_field > label,
.vb-form.vb-dark .frm_primary_label{
  display:block!important;
  font-size:14.5px;font-weight:600;color:var(--txt);
  margin-bottom:9px;line-height:1.4;
}
.vb-form.vb-dark .frm_required{color:var(--brand);font-weight:700}
.vb-form.vb-dark .frm_description{
  font-size:12.5px;color:var(--txt-mute);margin-top:6px;line-height:1.5;
}

.vb-form.vb-dark input[type=text],
.vb-form.vb-dark input[type=email],
.vb-form.vb-dark input[type=tel],
.vb-form.vb-dark input[type=number],
.vb-form.vb-dark input[type=date],
.vb-form.vb-dark textarea,
.vb-form.vb-dark select{
  width:100%;
  background:var(--field);
  border:1px solid var(--line);
  border-radius:11px;
  padding:13px 15px;
  font-family:inherit;font-size:15px;color:var(--txt);
  transition:border-color .2s,background .2s,box-shadow .2s;
  outline:none;box-shadow:none;
}
.vb-form.vb-dark textarea{min-height:110px;resize:vertical}
.vb-form.vb-dark input:focus,
.vb-form.vb-dark textarea:focus,
.vb-form.vb-dark select:focus{
  border-color:var(--brand);
  background:var(--field-hover);
  box-shadow:0 0 0 3px rgba(0,161,220,.18);
}
.vb-form.vb-dark input::placeholder,
.vb-form.vb-dark textarea::placeholder{color:var(--txt-mute)}

.vb-form.vb-dark input:-webkit-autofill,
.vb-form.vb-dark input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--txt);
  -webkit-box-shadow:0 0 0 1000px #10333C inset;
  caret-color:var(--txt);
}

.vb-form.vb-dark select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  padding-right:42px;color-scheme:dark;
}
.vb-form.vb-dark select option{background:#0C2A33;color:#fff}

/* FIX: mentre il select e' a fuoco il testo bianco su fondo chiaro
   rendeva invisibile la scelta. Qui il campo diventa chiaro con testo
   scuro finche' e' attivo, cosi la selezione si legge sempre. */
.vb-form.vb-dark select:focus{
  background-color:#FFFFFF!important;
  color:#0C1F25!important;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1F25' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
}
.vb-form.vb-dark select:focus option{background:#fff;color:#0C1F25}
.vb-form.vb-dark input[type=date]{color-scheme:dark}
.vb-form.vb-dark input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6);cursor:pointer}

/* radio e checkbox come card */
.vb-form.vb-dark .frm_radio,
.vb-form.vb-dark .frm_checkbox{margin-bottom:8px}
.vb-form.vb-dark .frm_radio label,
.vb-form.vb-dark .frm_checkbox label{
  display:flex!important;align-items:flex-start;gap:12px;
  background:var(--field);
  border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;margin:0;cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--txt);
  transition:border-color .2s,background .2s;
}
.vb-form.vb-dark .frm_radio label:hover,
.vb-form.vb-dark .frm_checkbox label:hover{
  border-color:rgba(0,161,220,.55);background:rgba(0,161,220,.07);
}
.vb-form.vb-dark .frm_radio input,
.vb-form.vb-dark .frm_checkbox input{
  accent-color:var(--brand);width:18px;height:18px;margin:1px 0 0;flex:none;cursor:pointer;
}
/* card selezionata: doppia strategia.
   1) :has() sui browser che lo supportano
   2) fallback via classe .vb-checked aggiunta dal JS (sempre affidabile) */
.vb-form.vb-dark .frm_radio label:has(input:checked),
.vb-form.vb-dark .frm_checkbox label:has(input:checked),
.vb-form.vb-dark .frm_radio label.vb-checked,
.vb-form.vb-dark .frm_checkbox label.vb-checked{
  border-color:var(--brand)!important;
  background:rgba(0,161,220,.14)!important;
}
/* evita il flash bianco: la label non deve mai avere sfondo di sistema */
.vb-form.vb-dark .frm_radio label,
.vb-form.vb-dark .frm_checkbox label{
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

/* campi condizionali: comparsa morbida, niente scatto */
.vb-form.vb-dark .frm_form_field{
  animation:vbFieldIn .28s ease;
}
@keyframes vbFieldIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- PULSANTI: identici, cambia solo il colore ---------- */
.vb-form.vb-dark .frm_submit .frm_button_submit,
.vb-form.vb-dark .frm_submit input[type=submit],
.vb-form.vb-dark .frm_submit .frm_prev_page,
.vb-form.vb-dark .frm_submit .frm_page_back{
  /* geometria comune */
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:52px!important;
  min-height:52px!important;
  padding:0 32px!important;
  border-radius:100px!important;
  font-family:inherit!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
  cursor:pointer;
  box-sizing:border-box!important;
  margin:0!important;
  transition:background .2s,border-color .2s,color .2s,transform .15s;
}

/* primario */
.vb-form.vb-dark .frm_submit .frm_button_submit,
.vb-form.vb-dark .frm_submit input[type=submit]{
  background:var(--brand)!important;
  color:#fff!important;
  border:2px solid var(--brand)!important;   /* stesso bordo => stessa altezza */
  box-shadow:0 12px 28px -14px rgba(0,161,220,1);
  margin-left:auto!important;                /* spinto a destra su desktop */
}
.vb-form.vb-dark .frm_submit .frm_button_submit:hover,
.vb-form.vb-dark .frm_submit input[type=submit]:hover{
  background:var(--brand-hover)!important;
  border-color:var(--brand-hover)!important;
  transform:translateY(-1px);
}

/* secondario */
.vb-form.vb-dark .frm_submit .frm_prev_page,
.vb-form.vb-dark .frm_submit .frm_page_back{
  background:transparent!important;
  color:var(--txt)!important;
  border:2px solid var(--line)!important;
  box-shadow:none!important;
}
.vb-form.vb-dark .frm_submit .frm_prev_page:hover,
.vb-form.vb-dark .frm_submit .frm_page_back:hover{
  border-color:var(--brand)!important;
  color:var(--brand)!important;
  transform:translateY(-1px);
}

/* ---------- errori ---------- */
.vb-form.vb-dark .frm_error{color:#FF8A8A;font-size:12.5px;font-weight:500;margin-top:6px}
.vb-form.vb-dark .frm_blank_field input,
.vb-form.vb-dark .frm_blank_field textarea,
.vb-form.vb-dark .frm_blank_field select{border-color:#FF8A8A}
.vb-form.vb-dark .frm_error_style{
  background:rgba(220,38,38,.12);border:1px solid rgba(255,138,138,.4);
  color:#FFC9C9;border-radius:12px;padding:13px 16px;font-size:13.5px;margin-bottom:18px;
}

/* titoli di sezione */
.vb-form.vb-dark h3.frm_pos_top,
.vb-form.vb-dark .frm_section_heading h3{
  font-size:18px;font-weight:700;color:var(--txt);
  padding-bottom:11px;margin:8px 0 18px;border-bottom:1px solid var(--line);
}

/* due colonne */
@media(min-width:768px){
  .vb-form.vb-dark .frm_half{width:calc(50% - 8px)!important;display:inline-block;vertical-align:top}
  .vb-form.vb-dark .frm_half + .frm_half{margin-left:14px}
}

/* ---------- MOBILE: box piu alto e adattivo ---------- */
/* ===================================================================
   MOBILE: il form scorre come una pagina normale.
   Niente altezza fissa (sarebbe una gabbia), niente pulsanti sticky.
   Resta appiccicata solo la barra di avanzamento, che dice dove sei.
   =================================================================== */
@media(max-width:767px){

  .vb-form.vb-dark{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    padding:0!important;
    border:none!important;
    background:transparent!important;
    border-radius:0!important;
    display:block!important;
  }

  /* barra di avanzamento fissa in alto */
  .vb-form.vb-dark .frm_progress_bar,
  .vb-form.vb-dark .frm_rootline_group{
    position:sticky;top:0;z-index:5;
    background:#08262B;
    margin:0 0 20px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .vb-form.vb-dark .frm_rootline_title{font-size:12px}

  /* i campi scorrono normalmente con la pagina */
  .vb-form.vb-dark .frm_fields_container{
    overflow:visible!important;
    max-height:none!important;
    padding-right:0;
    display:block;
  }

  /* pulsanti: in fondo, affiancati, IDENTICI tra loro */
  .vb-form.vb-dark .frm_submit{
    position:static!important;
    display:flex!important;
    flex-direction:row!important;
    gap:10px;
    margin:28px 0 0!important;
    padding:20px 0 0!important;
    border-top:1px solid var(--line);
    background:transparent!important;
  }
  .vb-form.vb-dark .frm_submit .frm_button_submit,
  .vb-form.vb-dark .frm_submit input[type=submit],
  .vb-form.vb-dark .frm_submit .frm_prev_page,
  .vb-form.vb-dark .frm_submit .frm_page_back{
    flex:1 1 0!important;      /* stessa larghezza esatta */
    padding:0 12px!important;
    font-size:14.5px!important;
    margin:0!important;
  }

  /* campi a piena larghezza */
  .vb-form.vb-dark .frm_half{width:100%!important;margin-left:0!important}

  /* CHECKBOX / RADIO: testo che va a capo, mai tagliato */
  .vb-form.vb-dark .frm_radio label,
  .vb-form.vb-dark .frm_checkbox label{
    padding:13px 14px;
    font-size:14px;
    line-height:1.35;
    align-items:center;
    white-space:normal;      /* la parola lunga va a capo */
    word-break:normal;
    overflow-wrap:anywhere;  /* Geschaeftsversicherungen non sborda */
    hyphens:auto;
  }
  .vb-form.vb-dark .frm_radio input,
  .vb-form.vb-dark .frm_checkbox input{margin-top:0}

  /* SEMPRE UNA COLONNA: leggibilita' prima di tutto.
     Niente due colonne: le parole tedesche lunghe diventerebbero
     illeggibili. L'utente scrolla, e va benissimo. */
  .vb-form.vb-dark .frm_opt_container{
    display:block!important;
    grid-template-columns:none!important;
  }
  .vb-form.vb-dark .frm_opt_container .frm_radio,
  .vb-form.vb-dark .frm_opt_container .frm_checkbox{
    margin-bottom:8px!important;
    width:100%!important;
    display:block!important;
  }

  /* titoli di sezione piu compatti */
  .vb-form.vb-dark h3.frm_pos_top,
  .vb-form.vb-dark .frm_section_heading h3{font-size:17px;margin:4px 0 16px}
}

@media (prefers-reduced-motion:reduce){
  .vb-form.vb-dark *,
  .vb-form.vb-dark .frm_form_field{transition:none!important;animation:none!important}
}