/* =========================================================
   stile2.css – SOLO PER QUESTA PAGINA (Form richiesta info)
   Basato su stile1.css (grafica coerente con il sito)
   + Fix responsive specifici per tabelle legacy e form.
   ========================================================= */

/* RESET BASE (CONSERVATIVO) */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* BASE */
body{
  font-family:verdana, arial, sans-serif;
  color:#000f90;
  background:#ffffff;
}

/* WRAPPER + PAGE */
.wrapper{
  max-width:1050px;
  margin:0 auto;
  padding:0 12px;
}

.page{
  width:100%;
}

/* =========================================================
   TESTO UNIFICATO: <p> e <li>
   ========================================================= */
p,
li{
  font-family:verdana, arial, sans-serif;
  font-size:1em;
  line-height:1.6;
  letter-spacing:0;
  word-spacing:0;
  text-align:justify;
  color:#000f90;
}

p.center{ text-align:center; }

p.FINE_1{
  text-align:center;
  font-size:0.7em;
  font-weight:bold;
}

/* =========================================================
   ELENCHI
   ========================================================= */
ul,
ol{
  margin:0 0 1.6em 0;
  padding-left:24px;
}

li{ margin:0; }

ul li:last-child,
ol li:last-child{ margin-bottom:0; }

li::marker{ color:#000f90; }

/* =========================================================
   TITOLI
   ========================================================= */
h1,h2,h3{
  text-align:center;
  font-family:verdana, arial, sans-serif;
}

h1{
  font-size:1.6em;
  font-weight:bold;
  color:#00ac4d;
}

h2{ font-size:1.1em; }

h3{
  font-size:1.1em;
  font-weight:bold;
  color:#00ac4d;
}

/* HR */
hr{
  border:0;
  height:5px;
  background:#00ac4d;
  width:100%;
}

/* LINK */
a{
  color:#00ac4d;
  text-decoration:none;
}
a:hover{ color:#ff0000; }

/* =========================================================
   ACCESSIBILITÀ
   ========================================================= */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

/* =========================================================
   IMMAGINI GENERICHE
   ========================================================= */
img{
  max-width:100%;
  height:auto;
  border:0;
}

/* =========================================================
   CENTER (legacy + immagini)
   ========================================================= */
.center{ text-align:center; }

.center img{
  display:block;
  margin:0 auto;
}

/* =========================================================
   BOTTONI (come stile1)
   ========================================================= */
a.button1,
a.button2{
  display:block;
  width:100%;
  text-align:center;
  padding:12px 14px;
  border-radius:8px;
  font-weight:bold;
  margin-top:10px;
}

a.button1{
  background:#EDFFFF;
  border:2px solid #00ac4d;
  color:#000f90;
}

a.button2{
  background:#00ac4d;
  border:2px solid #00ac4d;
  color:#ffffff;
}

/* --- Estendo lo stile anche ai <button class="button2"> e <input class="button2"> usati nel form --- */
button.button2,
input.button2{
  display:inline-block;
  padding:12px 14px;
  border-radius:8px;
  font-weight:bold;
  background:#00ac4d;
  border:2px solid #00ac4d;
  color:#ffffff;
  cursor:pointer;
}

/* =========================================================
   BOX / CELLE
   ========================================================= */
.BOX{ width:100%; }

.bordo_cella{
  border:1px solid #00ac4d;
  border-radius:8px;
  padding:12px;
}

/* =========================================================
   COLONNE FOOTER/MENU (LEGACY)
   ========================================================= */
.terzo{
  float:left;
  width:31%;
  margin-left:2%;
}
.terzo:first-child{ margin-left:0; }

.terzoLeft{
  float:left;
  width:31%;
  margin-left:2%;
}

/* =========================================================
   CLEAR FLOAT
   ========================================================= */
.clear{ clear:both; }

/* =========================================================
   SPAZIO FISSO DOPO BLOCCO DATI AZIENDALI (BOX + FINE_1)
   ========================================================= */
.BOX > p.FINE_1{ margin-bottom:3.2em; }

/* =========================================================
   FIX SPECIFICI PER QUESTA PAGINA (TABELLE + FORM)
   ========================================================= */

/* 1) Le tabelle legacy con width HTML devono diventare fluide */
table{ max-width:100%; }
table[width="1050"],
table[width="1000"]{
  width:100% !important;
  max-width:100% !important;
}

/* 2) Tabelle del form */
.form-table{
  width:100% !important;
  margin:0 auto;
  border-collapse:collapse;
}

/* celle più comode */
.form-table td{
  padding:8px 10px;
  vertical-align:top;
}

/* label leggibili */
.form-table label{ font-weight:bold; }

/* 3) Campi input/textarea usabili su mobile (16px evita zoom iOS) */
.form-table input[type="text"],
.form-table input[type="email"],
.form-table textarea,
textarea[name="description"]{
  width:100%;
  max-width:100%;
  font-size:16px;
  padding:10px 12px;
  border:1px solid #00ac4d;
  border-radius:8px;
  background:#ffffff;
  color:#000f90;
  outline:none;
}

.form-table textarea{
  min-height:72px;
  resize:vertical;
}

textarea[name="description"]{
  min-height:120px;
  resize:vertical;
}

/* checkbox un po' più “centrate” */
.form-table input[type="checkbox"]{
  width:18px;
  height:18px;
}

/* =========================================================
   PATCH MOBILE SAFE (768px)
   - stack colonne footer
   - evita overflow orizzontale
   - form: label sopra, input sotto
   ========================================================= */
@media (max-width:768px){

  /* Colonne legacy -> stack */
  .terzo,
  .terzoLeft{
    float:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    display:block !important;
  }

  .terzo{ margin-top:10px !important; }

  /* Cintura di sicurezza overflow */
  html, body{ overflow-x:hidden; }

  /* Evita overflow da immagini con width HTML */
  img[width]{
    max-width:100% !important;
    height:auto !important;
  }

  /* Form: trasformo le righe in “stack” (label sopra input) */
  .form-table,
  .form-table tbody,
  .form-table tr,
  .form-table td{
    display:block;
    width:100% !important;
  }

  .form-table tr{
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(0,0,0,0.10);
  }

  .form-table td:first-child{
    padding-bottom:6px;
  }

  /* Pulsanti più touch-friendly su mobile */
  button.button2,
  input.button2{
    min-height:44px;
    font-size:16px;
  }

  /* Logo ERMES nel tuo HTML è width="25%": su mobile lo rendo più leggibile */
  .center img[src*="ERMES ELETTRONICA"]{
    width:220px !important;
  }
}

/* =========================================================
   SPAZIATORI (se usati)
   ========================================================= */
.sp-14{ display:block; height:14px; }
.sp-28{ display:block; height:28px; }