/* ============================================================
   XCHANGEKART LOGIN EXPERIENCE V1
   Visual layer only.
   Existing WooCommerce form submission/authentication remains.
   ============================================================ */

body.woocommerce-account form.woocommerce-form-login.login {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 30px !important;
    border: 1px solid #e1e5eb !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .07) !important;
    box-sizing: border-box !important;
}

body.woocommerce-account form.woocommerce-form-login.login::before {
    content: "Welcome back to XchangeKart" !important;
    display: block !important;
    margin: 0 0 24px !important;
    color: #667085 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

body.woocommerce-account form.woocommerce-form-login.login
.woocommerce-form-row {
    margin: 0 0 17px !important;
}

body.woocommerce-account form.woocommerce-form-login.login
label[for="username"] {
    font-size: 0 !important;
    display: block !important;
    margin: 0 0 7px !important;
}

body.woocommerce-account form.woocommerce-form-login.login
label[for="username"]::after {
    content: "Mobile number" !important;
    font-size: 13px !important;
    color: #344054 !important;
    font-weight: 700 !important;
}

body.woocommerce-account form.woocommerce-form-login.login
label[for="password"] {
    display: block !important;
    margin: 0 0 7px !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

body.woocommerce-account form.woocommerce-form-login.login
input#username,
body.woocommerce-account form.woocommerce-form-login.login
input[name="username"],
body.woocommerce-account form.woocommerce-form-login.login
input#password {
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 14px !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #172033 !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

body.woocommerce-account form.woocommerce-form-login.login
input#username:focus,
body.woocommerce-account form.woocommerce-form-login.login
input[name="username"]:focus,
body.woocommerce-account form.woocommerce-form-login.login
input#password:focus {
    border-color: #2874f0 !important;
    box-shadow: 0 0 0 3px rgba(40,116,240,.10) !important;
}

body.woocommerce-account form.woocommerce-form-login.login
input#username::placeholder,
body.woocommerce-account form.woocommerce-form-login.login
input[name="username"]::placeholder {
    color: #98a2b3 !important;
}

body.woocommerce-account form.woocommerce-form-login.login
.woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 3px 0 16px !important;
    color: #667085 !important;
    font-size: 12px !important;
}

body.woocommerce-account form.woocommerce-form-login.login
.woocommerce-form-login__submit {
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    border: 1px solid #2874f0 !important;
    border-radius: 10px !important;
    background: #2874f0 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: background .18s ease, transform .18s ease !important;
}

body.woocommerce-account form.woocommerce-form-login.login
.woocommerce-form-login__submit:hover {
    background: #1f66da !important;
}

body.woocommerce-account form.woocommerce-form-login.login
.woocommerce-form-login__submit:active {
    transform: translateY(1px) !important;
}

body.woocommerce-account form.woocommerce-form-login.login
.woocommerce-LostPassword {
    margin: 14px 0 0 !important;
    text-align: center !important;
}

body.woocommerce-account form.woocommerce-form-login.login
.woocommerce-LostPassword a {
    color: #2874f0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

body.woocommerce-account form.woocommerce-form-login.login
.woocommerce-LostPassword a:hover {
    text-decoration: underline !important;
}

/*
 * Fast2SMS OTP panel.
 * The plugin owns all OTP behavior; this only improves presentation.
 */
body.woocommerce-account [class*="fast2sms"],
body.woocommerce-account [id*="fast2sms"] {
    box-sizing: border-box !important;
}

body.woocommerce-account .xk-login-otp-heading {
    display: block !important;
    margin: 22px 0 12px !important;
    padding-top: 18px !important;
    border-top: 1px solid #e7eaf0 !important;
    color: #172033 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

@media (max-width: 767px) {
    body.woocommerce-account form.woocommerce-form-login.login {
        max-width: none !important;
        margin: 0 !important;
        padding: 22px 16px !important;
        border-radius: 12px !important;
    }
}