/* 
 * FIX CSS per Form con reCAPTCHA
 * Previene spostamento placeholder e marcatori di errore
 * quando viene iniettato il reCAPTCHA
 */

/* ============================================
   FIX 1: Stabilizza input-group con errori
   ============================================ */
.input-group,
.quote-input-group {
  position: relative;
  margin-bottom: 20px; /* Aumentato da 15px per dar spazio agli errori */
  padding-bottom: 2px; /* Padding per contenere gli errori assoluti */
}

/* ============================================
   FIX 2: Errori con posizionamento relativo
   ============================================ */
.error-message,
.error-message2 {
  color: red;
  font-size: 10px;
  display: block;
  margin-top: 3px; /* Spazio sopra l'errore */
  text-align: right;
  /* RIMOSSO position: absolute per evitare overlap */
}

/* Se vuoi mantenere posizione assoluta (per design), 
   usa questo invece del blocco sopra: */
/*
.error-message,
.error-message2 {
  color: red;
  font-size: 10px;
  position: absolute;
  bottom: -18px;
  right: 0;
  z-index: 1;
  white-space: nowrap;
}
*/

/* ============================================
   FIX 3: Checkbox error messaggio
   ============================================ */
.checkbox-error-message {
  color: red;
  font-size: 10px;
  display: block;
  margin-top: 5px;
  text-align: left;
}

/* ============================================
   FIX 4: Container reCAPTCHA
   ============================================ */
.g-recaptcha {
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -99999999px; /* Sposta fuori dallo schermo per evitare spostamenti */
  top: -99999999px;
}

.grecaptcha-badge {
  bottom: -9999999px !important;
  left: -999999999px !important;
  
}

/* ============================================
   FIX 5: Noscript warning styling
   ============================================ */
form[data-recaptcha="true"] noscript {
  display: block;
  margin-bottom: 15px;
}

form[data-recaptcha="true"] noscript div {
  margin: 15px 0;
}

/* ============================================
   FIX 6: Honeypot wrapper (deve essere nascosto)
   ============================================ */
.hp-wrapper {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================
   FIX 7: Label floating - forza il comportamento
   ============================================ */
.input-group label,
.quote-input-group label {
  position: absolute;
  top: 47%;
  left: 12px;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  transition: 0.2s ease all;
  background: white;
  padding: 0 4px;
  font-size: 13px;
  line-height: 19px;
  z-index: 1; /* Sopra l'input */
}

/* Label quando attiva (focus o compilato) */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.quote-input-group textarea:focus + label,
.quote-input-group textarea:not(:placeholder-shown) + label {
  top: -1px;
  left: 10px;
  font-size: 12px;
  color: #007BFF;
  display: block !important;
  background: white;
  padding: 0 4px;
}

/* ============================================
   FIX 8: Input con errori - bordo rosso
   ============================================ */
.input-error {
  border: 1px solid red !important;
}

/* ============================================
   FIX 9: Form rows - gap consistente
   ============================================ */
.quote-form-row {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  gap: 20px;
  justify-content: start;
  max-width: 650px;
  margin-bottom: 0px; /* Rimuove margine perché input-group lo gestisce */
}

.quote-form-row2 {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: 650px;
  margin-bottom: 0px;
}

/* ============================================
   FIX 10: Quote form column - min-height
   ============================================ */
.quote-form-column {
  flex: 1;
  min-width: 250px;
  max-width: 312px;
  position: relative;
  /* Rimuove altezza minima che può causare problemi */
}

/* ============================================
   FIX 11: Responsive - mobile
   ============================================ */
@media (max-width: 699px) {
  .error-message,
  .error-message2 {
    font-size: 9px;
    margin-top: 2px;
  }
  
  .input-group,
  .quote-input-group {
    margin-bottom: 18px;
  }
  
  .g-recaptcha {
    transform: scale(0.9);
    transform-origin: center center;
    margin: 10px auto;
  }
}

@media (max-width: 409px) {
  .g-recaptcha {
    transform: scale(0.85);
  }
}

/* ============================================
   FIX 12: Privacy container - spazio per errore
   ============================================ */
.quote-privacy-check-container {
  display: flex;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 20px; /* Spazio per errore checkbox */
  flex-direction: column; /* Stack verticale per contenere l'errore */
}

/* ============================================
   IMPORTANTE: Assicura che il placeholder sia vuoto
   ============================================ */
.quote-input-field::placeholder,
.quote-input-field-textarea::placeholder {
  color: transparent !important; /* Trasparente per il floating label */
  opacity: 0 !important;
}

/* Quando l'input è vuoto e non ha focus, mostra hint visivo */
.quote-input-field:not(:focus):placeholder-shown,
.quote-input-field-textarea:not(:focus):placeholder-shown {
  background-color: transparent;
}