:root{
  --hw-shadow: 0 20px 50px rgba(0,0,0,.25);
  --hw-radius: 16px;
}

/* Overlay */
.hw-overlay{
  position: fixed; 
  inset:0;
  background: rgba(2,6,12,.55);
  display: none; 
  align-items: center; 
  justify-content: center;
  z-index: 9999; 
  padding: 10px;
  overflow-y: auto;
}

.hw-overlay.is-visible{ 
  display: flex; 
}

/* Modal */
.hw-modal{
  width: 100%; 
  max-width: 460px;
  min-height: 300px;
  background: var(--color-6); 
  color: var(--color-7);
  border-radius: var(--hw-radius);
  box-shadow: var(--hw-shadow);
  position: relative; 
  padding: 24px;
}

/* Close button */
.hw-close{
  position:absolute; 
  top:8px; 
  right:8px;
  width:36px; 
  height:36px; 
  border-radius: 100%!important;
  background:#fff;
  font-size:22px!important; 
  line-height:1; cursor:pointer;
  padding: 0;
  z-index: 1000; 
  color: var(--color-7);
  outline: none;
}

/* Slides */
.hw-slides{ position: relative; min-height: 280px; }
.hw-slide{ display:none; }
.hw-slide.is-active{ display:block; }

/* Typography */
.hw-title{ font-size: 28px; line-height: 1.25em; text-align: center; margin: 20px 0px 8px 0; letter-spacing: 0em;}
.hw-title-big { font-size: 32px; line-height: 1.25em; text-align: center; margin: 5px 0px 10px 0; letter-spacing: 0em;}
.hw-title-small{ font-size: 20px; font-weight: 500; text-align: center; margin: 15px 0 20px; line-height: 1.4em; letter-spacing: -0.01em;}
.hw-subtitle{ color: var(--color-7); margin: 0 0 16px; text-align: center; line-height: 1.4em; letter-spacing: -0.01em; font-size: 18px;}

/* Buttons */
.hw-choices {
  display: flex;
  flex-direction: column;   /* pulsanti in colonna */
  gap: 12px;                /* spaziatura verticale */
  margin-top: 12px;
  align-items: center;      /* centra orizzontalmente */
}

.hw-choices .hw-btn {
  width: 100%;              /* pulsante prende tutta la larghezza */
  max-width: 300px;         /* ma non oltre questa */
  min-height: 70px;
  text-transform: none !important;
  font-size: 18px;
}

.hw-choices .hw-btn:last-child{
  margin-bottom: 6px;
}

/*@media (min-width: 480px){ .hw-choices{ grid-template-columns: 1fr 1fr; } }*/

.hw-btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:8px;
  padding: 12px 14px;
  border-radius: 8px;
  cursor:pointer; 
  font-weight:600;
  min-height: 50px;
  text-transform: unset;
}

/* Forms */
.hw-form{ display:grid; gap:12px; margin-top: 8px; }
.hw-label{ display:grid; gap:6px; font-size: 16px; }
.hw-input{
  width:100%; 
  padding: 12px 12px;
  /*border-radius: 12px;
  font-size: 16px; */
  outline: none;
}
/*.hw-input:focus{
  border-color: var(--hw-primary);
  box-shadow: 0 0 0 2px rgba(14,165,233,.15);
}*/
.hw-checkbox {
  display: inline;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.4em;
}

.hw-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.hw-checkbox a{
  text-decoration: underline;
}

.hw-checkbox a:hover{
  text-decoration: none;
}

/* Stato errore sugli input e checkbox */
.hw-input.is-invalid {
  border-color: #ef4444 !important; /* rosso */
  box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
}

.hw-checkbox.is-invalid {
  border: 1px solid #ef4444;
  border-radius: 6px;
  padding: 6px;
  background: rgba(239,68,68,0.05);
}

/* Discount code */
.hw-input-code{ letter-spacing: 1px; font-weight: 700; text-transform: uppercase; border:0!important;font-size:20px}
.hw-codecopy{ 
  display:flex; 
  gap:8px; 
  align-items: center; 
  border: 4px #ccc dashed;
  padding: 3px;
  background-color: #fff;
}

/* Notes */
.hw-note{ 
  font-size: 15px; 
  color: var(--color-7); 
  min-height: 18px; 
  letter-spacing: 0em;
  margin-bottom: 5px;
  line-height: 1.2em;
}

.hw-note.error {
  color: var(--color-9)
}

.hw-note.success {
  color: var(--color-1);
}

.hw-floating-btn {
  position: fixed;
  bottom: 35px;
  left: 20px;
  letter-spacing: 0!important;
  z-index: 1100;
  background: var(--color-5);
  color: var(--color-12);
  border: solid 2px var(--color-12);
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 16px!important;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /*transition: opacity 0.2s, visibility 0.2s, background 0.2s;
  text-transform: none !important;
  animation: pulse 1s infinite;*/
}

/* Definizione animazione */
/*@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05); 
  }
  100% {
    transform: scale(1);
  }
}*/

.hw-floating-btn:hover {
  background-color: var(--color-12);
  /*animation: none;  ferma pulsare */
  /*transform: scale(1.1);  ingrandisce al hover */
}

.hw-floating-btn:active,
.hw-floating-btn:focus {
  /*animation: none; /* ferma pulsare */
  background-color: var(--color-12);
}

/*.hw-floating-btn:hover {
  background: #0284c7;
}*/

/* Responsive tweaks */
@media (max-width: 420px){

  .hw-title{ 
    font-size: 25px; 
  }

  .hw-btn{ 
    padding: 10px 12px; 
  }

  .hw-floating-btn { 
    left: 10px; 
    bottom: 19px; 
    padding: 8px 10px; 
    font-size: 23px!important;
  }

  .hw-floating-btn-text{
    display: none;
  }

}

/* icona proporzionata al testo */
.hw-floating-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hw-floating-btn-icon svg {
  width: 1.2em;   /* proporzionato al font */
  height: 1.2em;
}

/* testo */
.hw-floating-btn-text {
  line-height: 1;
  white-space: nowrap;
}

/* nascondi quando il popup è aperto */
.hw-floating-btn.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.hw-spinner {
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: inline-block;
  /*animation: hwSpin 0.6s linear infinite;*/
  vertical-align: middle;
}
/*@keyframes hwSpin {
  to { transform: rotate(360deg); }
}*/


/* Modalità inline: sovrascrive l’overlay quando è contenuto in hw-wizard-inline */
.hw-wizard-inline .hw-overlay {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
  z-index: auto !important;
  align-items: initial !important;
  justify-content: initial !important;
  overflow-y: initial !important;
}

/* La “card” del popup diventa un box in pagina */
.hw-wizard-inline .hw-modal {
  min-height: 435px;
  position: static !important;
  width: 100% !important;
  max-width: 700px;
  margin: 1.5rem auto !important;
  /*box-shadow: none !important;*/
  /*border: 1px solid #ddd !important;*/
  border: 0;
  border-radius: 12px !important;
  padding: 30px !important;
}

/* Inline: mostra solo la slide attiva */
.hw-wizard-inline .hw-slide { display: none; }
.hw-wizard-inline .hw-slide.is-active { display: block; }

/* Nascondi la X */
.hw-wizard-inline .hw-close {
  display: none !important;
}

.hw-wizard-inline .hw-title{
  margin-top: 0;
}

/* Rimuovi altezza minima fissa */
.hw-wizard-inline .hw-slides {
  min-height: 0 !important;
}

/* Forza display:block anche se il JS aggiunge is-visible */
.hw-wizard-inline .hw-overlay.is-visible {
  display: block !important;
}

/* Nasconde il pulsante fluttuante se c'è un wizard inline nella pagina */
body:has(.hw-wizard-inline) #hwFloatingBtn,
body:has(.hw-wizard-inline) .hw-floating-btn,
body:has(.hw-wizard-inline) .hwFloatingBtn {
  display: none !important;
}