/* ==================================================================
   PUSTORINO IMMOBILIARE — CSS specifico dei CONTATTI
   Modulo di contatto, captcha, esiti di invio.
   Caricato solo da contatti.php, dopo base.css.
   ================================================================== */

/* ==================================================================
   MODULO DI CONTATTO
   ================================================================== */

.modulo{margin:8px 0 34px}
.campo-esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.riga-modulo{margin-bottom:16px}
.riga-modulo.due{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo-modulo{display:block}
.campo-modulo span{
  display:block;font-family:var(--dato);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fumo);margin-bottom:6px;
}
.campo-modulo span b{color:var(--rosso);font-weight:400}
.campo-modulo input,.campo-modulo textarea{
  width:100%;padding:12px 14px;
  background:var(--bianco);color:var(--grafite);
  border:1px solid var(--linea);border-radius:var(--bordo-r);
  font-family:var(--testo);font-size:15px;
}
.campo-modulo input:focus,.campo-modulo textarea:focus{
  outline:2px solid var(--rosso);outline-offset:1px;border-color:transparent;
}
.campo-modulo textarea{resize:vertical;min-height:120px}
.nota-campo{font-size:12.5px;color:var(--fumo);margin:-8px 0 16px}

.captcha-riga{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:end}
.captcha-box{display:flex;align-items:center;gap:8px}
.captcha-box img{
  border:1px solid var(--linea);border-radius:var(--bordo-r);display:block;
  background:var(--carbone);
}
.ricarica-captcha{
  width:40px;height:40px;flex:none;
  border:1px solid var(--linea);border-radius:var(--bordo-r);
  color:var(--fumo);font-size:17px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
.ricarica-captcha:hover{border-color:var(--rosso);color:var(--rosso)}

.campo-privacy{display:flex;gap:11px;align-items:flex-start;margin:18px 0 4px;font-size:14px}
.campo-privacy input{margin-top:3px;accent-color:var(--rosso);width:17px;height:17px;flex:none}
.campo-privacy a{color:var(--rosso);text-decoration:underline;text-underline-offset:2px}
.campo-privacy b{color:var(--rosso);font-weight:400}

.esito-ok,.esito-no{
  display:flex;gap:13px;align-items:flex-start;
  padding:16px 18px;border-radius:var(--bordo-r);margin-bottom:24px;font-size:14px;
}
.esito-ok{background:rgba(63,178,127,.12);border:1px solid rgba(63,178,127,.4)}
.esito-ok i{color:var(--verde);font-size:20px;margin-top:1px}
.esito-ok strong,.esito-no strong{display:block;color:var(--grafite);margin-bottom:2px}
.esito-no{background:rgba(216,31,38,.08);border:1px solid rgba(216,31,38,.35)}
.esito-no i{color:var(--rosso);font-size:20px;margin-top:1px}
.esito-no ul{margin:6px 0 0 18px}
.esito-no li{margin-bottom:3px}

.recapiti-diretti{margin-top:34px;padding-top:10px;border-top:1px solid var(--linea)}
.recapiti-diretti .voce-contatto a{color:var(--grafite)}
.recapiti-diretti .voce-contatto a:hover{color:var(--rosso)}


/* ==================================================================
   LAYOUT DELLA PAGINA CONTATTI
   Fascia superiore: recapiti a sinistra, mappa a destra, stessa
   altezza. Modulo centrato sotto. Cosi' la mappa non deve piu'
   allungarsi per pareggiare la colonna del form: era il motivo per
   cui su desktop risultava troppo alta.
   ================================================================== */

.contatti-alto{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--linea);border-radius:var(--bordo-r);overflow:hidden;
  margin-bottom:56px;
}
.contatti-recapiti{padding:48px 46px;background:var(--bianco);display:flex;flex-direction:column}
.contatti-recapiti h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:16px 0 10px}
.contatti-recapiti .recapiti-diretti{margin-top:14px;border-top:0;padding-top:0}
.contatti-recapiti .azioni-contatto{margin-top:auto;padding-top:26px}

/* la mappa riempie la sua meta' e prende l'altezza dei recapiti,
   senza minimi esagerati: niente piu' colonna troppo lunga.
   L'iframe di Google non ha un'altezza propria: gliela diamo noi
   con position:absolute dentro un contenitore che si allunga quanto
   la colonna accanto. */
.contatti-alto .mappa-google{position:relative;background:var(--chiaro-2);min-height:100%}
.contatti-alto .mappa-google iframe{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}

/* modulo centrato, largo il giusto per restare leggibile */
.contatti-modulo{max-width:680px;margin:0 auto}
.contatti-modulo-testa{text-align:center;margin-bottom:28px}
.contatti-modulo-testa .occhiello{justify-content:center}
.contatti-modulo-testa h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:14px 0 12px}
.contatti-modulo-testa > p{color:var(--fumo)}

@media (max-width:900px){
  .contatti-alto{grid-template-columns:1fr}
  /* impilate, la mappa torna ad altezza fissa contenuta */
  .contatti-alto .mappa-google{min-height:0;height:340px}
  .contatti-recapiti{padding:36px 28px}
}

@media (max-width:620px){
  .riga-modulo.due{grid-template-columns:1fr}
  .captcha-riga{grid-template-columns:1fr}
  .contatti-recapiti{padding:30px 22px}
}