/*
==========================================================================
 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 */
    
    /* 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 */
    height: 65px !important;        /* Alto de la casilla */
    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 (según tu última modificación) */
    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; /* Color del borde al seleccionar (según tu última modificación) */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.4) !important; /* Sombra azulada para resaltar */
    outline: none !important;       /* Elimina el borde azul por defecto del navegador */
}