/* ─────────────────────────────────────────────────────────────────────────
   lgn-auth.css — shared login / registration design system
   Used by: user/auth/login, user/user/sign-in,
            shop/shop/login, shop/shop/register, shop/shop/login_pdp,
            activate/activate/login, activate/activate/register
   ───────────────────────────────────────────────────────────────────────── */

/* ── Page layout ─────────────────────────────────────────────────────────── */
footer { margin-top: 0; }
.main_wrapper { background: #f3f4f8 none repeat scroll 0 0; padding: 10px; }

.login_wrap {
    align-items: center;
    background: #fff none repeat scroll 0 0;
    border-radius: 20px;
    display: flex;
    margin: 0 auto;
    max-width: 1600px;
    padding: 10px;
}

/* ── Poster image container (background-image set per-page inline) ────────── */
.lw_flex,
.lw_flex--shop,
.lw_flex--activate {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    flex: 1 1 auto;
    height: 737px;
    min-width: 0;
}

.lw_flex.lw_flex_reg {
    background-image: url("/images/2k26/register-poster.jpg");
    height: 831px;
}

/* ── Auth section ────────────────────────────────────────────────────────── */
.lgn_auth__section { flex: 0 0 602px; width: 602px; max-width: 100%; }
.lgn_auth__wrap { margin: 0 auto; max-width: 442px; width: 100%; }

/* ── Heading ─────────────────────────────────────────────────────────────── */
.lgn_auth__heading { margin-bottom: 14px; text-align:center; }
.lgn_auth__title { color: #1a1a1a; font-size: 40px; font-weight: 900; letter-spacing: 0; line-height: 44px; margin: 0; }
.lgn_auth__subtitle { color: #7e7f81; font-size: 18px; font-weight: 600; letter-spacing: 0.4px; line-height: 22px; margin: 10px 0 0; }

/* ── Banner (shop / activate mobile-first toggle) ────────────────────────── */
.lgn_auth__banner { text-align: center; padding: 20px 0; }
.lgn_auth__banner_btns { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

.lgn_auth__submit--outline {
    background: #fff;
    color: #000;
    border: 2px solid #000;
}
.lgn_auth__submit--outline:hover,
.lgn_auth__submit--outline:focus { background: #000; color: #fff; }

.lgn_auth__back {
    background: none;
    border: none;
    color: #eb0000;
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
    padding: 0;
    text-align: left;
}
.lgn_auth__back:hover { text-decoration: underline; }

/* ── Social SSO buttons ──────────────────────────────────────────────────── */
.lgn_auth__social { width: 100%; }
.lgn_auth__social_btn {
    align-items: center;
    background: #000;
    border: 0;
    border-radius: 999px;
    color: #f6feff;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    height: 48px;
    justify-content: center;
    margin: 0 0 8px;
    padding: 0 16px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    width: 100%;
}
.lgn_auth__social_btn:hover { opacity: 0.88; }
.lgn_auth__social_btn:active { transform: translateY(1px); }

.lgn_auth__social_icon { display: block; flex: 0 0 auto; margin-right: 16px; object-fit: contain; }
.lgn_auth__social_icon--google { height: 24px; width: 24px; }
.lgn_auth__social_icon--apple { height: 24px; width: 24px; }

/* ── Divider ─────────────────────────────────────────────────────────────── */
.lgn_auth__divider {
    align-items: center;
    color: #9aa1ab;
    display: flex;
    font-size: 16px;
    line-height: 1;
    margin: 19px 0 17px;
    text-align: center;
    white-space: nowrap;
}
.lgn_auth__divider::before,
.lgn_auth__divider::after { background: #cccdd0; content: ""; display: block; height: 1px; width: 100%; }
.lgn_auth__divider span { display: inline-block; padding: 0 12px; }

/* ── Form fields ─────────────────────────────────────────────────────────── */
.lgn_auth__field { margin-bottom: 14px; }
.lgn_auth__label, .activation_details label.lgn_auth__label  { color: #000; display: block; font-size: 14px; font-weight: 400; line-height: 20px; margin-bottom: 6px; text-transform: capitalize; }
.lgn_auth__input, #activate_form_area input[type="text"], #activate_form_area input[type="email"] {
    background: #fff;
    border: 1px solid #7e7f81;
    border-radius: 999px;
    color: #111;
    display: block;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    line-height: normal;
    outline: none;
    padding: 0 30px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}
#activate_form_area input[type="text"].lgn_auth__input, #activate_form_area input[type="email"].lgn_auth__input, #activate_form_area input[type="password"].lgn_auth__input {
    background: #fff;
    border: 1px solid #7e7f81;
    border-radius: 999px;
    color: #111;
    display: block;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    line-height: normal;
    outline: none;
    padding: 0 30px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}
.lgn_auth__input::placeholder { color: #7e7f81; opacity: 1; }
.lgn_auth__input:focus { border: 2px solid #000; }

.lgn_auth__password_wrap { position: relative; }
.lgn_auth__input--password { padding-right: 58px; }
.lgn_auth__password_toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #575859;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
}
.lgn_auth__password_toggle:hover { color: #000; }
.lgn_auth__password_toggle[aria-pressed="true"] .lgn_auth__eye_slash { display: none; }

.lgn_auth__forgot { line-height: 1.2; margin: 14px 1px; text-align: right; }
.lgn_auth__forgot a { color: #eb0000; font-size: 16px; font-weight: 700; text-decoration: none; }
.lgn_auth__forgot a:hover,
.lgn_auth__forgot a:focus { text-decoration: underline; }

/* ── Submit button ───────────────────────────────────────────────────────── */
.lgn_auth__submit {
    background: #000;
    border: 2px solid #000;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    height: 52px;
    line-height: 1;
    padding: 0 24px;
    transition: background 0.2s ease, color 0.2s ease;
    width: 100%;
}
.lgn_auth__submit:hover, .lgn_auth__submit:focus {
    background: #fff none repeat scroll 0 0;
    border: 2px solid #000;
    color: #000;
}
.lgn_auth__submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Sign-up / log-in switch line ────────────────────────────────────────── */
.lgn_auth__signup { color: #575859; font-size: 16px; font-weight: 400; line-height: 20px; margin: 13px 0 0; text-align: center; }
.lgn_auth__signup a { color: #eb0000; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ── Two-column name row ─────────────────────────────────────────────────── */
.lgn_auth__field_row { display: flex; gap: 14px; margin-bottom: 14px; }
.lgn_auth__field_row .lgn_auth__field { flex: 1; margin-bottom: 0; min-width: 0; }

/* ── Password hint ───────────────────────────────────────────────────────── */
.lgn_auth__hint { color: #7e7f81; font-size: 14px; font-weight: 400; line-height: 20px; margin: 4px 0 0; }

/* ── Terms / marketing checkboxes ────────────────────────────────────────── */
.lgn_auth__agreements { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.lgn_auth__agreement { align-items: flex-start; cursor: pointer; display: flex; gap: 14px; user-select: none; }
.lgn_auth__ctrl { height: 1px; opacity: 0; position: absolute; width: 1px; }
.lgn_auth__check { display: block; flex: 0 0 24px; height: 24px; margin-top: 1px; position: relative; width: 24px; }
.lgn_auth__check::before {
    background: #fff;
    border: 1px solid #575859;
    border-radius: 6px;
    content: "";
    height: 20px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: background 0.15s ease, border-color 0.15s ease;
    width: 20px;
}
.lgn_auth__ctrl:checked + .lgn_auth__check::before { background: #eb0000; border-color: transparent; }
.lgn_auth__ctrl:checked + .lgn_auth__check::after {
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: "";
    height: 5px;
    left: 8px;
    position: absolute;
    top: 9px;
    transform: rotate(-45deg) translate(-1px, -1px);
    width: 10px;
}
.lgn_auth__check--radio::before { border-radius: 999px; }
.lgn_auth__ctrl:checked + .lgn_auth__check--radio::before { background: #fff; border: 6px solid #eb0000; }
.lgn_auth__ctrl:checked + .lgn_auth__check--radio::after { display: none; }
.lgn_auth__agreement span:last-child { color: #1a1a1a; font-size: 14px; font-weight: 400; line-height: 18px; margin-top: 3px; }

.lgn_auth__agreement span:last-child a {
    color: #1a1a1a;
}

/* ── Error / success message ─────────────────────────────────────────────── */
.lgn-form-msg {
    border-radius: 8px;
    display: none;
    font-size: 14px;
    margin-bottom: 14px;
    padding: 10px 14px;
}
.lgn-form-msg--error { background: #fff0f0; border: 1px solid #f5c6c6; color: #b00020; }
.lgn-form-msg--ok    { background: #f0fff4; border: 1px solid #b7e4c7; color: #1a6836; }

/* ── login message animation ─────────────────────────────────────────────── */
.lgn_js_msg {
    animation: lgn-msg-in 0.2s ease;
}
@keyframes lgn-msg-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── act_cl_9 alert banner ───────────────────────────────────────────────── */
.act_cl_9 {
    align-items: center;
    border-left: 4px solid #eb0000;
    border-radius: 0 4px 4px 0;
    color: #000;
    display: flex;
    margin: 0 0 16px;
    padding: 12px 16px;
}
.act_cl_9__icon { flex: 0 0 auto; margin-right: 10px; }
.act_cl_9__icon img { display: block; height: 20px; width: 20px; }
.act_cl_9__text {
    color: #111;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}
.act_cl_9__text a { color: #eb0000; font-weight: 700; text-decoration: none; }
.act_cl_9__text a:hover { text-decoration: underline; }

/* ── Banner / form initial visibility ────────────────────────────────────────
   Desktop: login form shown, banner + register hidden, back buttons hidden.
   Mobile:  banner shown, both forms hidden, back buttons visible.
   JS overrides via element.style once user interacts.
   ───────────────────────────────────────────────────────────────────────── */
#auth-banner         { display: none; }
#auth-login-wrap     { display: block; }
#auth-register-wrap  { display: none; }
#auth-back-login,
#auth-back-register  { display: none; }

/* ── Google SSO overlay ──────────────────────────────────────────────────── */
.lgn_sso_google_wrap { position: relative; }
.lgn_sso_google_wrap .g_id_signin {
    bottom: 0;
    left: 0;
    opacity: 0.01;
    overflow: hidden;
    pointer-events: auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}
.lgn_sso_google_wrap .lgn_sso_custom_btn { pointer-events: none; }

/* ── PDP compact overrides ───────────────────────────────────────────────── */
.pdp_lgn { padding: 24px 0; }
.pdp_lgn .lgn_auth__title    { font-size: 28px; line-height: 32px; }
.pdp_lgn .lgn_auth__subtitle { font-size: 15px; line-height: 20px; margin: 0 0 20px; }
.pdp_lgn .lgn_auth__social_btn { height: 44px; font-size: 15px; }
.pdp_lgn .lgn_auth__social_icon--google { height: 20px; width: 20px; }
.pdp_lgn .lgn_auth__social_icon--apple  { height: 22px; width: 19px; }
.pdp_lgn .lgn_auth__divider  { font-size: 14px; margin: 16px 0 14px; }
.pdp_lgn .lgn_auth__input    { height: 38px; padding: 0 24px; }
.pdp_lgn .lgn_auth__input--password { padding-right: 50px; }
.pdp_lgn .lgn_auth__password_toggle { height: 38px; right: 14px; width: 28px; }
.pdp_lgn .lgn_auth__forgot a { font-size: 13px; }
.pdp_lgn .lgn_auth__forgot   { margin-bottom: 12px; }
.pdp_lgn .lgn_auth__field    { margin-bottom: 12px; }
.pdp_lgn .lgn_auth__label    { font-size: 13px; }
.pdp_lgn .lgn_auth__submit   { font-size: 17px; height: 46px; padding: 0 24px; }
.pdp_lgn .lgn_auth__signup   { font-size: 14px; margin-top: 12px; }

.ord_auth__section,
.ord_auth__section * {
    box-sizing: border-box;
}
.ord_auth__section {
    align-items: flex-end;
    background-color: #120603;
    /* Add your image path here */
    background-image: url("/images/2k26/Plans_Mobile_B.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    min-height: 528px;
    overflow: hidden;
    padding: 30px;
    position: relative;
    width: 100%;
}
.ord_auth__content {
    color: #fff;
    max-width: 310px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}
.ord_auth__title {
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 32px;
    margin: 0 0 14px;
}
.ord_auth__text {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 20px;
    margin: 0 auto 14px;
}
.ord_auth__actions {
    margin: 0 auto;
    max-width: 200px;
    width: 100%;
}
.ord_auth__btn {
    align-items: center;
    border-radius: 999px;
    display: flex;
    font-size: 20px;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    width: 100%;
}
.ord_auth__btn + .ord_auth__btn {
    margin-top: 14px;
}
.ord_auth__btn--signup {
    background: #eb0000;
    border: 2px solid #eb0000;
    color: #fff;
}
.ord_auth__btn--signup:hover,
.ord_auth__btn--signup:focus {
    background: #fff;
    border-color: #fff;
    color: #ed0000;
    text-decoration: none;
}
.ord_auth__btn--login {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}
.ord_auth__btn--login:hover,
.ord_auth__btn--login:focus {
    background: #fff;
    color: #000;
    text-decoration: none;
}
.ord_auth__btn:active {
    transform: translateY(1px);
}
.ord_auth__btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.4);
    outline-offset: 3px;
}
.cart_lgn_inner .common_auth_area_append {
    padding: 0;
}

/* ── Mobile panel toggle (ord_auth__section ↔ login_wrap) ───────────────── */
@media only screen and (min-width: 1041px) {
    .ord_auth__section { display: none; }
}
@media only screen and (max-width: 1040px) {
    .login_wrap--with-panel:not(.mob_show) { display: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media only screen and (max-width: 1040px) {
    #auth-banner        { display: block; }
    #auth-login-wrap    { display: none; }
    #auth-register-wrap { display: none; }
    #auth-back-login,
    #auth-back-register { display: block; }

    .login_wrap { padding: 0; border-radius:none; }
    .lw_flex,
    .lw_flex--shop,
    .lw_flex--activate { display: none; }

    .lgn_auth__section { margin: 0 auto; padding: 30px; }
    .lgn_auth__title   { font-size: 28px; line-height: 32px; }
    .lgn_auth__subtitle { font-size: 14px; line-height: 1.2; margin: 3px 0 0; }
    .lgn_auth__social_btn { height: 56px; }
    .lgn_auth__divider { font-size: 14px; margin: 22px 0; }
    .lgn_auth__signup  { font-size: 14px; line-height: 18px; }

    .lgn_auth__field_row { display: block; margin-bottom: 0; }
    .lgn_auth__field_row .lgn_auth__field { margin-bottom: 14px; }

.main_wrapper {
    padding: 0;
}

}

/* ── Form error helpers ────────────────────────────────────────────────── */
.register_error { color: #eb0000; font-size: 13px; margin-top: 0; }
.input_err { border-color: #eb0000 !important; }