/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ==========================================================================
   ANIMAZIONE INTRO LOGO (SOLO FRONTEND PUBBLICO - NO BUILDER)
   ========================================================================== */

/* 1. Il logo parte TRASPARENTE sul sito live */
body.bricks-is-frontend:not(.os-logo-placed) #brxe-590199 {
  opacity: 0 !important;
}

/* 2. Nascondiamo testo, carosello servizi, form e video sul sito live */
body.bricks-is-frontend #brxe-0aaf69,
body.bricks-is-frontend #brxe-dslbuf,
body.bricks-is-frontend .os_carosello_servizi,
body.bricks-is-frontend #brxe-a63bec,
body.bricks-is-frontend #brxe-7dba7d .bricks-background-video-wrapper,
body.bricks-is-frontend #brxe-7dba7d video {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease-in-out 1.5s, visibility 1.2s ease-in-out 1.5s;
  will-change: opacity;
}

/* 3. Il logo posizionato al centro ritorna visibile SENZA TRANSIZIONE */
body.bricks-is-frontend.os-logo-placed #brxe-590199 {
  opacity: 1 !important;
  position: relative;
  z-index: 9999;
  transform-origin: center center;
  will-change: transform;
}

/* 4. Attiva la transizione del logo (dura 2.5s) */
body.bricks-is-frontend.os-intro-moving #brxe-590199 {
  transition: transform 2.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

/* 5. Posizione finale per il logo */
body.bricks-is-frontend.os-intro-complete #brxe-590199 {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* 6. Comparsa in dissolvenza di tutto il resto (dopo il delay) */
body.bricks-is-frontend.os-intro-complete #brxe-0aaf69,
body.bricks-is-frontend.os-intro-complete #brxe-dslbuf,
body.bricks-is-frontend.os-intro-complete .os_carosello_servizi,
body.bricks-is-frontend.os-intro-complete #brxe-a63bec,
body.bricks-is-frontend.os-intro-complete #brxe-7dba7d .bricks-background-video-wrapper,
body.bricks-is-frontend.os-intro-complete #brxe-7dba7d video {
  opacity: 1 !important;
  visibility: visible !important;
}

/* FINE ANIMAZIONE INTRO LOGO */



/* Stile comune bollino */
.os_div_logo_servizio {
    width: 100px;
    height: 100px;
    min-width: 100px;       /* Impedisce il restringimento */
    min-height: 100px;      /* Impedisce il restringimento */
    aspect-ratio: 1 / 1;    /* Forza la proporzione 1:1 (cerchio perfetto) */
    flex-shrink: 0;         /* Impedisce a Flexbox di schiacciarlo */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto; /* Centra il bollino nella slide */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Icona contenuta (con proporzioni bloccate) */
.os_logo_servizio {
    width: 55px;
    height: 55px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Servizio 1 - Diagnostica */
.splide__slide[data-id="brxe-cyjndg"] .os_div_logo_servizio {
    background-color: #63c3d1;
}

/* Servizio 2 - Chirurgia */
.splide__slide[data-id="brxe-aekzaa"] .os_div_logo_servizio {
    background-color: #f08046;
}

/* Servizio 3 - Riabilitazione */
.splide__slide[data-id="brxe-gowqxu"] .os_div_logo_servizio {
    background-color: #4eb051;
}

/* Servizio 4 - Diagnostica */
.splide__slide[data-id="brxe-kezvpn"] .os_div_logo_servizio {
    background-color: #f4a9c5;
}

/* Servizio 5 - Pediatria */
.splide__slide[data-id="brxe-dymheu"] .os_div_logo_servizio {
    background-color: #00aaca;
}

/* Servizio 6 - Laboratorio Analisi */
.splide__slide[data-id="brxe-dwjvfd"] .os_div_logo_servizio {
    background-color: #F8BA8F;
}

/* Servizio 7 - Medicina dello Sport */
.splide__slide[data-id="brxe-dtajnw"] .os_div_logo_servizio {
    background-color: #4EB051;
}

/* Servizio 8 - Visite Specialistiche */
.splide__slide[data-id="brxe-baphtt"] .os_div_logo_servizio {
    background-color: #F08046;
}




/* ==========================================================================
   BREVO FORM MESSAGE PANELS HIDE DEFAULT
   ========================================================================== */

/* Nasconde sempre i banner di errore e successo di default */
.os_brevo_form .sib-form-message-panel,
.os_brevo_form #error-message,
.os_brevo_form #success-message {
  display: none !important;
}

/* Mostra il banner di errore SOLO se Brevo attiva la classe di errore */
.os_brevo_form .sib-form-message-panel--active,
.os_brevo_form #error-message.sib-form-message-panel--active,
.os_brevo_form #success-message.sib-form-message-panel--active {
  display: block !important;
}





/* ==========================================================================
   BREVO FORM STYLES
   ========================================================================== */


.sib-form .entry__field { border: 0px solid #c0ccda !important; }


/* Reset dei contenitori Brevo per sfondo trasparente */
.os_brevo_form .sib-form,
.os_brevo_form .sib-form-container,
.os_brevo_form #sib-container {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Flexbox: Disposizione dei campi in linea */
.os_brevo_form #sib-form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 15px !important;
  width: 100% !important;
}

/* Annulla i wrapper di spaziatura predefiniti */
.os_brevo_form #sib-form > div {
  padding: 0 !important;
  margin: 0 !important;
}

/* I tre blocchi input (Nome, Cognome, Email) */
.os_brevo_form .sib-input.sib-form-block {
  flex: 1 1 180px !important;
  min-width: 160px !important;
  display: flex !important;
  flex-direction: column !important;
}

.os_brevo_form .sib-input .form__entry {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.os_brevo_form .sib-input .form__label-row,
.os_brevo_form .sib-input .entry__field {
  width: 100% !important;
  display: flex !important;
}

/* Input text e email: Nessun bordo salvo il solo bordo inferiore, altezza fissa del pulsante */
.os_brevo_form input[type="text"],
.os_brevo_form input[type="email"],
.os_brevo_form .input {
  background-color: rgba(94, 94, 105, 1) !important;
  border: none !important;
  border-bottom: 2px solid #ffffff !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  min-height: 48px !important;
  height: 48px !important;
}

/* Testo Placeholder Bianco */
.os_brevo_form input::-webkit-input-placeholder { color: #ffffff !important; opacity: 1 !important; }
.os_brevo_form input::-moz-placeholder { color: #ffffff !important; opacity: 1 !important; }
.os_brevo_form input:-ms-input-placeholder { color: #ffffff !important; opacity: 1 !important; }
.os_brevo_form input::placeholder { color: #ffffff !important; opacity: 1 !important; }

/* Bottone ISCRIVITI: Effetto Pillola Bianca */
.os_brevo_form .sib-form-block__button {
  background-color: #ffffff !important;
  color: rgba(94, 94, 105, 1) !important;
  border: none !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 12px 30px !important;
  cursor: pointer !important;
  min-height: 48px !important;
  height: 48px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.3s ease !important;
}

/* Bottone ISCRIVITI: Stato HOVER */
.os_brevo_form .sib-form-block__button:hover {
  background-color: var(--celeste) !important;
  color: rgba(94, 94, 105, 1) !important;
}

/* Checkbox Privacy: Allineata a sinistra e a capo al 100% di larghezza */
.os_brevo_form .sib-optin.sib-form-block {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin-top: 10px !important;
  text-align: left !important;
}

.os_brevo_form .sib-optin .entry_mcq,
.os_brevo_form .sib-optin .form__label-row,
.os_brevo_form .sib-optin .entry__choice {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Testo e Link Privacy in Bianco */
.os_brevo_form .sib-optin label,
.os_brevo_form .sib-optin span,
.os_brevo_form .sib-optin p,
.os_brevo_form .sib-optin a {
  color: #ffffff !important;
  font-size: 13px !important;
  text-align: left !important;
}

.os_brevo_form .sib-optin a {
  text-decoration: underline !important;
}

/* ==========================================================================
   STILI PER MESSAGGI DI ERRORE DEI CAMPI
   ========================================================================== */

/* Formattazione etichetta errore sotto al campo */
.os_brevo_form .entry__error--primary,
.os_brevo_form .entry_errored .entry__error--primary {
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--rosa) !important;
  font-size: 11px !important;
  text-align: left !important;
  padding: 4px 0 0 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* Evita bordi rossi attorno agli input quando in stato errore */
.os_brevo_form .entry_errored input[type="text"],
.os_brevo_form .entry_errored input[type="email"],
.os_brevo_form .entry_errored .input {
  border-bottom: 2px solid var(--rosa) !important;
}

/* Messaggio di Errore Generale / Banner */
.os_brevo_form .sib-form-message-panel {
  width: 100% !important;
  margin-bottom: 15px !important;
}



/* ==========================================================================
   BREVO FORM: FOCUS STATO (Rimuove Outline Blu + Bordo su 4 lati)
   ========================================================================== */

/* Rimuove l'outline blu predefinito del browser su tutti i campi Brevo */
.os_brevo_form input:focus,
.os_brevo_form textarea:focus,
.os_brevo_form select:focus,
.os_brevo_form input[type="text"]:focus,
.os_brevo_form input[type="email"]:focus,
.os_brevo_form .input:focus {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  /* Applica il bordo bianco continuo su tutti e 4 i lati al focus */
  border: 2px solid #ffffff !important;
  padding: 10px 12px !important; /* Compensa il bordo di 2px per evitare scatti visivi */
}


/* ==========================================================================
   BREVO FORM: NASCONDI CAMPO ANTISPAM (HONEYPOT)
   ========================================================================== */

.os_brevo_form .input--hidden,
.os_brevo_form input[name="email_address_check"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================================
   BREVO FORM: NASCONDI ICONA LOADER SUL BOTTONE
   ========================================================================== */

/* Nasconde l'icona SVG quando è presente la classe sib-hide-loader-icon */
.os_brevo_form .sib-form-block__button svg.sib-hide-loader-icon {
  display: none !important;
}

/* Se l'icona dovesse attivarsi durante l'invio, le diamo una dimensione corretta 
   e la posizioniamo a sinistra del testo anziché sopra */
.os_brevo_form .sib-form-block__button svg {
  width: 18px !important;
  height: 18px !important;
  margin-right: 8px !important;
  fill: rgba(94, 94, 105, 1) !important;
}


/* ==========================================================================
   FOOTER COPYRIGHT & FIRMA OFFICINE SOPRANI
   ========================================================================== */

/* Contenitore Flex inlinea */
.os_copyright_text {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important; /* Distanza tra testo, trattino e firma */
}

/* Reset dei margini per tutti gli elementi figli */
.os_copyright_text p,
.os_copyright_text .os_separator,
.os_copyright_text #footer-signature,
.os_copyright_text .signature-wrapper,
.os_copyright_text .signature-content,
.os_copyright_text .signature-info,
.os_copyright_text .signature-company,
.os_copyright_text .signature-logo {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Spaziatura laterale del trattino di separazione */
.os_copyright_text .os_separator {
  margin: 0 4px !important;
}

/* Margine tra il testo "officinesoprani.it" e l'icona del logo */
.os_copyright_text .signature-logo {
  margin-left: 6px !important;
}

/* Nasconde tag <p> o wrapper vuoti inseriti da WordPress/script */
.os_copyright_text p:empty {
  display: none !important;
}


/* ==========================================================================
   BREVO FORM: STILE MESSAGGI E NASCONDIMENTO FORM AL SUBMIT
   ========================================================================== */

/* 1. Nascondiamo di default i messaggi (per sicurezza) */
.os_brevo_form .sib-form-message-panel {
  display: none !important;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* 2. Mostriamo SOLO il messaggio attivo */
.os_brevo_form .sib-form-message-panel--active {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
  
  /* Stile base del contenitore per adattarsi al layout */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 40px 20px !important;
  margin: 0 auto !important;
  text-align: center !important;
  max-width: 100% !important;
}

/* 3. Nascondiamo l'icona SVG di default di Brevo nei messaggi */
.os_brevo_form .sib-form-message-panel--active svg {
  display: none !important;
}

/* 4. Stile del testo dei messaggi (usiamo la palette Pacinotti Life) */
.os_brevo_form .sib-form-message-panel__inner-text {
  font-family: "Poppins" !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Personalizzazione specifica Messaggio di SUCCESSO (Celeste) */
.os_brevo_form #success-message.sib-form-message-panel--active .sib-form-message-panel__inner-text {
  color: var(--celeste) !important;
}

/* Personalizzazione specifica Messaggio di ERRORE (Rosa scuro/Rosso) */
.os_brevo_form #error-message.sib-form-message-panel--active .sib-form-message-panel__inner-text {
  color: var(--rosa) !important;
}

/* 5. MAGIA: Nascondiamo l'intero form (.sib-container) se è attivo un messaggio di successo.
   Usiamo :has() che è supportato in tutti i browser moderni. */
.os_brevo_form:has(#success-message.sib-form-message-panel--active) #sib-container {
  display: none !important;
}

/* In alternativa (o in aggiunta, se vuoi nascondere anche il form in caso di errore)
.os_brevo_form:has(#error-message.sib-form-message-panel--active) #sib-container {
  display: none !important;
}
*/



/* ==========================================================================
   RESPONSIVENESS MOBILE
   ========================================================================== */

@media (max-width: 768px) {
	
/* 1. Contenitore principale: sfondo bianco pulito e rimozione spazio in alto */
  #brxe-dngsvx {
    padding: 0 !important; 
    min-height: 100vh !important;
    min-height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
  }

  /* 2. Blocco in alto: min 70% di altezza e allineato in alto (non al centro) */
  #brxe-7dba7d {
    margin-top: 0 !important;
    flex-grow: 1 !important; 
    height: auto !important;
    min-height: 70vh !important; 
    min-height: 70svh !important; 
    padding-top: 50px !important; /* Spazio dal tetto dello schermo */
    padding-bottom: 30px !important;
    justify-content: flex-start !important; /* Annulla il centro e allinea in alto */
  }

  /* 3. Aumentiamo la distanza tra il logo e il testo H1 */
  #brxe-590199 {
    margin-bottom: 50px !important; /* Crea il giusto distacco dal titolo */
  }
	
	
	.os_brevo_form #sib-form {
	flex-direction: column !important;
	align-items: stretch !important;
	}

	.os_brevo_form .sib-input.sib-form-block,
	.os_brevo_form .sib-form-block__button {
	width: 100% !important;
	flex: 0 0 100% !important;
	}

	.os_brevo_form input[type="text"],
	.os_brevo_form input[type="email"],
	.os_brevo_form .input,
	.os_brevo_form .sib-form-block__button {
	width: 100% !important;
	}

	.os_copyright_text p,
	.os_copyright_text .os_separator {
	display: inline !important; 
	}
	
	
}



/* ==========================================================================
   SITO PACINOTTILIFE: REGOLE GENERALI SUGLI ELEMENTI HTML
   Gli stili dei blocchi stanno nelle classi globali os- di Bricks, impostate dai
   pannelli (utente, 2026-10-21); qui solo ciò che vale per tutta la pagina.
   Le regole sono limitate alle pagine con l'header del sito (:has(.os-header)),
   così il Coming Soon non cambia.
   ========================================================================== */

/* Scorrimento verso le ancore (frecce, torna su): fluido, e l'arrivo resta 40px sotto l'header sticky
   (alto 163px su desktop, 76px fino a 991px: una sola riga con logo e hamburger, utente 2026-10-22) */
html:has(.os-header) {
  scroll-behavior: smooth;
  scroll-padding-top: 203px;
}

@media (max-width: 991px) {
  html:has(.os-header) {
    scroll-padding-top: 116px;
  }
}

/* Chi ha chiesto al sistema di ridurre il movimento: niente scorrimento fluido né animazioni */
@media (prefers-reduced-motion: reduce) {
  html:has(.os-header) {
    scroll-behavior: auto;
  }

  body:has(.os-header) :is(*, ::before, ::after) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus da tastiera: contorno di 2px nel colore primario (D.1); sugli sfondi scuri lo cambia la classe del blocco */
:where(body:has(.os-header)) :focus-visible {
  outline: 2px solid var(--os-turchese);
  outline-offset: 2px;
}

/* Al clic o al tocco niente contorno (utente, 2026-10-23): lo stile del tema lo disegna su ogni :focus; resta solo quello
   da tastiera qui sopra (:focus-visible), necessario a chi naviga senza mouse (WCAG 2.4.7) */
body.bricks-is-frontend:has(.os-header) :focus:not(:focus-visible) {
  outline: none;
}