/* Global Styles */
body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: top; /* Centrato verticalmente */
  align-items: center; /* Centrato orizzontalmente */
  he---ight: 100vh;
  margin: 0;
  background: linear-gradient(#cbe0ee, #0674b9) fixed;
  padding: 0 20px; /* Padding per evitare che il contenuto tocchi i bordi */
  box-sizing: border-box;
  text-align: center;
}













/* Search Bar Styles */
.search-container {
  width: 100%;
  max-width: 600px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0.6; /* Opacità di default */
  transition: opacity 1.3s ease;  
}

/* Quando l'input è in focus o contiene testo */
.search-container input:focus,
.search-container input:not(:placeholder-shown) {
  opacity: 1;
}

/* Barra di ricerca */
.search-bar {
  display: flex;
  align-items: center;
  justify-content: center; /* Centra tutto orizzontalmente */
  border: 1px solid #d9d9d9;
  border-radius: 30px; /* Maggiore arrotondamento per il bordo */
  background-color: #fff;
  padding: 10px 20px; /* Maggiore padding per aumentare l'altezza */
  box-sizing: border-box;
  transition: box-shadow 0.2s ease-in-out;
  height: 50px; /* Altezza maggiore del campo di ricerca */
}

/* Ombra solo al mouseover */
.search-bar:hover {
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

/* Lente d'ingrandimento */
.search-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-right: 10px; /* Distanza tra icona e campo di input */
}

/* Input di testo */
.search-input {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 5px 10px;
  min-width: 0;
  height: 30px; /* Altezza maggiore per l'input */
  opacity: 1;
  transition: opacity 0.3s ease-out;
}


/* rimuovi la default x del input search*/
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}


/* Placeholder */
.search-input::placeholder {
  color: #5f6368;
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

/* Quando il campo di input è selezionato, nascondi il placeholder */
.search-input:focus::placeholder {
  opacity: 0;
}

/* Dropdown */
.dropdown {
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 16px;
  padding: 5px;
  margin-left: 10px;
  cursor: pointer;
}

/* Clear Icon and Vertical Bar */
.clear-container {
  display: none; /* Nascosto di default */
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
  position: relative;  /* Necessario per usare z-index */
  z-index: 2;  /* Aggiungi z-index per garantire che la X sia visibile sopra gli altri */
}

.vertical-bar {
  width: 1px;
  height: 20px;
  background-color: #d9d9d9;
  margin-right: 10px;
}

.clear-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

/* Mostra la X quando l'input ha del testo o è in focus */
.search-input:not(:placeholder-shown) ~ .clear-container,
.search-input:focus ~ .clear-container {
  display: flex; /* Mostra la X */
}

/* Box sotto il Search Box */
.bottom-box {
  font-size:14px;
  color: white;	
  width: 100%;
  max-width: 600px;  /* La stessa larghezza del logo-container */
  height: 200px;  /* Stessa altezza della sezione del logo */
  background-color: transparent; /* Colore di sfondo del box */
  border-radius: 10px;  /* Arrotondamento angoli */
  margin-top: 20px;  /* Spazio tra il campo di ricerca e il box */
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  .search-bar {
    flex-wrap: nowrap;
    padding: 10px;
  }

  .search-input {
    font-size: 14px;
  }

  .search-dropdown {
    font-size: 14px;
  }

  .vertical-bar {
    height: 16px;
  }

  .bottom-box {
    width: 100%;  /* Larghezza del box rimane al 100% per schermi piccoli */
    height: 75px; /* Mantenere la stessa altezza */
  }
}