/* Lost-password screens (form, confirmation, reset form).
 *
 * The card and footer mirror the login screen, whose look lives as inline
 * styles in myaccount/form-login.php; these are the same numbers as classes so
 * three templates can share them. The backdrop (.mulch-login), the vectors and
 * the column widths (.inner-form-wrap) come from main.css.
 *
 * Enqueued on all account pages from functions.php: the notice styling below
 * applies to the login screen too, where errors like "incorrect password" and
 * the "password reset successfully" confirmation land. */

.mlq-auth-card {
    background: #fff;
    border: 2px solid #DEE2E6;
    border-radius: 24px 24px 0 0;
    box-shadow: 0px 4px 6px -4px rgba(16, 24, 40, 0.1), 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
    padding: 36px 28px 28px;
}

@media (min-width: 768px) {
    .mlq-auth-card { padding: 44px 40px 32px; }
}

.mlq-auth-foot {
    border: 2px solid #DEE2E6;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    box-shadow: 0px 4px 6px -4px rgba(16, 24, 40, 0.1), 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
}

.mlq-auth-lead {
    font-size: 15px;
    line-height: 1.65;
    color: #6C757D;
    margin-bottom: 24px;
}

/* The tick on the "check your email" card. */
.mlq-auth-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #EEF5E7;
    color: #6d9e2f;
}

.mlq-auth-tick svg { width: 30px; height: 30px; }

/* WooCommerce prints its notices above the endpoint content, outside anything
 * a template controls, so they are styled from here: centred over the card
 * column and shaped like part of the design instead of a bare grey strip.
 * Scoped to account pages only. */
.woocommerce-account .woocommerce-notices-wrapper:not(:empty) {
    max-width: 608px;
    margin: 32px auto 0;
    padding: 0 16px;
}

/* WooCommerce's classic stylesheet draws an icon via ::before, positioned for
 * its own 3.5em padding; with this card padding it lands on the first word. */
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error li::before,
.woocommerce-account .woocommerce-message li::before,
.woocommerce-account .woocommerce-info li::before {
    display: none;
    content: none;
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
    list-style: none;
    margin: 0 0 8px;
    padding: 14px 18px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
}

.woocommerce-account .woocommerce-error li { list-style: none; margin: 0; }
.woocommerce-account .woocommerce-error li + li { margin-top: 6px; }

.woocommerce-account .woocommerce-error {
    background: #FDF1F0;
    border-color: #F2C8C2;
    color: #93392C;
}

.woocommerce-account .woocommerce-message {
    background: #EEF5E7;
    border-color: #CDE3B3;
    color: #4A7220;
}

.woocommerce-account .woocommerce-info {
    background: #EFF5F9;
    border-color: #C8DDEA;
    color: #35637E;
}

/* WooCommerce's password strength meter, which appends itself under the first
 * password field on the reset form. */
.mlq-auth-card .woocommerce-password-strength {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

.mlq-auth-card .woocommerce-password-hint {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: #6C757D;
}