/* =====================================================
   DISPONIBILITA.CSS
   Stili aggiuntivi per il form "Verifica Disponibilità"
   nella pagina index.php
   Da includere SOLO nella homepage, dopo style.css
   ===================================================== */

/* ─── TEXTAREA NOTE ─────────────────────────────── */
.availability-form textarea {
  padding: 0.75rem 1rem;
  border: 1.5px solid #ddd;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--clr-dark);
  background: var(--clr-warm-white);
  width: 100%;
  resize: vertical;
  min-height: 70px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.availability-form textarea:focus {
  outline: none;
  border-color: var(--clr-forest);
  box-shadow: 0 0 0 3px rgba(44,74,62,0.12);
}

/* ─── CAMPO LARGHEZZA PIENA (nome, note) ────────── */
/* Occupa entrambe le colonne della form-grid */
.form-group--span2 {
  grid-column: 1 / -1;
}

/* ─── DIVISORE TRA DATE E DATI OSPITE ───────────── */
.form-divider-line {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(44,74,62,0.15);
  margin: 0.25rem 0;
}

/* ─── ALERT ERRORI NEL FORM HERO ────────────────── */
.availability-form-wrapper .form-alert {
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-size: 0.84rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.availability-form-wrapper .form-alert--error {
  background: #fdecea;
  border: 1px solid #f5b7b1;
  color: #922b21;
}
.availability-form-wrapper .form-alert strong {
  display: block;
  margin-bottom: 0.3rem;
}
.availability-form-wrapper .form-alert ul {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0;
}
.availability-form-wrapper .form-alert ul li {
  margin-bottom: 0.2rem;
}
.availability-form-wrapper .form-alert a {
  color: #922b21;
  text-decoration: underline;
}

/* ─── ESITO SUCCESSO ────────────────────────────── */
.disp-esito {
  text-align: center;
  padding: 1.5rem 1rem;
}
.disp-esito-icona {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(44,74,62,0.12);
  border: 2px solid rgba(200,169,110,0.5);
  color: var(--clr-gold);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.disp-esito-titolo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-forest-dk);
  margin-bottom: 0.6rem;
}
.disp-esito-testo {
  font-size: 0.88rem;
  color: var(--clr-muted);
  line-height: 1.7;
}

/* ─── RESPONSIVE ────────────────────────────────── */
@media (max-width: 600px) {
  .form-group--span2 {
    grid-column: 1;
  }
}