/*
 * Adattamenti del tema Sorident al markup WM6.
 * I campi generati da fe() usano classi Bootstrap 5 (form-control, form-select, form-check,
 * invalid-feedback, d-none...) che non esistono nel Bootstrap 3 del tema.
 */

/* Utility BS5 usate dal form-processor */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-flex { display: inline-flex !important; }
.align-items-center { align-items: center !important; }
.gap-2 { gap: .5rem !important; }
.position-relative { position: relative !important; }

/* Form contatti: stesso aspetto dei campi del vecchio sito */
.sr-contact-form .form-control.pm-form-textfield,
.sr-contact-form .form-control.pm-form-textarea {
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.sr-contact-form textarea.pm-form-textarea {
  width: 100%;
}

.sr-contact-form select.select-clinica {
  width: 100%;
  height: 50px;
  padding: 0 13px;
  border-radius: 0;
  background-color: transparent;
  font-family: 'Lato';
  font-size: 16px;
}

/* spaziatura sul blocco del campo, così il messaggio di errore sta subito sotto il campo */
.sr-contact-form > div {
  margin-bottom: 20px;
}

.sr-contact-form .pm-form-textfield,
.sr-contact-form .pm-form-textarea,
.sr-contact-form select.select-clinica {
  margin-bottom: 0 !important;
}

.sr-contact-form .invalid-feedback {
  color: #ef5438;
  font-size: 12px;
  margin: 5px 0 0;
  text-align: left;
}

/* alert "Correggi gli errori" del form-processor (markup Bootstrap 5) sotto il bottone */
.sr-contact-form [errormsgcontainerwrapper] {
  margin-top: 20px;
}

.sr-contact-form .alert.fade.show {
  opacity: 1; /* in Bootstrap 3 .fade resta trasparente senza la classe .in */
}

.sr-contact-form .alert.alert-dismissible {
  position: relative;
  padding-right: 40px;
  margin-bottom: 0;
  text-align: center;
}

.sr-contact-form .alert .btn-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: .6;
}

.sr-contact-form .alert .btn-close::before {
  content: "\00d7";
  font-size: 20px;
  line-height: 20px;
  color: #a94442;
}

.sr-contact-form .is-invalid {
  border-color: #ef5438 !important;
}

.sr-contact-form .form-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.sr-contact-form .form-check-input {
  margin: 0;
}

/* il tema dà margin-top alle label: la sposterebbe sotto la checkbox */
.sr-contact-form .form-check-label {
  margin: 0;
}

.sr-contact-form .form-check .invalid-feedback {
  flex-basis: 100%;
  text-align: center;
  margin: 5px 0 0;
}

.sr-contact-form .pm-form-submit-btn {
  justify-content: center;
}

/* Il bottone WM6 nasce abilitato: niente stile "disabled" del vecchio form */
.sr-contact-form .pm-form-submit-btn[disabled] {
  opacity: .6;
}

/* Titoli del footer: nel vecchio sito erano h6, qui paragrafi (fuori dalla gerarchia dei contenuti) */
.pm-fat-footer .pm-widget-footer p.pm-fat-footer-title {
  font-size: 22px;
  font-weight: 300;
  color: white;
  font-family: 'Raleway';
  display: block;
  overflow: hidden;
  padding: 0;
  text-transform: none;
  line-height: 30px;
  margin: 0 0 10px !important;
}

/* Icona home del menu footer (nel vecchio sito aveva lo stesso id del menu principale) */
.pm-footer-navigation #pm-home-btn-footer {
  font-family: 'FontAwesome';
  font-size: 18px !important;
  line-height: inherit;
}


/*
 * Box convenzioni in home: testo centrato in verticale.
 * Nel vecchio sito la classe "duerighe" andava messa a mano sulle voci lunghe;
 * con il flex il centraggio vale per qualsiasi lunghezza del testo inserito dal CMS.
 */
div.list-convention li,
div.list-convention li.duerighe {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px !important;
  line-height: 1.3;
}

/* lo pseudo-elemento vuoto del tema diventerebbe un elemento flex e sposterebbe il testo */
div.list-convention li::before {
  display: none;
}