/*
==========================================================================
 ESTILOS PERSONALIZADOS PARA FORMULARIO OTP (ONE-TIME PASSWORD)
==========================================================================
*/

/* 
 * Contenedor principal del texto "Please enter the OTP..."
 * Se usa para controlar el espacio inferior antes del recuadro de los inputs.
 */
.xoo-ml-otp-sent-txt {
    margin-bottom: 0px !important; /* Reduce el espacio entre este texto y el recuadro de abajo */
}

/* 
 * Recuadro que envuelve las 6 casillas del OTP.
 * Aquí se define el estilo del contenedor principal.
 */
.xoo-ml-otp-input-cont {
    display: flex;                  /* Coloca las casillas en línea */
    justify-content: center;        /* Centra el grupo de casillas */
    gap: 5px;                       /* Espacio entre cada casilla individual */
    margin-bottom: 20px;            /* Espacio entre este recuadro y el botón "Verify" de abajo */
    width: fit-content !important;  /* ANULA EL ANCHO FIJO y ajusta el contenedor al contenido */
    margin-left: auto !important;   /* Centrado automático del bloque */
    margin-right: auto !important;  /* Centrado automático del bloque */
    
    /* Estilo del recuadro contenedor */
    background-color: #ffffff;      /* Fondo blanco */
    border: 1px solid #777;      /* Borde gris claro */
    border-radius: 12px;            /* Esquinas redondeadas del recuadro */
    padding: 20px;                  /* Espacio interior (reactivado para que las cajas no toquen el borde) */
    box-shadow: 0 4px 10px rgba(0,0,0,0.07); /* Sombra suave */
}

/* 
 * Estilo para cada una de las 6 casillas individuales del OTP.
 */
.xoo-ml-otp-input {
    width: 50px !important;         /* Ancho de la casilla (Desktop) */
    height: 65px !important;        /* Alto de la casilla (Desktop) */
    margin: 0 !important;           /* NEUTRALIZA MÁRGENES PARA EVITAR ASIMETRÍA */
    font-size: 28px !important;     /* Tamaño del número dentro de la casilla */
    text-align: center !important;  /* Centra el número horizontalmente */
    border: 1px solid #000000 !important; /* Borde de la casilla */
    border-radius: 8px !important;  /* Esquinas redondeadas de la casilla */
    background-color: #f7f7f7 !important; /* Color de fondo de la casilla */
    padding: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* 
 * Estilo para la casilla que está seleccionada (en foco).
 */
.xoo-ml-otp-input:focus {
    border-color: #777 !important; 
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.4) !important; 
    outline: none !important;       
}

/* 
 * RESPONSIVIDAD PARA MÓVILES (Pantallas menores a 400px)
 * Evita que el último dígito se salga de la pantalla.
 */
@media (max-width: 400px) {
    .xoo-ml-otp-input-cont {
        padding: 10px !important;   /* Reduce el espacio interior del contenedor */
        gap: 3px !important;        /* Aumentado a 3px para mejor legibilidad */
        justify-content: center !important; /* Asegura el centrado interior */
    }

    .xoo-ml-otp-input {
        width: 38px !important;     /* Reduce el ancho de la casilla para móviles */
        height: 50px !important;    /* Reduce el alto para móviles */
        font-size: 20px !important; /* Reduce el tamaño del número */
    }
}