/* =========================
   Estilos Generales
   ========================= */
/* Ocultar el marco del banner que aparece tras seleccionar un idioma */
.goog-te-banner-frame {
  display: none !important;
}
  
/* Ocultar el menú de opciones del traductor */
.goog-te-menu-frame {
  display: none !important;
}

/* Quitar el icono del traductor en el gadget */
.goog-te-gadget-icon {
  background-image: none !important;
}

/* Alinear el widget de Google Translate a la derecha */
#google_translate_element {
  text-align: right !important;
}

/* Estilizar el selector de idioma */
#google_translate_element select {
  color: #546439 !important; /* Color del texto */
  background-color: #f1f1f1 !important; /* Color de fondo */
  border: 1px solid #ccc !important; /* Borde del selector */
  padding: 5px !important; /* Espaciado interno */
  border-radius: 25px !important; /* Esquinas redondeadas */
  font-size: 14px !important; /* Tamaño del texto */
  width: auto !important; /* Ajustar ancho automáticamente */
  cursor: pointer !important; /* Cambiar el cursor a "pointer" */
}

/* Estilizar las opciones dentro del selector */
#google_translate_element select option {
  color: #546439 !important; /* Color del texto de las opciones */
}
.form-step {
  display: none;
  margin: 20px 0;
}
.form-step.active {
  display: block;
}

button {
  margin: 10px;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  border: none;
}

.btn-primary {
  --bs-btn-color: #fff !important;
  --bs-btn-bg: #546439 !important;
  --bs-btn-border-color: #546439 !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: #546439 !important;
  --bs-btn-hover-border-color: #546439 !important;
  --bs-btn-focus-shadow-rgb: 49, 132, 253 !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: #546439 !important;
  --bs-btn-active-border-color: #54643b !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
  --bs-btn-disabled-color: #fff !important;
  --bs-btn-disabled-bg: #546439 !important;
  --bs-btn-disabled-border-color: #546439 !important;
}
/* =========================
   Encabezado y Navegación de Pasos
   ========================= */

#form-header {
  margin: 16px;
  position: relative; /* Necesario para alinear líneas entre los pasos */
  margin-left: 15%;
}

.step-indicator {
  display: flex;
  flex-direction: column; /* Acomoda los elementos verticalmente */
  justify-content: center;
  align-items: center;
  position: relative; /* Necesario para las líneas de conexión */
  margin: 0 15px; /* Espaciado horizontal entre los pasos */
}

.step-number {
  background-color: transparent; /* Sin fondo */
  border: 4px solid #6A7D4D ; /* Contorno del círculo */
  border-radius: 50%; /* Hace que el contorno sea circular */
  width: 40px; /* Tamaño del círculo */
  height: 40px; /* Tamaño del círculo */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px; /* Tamaño del número */
  color: #6A7D4D ; /* Color del número */
}

.step-indicator.active .step-number {
  border-color: #465330; /* Contorno más destacado para el paso activo */
  color: #465330; /* Cambia el color del número para el paso activo */
}

.step-indicator-text {
  font-size: 14px; /* Tamaño del texto debajo del círculo */
  color: #555; /* Color del texto */
  margin-top: 8px; /* Espaciado entre círculo y texto */
  text-align: center; /* Centra el texto debajo del círculo */
}

.step-indicator::after {
  content: "";
  position: absolute;
  width: 155px; /* Ajusta el ancho del conector entre pasos */
  height: 2px; /* Grosor de la línea */
  background-color: #ddd; /* Color de la línea */
  top: 20px; /* Ajusta la posición de la línea */
  left: calc(90%); /* Alinea la línea al lado derecho */
  z-index: -1; /* Coloca la línea detrás del contenido */
}

.step-indicator:last-child::after {
  display: none; /* Elimina la línea del último paso */
}

/* Responsivo para pantallas más pequeñas (menores a 768px) */
@media (max-width: 768px) {
  #form-data-div{
    display: flex;
    flex-flow: column wrap;
    gap: 16px;
  }
  /* Ajustes para el contenedor de pasos */
  #form-header {
    flex-direction: column; /* Cambia la dirección a columna en pantallas pequeñas */
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    padding: 8px;
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho */
    margin-bottom: 25px; /* Agregar margen inferior */
    margin: 16px auto 24px;
  }

  /* Estilos para los indicadores de paso */
  .step-indicator {
    width: auto;
    text-align: center;
    margin: 10px 0; /* Añadir margen entre los pasos */
    display: flex; /* Alineación flexible */
    flex-direction: column; /* Organiza los elementos dentro de cada indicador en columna */
    align-items: center; /* Centra los elementos dentro de cada indicador */
    justify-content: center; /* Alinea los elementos en el centro */
  }

  .step-indicator-text {
    width: auto;
    font-size: 2rem; /* Disminuir el tamaño del texto */
    margin-top: 5px; /* Agregar algo de espacio entre el texto y el círculo */
  }

/* Style to center the buttons and align them properly */
.button-group {
  display: flex;
  justify-content: center;
  gap: 20px; /* Adjust the gap between buttons */
  margin-top: 20px;
}

/* Optional: Style for buttons to make them more aligned */
.button-group .btn-option {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 5px;
  background-color: #546439; /* Adjust the background color if needed */
  color: white;
  border: none;
  cursor: pointer;
}

.button-group .btn-option:hover {
  background-color: #546439;
}

  .card-body.text-center {
    display: flex; /* Make the card body a flex container */
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-start; /* Align children to the top */
    align-items: center; /* Center children horizontally */
  }
  
  /* General styles for the navigation buttons container */
.form-navigation {
  display: flex; /* Enable flexbox layout */
  justify-content: center; /* Center buttons horizontally */
}

/* Styles for the individual buttons */
.form-navigation button {
  flex-grow: 1; /* Make buttons take up equal space */
  margin-left: 0px; /* Remove left margin */
  margin-right: 0px; /* Remove right margin */
}
/* General styles for the navigation buttons container */
.form-navigation {
  display: flex; /* Enable flexbox layout */
  justify-content: center; /* Center buttons horizontally */
  /* gap: 15px; Add a 15px gap between buttons */
}

/* Styles for the individual buttons */
.form-navigation button {
  height: auto; /* Allow buttons to take their natural height */
  padding: 10px 25px; /* Set the padding to the default value */
  font-size: 16px; /* Set the font size to the default value */
  flex-grow: 0; /* Prevent buttons from growing to fill the available space */
}

#submitBtn {
  width: auto; /* Allow the submit button to take its natural width */
}

#availability{
  text-align: center;
  margin: 15px;
  display: block;
  width: 320px;
  box-sizing: border-box;
}

#step-1 {
  margin-left: auto;
  margin-right: auto;
}

#step-1 > * {
  margin-left: auto;
  margin-right: auto;
}
#form-schedule-btns{
  flex-direction: column;
  align-items: center;
}
}


/* Responsivo para pantallas aún más pequeñas (menos de 480px) */
@media (max-width: 480px) {
  #form-data-div{
    display: flex;
    flex-flow: column wrap;
    gap: 16px;
  }
  /* Ajustes para el contenedor de pasos */
  #form-header {
    width: 100%;
    flex-direction: column; /* Cambia la dirección a columna */
    align-items: center; /* Centra los elementos horizontalmente */
    padding: 8px;
    margin-bottom: 25px; /* Agregar margen inferior */
    justify-content: center; /* Centra los elementos verticalmente */
    margin: 16px auto 24px;
  }

  /* Ajustes en los indicadores de paso */
  .step-indicator {
    width: auto;
    text-align: center;
    margin: 10px 0; /* Añadir margen entre los pasos */
    display: flex; /* Alineación flexible */
    flex-direction: column; /* Organiza los elementos dentro de cada indicador en columna */
    align-items: center; /* Centra los elementos dentro de cada indicador */
    justify-content: center; /* Alinea los elementos en el centro */
  }

  .step-indicator-text {
    font-size: 2rem;
    width: auto;

  }

  /* Estilos para los botones */
  .button-group {
    width: 90%; /* Reducir ligeramente el ancho para mayor estética */
  }

  .btn-option {
    width: 100%; /* Asegura que ambos botones tengan el mismo tamaño */
    font-size: 14px; /* Ajusta el tamaño de la fuente */
    padding: 15px 0; /* Botones un poco más altos */
  }

  .card-body.text-center {
  display: flex; /* Make the card body a flex container */
  flex-direction: column; /* Stack children vertically */
  justify-content: flex-start; /* Align children to the top */
  align-items: center; /* Center children horizontally */
}

/* General styles for the navigation buttons container */
.form-navigation {
  display: flex; /* Enable flexbox layout */
  justify-content: center; /* Center buttons horizontally */
  /* gap: 15px; Add a 15px gap between buttons */
}

/* Styles for the individual buttons */
.form-navigation button {
  height: auto; /* Allow buttons to take their natural height */
  padding: 10px 25px; /* Set the padding to the default value */
  font-size: 16px; /* Set the font size to the default value */
  flex-grow: 0; /* Prevent buttons from growing to fill the available space */
}

#submitBtn {
  width: auto; /* Allow the submit button to take its natural width */
}

#availability{
  text-align: center;
  margin: 15px;
  display: block;
  width: 320px;
  box-sizing: border-box;
}
#form-schedule-btns{
  flex-direction: column;
  align-items: center;
}
}


/* Responsive Styles for Screens < 1213px */
@media (max-width: 1213px) {
  #form-header {
    flex-direction: column;
  }

  .step-indicator {
    display: none; /* Hide all steps by default */
  }

  .step-indicator.active {
    display: block; /* Show only the active step */
  }

  .step-number {
    font-size: 2rem; /* Adjust size for better visibility */
  }

  .step-indicator-text {
    font-size: 1.2rem; /* Adjust size for better readability */
    margin-left: -73%;
  }

  .step-indicator::after {
    display: none;
  }
}
/* Responsive Styles for Screens < 763px */
@media (max-width: 763px) {
  #form-data-div{
    display: flex;
    flex-flow: column wrap;
    gap: 16px;
  }
  #form-multipaso {
    padding: 0; /* Remove padding for smaller screens */
    color:#000;
  }

  #form-header {
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items vertically */
    margin: 16px auto 24px; /* Add top/bottom margins */
  }

  .step-indicator {
    display: none; /* Hide all steps by default */
  }

  .step-indicator-text {
    font-size: 2rem;
    margin-left: 0px; /* Remove negative margin */
    padding-top: 20px;
    margin-bottom: -30px;
  }

  .step-indicator.active {
    display: flex; /* Show only the active step using flexbox */
  }

  .step-indicator.active .step-number {
    font-size: 23px; /* Adjust font size for better visibility */
    margin-left: 0px; /* Remove negative margin */
  }

  .step-number {
    font-size: 23px; /* Adjust size for better visibility */
  }

  .step-indicator::after {
    display: none; /* Hide the pseudo-element */
  }

  /* General styles for the navigation buttons container */
.form-navigation {
  display: flex; /* Enable flexbox layout */
  justify-content: center; /* Center buttons horizontally */
  /* gap: 15px; Add a 15px gap between buttons */
  justify-content: center;
  padding-left: 10%;
  gap: 10px;
}

/* Styles for the individual buttons */
.form-navigation button {
  flex-grow: 1; /* Make buttons take up equal space */
  margin-left: 0px; /* Remove left margin */
  margin-right: 0px; /* Remove right margin */
}

/* Styles for the container of the buttons */
.my-4 {
  display: flex; /* Enable flexbox layout */
  justify-content: center; /* Center buttons horizontally */
  /* gap: 15px; Add a 15px gap between buttons */
}

/* General styles for the navigation buttons container */
.form-navigation {
  display: flex; /* Enable flexbox layout */
  justify-content: center; /* Center buttons horizontally */
  /* gap: 15px; Add a 15px gap between buttons */
}

/* Styles for the individual buttons */
.form-navigation button {
  height: auto; /* Allow buttons to take their natural height */
  padding: 10px 25px; /* Set the padding to the default value */
  font-size: 16px; /* Set the font size to the default value */
  flex-grow: 0; /* Prevent buttons from growing to fill the available space */
}

#submitBtn {
  width: auto; /* Allow the submit button to take its natural width */
}


#availability{
  text-align: center;
  margin: 15px;
  display: block;
  width: 320px;
  box-sizing: border-box;
}

#form-schedule-btns{
  flex-direction: column;
  align-items: center;
}
}

/* =========================
   Botones de Opciones
   ========================= */
.button-group {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.btn-option {
  padding: 10px 20px;
  border: 3px solid #546439;
  background-color: #fff;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 51px;
  color: #000 !important;
}

.btn-option:hover,
.btn-option.selected {
  background-color: #546439;
  color: white !important;
  border: 2px solid #546439;
}

/* =========================
   Grid de Razones de Visita
   ========================= */
#visit-reason-section {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(250px, 1fr)
  ); /* Hace que las tarjetas se acomoden automáticamente */
  gap: 20px;
  justify-content: center; /* Centra las tarjetas horizontalmente */
}

.reason-card {
  border: 1px solid #e6e6e6; /* Borde gris claro */
  border-radius: 10px; /* Bordes ligeramente redondeados */
  background-color: #ffffff; /* Fondo blanco */
  height: 300px; /* Altura fija */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.reason-card img {
  max-width: 80px; /* Tamaño del ícono */
  margin-bottom: 20px; /* Separación con el texto */
}

.reason-card label {
  font-weight: bold;
  font-size: 16px;
  color: #333333; /* Color del texto principal */
  margin-bottom: 10px;
}

.reason-card .card-description {
  font-size: 14px;
  color: #383838c3; /* Texto descriptivo en gris */
}

.reason-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al hover */
  transform: translateY(-5px); /* Efecto de elevación */
}

.selected-card {
  border: 2px solid #54643b; /* Resalta la tarjeta seleccionada */
  box-shadow: 0 4px 8px #7e9754;
}

.selected-card .card-description {
  font-weight: bold;
  color: #54643b;
}

.card-body input[type="radio"] {
  appearance: none;
  position: absolute;
  visibility: hidden;
}

.card-body input[type="radio"]:checked + label {
  font-weight: bold;
  color: #54643b;
}

/* =========================
   Calendario y Horarios
   ========================= */
#calendar-container {
  display: none;
  width: 100%;
  height: 100vh;
  padding: 1rem;
}

#calendar {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  background-color: #fff;
  margin-top: 20px;
}

.time-slots {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.time-btn {
  margin: 5px;
  padding: 10px 20px;
  border-radius: 5px;
  border: 1px solid #54643b;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.time-btn:hover {
  background-color: #54643b;
  color: white;
}

/* =========================
   Contenedor Principal del Formulario
   ========================= */
#form-multipaso {
  min-height: 90vh;
  padding: 20px;
  text-align: center;
  color: #000;
}

/* Cuando una tarjeta es oculta */
.hidden {
  display: none !important;
}

/* Agrega la clase table-responsive para permitir desplazamiento en pantallas pequeñas */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Mejor rendimiento en dispositivos móviles */
  max-width: 100%;
}

/* Agregar estilo para pantallas muy pequeñas */
@media (max-width: 768px) {
  .table th,
  .table td {
    padding: 8px; /* Reducir el padding para pantallas pequeñas */
  }

  .table td {
    font-size: 12px; /* Reducir el tamaño de texto si es necesario */
  }

  /* Asegurar que las casillas de verificación sean más accesibles */
  .form-check-input {
    margin: 0;
    width: 20px;
    height: 20px;
  }
}



/* Optional: Alternative Card Layout for Very Small Screens */
@media (max-width: 576px) {

  .time-selection-cards {
    display: block;
  }

  .time-card {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f8f9fa;
  }

  .time-card h4 {
    font-size: 1rem;
    margin-bottom: 5px;
  }

  .time-card input {
    margin-right: 5px;
  }

  input[type="radio"]:checked + span {
    background-color: rgb(84, 100, 57) !important; /* Change the background color of the active radio button */
  }

  #privacy {
    color: rgb(194 199 203);
    text-align: justify;
    display: block;
    word-break: break-word;
    hyphens: auto;
    font-size: 10px;
  }

  #ourteam-message {
    display: inline-block;
    color: rgb(128, 128, 128); /* Gray color */
    font-size: 14px;
    text-align: justify;
    white-space: normal;
    word-spacing: 0px;
    margin-top: 0px;
    margin-bottom: 25px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
  }
}


  .btn-option.selected-schedule {
      background-color: #54643b; /* Color sombreado */
      color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      border-color: #54643b;
  }

  .modal-backdrop.fade.show {
    display: none;
  }

/* Modal */
.modal-content {
  z-index: 1060; /* Asegúrate de que esté por encima del backdrop */
  position: relative;
  /* Otros estilos del modal */
}

#privacy {
  color: rgb(194 199 203);
  text-align: justify;
  display: block;
  word-break: break-word;
  hyphens: auto;
  font-size: 10px;
}

    /* Estilo para el fondo del encabezado */
    thead {
      background-color: rgb(84, 100, 57);
      color: white;
  }

  /* ✅ Estilos generales para los botones en la navegación */
.form-navigation {
  display: flex !important;
  justify-content: center !important; /* Centrar horizontalmente */
  gap: 10px !important; /* Espaciado entre botones */
}

/* ✅ Estilos para los botones individuales */
.form-navigation button {
  border-radius: 51px !important;
  padding: 10px 25px !important;
  font-size: 16px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease, transform 0.3s ease !important;
}

/* 🟢 Estilos responsivos para pantallas de 763px o menos */
@media (max-width: 763px) {
  .form-navigation {
      flex-direction: column !important; /* Cambia a disposición vertical */
      align-items: center !important; /* Centra los botones en columna */
      gap: 15px !important; /* Agrega más espacio entre botones */
  }

  .form-navigation button {
      width: 100% !important; /* Ocupa todo el ancho disponible */
      max-width: 300px !important; /* Máximo ancho para evitar que sea demasiado grande */
      text-align: center !important; /* Centrar el texto */
  }
}

/* 🟢 Estilos adicionales para pantallas de 480px o menos */
@media (max-width: 480px) {
  .form-navigation {
      gap: 10px !important; /* Espaciado más pequeño en pantallas muy pequeñas */
  }

  .form-navigation button {
      width: 90% !important; /* Un poco menos de ancho para mejor apariencia */
      max-width: 280px !important;
  }
}

/* 🔥 OCULTAR EL BANNER QUE APARECE EN EL HEADER */
.goog-te-banner-frame {
  display: none !important;
}

/* 🔥 OCULTAR TOOLTIP QUE MUESTRA EL IDIOMA ORIGINAL AL PASAR EL CURSOR */
.goog-tooltip, 
.goog-tooltip:hover {
  display: none !important;
}

/* 🔥 OCULTAR EL MENÚ AUTOMÁTICO DE GOOGLE TRANSLATE */
.goog-te-menu-frame,
.goog-te-balloon-frame {
  display: none !important;
}

/* 🔥 OCULTAR EL ICONO DE GOOGLE TRANSLATE */
.goog-te-gadget-icon {
  display: none !important;
}

/* 🔥 ESTILIZAR Y POSICIONAR EL SELECTOR DE IDIOMAS */
#google_translate_element {
  text-align: center !important;
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 🔥 MODIFICAR EL SELECTOR DE IDIOMAS PARA QUE APAREZCA AL PIE */
#google_translate_element select {
  background-color: #f1f1f1 !important;
  color: #546439 !important;
  border: 1px solid #ccc !important;
  padding: 5px !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  width: auto !important;
  position: absolute !important;
  bottom: -30px !important; /* Posición al pie */
}

/* 🔥 OCULTAR EL BOTÓN DE GOOGLE TRANSLATE PARA HACERLO MÁS LIMPIO */
.goog-te-gadget {
  font-size: 0px !important;
}

/* 🔥 AUMENTAR EL ANCHO DEL MENÚ PARA QUE SE VEA MEJOR */
.goog-te-gadget-simple {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* 🔥 ESTILO PARA EL MENÚ DESPLEGABLE */
.goog-te-menu-value {
  color: #546439 !important;
}

/* 🔥 HACER QUE EL SELECTOR SE MUESTRE SOLO CUANDO SE HACE CLIC */
.goog-te-combo {
  display: block !important;
  position: relative !important;
}

iframe.goog-te-banner-frame {
  display: none !important;
}