/* Pagina dettaglio prodotto: selettore tipo di campione (Capello/Urina/Saliva),
   mostrato solo per i prodotti tossicologici, sopra al selettore di quantita' */
.products-tipo-campione {
  margin-bottom: 15px;
}

.products-tipo-campione label {
  display: block;
  color: #4B4B6C;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}

.products-tipo-campione select.tipo-campione-select {
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid #dedced;
  color: #4B4B6C;
  background-color: #FFFFFF;
  font-size: 15px;
  min-width: 200px;
}

/* Filtri categoria dello shop (TUTTI/CONSULENZE/KIT...): stesso stile pillola
   di Accedi/Carrello. Quello selezionato (.active, aggiunta da mixitup) diventa
   pieno viola come Carrello, gli altri restano chiari come Accedi. */
.shorting-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.shorting-menu .filter {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 81px;
  font: normal normal bold 14px Nexa;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s;
  background: #E8E7F4;
  color: #000000;
  margin-left: 0;
}

.shorting-menu .filter::before {
  display: none;
}

.shorting-menu .filter:hover {
  background-color: #d8d6ec;
  color: #000000;
}

.shorting-menu .filter.active {
  background: #7578B0;
  color: #FFFFFF;
}

.shorting-menu .filter.active:hover {
  background-color: #635f97;
  color: #FFFFFF;
}

/* Pagina dettaglio prodotto: descrizione breve sotto al titolo, prima del prezzo */
.products-details-desc .products-short-desc {
  color: #4B4B6C;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Pulsante "Acquista" della pagina di dettaglio prodotto: stesso stile pillola
   di Carrello nel menu (.menu_button/.menu_button_carrello) */
.products-details-desc .products-add-to-cart .add-to-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 81px;
  font: normal normal bold 14px Nexa;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: background-color 0.3s;
  background: #7578B0;
  color: #FFFFFF;
  border-color: #7578B0;
}

.products-details-desc .products-add-to-cart .add-to-cart-btn i {
  font-size: 16px;
}

.products-details-desc .products-add-to-cart .add-to-cart-btn:hover {
  color: #FFFFFF !important;
  background-color: #635f97;
  border-color: #635f97;
}

/* Card prodotti shop: sfondo azzurro chiaro per la foto, blocco viola pieno
   per titolo/descrizione/prezzo con testo bianco, pulsante DETTAGLI a pillola
   (stesso stile pillola gia' usato altrove sul sito). */

/* piu' margine tra le card, uguale su tutti i lati (20px + 20px tra due celle
   adiacenti = 40px), sia in orizzontale (colonne) che in verticale (righe) */
.products-area .row > .mix {
  padding: 20px;
}

.single-products-box {
  background-color: transparent;
  /*border-radius: 24px;*/
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(117, 120, 176, 0.18);
}

.single-products-box .products-image {
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}

.single-products-box .products-image a,
.single-products-box .products-image a img {
  border-radius: 0;
}

/* niente zoom/rotazione al passaggio del mouse sulla foto */
.single-products-box:hover .products-image a img {
  transform: none;
}

/* allinea i box viola tra loro anche quando le descrizioni hanno lunghezze diverse */
.single-products-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.single-products-box .products-content {
  background-color: #7578B0;
  border-radius: 0;
  padding: 28px 25px 60px 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.single-products-box .products-content h3 a {
  color: #FFFFFF;
}

.single-products-box .products-content p {
  color: #FFFFFF;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.single-products-box .products-content .price {
  color: #FFFFFF;
}

.single-products-box .products-content .price span.old {
  color: rgba(255, 255, 255, 0.65);
}

/* stesso stile pillola di Accedi/Carrello nel menu (.menu_button/.menu_button_accedi) */
.single-products-box .products-content .add-to-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 81px;
  font: normal normal bold 14px Nexa;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: background-color 0.3s;
  background: #E8E7F4;
  color: #000000;
  opacity: 1;
}

.single-products-box .products-content .add-to-cart-btn i {
  font-size: 16px;
}

.single-products-box .products-content .add-to-cart-btn:hover {
  color: #000000 !important;
  background-color: #d8d6ec;
}

.cta-inner-area {
  background-image: url(/img/sfondo_1.webp);
  height:auto;
}
.sfondo_principale {
  background-image: url(/img/spirale.webp);
  height:auto;
}

.block_light_1 {
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 86px;
opacity: 1;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
overflow: hidden;

text-align: center;
font: normal normal bold 30px/46px Nexa;
letter-spacing: 0px;
color: #000000;
opacity: 1;
}

/* Card consulenze: il pulsante "Scopri di più" eredita il font a 30px
   pensato per i bottoni grandi della home e trabocca dal box arrotondato */
.block_light_1 .button_light_1 {
    font-size: 18px;
    line-height: 1.3;
    white-space: nowrap;
}

/* Card consulenze: titolo, invece di ereditare il font 30px/46px
   (interlinea molto larga) di .block_light_1 */
.titolo_card_consulenza {
    font-size: 32px;
    line-height: 1.2;
}

/* Card consulenze: testo descrittivo (peso normale) sotto al titolo,
   ridotto rispetto al font 30px ereditato da .block_light_1 */
.testo_card_consulenza {
    font-size: 19px;
    line-height: 1.3;
    font-weight: normal;
}

.block_light_2 {
background-color: rgba(186, 212, 219, 0.4);
background-color: rgba(255,255,255, 0.6);
border-radius: 60px;
opacity: 1;
}

.button_light_1 {
background: #E8E7F4 0% 0% no-repeat padding-box;
border-radius: 81px;
opacity: 1;
display: inline-block;

text-align: center;
font: normal normal bold 30px/46px Nexa;
letter-spacing: 0px;
color: #000000;
text-transform: uppercase;
opacity: 1;
}
.button_2 {
background: #7578B0 0% 0% no-repeat padding-box;
border-radius: 81px;
opacity: 1;
display: inline-block;
text-align: left;
font: normal normal bold 30px/46px Nexa;
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
opacity: 1;
transition: background-color 0.3s;
}

.button_home_1 {
text-align: left;
font: normal normal bold 30px/46px Nexa;
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
opacity: 1;
display: inline-block;

background: #7578B0 0% 0% no-repeat padding-box;
border-radius: 81px;
opacity: 1;
transition: background-color 0.3s;
}

/* Sovrascrive la regola globale "a:hover { color: var(--first-color); }" del tema:
   senza questa regola il testo diventerebbe viola su sfondo viola e sparirebbe */
.button_2:hover,
.button_home_1:hover {
color: #FFFFFF !important;
background-color: #635f97;
}

.button_home_2 {
text-align: left;
font: normal normal bold 30px/46px Nexa;
letter-spacing: 0px;
color: #000000;
text-transform: uppercase;
opacity: 1;
display: inline-block;

background: #E8E7F4 0% 0% no-repeat padding-box;
border-radius: 81px;
opacity: 1;
}

/* .btn-box (home.php, pulsanti sotto il titolo hero): senza display:inline-block sopra,
   quando il secondo pulsante non entra sulla riga il testo andava a capo DENTRO
   il pulsante spezzando la forma a pillola in due pezzi. Su mobile li impiliamo. */
.btn-box {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
}
.btn-box a {
    margin: 0 !important;
}

@media only screen and (max-width: 575px) {
    .btn-box {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-box a {
        text-align: center;
    }
}

.big_title {
text-align: left;
font: normal normal bold 60px/60px Nexa;
letter-spacing: 0px;
color: #7578B0;
opacity: 1;
}

.small_title {
text-align: left;
font: normal normal bold 30px/46px Nexa;
letter-spacing: 0px;
color: #7578B0;
text-transform: uppercase;
opacity: 1;
}

.text_1 {
text-align: left;
font: normal normal 22px/28px Nexa;
letter-spacing: 0px;
color: #988BC2;
opacity: 1;
margin-bottom: 12px;
}

.text_1:last-child {
margin-bottom: 0;
}

.img_dottoressa {
/* Layout Properties */

width: 100%;
height: 500px;

/* UI Properties */

/*background: transparent url('/img/dottoressa.webp') 80% 0% / 150% no-repeat padding-box;*/
background: transparent url('/img/dottoressa.webp');
background-size: cover;
background-position: right;
border-radius: 60px;
opacity: 1;
}

.box_1 {
text-align: left;
letter-spacing: 0px;
color: #7578B0;
opacity: 1;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 60px;
opacity: 1;
}

/* 1. Contenitore principale (per il posizionamento del numero) */
.info-card-container {
    /* Larghezza e margini per il test */
    width: 100%;
    max-width: 460px;
    margin: 20px;
    position: relative; /* Importante per posizionare il cerchio in modo assoluto */
}

/* 2. La Card Rettangolare Arrotondata */
.info-card {
    background-color: white;
    padding: 50px 35px 35px 35px; /* Padding superiore maggiore per il testo, in quanto il numero si sovrappone */
    border-radius: 20px; /* Angoli arrotondati */

    /* Ombra leggera (replica l'effetto "rialzato" e i bordi morbidi) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Ombra morbida e leggera */

    /* Nota: Se vuoi l'effetto sfondo più trasparente che si vede nell'immagine (il quadrato bianco semi-trasparente),
       puoi usare un colore con trasparenza, ad esempio: */
    /* background-color: rgba(255, 255, 255, 0.9); */
}

/* 3. Stile del Numero (il cerchio) */
.step_number_big {
    position: absolute; /* Posizionamento assoluto rispetto al .info-card-container */
    top: -22px; /* Spostato in alto per uscire dalla card */
    left: -22px; /* Spostato a sinistra per uscire dalla card */

    /* Forma e Colore */
    width: 70px;
    height: 70px;
    background-color: #A493C9; /* Colore viola/malva */
    border-radius: 50%; /* Rende l'elemento un cerchio */

    /* Centratura del Testo/Numero */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Stile del testo del numero */
    color: white;
    font-size: 32px;
    font-weight: bold;
    z-index: 2; /* Assicura che sia sopra la card */
}

/* 4. Stili del Testo */
.info-card .title {
    color: #4B4B6C; /* Colore del testo (più scuro del contenuto) */
    font-size: 23px;
    font-weight: 600; /* Semi-grassetto */
    margin-top: 0;
    margin-bottom: 8px;
}

.info-card .content {
    color: #4B4B6C; /* Colore del testo (più chiaro o uguale al titolo) */
    font-size: 17px;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 0;
}

/* ------------------------------------------- */
/* CSS Per il Carosello (Nuovi Stili)          */
/* ------------------------------------------- */

/* Contenitore Visibile */
.slider-wrapper {
    /* Larghezza totale dell'area dove vedrai i 2 box */
    width: 1100px;
    max-width: 100%;

    /* NASCONDI i box che escono da questa larghezza */
    overflow: hidden;

    margin: 40px auto; /* Centra il carosello nella pagina */
    padding: 10px; /* Spazio opzionale se vuoi un po' d'aria */
}

/* Traccia che Contiene Tutti i Box */
.slider-track {
    display: flex; /* Mette tutti i box sulla stessa riga */
    
    /* Prepara la traccia a essere traslata (spostata) con JavaScript */
    transition: transform 0.5s ease-in-out; 
}

/* Ogni Singolo Box all'interno del Carosello */
.info-step-item {
    /* Forza ogni box a prendere il 50% della larghezza del .slider-wrapper 
       (50% significa che 2 box stanno affiancati) */
    width: 50%; 
    flex-shrink: 0; /* Impedisce ai box di ridursi */
    padding: 0 10px; /* Aggiunge un po' di spazio tra i box */
    box-sizing: border-box; /* Assicura che il padding non aumenti la larghezza del 50% */
}

/* ------------------------------------------- */
/* CSS per il Box (Adattato)                   */
/* ------------------------------------------- */

/* Assicurati che il tuo box .info-step si adatti al contenitore padre (50% di larghezza) */
.info-step-item .info-step {
    /* Le dimensioni del box devono essere gestite per non rompere il layout */
    width: 100%; /* Occupa tutto lo spazio del suo genitore (.info-step-item) */
    /* Rimuovi width: 450px; se l'avevi messo nel box originale */
}

/* Per isolare e visualizzare il box */
.info-step-container {
    width: 450px; /* Larghezza del contenitore totale */
    margin: 20px;
    font-family: sans-serif;
}

/* 1. Il Contenitore Principale del Passo (Box Viola) */
.info-step {
     /* Colore di sfondo del box */
    /*background-color: #A493C9;*/
    color: white; /* Colore del testo predefinito */
    padding: 35px 30px;
    border-radius: 15px; /* Angoli arrotondati del box */
    min-height: 220px;

    /* Usa Flexbox per mettere l'immagine e il testo affiancati */
    display: flex;
    align-items: center; /* Allinea verticalmente al centro */
    gap: 25px; /* Spazio tra l'immagine e il testo */
}

/* 2. Il Contenitore dell'Immagine Circolare */
.image-circle {
    /* Dimensioni del cerchio contenitore */
    width: 190px;
    height: 190px;
    border-radius: 50%; /* Rende l'elemento un cerchio */
    
    /* Impostazione dell'immagine di sfondo */
    
    background-size: cover; /* Copre il cerchio senza deformarsi */
    background-position: center; /* Centra l'immagine all'interno del cerchio */
    background-repeat: no-repeat;
    
    position: relative; /* Importante per posizionare il numero al suo interno */
    flex-shrink: 0; /* Impedisce al cerchio di ridursi */
}

.image_circle_background_uno {
	background-image: url('/img/registrati.webp'); /* INSERISCI QUI L'URL CORRETTO */
}
.image_circle_background_due {
	background-image: url('/img/ritiro.webp'); /* INSERISCI QUI L'URL CORRETTO */
}
.image_circle_background_tre {
	background-image: url('/img/prelievo.webp'); /* INSERISCI QUI L'URL CORRETTO */
}
.image_circle_background_quattro {
	background-image: url('/img/pacco.webp'); /* INSERISCI QUI L'URL CORRETTO */
}
.image_circle_background_cinque {
	background-image: url('/img/video_consulenza.webp'); /* INSERISCI QUI L'URL CORRETTO */
}


/* 3. Il Numero (il cerchio più piccolo) */
.step-number {
    position: absolute;
    top: -8px; /* Sposta leggermente in alto */
    right: -8px; /* Sposta leggermente a destra */

    /* Forma e Colore */
    width: 50px;
    height: 50px;
    background-color: #EBE6F3; /* Colore chiaro */
    border-radius: 50%;

    /* Centratura del testo */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Stile del testo del numero */
    color: #A493C9; /* Usa il colore del box per contrasto */
    font-size: 24px;
    font-weight: bold;
}

/* 4. Stili del Testo */
.text-content {
    /* Permette al blocco di testo di occupare lo spazio rimanente */
    flex-grow: 1;
}

.text-content .title {
    font-size: 26px;
    font-weight: bold;
    margin: 0 0 8px 0;
	color: #fff;
}

.text-content .description {
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
	color: #fff;
}

.next-btn {
    right: 0; /* Posiziona a destra */
}

.slider-btn {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%);
    
    /* Stile Visivo */
    background: rgba(0, 0, 0, 0.4); /* Sfondo semi-trasparente */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 20px;
    z-index: 10; /* Assicura che siano sopra i box */
    border-radius: 50%;
    transition: background 0.3s;
}

.slider-btn:hover {
    background: rgba(0, 0, 0, 0.6);
}

.prev-btn {
    left: 0; /* Posiziona a sinistra */
}

.next-btn {
    right: 0; /* Posiziona a destra */
}


.sopratitolo_home {
text-align: left;
font: normal normal bold 30px/46px Nexa;
letter-spacing: 0px;
color: #000000;
text-transform: uppercase;
opacity: 1;
}

.titolo_home {
text-align: left;
font: normal normal bold 60px/60px Nexa;
letter-spacing: 0px;
color: #7578B0;
opacity: 1;
}

.sottotitolo_home {
text-align: left;
font: normal normal bold 30px/46px Nexa;
letter-spacing: 0px;
color: #000000;
opacity: 1
}

.mia-immagine {
  /* Assumi che questa classe sia applicata all'elemento <img> o <div> con il WebP */
  width: 150px;
  height: 150px;
  /* Applica l'animazione */
  animation: rotazione-webP 4s linear infinite;
}

/* Definisci l'animazione Keyframe */
@keyframes rotazione-webP {
  from {
    transform: rotate(0deg); /* Stato iniziale */
  }
  to {
    transform: rotate(360deg); /* Stato finale */
  }
}

.spirale_animata {
  width: 50px;
  height: 50px;
  background-color: #3498db; /* Un colore a tua scelta */
  border-radius: 50%; /* Per farlo apparire come un cerchio */
  position: absolute; /* Per facilitare la centratura o lo spostamento */
  top: 50%;
  left: 50%;
  margin-left: -25px; /* Centratura */
  margin-top: -25px;
  
  /* ⚡ Applica l'animazione */
  animation: spirale 3s ease-in-out infinite alternate;
}

@keyframes spirale {
  /* Punto di partenza */
  0% {
    transform: rotate(0deg) scale(0.5); 
  }
  
  /* Punto centrale (opzionale, ma migliora la fluidità) */
  50% {
    transform: rotate(360deg) scale(1.5);
    background-color: #e74c3c; /* Cambia colore a metà percorso */
  }

  /* Punto finale */
  100% {
    transform: rotate(720deg) scale(2.5);
  }
}

.menu_link {
text-align: left;
font: normal normal bold 20px Nexa;
letter-spacing: 0px;
color: #7578B0;
text-transform: uppercase;
opacity: 1;	
}

/* Stili per l'elemento li, se necessario */
li.menu_link {
  display: inline; /* Rende gli elementi in linea per un tipico menu */
  padding-right: 5px; /* Aggiunge spazio a destra */
  white-space: nowrap; /* Impedisce al link e al separatore "|" di andare a capo */
}

li.menu_link a {
  display: inline; /* Forza il link a restare in linea con il separatore, anche dentro il menu flex */
}

/* Aggiunge il separatore a TUTTI i li */
li.menu_link::after {
  content: " | ";
  display: inline;
  font: normal normal bold 20px/1 Nexa;
  vertical-align: middle;
  color: #7578B0;
}

/* Rimuove il separatore solo dall'ULTIMO li */
li.menu_link:last-child::after {
  content: ""; /* Imposta il contenuto vuoto per l'ultimo elemento */
}

/* Pulsanti Accedi/Carrello nel menu - pillola come i bottoni del sito (button_2),
   in scala ridotta per stare nella barra di navigazione.
   Stanno in un secondo <ul> (.menu_buttons_row), sotto ai link principali. */
@media only screen and (min-width: 768px) {
  .cognizance-nav .navbar-collapse.mean-menu {
    flex-direction: column;
    align-items: flex-end;
  }
  .menu_buttons_row {
    margin-top: 8px;
  }
}

.menu_button_item {
  list-style: none;
  margin-left: 8px;
  white-space: nowrap;
}

.menu_button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 81px;
  font: normal normal bold 14px Nexa;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: background-color 0.3s;
}

.menu_button i {
  font-size: 16px;
}

.menu_button_accedi {
  background: #E8E7F4;
  color: #000000;
}

.menu_button_accedi:hover {
  color: #000000 !important;
  background-color: #d8d6ec;
}

.menu_button_carrello {
  background: #7578B0;
  color: #FFFFFF;
}

/* stessa protezione gia' usata per button_2/button_home_1: senza questa regola
   la voce "a:hover { color: var(--first-color) }" del tema renderebbe il testo
   viola su sfondo viola, rendendolo invisibile */
.menu_button_carrello:hover {
  color: #FFFFFF !important;
  background-color: #635f97;
}

.menu_badge_carrello {
  background: #FFFFFF;
  color: #7578B0;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Copia compatta (solo icona) di Accedi/Carrello per la barra mobile,
   posizionata a sinistra del pulsante hamburger. Generata via JS
   (assets/js/main.js) clonando .menu_buttons_row, cosi' l'informazione
   (sessione utente, conteggio carrello) resta definita una sola volta
   in section_menu_site(). Nascosta di default, mostrata solo sotto i 991px
   (stesso breakpoint usato da meanmenu). */
.menu_buttons_row_mobile {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 19px; /* allinea il centro dei pulsanti al centro del pulsante hamburger (meanmenu) */
  right: 45px; /* spazio per il pulsante hamburger (35px) + margine */
  transform: translateY(-50%);
  z-index: 1000;
}

.menu_buttons_row_mobile .menu_button_item {
  margin-left: 0;
}

.menu_buttons_row_mobile .menu_button {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 0; /* nasconde il testo (Accedi/Carrello), resta solo l'icona */
  gap: 0; /* il gap ereditato da .menu_button spingeva l'icona fuori centro,
             lasciando spazio per il testo (ora invisibile) */
  justify-content: center;
  position: relative;
}

.menu_buttons_row_mobile .menu_button i {
  font-size: 18px;
}

.menu_buttons_row_mobile .menu_badge_carrello {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  font-size: 9px;
}

@media only screen and (max-width: 991px) {
  .menu_buttons_row_mobile {
    display: flex;
  }
  /* la versione originale resta nel menu a tendina ma va nascosta,
     sostituita da quella nella barra in alto */
  .mean-nav .menu_buttons_row {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .menu_button_item {
    margin-left: 0;
    margin-top: 8px;
  }
  .menu_button {
    width: 100%;
    justify-content: center;
  }
}

.title_consulenze {
text-align: left;
font: normal normal 900 45px/68px Nexa;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
}

.testo_cosulenze_color {
font: normal normal bold 30px/30px Nexa;
letter-spacing: 0px;
color: #988BC2;
opacity: 1;
}
.testo_cosulenze_bold {
text-align: center;
font: normal normal bold 30px/46px Nexa;
letter-spacing: 0px;
color: #000000;
opacity: 1;
}

.testo_cosulenze {
text-align: center;
font: normal normal 30px/46px Nexa;
letter-spacing: 0px;
color: #000000;
opacity: 1;
}
.testo_cosulenze_big {
text-align: center;
font: normal normal bold 60px/60px Nexa;
letter-spacing: 0px;
color: #7578B0;
opacity: 1;
}
.testo_cosulenze_small {
text-align: center;
font: normal normal 20px/30px Nexa;
letter-spacing: 0px;
color: #000000;
opacity: 1;
}
.testo_cosulenze_small_bold {
text-align: center;
font: normal normal bold 20px/30px Nexa;
letter-spacing: 0px;
color: #000000;
opacity: 1;
}
.background_consulenze {
	background-image: url(/img/sfondo_a.webp);
	background-size: cover;
}

.background_footer {
	background-image: url(/img/sfondo_2.webp);
	background-size: cover;
	background-position: left top;
}

/* Container calendario principale */
.calendario-container {
    /*width: 300px;*/
    font-family: sans-serif;
    border-radius: 5px;
    overflow: hidden;
}

/* 1. Stile Intestazione Mese */
.intestazione {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #A98ECF; /* Viola chiaro */
    color: white;
    padding: 15px 10px;
	font: normal normal bold 30px/46px Nexa;
}

/* 2. Stile Nomi Giorni Settimana */
.griglia-giorni-settimana {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 colonne uguali */
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
    color: #5D5D5D;
	font: normal normal bold 30px/46px Nexa;
}

/* 3. Stile Griglia Numeri */
.griglia-giorni-numeri {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: #F8F7FA; /* Sfondo chiaro del calendario */
    color: black;
    text-align: center;
    padding-bottom: 10px;
	font: normal normal bold 30px/46px Nexa;
}

.giorno {
    padding: 15px 5px;
    font-weight: bold;
    /* Colonna del sabato (S) */
    /* Colonna della domenica (D) - Gestita con :nth-child(7n) e un colore diverso */
}

/* Stile della colonna della Domenica come nell'immagine */
.griglia-giorni-settimana > :nth-child(7),
.griglia-giorni-numeri > :nth-child(7n) {
    background-color: #A98ECF; /* Viola chiaro per la Domenica */
    color: white;
}

/* Stile per il giorno selezionato */
.giorno.selezionato {
    background-color: #7578b0; /* Colore scuro */
    color: white;
    border-radius: 50%;
	width: 50%;
	margin-left: 25%;
    /* Assicurati che il padding sia sufficiente per un cerchio */
}

/* Stile per i giorni passati (oggi compreso) */
.giorno.passato {
    color: #CCCCCC; /* Rendi il testo grigio chiaro */
    pointer-events: none; /* Disabilita i click su questi elementi */
}

/* Rimuovi l'hover e la selezione per i giorni disabilitati (opzionale) */
.giorno.passato:hover {
    background-color: transparent !important;
    cursor: default;
}

.form-label {
font: normal normal bold 30px/25px Nexa;
letter-spacing: 0px;
color: #7578B0;
text-transform: uppercase;
}

.form-control {
font: normal normal bold 30px/25px Nexa;
letter-spacing: 0px;
color: #8B8B8B;

background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 86px;
opacity: 1;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
padding: 30px;
}

/* Stile per il video */
#video-sfondo {
    position: fixed; /* Lo fissa allo schermo, non scorre con la pagina */
    /*
	right: 0;
    bottom: 0;
	*/
	left: 10%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100; /* Lo sposta dietro tutti gli altri elementi */
    background-size: cover; /* Assicura che copra l'intera area */
}

/* Stile opzionale per il contenitore del contenuto */
.contenuto-pagina {
    position: relative;
    z-index: 1; /* Assicura che il contenuto sia sopra il video */
    color: white; /* Per esempio, rendi il testo leggibile */
    padding: 20px;
    /* Aggiungi altri stili per la leggibilità */
}

/* ============================================= */
/* FIX RESPONSIVE - contiene overflow orizzontale */
/* dovuto a #video-sfondo con left:10%            */
/* ============================================= */
html, body {
    overflow-x: hidden;
}

/* ============================================= */
/* FIX RESPONSIVE - tablet (max-width: 991px)     */
/* ============================================= */
@media only screen and (max-width: 991px) {
    .slider-wrapper {
        width: 100%;
    }
    .image-circle {
        width: 150px;
        height: 150px;
    }
    .info-step {
        padding: 25px 20px;
        gap: 18px;
        min-height: auto;
    }
    .step-number {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
    .text-content .title {
        font-size: 22px;
    }
    .text-content .description {
        font-size: 15px;
    }

    .titolo_home,
    .big_title {
        font-size: 42px;
        line-height: 1.2;
    }
    .sopratitolo_home,
    .sottotitolo_home,
    .small_title,
    .button_home_1,
    .button_home_2,
    .button_2,
    .button_light_1 {
        font-size: 20px;
    }
    .testo_cosulenze_big {
        font-size: 40px;
    }
    .title_consulenze {
        font-size: 32px;
        line-height: 1.3;
    }
    .testo_card_consulenza {
        font-size: 18px;
    }
}

/* ============================================= */
/* FIX RESPONSIVE - mobile (max-width: 767px)     */
/* ============================================= */
@media only screen and (max-width: 767px) {
    /* Carosello: un box alla volta invece di due affiancati */
    .info-step-item {
        width: 100%;
    }
    .info-step {
        flex-direction: column;
        text-align: center;
    }
    .image-circle {
        width: 130px;
        height: 130px;
        margin: 0 auto;
    }
    .step-number {
        top: -5px;
        right: 10px;
    }
    .text-content .title {
        font-size: 20px;
    }
    .text-content .description {
        font-size: 15px;
    }

    .titolo_home,
    .big_title {
        font-size: 32px;
    }
    .sopratitolo_home,
    .sottotitolo_home,
    .small_title,
    .button_home_1,
    .button_home_2,
    .button_2,
    .button_light_1 {
        font-size: 17px;
    }
    .testo_cosulenze_big {
        font-size: 30px;
    }
    .title_consulenze {
        font-size: 26px;
    }
    .testo_card_consulenza {
        font-size: 17px;
    }

    /* Form consulenze: campi meno ingombranti su schermi piccoli */
    .form-label {
        font-size: 18px;
    }
    .form-control {
        font-size: 16px;
        padding: 15px;
    }

    /* Menu mobile: rimuove i separatori "|" pensati per il menu orizzontale desktop */
    .mean-container .menu_link {
        display: block;
    }
    .mean-container li.menu_link::after {
        content: "";
    }
}

/* Carrello: tipo di campione (Capello/Urina/Saliva) sotto al nome prodotto */
.product-name .product-note {
    margin: 5px 0 0;
    font-size: 13px;
    color: #7578B0;
    font-style: italic;
}