/* ==================================================
   MY CARE WIZARD
   SIGN IN PAGE
================================================== */


:root {

    --signin-bg: #f4ead6;
    --signin-bg-soft: #fbf5e9;
    --signin-card: #fffaf0;

    --signin-green: #2d563b;
    --signin-green-dark: #1f3f2c;
    --signin-green-soft: #6f8f77;

    --signin-tan: #d8c7a8;
    --signin-tan-soft: #e8dcc6;

    --signin-text: #21382a;
    --signin-text-soft: #5d6d62;
    --signin-muted: #7d897f;

    --signin-border:
        rgba(45, 86, 59, 0.16);

    --signin-shadow:
        0 14px 36px rgba(44, 68, 50, 0.12);

    --signin-error: #a63737;
    --signin-error-bg: #fff1ef;

    --signin-success: #2d6b40;
    --signin-success-bg: #edf7ef;

}


/* ==================================================
   GLOBAL
================================================== */

* {
    box-sizing: border-box;
}


body {

    margin: 0;
    padding: 0;

    font-family:
        Arial,
        sans-serif;

    color:
        var(--signin-text);

    background:
        linear-gradient(
            135deg,
            #f7eedf 0%,
            #f4ead6 55%,
            #efe1c8 100%
        );

    line-height: 1.6;

}


/* ==================================================
   PAGE HEADER
================================================== */

.signin-page-header {

    padding:
        44px 20px;

    background:
        linear-gradient(
            135deg,
            var(--signin-green),
            var(--signin-green-dark)
        );

    text-align:
        center;

    color:
        #fffaf0;

}


.signin-page-header-inner {

    width:
        min(650px, 100%);

    margin:
        0 auto;

}


.signin-page-header h1 {

    margin:
        0 0 8px;

    color:
        #fffaf0;

    font-size:
        clamp(
            2rem,
            5vw,
            2.7rem
        );

}


.signin-page-header p {

    margin:
        0;

    color:
        var(--signin-tan-soft);

    font-size:
        1.08rem;

}


/* ==================================================
   PAGE CONTAINER
================================================== */

.signin-page-container {

    width:
        min(
            580px,
            calc(100% - 32px)
        );

    margin:
        42px auto 65px;

}


/* ==================================================
   SIGN IN CARD
================================================== */

.signin-card {

    padding:
        38px;

    border:
        1px solid
        var(--signin-border);

    border-radius:
        18px;

    background:
        var(--signin-card);

    box-shadow:
        var(--signin-shadow);

}


.signin-card-heading {

    margin-bottom:
        30px;

    text-align:
        center;

}


.signin-card-heading h2 {

    margin:
        0 0 8px;

    color:
        var(--signin-green-dark);

    font-size:
        1.9rem;

}


.signin-card-heading p {

    max-width:
        470px;

    margin:
        0 auto;

    color:
        var(--signin-text-soft);

    font-size:
        1rem;

}


/* ==================================================
   FORM
================================================== */

#returningCustomerForm {

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.form-group label {

    color:
        var(--signin-text);

    font-size:
        1.08rem;

    font-weight:
        800;

}


.form-group label span[aria-hidden="true"] {

    color:
        var(--signin-error);

}


/* ==================================================
   INPUTS
================================================== */

.form-group input {

    width:
        100%;

    min-height:
        58px;

    padding:
        14px 15px;

    border:
        1px solid
        var(--signin-tan);

    border-radius:
        10px;

    background:
        #fffdf7;

    color:
        var(--signin-text);

    font:
        inherit;

    font-size:
        1rem;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.form-group input:hover {

    border-color:
        var(--signin-green-soft);

}


.form-group input:focus {

    outline:
        none;

    border-color:
        var(--signin-green);

    box-shadow:
        0 0 0 4px
        rgba(45, 86, 59, 0.13);

}


.form-group input::placeholder {

    color:
        #8a948b;

}


/* ==================================================
   PASSWORD
================================================== */

.password-field {

    position:
        relative;

}


.password-field input {

    padding-right:
        82px;

}


.show-password-button {

    position:
        absolute;

    top:
        50%;

    right:
        8px;

    transform:
        translateY(-50%);

    min-width:
        62px;

    min-height:
        42px;

    padding:
        7px 10px;

    border:
        none;

    border-radius:
        7px;

    background:
        var(--signin-tan-soft);

    color:
        var(--signin-green-dark);

    font-weight:
        800;

    cursor:
        pointer;

}


.show-password-button:hover,
.show-password-button:focus {

    background:
        var(--signin-tan);

}


/* ==================================================
   SIGN IN BUTTON
================================================== */

.signin-button {

    width:
        100%;

    min-height:
        60px;

    padding:
        14px 20px;

    border:
        none;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            var(--signin-green),
            var(--signin-green-dark)
        );

    color:
        #fffaf0;

    font-size:
        1.1rem;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px
        rgba(45, 86, 59, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.signin-button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 24px
        rgba(45, 86, 59, 0.22);

}


.signin-button:active {

    transform:
        translateY(1px);

}


.signin-button:disabled {

    cursor:
        not-allowed;

    opacity:
        0.6;

    transform:
        none;

}


/* ==================================================
   ERRORS
================================================== */

.field-error {

    min-height:
        18px;

    margin:
        0;

    color:
        var(--signin-error);

    font-size:
        0.9rem;

    font-weight:
        700;

}


.input-error {

    border-color:
        var(--signin-error) !important;

    box-shadow:
        0 0 0 3px
        rgba(166, 55, 55, 0.12) !important;

}


/* ==================================================
   FORM MESSAGE
================================================== */

.form-message {

    min-height:
        22px;

    margin:
        0;

    font-weight:
        700;

}


.form-message.error {

    padding:
        12px 14px;

    border:
        1px solid
        var(--signin-error);

    border-radius:
        9px;

    background:
        var(--signin-error-bg);

    color:
        var(--signin-error);

}


.form-message.success {

    padding:
        12px 14px;

    border:
        1px solid
        var(--signin-success);

    border-radius:
        9px;

    background:
        var(--signin-success-bg);

    color:
        var(--signin-success);

}


/* ==================================================
   FORGOT PASSWORD
================================================== */

.signin-help {

    margin-top:
        28px;

    text-align:
        center;

}


.signin-help p {

    margin:
        0 0 5px;

    color:
        var(--signin-text-soft);

}


.text-link-button {

    padding:
        5px;

    border:
        none;

    background:
        transparent;

    color:
        var(--signin-green);

    font-size:
        1rem;

    font-weight:
        800;

    cursor:
        pointer;

    text-decoration:
        underline;

}


.text-link-button:hover,
.text-link-button:focus {

    color:
        var(--signin-green-dark);

}


/* ==================================================
   CREATE ACCOUNT SECTION
================================================== */

.new-customer-section {

    margin-top:
        30px;

    padding:
        28px 22px;

    border-top:
        1px solid
        var(--signin-tan);

    text-align:
        center;

}


.new-customer-section h3 {

    margin:
        0 0 6px;

    color:
        var(--signin-green-dark);

    font-size:
        1.25rem;

}


.new-customer-section p {

    margin:
        0 0 18px;

    color:
        var(--signin-text-soft);

}


.create-account-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        56px;

    padding:
        12px 18px;

    border:
        2px solid
        var(--signin-green);

    border-radius:
        10px;

    background:
        #fffaf0;

    color:
        var(--signin-green-dark);

    font-size:
        1.05rem;

    font-weight:
        800;

    text-decoration:
        none;

}


.create-account-button:hover,
.create-account-button:focus {

    background:
        var(--signin-green);

    color:
        #fffaf0;

}


/* ==================================================
   RESET PASSWORD MODAL
================================================== */

.reset-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

}


.reset-modal[hidden] {

    display:
        none;

}


.reset-modal-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(20, 36, 25, 0.65);

}


.reset-modal-card {

    position:
        relative;

    z-index:
        1;

    width:
        min(500px, 100%);

    padding:
        32px;

    border-radius:
        16px;

    background:
        var(--signin-card);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.25);

}


.reset-modal-card h2 {

    margin:
        0 0 10px;

    color:
        var(--signin-green-dark);

}


.reset-modal-card > p {

    margin:
        0 0 24px;

    color:
        var(--signin-text-soft);

}


#resetPasswordForm {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


.reset-close-button {

    position:
        absolute;

    top:
        10px;

    right:
        12px;

    width:
        42px;

    height:
        42px;

    border:
        none;

    background:
        transparent;

    color:
        var(--signin-green-dark);

    font-size:
        2rem;

    line-height:
        1;

    cursor:
        pointer;

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .signin-page-header {

        padding:
            30px 16px;

    }


    .signin-page-container {

        width:
            min(
                100% - 18px,
                580px
            );

        margin:
            22px auto 45px;

    }


    .signin-card {

        padding:
            22px;

    }


    .signin-card-heading h2 {

        font-size:
            1.65rem;

    }


    .form-group input {

        min-height:
            60px;

        font-size:
            16px;

    }


    .signin-button {

        min-height:
            62px;

    }


    .new-customer-section {

        padding:
            25px 0 0;

    }


    .reset-modal-card {

        padding:
            28px 20px 22px;

    }

}