/* Reset para el modal - mantenemos esto como CSS puro */
#quote-stepper-modal * {
  box-sizing: border-box;
}

/* Modal base */
.qs-modal {
  @apply fixed inset-0 flex items-center justify-center transition-opacity duration-300 w-screen h-screen overflow-y-auto;
  position: fixed !important;
  z-index: 99999 !important;
  background: #000000b2;
  backdrop-filter: blur(5px);
}

.qs-form__button.disabled {
  background-color: #ccc !important;
  color: #666 !important;
  pointer-events: none;
  cursor: not-allowed;
  border: 1px solid #666 !important;
}


/* Estado oculto del modal */
.qs-modal--hidden {
  @apply !hidden !opacity-0 !invisible;
}

.qs-form__error-message {
  @apply absolute left-0 text-red-500 text-sm;
  bottom: 0;
  transform: translateY(100%); /* justo debajo */
  margin-top: 0.25rem;         /* separación opcional */
}

/* Clase específica para errores de reCAPTCHA */
.qs-recaptcha-error {
  @apply block text-center text-sm px-4 py-2 mt-2 mb-2 mx-auto;
  position: static !important;
  transform: none !important;
  bottom: auto !important;
  left: auto !important;
  color: #ef4444 !important;
  display: block !important;
  max-width: 400px;
  width: fit-content;
}

/* Contenedor del contenido */
.qs-modal__content {
  @apply relative flex flex-col bg-white rounded-2xl overflow-hidden shadow-xl w-full h-full mx-4 max-w-[60rem] max-h-[90vh] m-auto;
  z-index: 100000 !important;
}

.qs-form__input-country-code {
  width: 10rem !important;
}

/* Imagen lateral */
.qs-modal__image {
  @apply w-full max-h-[20%] relative overflow-hidden;
}

.qs-modal__image img {
  @apply h-full w-full object-cover;
}

.qs-modal__image-desktop {
  @apply hidden;
}

.qs-modal__image-mobile {
  @apply hidden;
}

/* Formulario */
.qs-modal__form-container {
  @apply w-full py-12 px-4 overflow-y-auto bg-white;
}

/* Botón de cierre */
.qs-modal__close-button {
  @apply absolute top-4 right-6 w-8 h-8 flex items-center justify-center rounded-full text-[#1c2fe0] text-5xl bg-transparent border-0 cursor-pointer transition-colors;
}

/* Título del modal */
.qs-modal__title {
  @apply text-center font-semibold text-gray-800 text-[24px] mb-4;
}

/* Contenedor principal */
.qs-stepper {
  @apply flex flex-wrap justify-around items-start gap-x-2 gap-y-4 mb-8;
}

/* Cada paso (circulito + texto) */
.qs-stepper__step {
  @apply flex flex-col items-center relative w-[60px];
}

/* Indicador (circulito + línea derecha) */
.qs-stepper__indicator {
  @apply relative flex items-center justify-center w-8 h-8;
}

/* Bolita */
.qs-stepper__dot {
  @apply flex items-center justify-center rounded-full border-2 w-6 h-6 text-[10px] font-medium z-10;
}

/* Estilos según estado */
.qs-stepper__dot--active {
  @apply bg-[#1C2FE0] border-[#1C2FE0] text-white;
}
.qs-stepper__dot--completed {
  @apply bg-[#1C2FE0] border-[#1C2FE0] text-white;
}
.qs-stepper__dot--pending {
  @apply bg-[#CFD6DC] border-[#CFD6DC] text-white;
}

/* Línea que va a la derecha */
.qs-stepper__line {
  @apply absolute w-10 h-0.5 bg-gray-300 left-full ml-1 top-1/2 transform -translate-y-1/2;
}

/* Texto debajo de cada círculo */
.qs-stepper__text {
  @apply text-[9px] text-black mt-1 text-center leading-tight w-24;
}

/* Formulario y pasos */
.qs-form__step {
  @apply w-full;
}

.qs-form__step--hidden {
  @apply !hidden;
}

/* Labels */
.qs-form__label {
  @apply block font-semibold text-black text-[1.2rem] mb-2 text-center;
}

/* Field Labels (nuevos) */
.qs-form__field-label {
  @apply block text-gray-700 text-sm font-medium mb-1;
}

/* Subtítulos */
.qs-form__subtitle {
  @apply text-black text-sm mb-4 text-center;
}

/* Filas de inputs */
.qs-form__input-row {
  @apply mb-4 flex gap-2;
}

/* Inputs */
.qs-form__input {
  @apply border rounded-[0.5rem] text-gray-700 outline-none w-full p-3;
  border: 1px solid #DBDFF6
}

.qs-form__input:focus {
  @apply border-[#1C2FE0] ring-2 ring-[#1C2FE0]/20;
}

.qs-form__input--error {
  @apply border-red-500;
}

/* Input groups */
.error-text_step-two {
  @apply relative;
}
.qs-form__input-group {
  @apply relative mb-8; /* mb-8 (2rem) deja hueco debajo */
}
.error-text_step-two .qs-form__input-group {
  @apply static;
}
.qs-form__input-row .qs-form__input-group {
  @apply mb-0 w-full;
}

.qs-form__options-grid {
  @apply mb-6 mx-4 grid grid-cols-2 gap-4;
}

.qs-form__options_last_step {
  @apply max-w-full m-auto;
}

.qs-form__input-group .iti{
  @apply !w-full;
}

/* Opción individual - mantenemos la altura como CSS */
.qs-form__option-box {
  @apply border rounded-[1.25rem] cursor-pointer flex flex-col items-center justify-center p-6 py-4 gap-2 border-[#DBDFF6] relative transition-all;
  height: 140px;
  border: 2px solid #DBDFF6;
}

/* Agregar indicador gris a las opciones inactivas - mantenemos como CSS por especificidad */
.qs-form__option-box:not(.active) .qs-form__option-indicator {
  display: block;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #DBDFF6;
  border: none;
}

/* Ocultar el input radio original */
.qs-form__option-box input {
  @apply absolute opacity-0;
}

/* Círculo para el ícono - mantenemos dimensiones como CSS */
.qs-form__option-icon {
  @apply flex items-center justify-center rounded-full bg-[#DBDFF6];
  width: 64px;
  height: 64px;
  transition: background-color 0.2s ease;
}

/* Estilo inactivo (gris) */
.qs-form__option-icon img {
  @apply w-6 h-6;
  max-width: 100%;
  max-height: 100%;
}

/* Estilo para label */
.qs-form__option-label {
  @apply font-medium text-gray-700 uppercase text-sm;
}

/* Cuando está activo (azul) */
.qs-form__option-box.active {
  @apply border-[#1C2FE0] bg-white;
}

.qs-form__option-box.active .qs-form__option-icon {
  @apply bg-[#1C2FE0];
}

/* Estos estilos usan filter que no está en Tailwind, mantenemos como CSS */
.qs-form__option-box.active .qs-form__option-icon img {
  filter: brightness(0) invert(1);
}

/* Cuando se hace hover */
.qs-form__option-box:hover {
  @apply bg-white border-gray-300;
}

/* Cuando se selecciona */
.qs-form__option-box input:checked + .qs-form__option-icon {
  @apply bg-[#1C2FE0];
}

.qs-form__option-box input:checked + .qs-form__option-icon img {
  filter: brightness(0) invert(1);
}

.qs-form__option-box input:checked ~ .qs-form__option-label {
  @apply text-[#1C2FE0];
}

/* Punto azul en la esquina */
.qs-form__option-box.active::after {
  display: none;
}

/* Añadir un indicador de selección personalizado para las opciones activas - mantenemos como CSS por complejidad */
.qs-form__option-box.active .qs-form__option-indicator {
  display: block;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #1C2FE0;
  background-color: white;
}

/* Círculo interior - mantenemos como CSS por uso de pseudo-elementos */
.qs-form__option-box.active .qs-form__option-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1C2FE0;
}

/* Esta clase se añade al div indicador que agregamos en el HTML */
.qs-form__option-indicator {
  display: none;
}

/* Botones de navegación */
.qs-form__actions {
  @apply mt-[1.5rem] flex justify-end items-center gap-4;
}

.qs-form__button {
  @apply rounded-full uppercase font-medium p-3 px-8 cursor-pointer border-0 transition-colors w-full max-w-[150px];
  padding-inline: inherit !important;
}

.qs-form__button--next,
.qs-form__button--submit {
  @apply text-[var(--textWhite)] bg-[#1C2FE0];
}

.qs-form__button--next:hover,
.qs-form__button--submit:hover {
  @apply bg-[#1C2FE0]/90;
}

.qs-form__button--back {
  @apply text-[#1C2FE0] bg-white border border-[#1C2FE0] z-10;
}

.qs-form__button--back:hover {
  @apply bg-[#E8EBFD];
}

/* Decoración de olas */
.qs-modal__wave-decoration {
  @apply absolute w-full bottom-0 left-0 right-0 pointer-events-none;
}

/* ===============================================
   ESTILOS DEL TEL INPUT - MANTENEMOS COMO CSS
   =============================================== */

/* Ajuste del contenedor de código de país */
#country-code-container {
  @apply relative w-full;
}

.iti {
  @apply w-full;
}

.iti__arrow {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #555;
}

#country-code {
  pointer-events: none;
  background-color: #ffffff;
  @apply cursor-pointer;
}

/* ===============================================
   ESTILOS DEL SELECT - MANTENEMOS COMO CSS
   =============================================== */
/* Estilos para el wrapper del select con flecha */
.qs-select-wrapper {
  position: relative;
  width: 100%;
}
.error-text_step-two .qs-select-wrapper{
  @apply static;
}

/* Ocultar la flecha nativa del select */
.qs-form__select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px !important; /* Espacio para la flecha */
}

/* Estilo para el contenedor de la flecha */
.qs-select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Para que no interfiera con clics en el select */
}

/* Estilo específico para la flecha SVG */
.qs-select-arrow svg {
  display: block;
}

/* Para navegadores que no soportan la eliminación de la flecha nativa */
.qs-form__select::-ms-expand {
  display: none;
}

/* ========================================
   MEDIA QUERIES - ADAPTAR CON PRECAUCIÓN
   ========================================*/

/* Pantallas desde 400px (móviles horizontales y tablets pequeñas) */
@media (min-width: 400px) {
  .qs-form__options-grid {
    @apply grid-cols-2;
  }
}

/* Pantallas desde 576px (tablets) */
@media (min-width: 576px) {

.qs-modal__form-container {
    @apply px-12;
}
.qs-form__input-country-code {
  width: 30% !important;
}
  .qs-form__form-container {
    @apply py-16 px-8;
  }

  .qs-form__options-grid {
    @apply mx-20;
  }

  /*.qs-form__options_last_step {*/
  /*  @apply max-w-[60%];*/
  /*}*/

  .qs-stepper {
    @apply flex flex-nowrap justify-center gap-4 px-0;
  }

  .qs-stepper__step {
    @apply w-auto;
  }

  .qs-stepper__dot {
    @apply w-8 h-8 text-xs;
  }

  .qs-stepper__line {
    @apply w-16;
  }

  .qs-stepper__text {
    @apply text-[10px] mt-2;
  }

  .qs-form__input-row {
    @apply flex-row flex-nowrap;
  }
}

/* Pantallas desde 768px (tablets grandes y pantallas pequeñas) */
@media (min-width: 768px) {
  .qs-modal__title {
    @apply text-2xl;
  }
  .qs-modal__image-mobile {
    @apply flex;
  }
}

/* Pantallas desde 992px (pantallas medianas) */
@media (min-width: 992px) {
  .qs-modal__content {
    @apply flex-row w-full;
  }

  .qs-modal__image {
    @apply w-[35%] max-h-none;
  }

  .qs-modal__form-container {
    @apply w-[65%] px-16;
  }

  .qs-modal__image-desktop {
    @apply block;
  }

  .qs-modal__image-mobile {
    @apply hidden;
  }
  .error-text_step-two .qs-select-wrapper{
    @apply relative;
  }
}