/* ===================================================================
   My Account — login / register toggle
   Client request: a "MY ACCOUNT" header link should let a visitor log
   in OR register without leaving the page. Login form and the wholesale
   registration form (CF7 #5562) both live in #cl-auth-wrap, toggled by
   assets/js/account-auth.js (inlined in functions.php), and are centered
   on the page rather than left-aligned (supersedes the original
   left-aligned Client_Updates item 22 treatment).
   =================================================================== */

.cl-auth-wrap {
    max-width: 1040px;
    margin: 40px auto 60px;
    padding: 0 20px;
    box-sizing: border-box;
}

.cl-auth-panel h2 {
    text-align: center;
    line-height: 1em;
    margin-bottom: 24px;
}

.cl-auth-panel h2 .cl-auth-toggle-link {
    display: inline-block;
    font-size: 24px;
    margin-top: 8px;
}

/* ── Login panel ─────────────────────────────────────────────────── */
.cl-auth-login .woocommerce-form-login.login {
    max-width: 440px;
    margin: 0 auto;
    box-sizing: border-box;
}

.cl-auth-login .woocommerce-form-login.login input.woocommerce-Input,
.cl-auth-login .woocommerce-form-login.login input.input-text,
.cl-auth-login .woocommerce-form-login.login input[type="text"],
.cl-auth-login .woocommerce-form-login.login input[type="email"],
.cl-auth-login .woocommerce-form-login.login input[type="password"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cl-auth-login .woocommerce-form-login.login .password-input,
.cl-auth-login .woocommerce-form-login.login .woocommerce-form-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cl-auth-login-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.cl-auth-login .woocommerce-LostPassword.lost_password {
    text-align: center;
}

/* ── Login <-> Register toggle links ─────────────────────────────── */
.cl-auth-toggle-link {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #ec008c;
    text-decoration: underline;
    letter-spacing: 0.3px;
}

.cl-auth-toggle-link:hover {
    text-decoration: underline;
}

/* ── Register panel ──────────────────────────────────────────────── */
.cl-auth-register[hidden] {
    display: none;
}

.cl-auth-register .cc-form-wrap.cc-reg-form-outer {
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .cl-auth-wrap {
        margin: 24px auto 40px;
    }

    .cl-auth-login-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}