/* Reset de márgenes y padding */
* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

/* Estilos generales */
body {
  background-color: #f4f4f4;
  color: #333;
  font-family: Arial, sans-serif;
}

/* Encabezado general */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #ffffff;
  font-size: 18px;
}

.logo-empresa, .logo-ayuntamiento {
  height: 70px;
  object-fit: contain;
}

.logo-ayuntamiento {
  display: block;
  margin: 0 auto;
}


.header-right {
  display: flex;
  align-items: center;
  margin: 10px;
}

/* Diseño del botón de cambio de idioma */
.language-selector {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Alinea los elementos con espacio entre ellos */
  padding: 1px 8px; /* Añadimos un poco de espacio dentro del bloque */
  background-color: #f8f8f8; /* Fondo gris suave para el contenedor */
  border: 2px solid #ccc; /* Borde sutil */
  border-radius: 25px; /* Bordes redondeados elegantes */
  cursor: pointer; /* Indicamos que es clickeable */
  font-size: 16px; /* Tamaño de la fuente */
  transition: background-color 0.3s, border-color 0.3s; /* Animación suave para los cambios de color */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil para darle profundidad */
  width: auto; /* Cambiar de '180px' a 'auto' para ajustarse al contenido */
  max-width: 160px; /* Añadir un max-width para controlar el tamaño máximo */
  margin-left: auto; /* Esto mueve el botón hacia la derecha */
}

.language-selector:hover {
  background-color: #e0e0e0; /* Fondo más oscuro al pasar el ratón */
  border-color: #565656; /* Borde azul cuando pasa el ratón */
}

.language-selector .fa-globe {
  font-size: 20px; /* Icono más grande */
  color: #000000; /* Color azul para el icono */
  margin-right: 8px; /* Espacio entre el icono y el select */
  transition: color 0.3s; /* Animación suave para el color del icono */
  flex-shrink: 0; /* Evita que el icono se reduzca */
}

.language-selector select {
  border: none; /* Eliminamos el borde predeterminado */
  outline: none; /* Eliminamos el contorno al enfocar */
  background-color: transparent; /* Fondo transparente */
  padding: 1px 1px; /* Espaciado interno */
  font-size: 17px; /* Tamaño de texto */
  color: #333; /* Color del texto */
  width: 100%; /* El select ocupa todo el espacio disponible */
  cursor: pointer; /* Cursor de interacción */
  transition: background-color 0.3s; /* Transición suave para el color de fondo */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente más moderna */
  flex-grow: 1; /* Hace que el select ocupe todo el espacio disponible */
  vertical-align: middle;
  margin: 1px;
}

.language-selector select:hover {
  background-color: #f0f0f000; /* Fondo más claro al pasar el ratón sobre el select */
}

.language-selector select:focus {
  background-color: #e0e0e000; /* Fondo cuando el select está enfocado */
  border-radius: 5px; /* Bordes redondeados cuando está enfocado */
}

.language-selector .fa-globe:hover {
  color: #646464; /* Cambia el color del icono al pasar el ratón */
}


/* Estilos para el título principal */
h1 {
  font-size: 22px;
  text-align: center;
  color: #2f2f2f;
  margin-bottom: 20px;
}

/* Estilos para los subtítulos de sección */
h2 {
  font-size: 11px;
  text-align: left;
  color: #2f2f2f;
  margin-bottom: 10px;
  font-weight: bold;
}
h2#collection_data {
  margin-left: 20px;
}

/* Estilo para las listas de residuos no admitidos */
ul#prohibited_waste {
  font-size: 11px;
  line-height: 1.6;
  color: #555;
  margin-left: 20px;
}

ul#prohibited_waste li {
  margin-bottom: 8px;
}

/* Línea horizontal */
hr {
  border: 0;
  height: 1px;
  background-color: #ffffff;
  margin: 16px 0;
}

/* Contenedor principal */
main {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Estilo para los enlaces (si se incluyen) */
a {
  color: #4CAF50;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Estilo de la caja de información */
.info-box {
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.first-info-box {
  position: relative;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 600px; /* Hacemos que esta caja sea más estrecha */
}

.second-info-box {
  background-color: #f9f9f9;
}

.info-box p {
  font-size: 11px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 12px;
  text-align: justify;
  text-justify: inter-word; /* Asegura que el espaciado entre las palabras sea uniforme */
}

/* Formulario */
.form-group {
  margin-bottom: 20px;
  margin-top: 5px;
}


/* Contenedor para los campos de dirección (nom del carrer y número del carrer) */
.street-container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Espacio entre los dos campos */
}

.street-container .form-group {
  width: 48%; /* Cada campo ocupa el 48% del ancho */
}

/* Contenedor base para las sugerencias */
#suggestionsStreetName, #suggestionsStreetNumber {
  width: 100%; /* Las sugerencias ocuparán el 100% del ancho disponible */
  max-width: 50%; /* Limita el ancho máximo al 100% */
  box-sizing: border-box; /* Asegura que el padding no haga que el contenedor se desborde */
  margin-top: 5px; /* Espacio entre el input y las sugerencias */
  position: absolute; /* Colocamos las sugerencias por encima de los inputs */
  z-index: 1000; /* Asegura que las sugerencias se muestren sobre otros elementos */
  background-color: #fff; /* Fondo blanco para las sugerencias */
  border: 1px solid #ddd; /* Borde sutil para las sugerencias */
  border-radius: 4px; /* Bordes redondeados */
  display: none; /* Inicialmente, las sugerencias están ocultas */
  max-height: 200px; /* Establece un límite de altura para las sugerencias */
  overflow-y: auto; /* Añade scroll vertical cuando las sugerencias son demasiadas */
}

/* Estilo para los elementos de las sugerencias */
.suggestion-item {
  padding: 10px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  white-space: nowrap; /* Evita que las sugerencias se rompan en varias líneas */
  overflow: hidden; /* Oculta el texto que se desborda */
}

/* Efecto al pasar el ratón */
.suggestion-item:hover {
  background-color: #eaeaea;
}

/* Hacemos las sugerencias más legibles en móviles */
@media (max-width: 600px) {
  #streetName, #streetNumber {
    font-size: 14px; /* Ajustamos el tamaño de los inputs en pantallas pequeñas */
  }
  .suggestion-item {
    font-size: 14px; /* Ajustamos el tamaño de fuente de las sugerencias */
  }
}


#map-container {
  width: 100%;
  height: 450px;
}

#location {
  font-size: 22px;
}

#map {
  width: 100%;
  height: 30%;
}



#applicant_data {
  font-size: 17px;
  margin-bottom: 15px;
  margin-left: 20px;
}

#collection_data {
  font-size: 17px;
  margin-bottom: 15px;
  margin-left: 20px;
  margin: 2px;
}

#collection-items {
  font-size: 17px; /* Tamaño del título */
  font-weight: bold; /* Negrita para el título */
  margin: 6px; /* Ajusta márgenes si es necesario */
  margin-left: 20px;
  margin-top: 8px;
  margin-bottom: 8px;
}

#example-text {
  font-size: 12px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 10px;
  margin-top: 5px;
  margin-left: 20px;
}

#quantity-label {
  font-size: 14px;
  margin-bottom: 15px;
  margin-left: 20px;
}

select {
  width: 35%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-left: 20px;
  margin-bottom: 15px;
}

label {
  font-weight: bold;
  font-size: 14px;
  display: block;
  margin-bottom: 5px;
  margin-left: 20px;
}

input[type="text"], input[type="tel"], input[type="email"], input[type="date"], textarea {
  width: 90%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-left: 20px;
  margin-bottom: 15px;
}

#streetName {
  width: 90%; /* Cada campo ocupa el 48% del ancho */
}

#streetNumber {
  width: 90%;
}
#floor {
  width: 80%;
}

textarea {
  resize: vertical;
  height: 120px;
}


/* Información sobre la empresa */
.corporation-info {
  background-color: #f4f4f4; /* Fondo gris claro para el cuadro */
  padding: 15px; /* Espaciado dentro del cuadro */
  margin: 20px 0; /* Margen arriba y abajo */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
  width: calc(100% - 40px); /* Ocupa el ancho completo pero dejando márgenes */
  margin-left: auto;
  margin-right: auto; /* Centrado */
}

.corporation-info p {
  margin: 0; /* Quitar margen por defecto */
  font-size: 14px;
  color: #555; /* Color de texto gris */
  padding-left: 10px; /* Sangría uniforme para todo el texto */
  padding-right: 10px;
  text-align: justify; /* Justificar el texto */
  text-justify: inter-word; /* Asegura que el espaciado entre las palabras sea uniforme */
}

/* Contenedor de botones */
.buttons-container {
  display: flex;
  justify-content: center;  /* Centrado horizontal */
  align-items: center;      /* Centrado vertical */
}

.buttons-container button {
  padding: 15px 150px;
  background-color: #4CAF50;
  font-size: 16px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


/* Efecto hover en los botones */
.buttons-container button:hover {
  background-color: #45a049;
}

/* Contenedor para el checkbox y el texto */
.terms-container {
  display: flex;
  align-items:first baseline; /* Alinea verticalmente el texto con el checkbox */
  margin-top: 20px;
  margin: 25px;
}

.terms-container input[type="checkbox"] {
  margin-right: 1px; /* Espaciado a la derecha del checkbox */
  margin-left: 20px;
}

.terms-container label {
  font-size: 14px; /* Tamaño del texto */
  color: #555; /* Color del texto */
}



/* Mapa */
#map-container {
  margin-top: 30px;
}

#map {
  width: 100%;
  height: 400px;
  border-radius: 8px;
}


/* Campos obligatorios */
.required-label:after {
  content: "*";
  color: red;
  margin-left: 5px;
}


.aclariments {
  margin-top: 8px;
}

.clarification-note {
  font-size: 12px;
  margin-left: 20px;
  color: #666;
  display: block; /* Asegura que el texto se muestre en su propia línea */
  margin-top: 1px; /* Agrega algo de separación si lo necesitas */
}

.info-text {
  font-size: 12px;
  margin-left: 20px;
  color: #666;
  display: block; /* Asegura que el texto se muestre en su propia línea */
  margin-top: 1px; /* Agrega algo de separación si lo necesitas */
}

.more-unity {
  font-size: 12px;
  margin-left: 20px;
  color: #666;
  display: block; /* Asegura que el texto se muestre en su propia línea */
  margin-top: 1px; /* Agrega algo de separación si lo necesitas */
}


.aclariments label {
  font-weight: normal;
  font-size: 14px;
}

#corporation_info {
  margin-top: 2px;
  font-size: 11px;
}

/* Estilo para los campos con error */
input.error, select.error, textarea.error {
  border: 2px solid rgb(255, 93, 93);
}

/* Estilo para los checkboxes con error */
input[type="checkbox"].error {
  outline: 2px solid rgb(255, 93, 93);  /* Contorno rojo para el checkbox */
}