body {
      font-family: 'Helvetica', sans-serif;
}

@media (max-width: 420px) {
  form input,
  form button {
    font-size: 14px;
    padding: 10px;
  }

  form label {
    font-size: 12px;
  }
}


/* Día inicial y final del rango */
  .litepicker .day-item.is-start-date,
  .litepicker .day-item.is-end-date {
    background-color: #C5A455 !important;
    color: white !important;
  }

  /* Días dentro del rango seleccionado */
  .litepicker .day-item.in-range {
    background-color: #f3e3bb !important; /* dorado claro para el rango */
    color: #333 !important;
  }

  /* Día enfocado o hover */
  .litepicker .day-item:hover {
    background-color: #C5A455 !important;
    color: white !important;
  }

  /* Bordes redondeados para la selección */
  .litepicker .day-item.is-start-date {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
  }

  .litepicker .day-item.is-end-date {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
  }



 /* Estilo personalizado para noUiSlider */
 #priceSlider .noUi-connect {
   background-color: #C5A455; /* Color dorado para la barra conectada */
 }

 #priceSlider .noUi-handle {
   background-color: #C5A455;
   border: 2px solid #C5A455;
   box-shadow: none;
 }

 #priceSlider .noUi-handle:hover,
 #priceSlider .noUi-handle:focus {
   box-shadow: 0 0 0 3px rgba(197, 164, 85, 0.3);
 }

 #priceSlider .noUi-tooltip {
   background-color: #C5A455;
   color: white;
   border: none;
   font-weight: bold;
   font-size: 0.75rem;
   padding: 2px 6px;
   border-radius: 4px;
 }

 #priceSlider .noUi-target {
   border-radius: 9999px; /* Rounded slider track */
   border: 1px solid #ddd;
 }


 button.swal2-confirm.swal2-styled {
     background: #E9B84C;
     border-radius: 8vh;
 }

 /**********************seccion de eventos******************************/


  .modal-bg {
      background: rgba(0, 0, 0, 0.4);
  }

 .gallery-thumb.selected {
     border-color: #BF9A4D;
 }

 .evento-galeria::-webkit-scrollbar {
     width: 6px;
 }

 .evento-galeria::-webkit-scrollbar-thumb {
     background: #BF9A4D;
     border-radius: 8px;
 }

 .evento-card {
     transition: transform 0.2s;
 }

 .evento-card:hover {
     transform: translateY(-6px) scale(1.03);
 }


 html {
     scroll-behavior: smooth;
 }


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

 /* Estilos para la barra de progreso */
 .step-item.active .step-circle { background-color: #E9B84C; color: white; }
 .step-item.active .step-text { color: #c89d3f; font-weight: bold; }
 .step-item .step-line { background-color: #e5e7eb; }
 .step-item.active .step-line { background-color: #E9B84C; }

 #productosMenu::-webkit-scrollbar { width: 8px; }
 #productosMenu::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
 #productosMenu::-webkit-scrollbar-thumb { background-color: #facc15; border-radius: 10px; }



 #mainImage {
     transition: opacity 0.5s ease;
 }

 .fade-out {
     opacity: 0;
 }

 .fade-in {
     opacity: 1;
 }


 .skiptranslate {
     display: none;
 }

 .skiptranslate.goog-te-gadget{
     display: block;
 }

 /** {*/
 /*    outline: 1px solid red;*/
 /*}*/

 /* --- Contenedor principal para ambos botones flotantes --- */
 .fixed-buttons-container {
     position: fixed;
     bottom: 24px; /* Ajusta según sea necesario */
     right: 24px; /* Ajusta según sea necesario */
     z-index: 9999;
     display: flex;
     flex-direction: column; /* Apila los botones verticalmente */
     align-items: flex-end; /* Alinea los elementos a la derecha */
     gap: 15px; /* Espacio entre los botones */
 }

 /* --- Estilos para el botón de WhatsApp flotante --- */
 .whatsapp-float-button {
     background-color: #25D366; /* Color de WhatsApp */
     border-radius: 9999px; /* Completamente redondo */
     padding: 12px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra ligeramente más pronunciada */
     transition: transform 0.3s ease-in-out;
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     width: 60px; /* Tamaño del botón */
     height: 60px; /* Tamaño del botón */
 }

 .whatsapp-float-button:hover {
     transform: scale(1.1);
 }

 .whatsapp-float-button img {
     width: 30px; /* Tamaño del ícono */
     height: 30px;
     /* filter: brightness(0) invert(1);  <-- Ya se eliminó en la revisión anterior */
 }

 /* --- Contenedor para el botón de idioma y su selector --- */
 .language-float-container {
     position: relative; /* Para posicionar el selector absolutamente respecto a este */
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 }

 /* --- Estilos para el botón de alternar idioma (el que muestra/oculta el selector) --- */
 .language-toggle-button {
     background-color: #4285F4; /* Un azul de Google */
     color: white;
     border: none;
     border-radius: 9999px;
     padding: 12px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra ligeramente más pronunciada */
     cursor: pointer;
     transition: transform 0.3s ease-in-out;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 60px; /* Mismo tamaño que el de WhatsApp */
     height: 60px;
 }

 .language-toggle-button:hover {
     transform: scale(1.1);
 }

 .language-toggle-button img {
     width: 30px; /* Tamaño del ícono de idioma */
     height: 30px;
     /* filter: brightness(0) invert(1);  <-- Ya se eliminó en la revisión anterior */
 }

 /* --- Estilos para el selector de idiomas (el div del traductor) --- */
 .language-selector {
     background-color: #fff;
     border-radius: 12px; /* Bordes más redondeados */
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Sombra más profunda y elegante */
     padding: 20px; /* Más padding interno */
     max-height: 280px; /* Altura máxima ligeramente aumentada para más scroll */
     overflow-y: auto; /* Habilita el scroll vertical */
     width: 280px; /* Ancho ligeramente aumentado para el selector */
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
     position: absolute;
     bottom: 100%; /* Arriba del botón de idioma */
     right: 0; /* Alineado a la derecha */
     margin-bottom: 20px; /* Espacio entre el selector y el botón que lo activa */
     /* Estilo de la barra de scroll (webkit para Chrome/Safari) */
     scrollbar-width: thin; /* Firefox */
     scrollbar-color: #ccc #f1f1f1; /* Firefox */
 }

 .language-selector::-webkit-scrollbar {
     width: 8px; /* Ancho de la barra de scroll */
 }

 .language-selector::-webkit-scrollbar-track {
     background: #f1f1f1; /* Fondo de la barra de scroll */
     border-radius: 10px;
 }

 .language-selector::-webkit-scrollbar-thumb {
     background-color: #ccc; /* Color del "pulgar" de la barra de scroll */
     border-radius: 10px;
     border: 2px solid #f1f1f1; /* Pequeño borde para que no pegue a los lados */
 }

 .language-selector::-webkit-scrollbar-thumb:hover {
     background-color: #999; /* Color al pasar el ratón */
 }

 /* Mostrar el selector cuando el language-float-container tiene la clase 'active' */
 .language-float-container.active .language-selector {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 /* --- Estilos para el select de idiomas dentro del traductor (goog-te-combo) --- */
 .goog-te-combo {
     width: 100%;
     padding: 12px 15px; /* Más padding para una mejor estética */
     border: 1px solid #e0e0e0; /* Borde más sutil */
     border-radius: 8px; /* Bordes más redondeados */
     font-size: 16px;
     line-height: 1.5; /* Espaciado entre líneas */
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-color: #f9f9f9; /* Fondo ligeramente gris para el select */
     color: #333; /* Color de texto más oscuro */
     cursor: pointer;
     background-image: url('data:image/svg+xml;utf8,<svg fill="%23666666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* Flecha personalizada gris */
     background-repeat: no-repeat;
     background-position: right 15px center; /* Mueve la flecha un poco a la derecha */
     background-size: 20px;
     box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* Sombra interna sutil */
 }

 .goog-te-combo:focus {
     outline: none;
     border-color: #4285F4; /* Resalta el borde al enfocar */
     box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3); /* Sombra azul al enfocar */
 }

 /* --- Estilos para el texto "Con la tecnología de Google Traductor" --- */
 .goog-te-gadget .goog-te-powerd-by {
     font-size: 11px;
     color: #999;
     display: block;
     margin-top: 15px; /* Más espacio arriba */
     text-align: center;
     border-top: 1px solid #eee; /* Línea separadora sutil */
     padding-top: 10px;
 }

 .goog-te-gadget .goog-te-powerd-by a {
     text-decoration: none;
     color: #999;
 }

 .goog-te-gadget .goog-te-powerd-by a:hover {
     text-decoration: underline;
     color: #666;
 }

 /* Nuevo estilo: Borde blanco para la imagen de Google Traductor */
 .goog-te-powerd-by img {
     vertical-align: middle;
     border: 1px solid #ffffff; /* Borde blanco de 1px */
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Sombra sutil alrededor del borde */
 }

 #goog-gt-tt{
     display: none;
 }