.otp-login-container {
    max-width: 480px;
    margin: 40px auto;
    padding: 36px 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.otp-login-container .otp-step {
    display: none;
}

.otp-login-container .otp-step.active {
    display: block;
}

.otp-login-container h3 {
    margin-top: 0;
    margin-bottom: 32px;
    color: #333;
    line-height: 1.4;
}

.otp-login-container .form-group {
    margin-bottom: 32px;
}

.otp-login-container .form-group label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: #555;
    line-height: 1.5;
}

.otp-login-container .form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}

.otp-login-container .form-group input:focus {
    outline: none;
    border-color: #007a3b;
}

/* direction: ltr is deliberate and applies to the Arabic page. The container
   carries dir="rtl" there, which reverses this flex row - digit index 0 would
   render rightmost, so typing 1-2-3 would fill the boxes right to left and the
   code would read backwards. A numeric OTP is read left to right in Arabic
   too, so the row is pinned LTR regardless of page direction. */
.otp-login-container .otp-input-container {
    display: flex;
    direction: ltr;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.otp-login-container .otp-digit {
    width: 40px !important;
    height: 40px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border: 2px solid #bbb !important;
    border-radius: 8px;
    padding: 0 !important;
    transition: all 0.3s ease;
}

.otp-login-container .otp-digit:focus {
    border-color: #007a3b !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 59, 0.1);
    outline: none;
}

.otp-login-container .otp-digit.filled {
    border-color: #007a3b !important;
    background-color: #f0f9f4;
}

.otp-login-container .otp-button {
    width: 100%;
    padding: 14px 16px;
    background: #007a3b;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: 10px;
    margin-top: 10px;
}

.otp-login-container .otp-button:hover {
    background: #006330;
}

.otp-login-container .otp-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.otp-login-container .otp-button-secondary {
    width: 100%;
    padding: 12px;
    background: #f0f0f0;
    color: #333;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.otp-login-container .otp-button-secondary:hover {
    background: #e0e0e0;
}

.otp-login-container .otp-message {
	font-size: 13px;
    padding: 5px 12px 5px 12px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.otp-login-container .otp-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.otp-login-container .otp-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.otp-login-container .otp-info {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.6;
    text-align: center;
}
/* --- RTL (Arabic page) ---------------------------------------------------
   The Arabic page renders the container as <div class="otp-login-container"
   dir="rtl">. There the input's padding applied but its border did not, so
   the field showed as floating placeholder text with no box.

   Nothing in the 22 stylesheets the page serves accounts for that - the theme
   only styles inputs inside .comments-form / .footer-newsletter-form /
   .xb-* wrappers, and Elementor's RTL build differs from its LTR build by a
   single accordion arrow rotation. Since the overriding declaration could not
   be identified server-side, these re-assert the box explicitly and carry
   !important so they win regardless of what sets it at runtime. The values
   are identical to the LTR rules above - this changes nothing about the
   design, it only makes the Arabic box match the English one. */
.otp-login-container[dir="rtl"] .form-group input {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #bbb !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
}

.otp-login-container[dir="rtl"] .form-group input:focus {
    outline: none;
    border-color: #007a3b !important;
}