/* =========================================================
   FORM NATIVO DI FRAMEWORK360 CON IL DISEGNO DEL SITO
   Il markup non e' piu' quello di Contact Form 7 (.wpcf7) ma
   quello del blocco main/form (.ms-form, .ms-input, .ms-select,
   .ms-checkbox). Qui si rifa' esattamente l'aspetto di forms.css:
   cornice bianca bordata d'arancione, etichette maiuscole in
   grassetto arancione, campi arrotondati, pulsante a pillola.
   Tutto e' confinato dentro .psx-form, il contenitore che la
   pagina mette attorno al blocco.
   ========================================================= */

.psx-form{
  --f-orange:#FF5100;
  --f-orange-dark:#E04600;
  --f-line:rgba(84,89,95,.14);
  --f-ink:#1A1A1A;
  --f-slate:#54595F;
  --f-ease:cubic-bezier(.22,.61,.36,1);

  box-sizing:border-box;
  max-width:760px;
  margin-inline:auto;
  padding:clamp(22px,3.4vw,40px);
  border:1px solid var(--f-orange);
  border-radius:26px;
  background:#fff;
  accent-color:var(--f-orange);
  caret-color:var(--f-orange);
}
.psx-form *,.psx-form *::before,.psx-form *::after{box-sizing:border-box}
.psx-form ::selection{background:rgba(255,81,0,.22);color:inherit}
.psx-form ::-moz-selection{background:rgba(255,81,0,.22);color:inherit}

/* il blocco porta con se' i propri margini: qui non servono */
.psx-form .ms-visual-block,
.psx-form .ms-block-form{margin:0;padding:0}

/* ---------- griglia ----------
   Le classi ms-row/ms-col-* esistono gia' nel tema di Framework360,
   ma il sito importato carica anche il proprio reset: le ridichiaro
   dentro .psx-form cosi' la disposizione non dipende da chi vince. */
.psx-form .ms-form > .ms-row{
  display:flex;flex-wrap:wrap;
  margin-inline:-9px;
}
.psx-form .ms-form-col{padding-inline:9px;margin:0 0 18px;width:100%}
.psx-form .ms-form-col.ms-col-6{width:50%}
.psx-form .ms-form-col.ms-col-12{width:100%}
@media(max-width:640px){
  .psx-form .ms-form-col.ms-col-6{width:100%}
}

/* ---------- etichette: bold arancione ---------- */
.psx-form .ms-form-col > label{
  display:block;
  font-weight:800;
  color:var(--f-orange);
  font-size:13.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.35;
}

/* ---------- campi ---------- */
.psx-form .ms-input,
.psx-form .ms-select,
.psx-form .ms-textarea{
  display:block;
  width:100%;
  margin-top:7px;
  border:1px solid var(--f-line);
  border-radius:14px;
  padding:13px 16px;
  background:#fff;
  font-family:inherit;
  font-size:16px;              /* sotto i 16px iOS ingrandisce da solo */
  font-weight:400;
  line-height:1.4;
  color:var(--f-ink);
  text-transform:none;
  letter-spacing:normal;
  transition:border-color .3s var(--f-ease), box-shadow .3s var(--f-ease);
}
.psx-form .ms-textarea{border-radius:18px;min-height:130px;resize:vertical}
.psx-form .ms-input:focus,
.psx-form .ms-select:focus,
.psx-form .ms-textarea:focus{
  outline:none;
  border-color:var(--f-orange);
  box-shadow:0 0 0 4px rgba(255,81,0,.13);
}
.psx-form .ms-input::placeholder,
.psx-form .ms-textarea::placeholder{color:rgba(26,26,26,.42)}

/* il campo telefono monta intlTelInput: la bandierina non deve
   sfondare l'angolo arrotondato */
.psx-form .iti{display:block;width:100%}
.psx-form .iti .ms-input{margin-top:0}

/* ---------- menu a tendina ----------
   Il select resta nativo (nessuno script lo sostituisce) ma la
   freccia di sistema viene rimpiazzata dal tondo arancione del sito. */
.psx-form .ms-select{
  -webkit-appearance:none;appearance:none;
  padding-right:52px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23FF5100'/%3E%3Cpath d='M7.2 9.4 11 13.2l3.8-3.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:22px 22px;
  cursor:pointer;
}

/* ---------- caselle a scelta multipla ---------- */
.psx-form .ms-radio-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:9px 18px;
  margin-top:10px;
}
.psx-form label.ms-checkbox{
  display:flex;align-items:center;gap:10px;
  margin:0;
  font-weight:600;
  font-size:14.5px;
  line-height:1.35;
  color:var(--f-ink);
  text-transform:none;
  letter-spacing:normal;
  cursor:pointer;
}

/* ---------- riga privacy del plugin GDPR ---------- */
.psx-form .gdpr-container{margin-bottom:0}
.psx-form .gdpr-container label.ms-checkbox{
  align-items:center;
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  color:var(--f-slate);
}
.psx-form .gdpr-container a{color:var(--f-orange);font-weight:700;text-decoration:none}
.psx-form .gdpr-container a:hover{text-decoration:underline}

/* ---------- pulsante di invio ----------
   Il contenitore del pulsante e' una griglia: per centrarlo non basta
   text-align, serve dichiarare l'allineamento del contenitore.
   E il reset del sito importato ridipinge ogni button in hover/focus,
   quindi i colori vanno imposti o il testo sparisce. */
.psx-form .ms-button-container{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top:22px;
  padding-inline:9px;
}
.psx-form .ms-button-container button.ms-btn,
.psx-form .ms-button-container button.ms-btn:hover,
.psx-form .ms-button-container button.ms-btn:focus,
.psx-form .ms-button-container button.ms-btn:active{
  display:inline-block;
  min-height:48px;
  padding:14px 34px;
  border:0;
  border-radius:999px;
  background:var(--f-orange) !important;
  background-color:var(--f-orange) !important;
  color:#fff !important;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(255,81,0,.28);
  transition:background-color .3s var(--f-ease), transform .3s var(--f-ease), box-shadow .3s var(--f-ease);
}
.psx-form .ms-button-container button.ms-btn:hover{
  background:var(--f-orange-dark) !important;
  background-color:var(--f-orange-dark) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(255,81,0,.32);
}
.psx-form .ms-button-container button.ms-btn .ms-inside-button{color:#fff !important}

/* ---------- validazione ---------- */
.psx-form .error{
  border-color:#D93025 !important;
  box-shadow:0 0 0 4px rgba(217,48,37,.12) !important;
}
.psx-form .ms-form-message,
.psx-form .ms-message{margin-top:16px;font-size:14.5px;line-height:1.6}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .psx-form{padding:22px 18px;border-radius:22px}
  .psx-form .ms-form-col > label{font-size:12.5px}
}
@media(max-width:420px){
  .psx-form{padding:18px 14px}
  .psx-form .ms-radio-container{grid-template-columns:1fr}
}