.alr-wrap { max-width:450px; margin:0 auto; border:1px solid #eee; padding:25px; border-radius:6px; background:#fff; }
.alr-label { display:block; margin:8px 0 4px; font-weight:600; }
.alr-wrap input { width:100%; padding:10px; margin-bottom:8px; box-sizing:border-box; }
.alr-actions { margin-top:8px; gap:8px; align-items:center;    text-align: center; }
.button { padding:8px 12px; cursor:pointer; border:1px solid #0073aa; background:#0073aa; color:#fff; border-radius:4px; }
.alr-msg { margin-top:8px; color:#cc0000; min-height:18px; }
.hidden { display:none; }
.alr-small { font-size:13px; margin-top:6px; color:#333; }
.alr-welcome { font-size:26px; font-weight:700; margin-bottom:8px; }

.alr-actions button {
    width: 100%;
}
.alr-msg {
  display: none;
}
 #layout-account #alr-main-form input[type="password"]:focus {
    background-color: var(--bgGray) !important; 
}
a#alr-lost-pass {
    margin-top: 5px;
    display: inline-block;
}
#alr-main-form a{
    color: #0073aa;
}
button#lostPassBtn, #verifyOtpBtn, #resetPassBtn, #lostPassBtn {
    width: 100%;
}
/* manoj */
.welcomeOTP
{
    margin-top: 40px;
    margin-bottom: 40px;
}

.loginMainTitle{
    font-family: var(--main-font);
    font-size: 27px;
    color: var(--theme-secondary-color);
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight:400;
}

.whiteText{
    color: #ffffff;
}

.alr-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.alr-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
}
.alr-input-wrap span.alr-prefix {
    position: absolute;
    top: 15px;
    left: 10px;
}
.alr-input-wrap input {
    flex: 1;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 4px 4px 0;
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
    height: auto;
    line-height: 1.4;
}
/*input#alr-identifier-read {*/
/*    padding-left: 60px;*/
/*}*/
/* OTP Input Container */
.alr-otp-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
}

.alr-otp-input {
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 28px !important;
    font-weight: 600;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.alr-otp-input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

.alr-otp-input:invalid,
.alr-otp-input.error {
    border-color: #cc0000;
    background-color: #fff5f5;
}

.alr-countdown {
    margin-left: 8px;
    color: #666;
    font-size: 13px;
}

.alr-password-feedback {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    min-height: 16px;
}

input#alr-otp {
    letter-spacing: 12px;
    font-size: 30px !important;
    text-align: center;
    font-weight: 600;
    box-sizing: border-box;
    display: none; /* Hide old single input */
}

.alr-password-wrap {
    position: relative;
    width: 100%;
    display: inline-block;
}

.alr-password-wrap input {
    width: 100%;
    padding-right: 40px; /* room for eye icon */
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    box-sizing: border-box;
}

.alr-eye-toggle {
    position: absolute;
    right: 12px;
    top: 45%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    font-size: 18px;
    color: #777;
    transition: color 0.2s;
}

.alr-eye-toggle:hover {
    color: #000;
}

.resetPassOTP{
    width: 100% !important;
    border-radius: 3px !important;
}

input#user_login {
    display: block;
    width: 100%;
    padding: 12px 14px !important;
    font-size: 15px !important;
    border-radius: 3px !important;
    transition: border-color 0.25s ease, background-color 0.25s ease;
    box-sizing: border-box;
}

.butStyle{
    border: 0px solid transparent;
}

input#confirm_pass
{
background-color: white !important;
color: black !important;
}

input#new_pass
{
background-color: white !important;
color: black !important;
}

/* for terms and conditions in registration page */
.alr-terms .alr-label-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.alr-terms input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: #0073aa; /* matches WooCommerce blue */
    cursor: pointer;
}

.alr-terms a {
    color: #0073aa;
    text-decoration: underline;
}



@media(min-width:768px){
   .welcomeOTP
{
    margin-top: 60px;
    margin-bottom: 60px;
} 
}
@media(min-width:1200px){
.welcomeOTP
{
    margin-top: 100px;
    margin-bottom: 100px;
}
}

/* CAPTCHA Section Styles */
.alr-captcha-section {
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.alr-captcha-box {
    width: 100%;
}

.alr-captcha-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.alr-captcha-question span {
    flex: 1;
}

.alr-refresh-captcha {
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: background-color 0.2s;
}

.alr-refresh-captcha:hover {
    background: #005a87;
}

#alr-captcha-answer {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
}

#alr-verify-captcha-btn {
    width: 100%;
    margin-bottom: 10px;
}

#alr-captcha-msg {
    margin-top: 8px;
    min-height: 18px;
}

span#edit-reg-mobile
{
    float: right;
    color: #cc000b !important;
    cursor: pointer;
}

#alr-initial-msg,
#alr-login-msg {
    text-align: center;
}