/* ////////////////////////////  COLORI  ////////////////////////////////////////////////////////////*/
:root {
  /* GENERALE */
  --testo: #47594c; /*Testo var(--testo)*/
  --riga-divisoria: #999999; /* Riga Divisoria, Select:Hover, Input:hover var(--riga-divisoria)*/
  --sfondo: #d1d1d1; /* Sfondo Select + input border  var(--sfondo)*/
  --bottone-primario: #6e8275; /* Bottone Primario  var(--bottone-primario)*/
  --bottone-primario-hover: #8fa998; /* Bottone Primario Hover  var(--bottone-primario-hover)*/
  --bottoni-secondari: #bf8a72; /* Bottoni Secondari  var(--bottoni-secondari) */
  --colore-bottoni: #ffffff; /* Colore dentro i bottoni  var(--colore-bottoni) */

  /*CARD*/
  --sfondo-card: #f8f9fa; /* Sfondo Card e input sfondo var(--sfondo-card)*/
  --prezzo-card: #ff7855; /* Prezzo Card var(--prezzo-card)*/
  --bordo-card: #d3d3d3; /* Bordo delle card var(--bordo-card)*/
  --ombreggiatura-card: #a67a64; /* Ombra leggera per dare profondità  var(--ombreggiatura-card)*/
  --description-card: #666666; /* Description Card var(--description-card)*/
  --description-radius-card: #e0e0e0; /* Description Radius Card var(--description-radius-card)*/
  --allergeni-card: #333333; /* Allergeni Card var(--allergeni-card)*/
  --allergeni-text-card: #e74c3c; /* Allergeni Text Card var(--allergeni-text-card)*/
  /*FOOTER*/
  --sfondo-foouter: #d1d1d1; /* Sfondo Footer var(--sfondo-foouter)*/
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  GENERAL RESET  ////////////////////////////////////////////////////////////*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--testo); /* COLORE GENERALE DEL TESTO */
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  H1  ////////////////////////////////////////////////////////////*/

h1 {
  padding: 25px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  SEPARATORE  ////////////////////////////////////////////////////////////*/

hr {
  border: 1px solid var(--riga-divisoria);
  margin: 20px 0;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  HTML E BODY  ////////////////////////////////////////////////////////////*/

/* Imposta il layout di base per il corpo della pagina */
html,
body {
  height: 100%;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: var(--sfondo); /* Colore di sfondo */
  text-align: center;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  CONTAINER  ////////////////////////////////////////////////////////////*/

/* Contenitore per il contenuto principale */
.container {
  flex: 1; /* Permette al contenitore di espandersi e spingere il footer verso il basso */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente il contenuto nella pagina */
  align-items: center;
  gap: 20px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  CAROUSEL  ////////////////////////////////////////////////////////////*/
.card-carousel {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bordo-card);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-images {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* Assicura che il contenitore delle immagini sia largo quanto la card */
}

.carousel-images img {
  width: 300px;
  height: 300px; /* L'immagine si espande anche in altezza */
  object-fit: cover; /* Assicura che l'immagine riempia il contenitore senza distorcersi */
  display: none; /* Nasconde tutte le immagini tranne quella attiva */
}

.carousel-images img.active {
  display: block;
}

.carousel-buttons {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 1;
}

.carousel-buttons button {
  background-color: var(--bottone-primario);
  color: var(--colore-bottoni);
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 2; /* Assicura che i pulsanti siano sopra le immagini */
  opacity: 0.8; /* Leggera trasparenza per l'estetica */
}

.carousel-buttons button:hover {
  background-color: var(--bottone-primario-hover);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  INFOBOX  ////////////////////////////////////////////////////////////*/

.info {
  font-size: 12px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  COPYRIGHT  ////////////////////////////////////////////////////////////*/

.copy {
  font-size: 9px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  LABEL  ////////////////////////////////////////////////////////////*/

/* Stile per le label */
label {
  display: block;
  margin-bottom: 10px;
  font-size: 1.1em;
  background-color: var(--bottoni-secondari); /* Colore per i bottoni */
  color: var(--colore-bottoni);
  padding: 15px 30px;
  border: none;
  border-radius: 25px; /* Angoli smussati */
  font-size: 18px;
  box-shadow: 0 4px 6px var(--ombreggiatura-card); /* Leggera ombra */
  display: inline-block;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  SELECT ED INPUT  ////////////////////////////////////////////////////////////*/

select,
input {
  width: 100%;
  max-width: 400px;
  padding: 10px;
  border: 2px solid var(--sfondo);
  border-radius: 25px; /* Smussa gli angoli */
  margin: 20px 0px; /* SPAZIO */
  box-sizing: border-box;
  font-size: 1em;
  text-align: center;
  background-color: var(--sfondo-card);
}

/* Cambia il bordo al passaggio del mouse */
select:hover,
input:hover {
  border-color: var(--riga-divisoria);
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  FOOTER  ////////////////////////////////////////////////////////////*/

/* Stile per il footer */
footer {
  background-color: var(--sfondo-foouter);
  text-align: center;
  padding: 10px 0;
  width: 100%;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  BUTTON E LINK  ////////////////////////////////////////////////////////////*/

/*LOGIN BUTTON*/

.login {
  position: absolute; /* Oppure usa 'fixed' se vuoi che rimanga visibile anche quando si scrolla */
  top: 20px; /* Distanza dall'alto */
  right: 20px; /* Distanza dal lato destro */
}

.login button {
  padding: 5px 10px; /* Imposta il padding per rendere il bottone più grande e leggibile */
  background-color: var(--bottone-primario); /* Colore di sfondo del bottone */
  border: none; /* Rimuovi il bordo del bottone */
  border-radius: 5px; /* Angoli arrotondati */
  color: white; /* Colore del testo */
  font-size: 16px; /* Dimensione del testo */
  cursor: pointer; /* Cambia il puntatore quando si passa sopra */
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Stile per i bottoni */
button {
  background-color: var(--bottone-primario); /* Colore per i bottoni */
  color: var(--colore-bottoni);
  padding: 15px 30px;
  border: none;
  border-radius: 25px; /* Angoli smussati */
  font-size: 18px;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
  box-shadow: 0 4px 6px var(--ombreggiatura-card); /* Leggera ombra */
  display: inline-block;
}

button:hover {
  background-color: var(--bottone-primario-hover);
  transform: scale(1.05); /* Effetto di ingrandimento */
}

.indietro {
  background-color: var(--bottoni-secondari);
}

.recensione {
  background-color: var(--bottoni-secondari);
}

.pdf {
  background-color: var(--bottone-primario-hover);
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  UL ED LI  ////////////////////////////////////////////////////////////*/

/* Rimuovi i punti dalle liste non ordinate (ul) */
ul {
  list-style: none;
  padding-left: 0; /* Rimuove anche il padding a sinistra */
  padding: 15px 20px;
}

li {
  display: block; /* Rende l'intero elemento cliccabile come un bottone */
  color: var(--colore-bottoni);
  padding: 0px 30px;
  border-radius: 25px; /* Angoli smussati */
  text-decoration: none; /* Rimuove la sottolineatura */
  font-size: 18px;
  margin-bottom: 10px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  CARD  ////////////////////////////////////////////////////////////*/
.card {
  background-color: var(--sfondo-card);
  border-radius: 10px;
  border-color: var(--bordo-card);
  box-shadow: 0 4px 8px var(--ombreggiatura-card);
  padding: 20px;
  margin: 20px 0;
  width: 100%;
  max-width: 400px;
  font-family: Arial, sans-serif;
  text-align: center; /* Aggiunto per centrare il testo */
  overflow: hidden;
}

.card img {
  width: 100%; /* Rende l'immagine larga quanto la card */
  height: auto; /* Mantiene le proporzioni dell'immagine */
  border-radius: 10px 10px 10px 10px; /* Arrotonda gli angoli superiori dell'immagine per un look uniforme */
  object-fit: cover; /* Assicura che l'immagine copra l'area senza deformarsi */
}

.card .title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--allergeni-card);
  margin-bottom: 5px;
}

.card .price {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--prezzo-card);
  margin-bottom: 10px;
}

.card .description {
  font-size: 1rem;
  color: var(--description-card);
  margin-bottom: 10px;
  border-top: 1px solid var(--description-radius-card);
  padding-top: 10px;
}

.card .allergens {
  font-size: 0.9rem;
  color: var(--allergeni-card);
  border-top: 1px solid var(--description-radius-card);
  padding-top: 10px;
  margin-top: 10px;
}

.card .allergens strong {
  color: var(--allergeni-text-card);
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ////////////////////////////  COUNTER  ////////////////////////////////////////////////////////////*/

.visit-counter {
  display: inline-flex;
  align-items: center;
  background-color: var(--sfondo);
  border: 1px solid var(--sfondo-foouter);
  border-radius: 999px;
  padding: 5px 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #24292e;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.visit-counter:hover {
  background-color: var(--description-radius-card);
}

.icon img {
  width: 16px;
  height: 16px;
}

.text {
  margin-right: 5px;
}

.visit-number {
  font-weight: bold;
  color: var(--allergeni-text-card); /* Colore per il numero delle visite */
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/