/* CONTATTI - stile coerente e pulito */



.contact-list-container {

  box-sizing: border-box;

  width: 100%;

  max-width: 800px;

  margin: 0 auto;

  padding: 2rem 5%;

  color: #121212;

}



.contact-list-container h1 {

  margin-bottom: 1.5rem;

  font-size: clamp(26px, 3vw, 32px);

  line-height: 1.2;

}





/* Form layout */

.contact-list-container form {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}



.input-row {

  display: flex;

  flex-wrap: wrap;

  gap: 2rem;

}



.section-input {

  position: relative;

  flex: 1;

  min-width: 260px;

}



/* Input base */

.section-input input,

.section-input textarea {

  width: 100%;

  padding: 1.2rem 0.8rem 0.6rem;

  border: none;

  border-bottom: 1px solid #bdbdbd;

  font-size: 16px;

  background: transparent;

  color: inherit;

  outline: none;

  transition: border-color 0.2s ease;

  resize: vertical;

}



.section-input textarea {

  min-height: 120px;

}



/* Label flottante */

.section-input label {

  position: absolute;

  left: 8px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 16px;

  color: #666;

  pointer-events: none;

  transition: all 0.2s ease;

}



/* Stato attivo (focus o con valore) */

.section-input.active label {

  top: -8px;

  font-size: 12px;

  color: #000;

}



/* Focus effetto */

.section-input input:focus,

.section-input textarea:focus {

  border-bottom: 2px solid #000;

}



/* Pulsante */

.submit-button {

  background: #000;

  color: #fff;

  border: none;

  padding: 14px 28px;

  font-size: 16px;

  font-weight: 500;

  cursor: pointer;

  transition: background 0.2s ease, transform 0.15s ease;

}



.submit-button:hover {

  background: #333;

  transform: translateY(-2px);

}



/* Responsività */

@media (max-width: 750px) {

  .input-row {

    flex-direction: column;

    gap: 1.5rem;

  }

}

/* PER GLI STEP DELLA REGISTRAZIONE */

 .custom-select {

      position: relative;

      width: 250px;

      font-family: Arial, sans-serif;

      user-select: none;

    }

    .selected {

      padding: 8px;

      border: 1px solid #ccc;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: space-between;

    }

    .selected .label {

      display: flex;

      align-items: center;

    }

    .selected img {

      width: 25px;

      height: 15px;

      margin-right: 10px;

      object-fit: cover;

      border: 1px solid #ccc;

    }

    .options {

      position: absolute;

      top: 100%;

      left: 0;

      right: 0;

      max-height: 200px;

      overflow-y: auto;

      border: 1px solid #ccc;

      background: #fff;

      z-index: 1000;

      display: none;

    }

    .option {

      padding: 5px 8px;

      display: flex;

      align-items: center;

      cursor: pointer;

    }

    .option:hover {

      background-color: #f0f0f0;

    }

    .option img {

      width: 25px;

      height: 15px;

      margin-right: 10px;

      object-fit: cover;

      border: 1px solid #ccc;

    }

    /* SELECT base – coerente con input/textarea */

.section-input select {

  width: 100%;

  padding: 1.2rem 2.2rem 0.6rem 0.8rem; /* spazio a dx per la freccia */

  border: none;

  border-bottom: 1px solid #bdbdbd;

  font-size: 16px;

  background: transparent;

  color: inherit;

  outline: none;

  transition: border-color 0.2s ease;

  appearance: none;             /* reset nativo */

  -webkit-appearance: none;

  -moz-appearance: none;



  /* Freccia custom (SVG inline) */

  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');

  background-repeat: no-repeat;

  background-position: right 8px center;

  background-size: 16px 16px;

}



/* Focus coerente */

.section-input select:focus {

  border-bottom: 2px solid #000;

}



/* Stato placeholder (opzione disabilitata e selezionata) */

.section-input select option[disabled][selected] {

  color: #666;

}



/* Disabilitato */

.section-input select:disabled {

  opacity: 0.6;

  cursor: not-allowed;

}



/* Label flottante anche per select:

   quando il container ha .active (gestita via JS sotto) */

.section-input.active label {

  top: -8px;

  font-size: 12px;

  color: #000;

}



/* (Opzionale) stato errore se aggiungi .has-error al container */

.section-input.has-error select {

  border-bottom-color: #d32f2f;

}

.section-input.has-error label {

  color: #d32f2f;

}

/* Allinea il “fake select” allo stile input */

.custom-select .selected {

  padding: 1.2rem 2.2rem 0.6rem 0.8rem;

  border: none;

  border-bottom: 1px solid #bdbdbd;

  background: transparent;

  font-size: 16px;

  color: inherit;

  transition: border-color .2s ease;

}

.custom-select:focus-within .selected {

  border-bottom: 2px solid #000;

}

.custom-select .options {

  border: 1px solid #bdbdbd;

  border-top: none;

  box-shadow: 0 8px 24px rgba(0,0,0,.08);

}

.custom-select .option {

  padding: 10px 12px;

}