/* --- Contenedor Principal --- */
.mes-form-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 25px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: sans-serif;
}

/* --- Lógica de Pasos con Transiciones --- */
.mes-form-step {
    display: none;      /* Sigue oculto por defecto para evitar "saltos" en la carga */
    opacity: 0;         /* Totalmente transparente */
    transition: opacity 0.4s ease-in-out; /* La animación de la opacidad durará 0.4s */
    position: relative;
}

.mes-form-step.active {
    display: block;     /* Se hace visible en el flujo del DOM */
    opacity: 1;         /* Totalmente opaco */
}

/* --- Estilos Generales de Campos --- */
.mes-form-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.mes-form-container input[type="text"],
.mes-form-container input[type="email"],
.mes-form-container input[type="tel"],
.mes-form-container textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

.mes-aceptacion-wrapper {
    margin-top: 20px;
}

.mes-cumpleanos-wrapper {
    margin-top: 20px;
}

/* --- Estilos de Botones --- */
.mes-form-container button {
    background-color: #0073aa; /* Color azul de WordPress */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.mes-form-container button:hover {
    background-color: #005a87;
}

/* --- Estilos para Calificación por Estrellas (CORREGIDO) --- */
.mes-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin-bottom: 20px;
}

.mes-rating input[type="radio"] {
    display: none; /* Ocultamos los botones de radio reales */
}

.mes-rating label {
    font-size: 3em;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}

/* --- Lógica de hover y selección (VERSIÓN FINAL) --- */

/* Estado base: solo las estrellas seleccionadas están amarillas */
.mes-rating label.selected {
    color: #ffc700;
}

/* Durante el hover: resetear todas las estrellas a gris primero */
.mes-rating:hover label {
    color: #ccc;
}

/* Durante el hover: pintar de amarillo desde la primera hasta la que está en hover */
.mes-rating:hover label:hover,
.mes-rating:hover label:hover ~ label {
    color: #ffc700;
}

.mes-rating label.hovered {
    color: #ffc700;
}

/* =====================================================================
   ESTILOS PARA MODO INMERSIVO (FASE 8 Revisión)
   ===================================================================== */

/* Cuando el modo inmersivo está activo... */
body.mes-modo-inmersivo .mes-form-container {
    background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro semitransparente */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff; /* Texto principal blanco */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

body.mes-modo-inmersivo .mes-form-container label {
    color: #f1f1f1; /* Color de las etiquetas un poco más suave */
}

/* Estilo para el checkbox, que es especial */
body.mes-modo-inmersivo .mes-form-container label[for="aceptacion"] {
    color: #f1f1f1 !important;
}

body.mes-modo-inmersivo .mes-form-container input[type="text"],
body.mes-modo-inmersivo .mes-form-container input[type="email"],
body.mes-modo-inmersivo .mes-form-container input[type="tel"],
body.mes-modo-inmersivo .mes-form-container textarea,
body.mes-modo-inmersivo .mes-form-container select {
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

body.mes-modo-inmersivo .mes-form-container button {
    background-color: #008ec2; /* Un azul un poco más brillante */
}

body.mes-modo-inmersivo .mes-form-container button:hover {
    background-color: #00a9e8;
}
body.mes-modo-inmersivo .mes-form-container h3 {
    color: #ffffff;
    margin-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* --- Estilos para intl-tel-input en modo inmersivo --- */
body.mes-modo-inmersivo .iti {
    width: 100%; /* Hacemos que ocupe todo el ancho disponible */
}

body.mes-modo-inmersivo .iti__country-list {
    background-color: #2a2a2a; /* Fondo oscuro para el desplegable */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

body.mes-modo-inmersivo .iti__country {
    color: #f1f1f1; /* Color del texto de cada país */
}

body.mes-modo-inmersivo .iti__dial-code {
    color: #888; /* Color del código de país en la lista */
}

body.mes-modo-inmersivo .iti__country.iti__highlight {
    background-color: #008ec2; /* Color de fondo al pasar el ratón */
    color: #ffffff;
}

body.mes-modo-inmersivo .iti__country.iti__highlight .iti__dial-code {
    color: #f1f1f1;
}

/* Estilo para el placeholder del número */
body.mes-modo-inmersivo .iti__tel-input::placeholder {
    color: #777;
    opacity: 1; /* Firefox necesita esto */
}

/* --- Estilos para Mensajes de Error --- */
.mes-error-message {
    display: none; /* Oculto por defecto */
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 4px;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* --- Mensajes de Error en Modo Inmersivo --- */
body.mes-modo-inmersivo .mes-error-message {
    background-color: rgba(255, 82, 82, 0.2);
    color: #ffc2c2;
    border-color: rgba(255, 82, 82, 0.5);
}

/* --- Estilos para Choices.js en modo inmersivo --- */
body.mes-modo-inmersivo .choices {
    margin-bottom: 20px;
}

body.mes-modo-inmersivo .choices__inner {
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    padding: 7px 15px;
    min-height: 44px;
    border-radius: 4px;
}

body.mes-modo-inmersivo .choices[data-type*="select-one"]::after {
    border-color: rgba(255, 255, 255, 0.5) transparent transparent; /* Color de la flechita */
}

body.mes-modo-inmersivo .choices.is-open[data-type*="select-one"]::after {
    border-color: transparent transparent rgba(255, 255, 255, 0.5); /* Flechita cuando está abierto */
}

body.mes-modo-inmersivo .choices__list--dropdown {
    background-color: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.2);
}

body.mes-modo-inmersivo .choices__item--choice {
    color: #f1f1f1;
}

body.mes-modo-inmersivo .choices__item--choice.is-highlighted {
    background-color: #008ec2;
    color: #ffffff;
}

/* Corrección de color para el mensaje de éxito final en modo inmersivo */
body.mes-modo-inmersivo #step-final-message p {
    color: #ffffff !important;
}

/* --- Estilos para flatpickr en modo inmersivo (AJUSTE TRANSLÚCIDO) --- */
body.mes-modo-inmersivo .flatpickr-calendar {
    background: rgba(40, 40, 40, 0.85); /* Fondo oscuro translúcido */
    backdrop-filter: blur(5px); /* Efecto de vidrio esmerilado (opcional, se ve increíble) */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    color: #f1f1f1;
}

body.mes-modo-inmersivo .flatpickr-months .flatpickr-month,
body.mes-modo-inmersivo .flatpickr-current-month .flatpickr-monthDropdown-months,
body.mes-modo-inmersivo .numInputWrapper,
body.mes-modo-inmersivo span.arrowUp,
body.mes-modo-inmersivo span.arrowDown {
    color: #f1f1f1;
    background: #1f2121e0;
}
body.mes-modo-inmersivo .numInput { color: inherit; }
body.mes-modo-inmersivo .flatpickr-weekday { color: #00a9e8; }
body.mes-modo-inmersivo .flatpickr-day { color: #f1f1f1; }
body.mes-modo-inmersivo .flatpickr-day:hover { background: rgba(80, 80, 80, 0.7); }
body.mes-modo-inmersivo .flatpickr-day.today { border-color: #00a9e8; }
body.mes-modo-inmersivo .flatpickr-day.selected,
body.mes-modo-inmersivo .flatpickr-day.startRange,
body.mes-modo-inmersivo .flatpickr-day.endRange {
    background: #008ec2;
    border-color: #008ec2;
    color: #fff;
}
body.mes-modo-inmersivo .flatpickr-day.disabled { color: #555; }

/* --- Estilos para Choices.js en modo inmersivo (AJUSTE TRANSLÚCIDO) --- */
body.mes-modo-inmersivo .choices { margin-bottom: 20px; }

body.mes-modo-inmersivo .choices__inner {
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    padding: 7px 15px; min-height: 44px; border-radius: 4px;
}

body.mes-modo-inmersivo .choices[data-type*="select-one"]::after { border-color: rgba(255, 255, 255, 0.5) transparent transparent; }
body.mes-modo-inmersivo .choices.is-open[data-type*="select-one"]::after { border-color: transparent transparent rgba(255, 255, 255, 0.5); }

body.mes-modo-inmersivo .choices__list--dropdown {
    background-color: rgba(40, 40, 40, 0.85); /* Fondo oscuro translúcido */
    backdrop-filter: blur(5px); /* Efecto de vidrio esmerilado */
    border-color: rgba(255, 255, 255, 0.2);
}

body.mes-modo-inmersivo .choices__item--choice { color: #f1f1f1; }
body.mes-modo-inmersivo .choices__item--choice.is-highlighted { background-color: #008ec2; color: #ffffff; }