/* ==========================================================================
   MegaPets 2.0 — My Account authentication

   Scope:
   - logged-out My Account login;
   - standalone registration;
   - lost-password and reset-password views.

   The logged-in customer dashboard and checkout are intentionally untouched.
   ========================================================================== */

.mp-my-account-auth-page .site-content {
    background: var(--mp-color-page);
}

/* Astra layout reset */

body.mp-my-account-auth-page .site-content > .ast-container {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}

body.mp-my-account-auth-page #primary,
body.mp-my-account-auth-page .content-area {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
}

body.mp-my-account-auth-page #secondary {
    display: none;
}

body.mp-my-account-auth-page .entry-header,
body.mp-my-account-auth-page .entry-title {
    display: none;
}

body.mp-my-account-auth-page .ast-article-single,
body.mp-my-account-auth-page article.page {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

body.mp-my-account-auth-page .entry-content {
    margin: 0;
    padding: 0;
}

.mp-my-account-auth-page .site-main {
    min-height: 0;
}

/* Authentication shell */

body.mp-my-account-auth-page.woocommerce-account
    .site-main > .woocommerce,
body.mp-my-account-auth-page.woocommerce-account
    .entry-content > .woocommerce {
    --mp-account-checkbox-size: 20px;
    --mp-account-checkbox-check-size: 13.5px;
    --mp-account-checkbox-check-mask:
        url("../../assets/icons/mp-trust-icon-check.svg");

    width: min(calc(100% - 32px), 720px);
    max-width: 720px;
    box-sizing: border-box;
    margin: 24px auto 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mp-color-grey);
    font-family: var(--mp-font-body);
}

.mp-my-account-auth-page .woocommerce #customer_login,
.mp-my-account-auth-page .woocommerce .woocommerce-ResetPassword {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.mp-my-account-auth-page .woocommerce #customer_login > .u-column1,
.mp-my-account-auth-page .woocommerce #customer_login > .u-column2,
.mp-my-account-auth-page .woocommerce .woocommerce-ResetPassword {
    float: none;
    width: 100%;
    box-sizing: border-box;
    padding: 24px 32px;
    border: var(--mp-border-width) solid var(--mp-color-border-subtle);
    border-radius: var(--mp-radius-large);
    background: var(--mp-color-surface);
    box-shadow: var(--mp-shadow);
}

.mp-my-account-auth-page .woocommerce #customer_login::before,
.mp-my-account-auth-page .woocommerce #customer_login::after {
    display: table;
    clear: both;
    content: "";
}

.mp-my-account-auth-page .woocommerce #customer_login h2,
.mp-my-account-auth-page .woocommerce .woocommerce-ResetPassword h2 {
    margin: 0 0 18px;
    color: var(--mp-color-brown-chocolate);
    font-family: var(--mp-font-heading);
    font-size: 34px;
    font-weight: var(--mp-font-weight-semibold);
    line-height: 1.1;
    text-align: center;
}

/* Forms and fields */

.mp-my-account-auth-page .woocommerce form.login,
.mp-my-account-auth-page .woocommerce form.register {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mp-my-account-auth-page .woocommerce form .form-row {
    margin: 0 0 12px;
    padding: 0;
}

.mp-my-account-auth-page .woocommerce form.register > p:not(.form-row) {
    margin: 0 0 10px;
    color: var(--mp-color-brown-chocolate);
    font-size: 13px;
    line-height: 1.5;
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce form .form-row
    > label:not(.checkbox):not(.radio):not(.woocommerce-form__label-for-checkbox) {
    position: static;
    z-index: auto;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0 0 5px;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    opacity: 1;
    pointer-events: auto;
    color: var(--mp-color-dark);
    font-family: var(--mp-font-body);
    font-size: 13px;
    font-weight: var(--mp-font-weight-semibold);
    line-height: 1.45;
    text-overflow: clip;
    user-select: auto;
}

.mp-my-account-auth-page .woocommerce form .form-row .required {
    color: var(--mp-color-action-primary-active-dark);
    text-decoration: none;
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce form .form-row input.input-text {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 13px;
    border: var(--mp-border-width, 1px) solid
        var(--mp-color-gold-dark, #b8833e);
    border-radius: var(--mp-radius, 8px);
    outline: 0;
    background: var(--mp-color-surface, #fff);
    box-shadow: none;
    color: var(--mp-color-dark, #2a221b);
    font-family: var(--mp-font-body);
    font-size: 15px;
    line-height: 1.4;
    transition:
        border-color var(--mp-duration-fast) ease,
        box-shadow var(--mp-duration-fast) ease,
        background-color var(--mp-duration-fast) ease;
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce form .form-row input.input-text::placeholder {
    color: transparent;
    opacity: 0;
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce form .form-row input.input-text:hover {
    border-color: var(--mp-color-action-primary-active-dark, #8a5c20);
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce form .form-row input.input-text:focus {
    border-color: var(--mp-color-action-primary-active-dark, #8a5c20);
    box-shadow: 0 0 0 3px
        var(--mp-color-action-primary-alpha-24, rgba(184, 131, 62, 0.24));
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce form .form-row.woocommerce-invalid input.input-text {
    border-color: #b3261e;
}

.mp-my-account-auth-page .woocommerce form .password-input {
    display: block;
    width: 100%;
}

.mp-my-account-auth-page .woocommerce form .show-password-input {
    color: var(--mp-color-brown-chocolate);
}

/* Round Trust Line checkbox used by the native WooCommerce login form */

.mp-my-account-auth-page .woocommerce form
    .woocommerce-form-login__rememberme {
    --mp-account-checkbox-gap: 9px;
    position: relative;
    display: inline-block;
    min-height: 44px;
    margin: 0;
    color: var(--mp-color-dark);
    font-size: 13px;
    font-weight: var(--mp-font-weight-semibold);
    cursor: pointer;
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce .woocommerce-form-login__rememberme
    > input[type="checkbox"] {
    position: absolute;
    width: 1px;
    min-width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce .woocommerce-form-login__rememberme > input + span {
    position: relative;
    display: block;
    min-height: var(--mp-account-checkbox-size);
    padding-left: calc(
        var(--mp-account-checkbox-size)
        + var(--mp-account-checkbox-gap)
    );
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce .woocommerce-form-login__rememberme
    > input + span::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--mp-account-checkbox-size);
    height: var(--mp-account-checkbox-size);
    box-sizing: border-box;
    border: var(--mp-border-width) solid var(--mp-color-border-subtle);
    border-radius: var(--mp-radius-pill);
    background: var(--mp-color-surface);
    content: "";
    transform: translateY(-50%);
    transition:
        border-color var(--mp-duration-fast) ease,
        background-color var(--mp-duration-fast) ease,
        box-shadow var(--mp-duration-fast) ease;
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce .woocommerce-form-login__rememberme
    > input:checked + span::before {
    border-color: var(--mp-color-gold-dark);
    background: var(--mp-color-gold-dark);
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce .woocommerce-form-login__rememberme
    > input:checked + span::after {
    position: absolute;
    top: 50%;
    left: 3.25px;
    width: var(--mp-account-checkbox-check-size);
    height: var(--mp-account-checkbox-check-size);
    background: var(--mp-color-surface);
    content: "";
    pointer-events: none;
    -webkit-mask-image: var(--mp-account-checkbox-check-mask);
    mask-image: var(--mp-account-checkbox-check-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: translateY(-50%);
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce .woocommerce-form-login__rememberme:hover
    > input + span::before {
    border-color: var(--mp-color-gold-dark);
}

body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
    .woocommerce .woocommerce-form-login__rememberme
    > input:focus-visible + span::before {
    outline: 2px solid var(--mp-color-action-primary-active-dark);
    outline-offset: 3px;
}

/* Buttons and links */

.mp-my-account-auth-page .woocommerce button.button,
.mp-my-account-auth-page .woocommerce button.button:hover,
.mp-my-account-auth-page .woocommerce button.button:focus,
.mp-my-account-auth-page .woocommerce button.button:active {
    width: 100%;
    min-height: 46px;
    margin: 2px 0 0;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--mp-radius);
    color: var(--mp-color-dark);
    font-family: var(--mp-font-body);
    font-size: 15px;
    font-weight: var(--mp-font-weight-semibold);
    line-height: 1.35;
    text-shadow: none;
    cursor: pointer;
    transition:
        background var(--mp-duration-fast) ease,
        box-shadow var(--mp-duration-fast) ease,
        transform var(--mp-duration-fast) var(--mp-ease);
}

.mp-my-account-auth-page .woocommerce button.button {
    background: var(--mp-action-soft-background);
    box-shadow: 0 4px 12px rgba(42, 34, 27, 0.10);
}

.mp-my-account-auth-page .woocommerce button.button:hover,
.mp-my-account-auth-page .woocommerce button.button:focus-visible {
    background: var(--mp-action-soft-background);
    box-shadow: 0 7px 18px rgba(42, 34, 27, 0.15);
    transform: translateY(-1px);
}

.mp-my-account-auth-page .woocommerce button.button:active {
    background: var(--mp-action-soft-background);
    box-shadow: 0 3px 8px rgba(42, 34, 27, 0.12);
    transform: translateY(0);
}

.mp-my-account-auth-page .woocommerce button.button:focus-visible,
.mp-my-account-auth-page .woocommerce a:focus-visible,
.mp-my-account-auth-page .woocommerce input.input-text:focus-visible {
    outline: 2px solid var(--mp-color-action-primary-active-dark);
    outline-offset: 3px;
}

.mp-my-account-auth-page .woocommerce .lost_password,
.mp-my-account-auth-page .woocommerce .ast-woo-form-actions {
    margin: 10px 0 0;
    color: var(--mp-color-grey);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

body.mp-my-account-auth-page .woocommerce .lost_password a,
body.mp-my-account-auth-page .woocommerce .ast-woo-account-form-link,
body.mp-my-account-auth-page .woocommerce .woocommerce-privacy-policy-text a {
    color: var(--mp-color-action-primary-active-dark);
    font-weight: var(--mp-font-weight-semibold);
    text-decoration: none;
    transition: color var(--mp-duration-fast) ease;
}

.mp-my-account-auth-page .woocommerce .ast-woo-account-form-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

body.mp-my-account-auth-page .woocommerce .lost_password a:hover,
body.mp-my-account-auth-page .woocommerce .lost_password a:focus,
body.mp-my-account-auth-page .woocommerce .lost_password a:active,
body.mp-my-account-auth-page .woocommerce .ast-woo-account-form-link:hover,
body.mp-my-account-auth-page .woocommerce .ast-woo-account-form-link:focus,
body.mp-my-account-auth-page .woocommerce .ast-woo-account-form-link:active,
body.mp-my-account-auth-page
    .woocommerce .woocommerce-privacy-policy-text a:hover,
body.mp-my-account-auth-page
    .woocommerce .woocommerce-privacy-policy-text a:focus,
body.mp-my-account-auth-page
    .woocommerce .woocommerce-privacy-policy-text a:active {
    color: var(--mp-color-dark);
    text-decoration: none;
}

/* Registration legal copy */

.mp-my-account-auth-page .woocommerce .woocommerce-privacy-policy-text {
    margin: 10px 0 12px;
    padding: 10px 12px;
    border: var(--mp-border-width) solid var(--mp-color-border-interactive);
    border-left: 3px solid var(--mp-color-gold);
    border-radius: var(--mp-radius-small);
    background: var(--mp-color-background-soft);
    color: var(--mp-color-brown-chocolate);
    font-size: 13px;
    line-height: 1.5;
}

.mp-my-account-auth-page .woocommerce .woocommerce-privacy-policy-text p {
    margin: 0;
}

.mp-my-account-auth-page .woocommerce
    .woocommerce-terms-and-conditions-link::after,
.mp-my-account-auth-page .woocommerce
    .woocommerce-privacy-policy-link::after {
    display: inline-block;
    margin-left: 0.24em;
    content: "\2197";
    font-size: 0.82em;
    text-decoration: none;
}

/* WooCommerce notices and password reset */

.mp-my-account-auth-page .woocommerce .woocommerce-error,
.mp-my-account-auth-page .woocommerce .woocommerce-message,
.mp-my-account-auth-page .woocommerce .woocommerce-info {
    margin: 0 0 14px;
    padding: 11px 14px 11px 42px;
    border-top-color: var(--mp-color-gold-dark);
    border-radius: var(--mp-radius);
    background: var(--mp-color-cream);
    color: var(--mp-color-dark);
    font-family: var(--mp-font-body);
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none;
}

.mp-my-account-auth-page .woocommerce .woocommerce-error::before,
.mp-my-account-auth-page .woocommerce .woocommerce-message::before,
.mp-my-account-auth-page .woocommerce .woocommerce-info::before {
    color: var(--mp-color-action-primary-active-dark);
}

.mp-my-account-auth-page .woocommerce .woocommerce-ResetPassword > p:first-child {
    margin: 0 0 16px;
    color: var(--mp-color-brown-chocolate);
    font-size: 14px;
    line-height: 1.55;
}

/* Mobile */

@media (max-width: 767px) {
    body.mp-my-account-auth-page.woocommerce-account
        .site-main > .woocommerce,
    body.mp-my-account-auth-page.woocommerce-account
        .entry-content > .woocommerce {
        width: min(calc(100% - 24px), 720px);
        margin-top: 16px;
        margin-bottom: 28px;
    }

    .mp-my-account-auth-page .woocommerce #customer_login,
    .mp-my-account-auth-page .woocommerce .woocommerce-ResetPassword {
        max-width: 100%;
        margin: 0 auto;
    }

    .mp-my-account-auth-page .woocommerce #customer_login > .u-column1,
    .mp-my-account-auth-page .woocommerce #customer_login > .u-column2,
    .mp-my-account-auth-page .woocommerce .woocommerce-ResetPassword {
        padding: 22px 18px;
    }

    .mp-my-account-auth-page .woocommerce #customer_login h2,
    .mp-my-account-auth-page .woocommerce .woocommerce-ResetPassword h2 {
        margin-bottom: 18px;
        font-size: 30px;
    }

    .mp-my-account-auth-page .woocommerce form.register > p:not(.form-row) {
        font-size: 14px;
    }

    body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
        .woocommerce form .form-row
        > label:not(.checkbox):not(.radio):not(.woocommerce-form__label-for-checkbox) {
        font-size: 14px;
    }

    body.mp-my-account-auth-page:not(.cartflows-canvas):not(.cartflows-default)
        .woocommerce form .form-row input.input-text,
    .mp-my-account-auth-page .woocommerce button.button {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-my-account-auth-page .woocommerce *,
    .mp-my-account-auth-page .woocommerce *::before,
    .mp-my-account-auth-page .woocommerce *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}