/* ==================================================
   MY CARE WIZARD
   CREATE ACCOUNT PAGE
================================================== */


:root {

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

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

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

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

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

    --account-shadow:
        0 14px 36px rgba(44, 68, 50, 0.10);

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

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

}


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

* {
    box-sizing: border-box;
}


body {

    margin: 0;
    padding: 0;

    font-family:
        Arial,
        sans-serif;

    color:
        var(--account-text);

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

    line-height: 1.6;

}


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

.create-account-header {

    padding:
        42px 20px;

    text-align:
        center;

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

    color:
        #fffaf0;

}


.create-account-header-inner {

    width:
        min(850px, 100%);

    margin:
        0 auto;

}


.create-account-header h1 {

    margin:
        0 0 10px;

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

    color:
        #fffaf0;

}


.create-account-header p {

    margin:
        0;

    font-size:
        1.1rem;

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

}


/* ==================================================
   MAIN CONTAINER
================================================== */

.create-account-container {

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

    margin:
        36px auto 60px;

}


/* ==================================================
   SIGN IN REMINDER
================================================== */

.signin-reminder {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        22px;

    padding:
        20px 22px;

    border:
        2px solid
        var(--account-green-soft);

    border-radius:
        14px;

    background:
        #f4f8f3;

}


.signin-reminder div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.signin-reminder strong {

    font-size:
        1.08rem;

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

}


.signin-reminder span {

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

}


.signin-link-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        10px 20px;

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

    border-radius:
        9px;

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

    background:
        #fffaf0;

    font-weight:
        800;

    text-decoration:
        none;

    white-space:
        nowrap;

}


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

    color:
        #fffaf0;

    background:
        var(--account-green);

}


/* ==================================================
   REGISTRATION CARD
================================================== */

.registration-card {

    padding:
        34px;

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

    border-radius:
        18px;

    background:
        var(--account-card);

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

}


.registration-intro {

    margin-bottom:
        30px;

    text-align:
        center;

}


.registration-intro h2 {

    margin:
        0 0 8px;

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

    font-size:
        1.8rem;

}


.registration-intro p {

    margin:
        0;

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

    font-size:
        1.05rem;

}


.registration-intro strong {

    color:
        var(--account-error);

}


/* ==================================================
   FIELDSETS
================================================== */

fieldset {

    margin:
        0 0 30px;

    padding:
        26px;

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

    border-radius:
        14px;

    background:
        var(--account-bg-soft);

}


legend {

    padding:
        0 10px;

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

    font-size:
        1.25rem;

    font-weight:
        800;

}


.step-number {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    margin-right:
        8px;

    border-radius:
        50%;

    color:
        #fffaf0;

    background:
        var(--account-green);

    font-size:
        1rem;

}


.section-help {

    margin:
        2px 0 22px;

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

    font-size:
        1rem;

}


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

.form-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px;

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.form-group.full-width {

    grid-column:
        1 / -1;

}


/* ==================================================
   LABELS
================================================== */

.form-group label {

    color:
        var(--account-text);

    font-size:
        1.05rem;

    font-weight:
        800;

}


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

    color:
        var(--account-error);

}


.optional-text {

    margin-left:
        5px;

    color:
        var(--account-muted);

    font-size:
        0.88rem;

    font-weight:
        400;

}


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

.form-group input,
.form-group select {

    width:
        100%;

    min-height:
        56px;

    padding:
        13px 15px;

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

    border-radius:
        9px;

    background:
        #fffdf7;

    color:
        var(--account-text);

    font:
        inherit;

    font-size:
        1rem;

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

}


.form-group input:hover,
.form-group select:hover {

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

}


.form-group input:focus,
.form-group select:focus {

    outline:
        none;

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

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

}


.form-group input:disabled,
.form-group select:disabled {

    cursor:
        not-allowed;

    background:
        #eee4d2;

    color:
        var(--account-muted);

    opacity:
        0.8;

}


.field-help {

    margin:
        0;

    color:
        var(--account-muted);

    font-size:
        0.9rem;

}


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

.password-field {

    position:
        relative;

}


.password-field input {

    padding-right:
        80px;

}


.show-password-button {

    position:
        absolute;

    top:
        50%;

    right:
        8px;

    transform:
        translateY(-50%);

    min-height:
        40px;

    padding:
        7px 12px;

    border:
        none;

    border-radius:
        7px;

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

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

    font-weight:
        700;

    cursor:
        pointer;

}


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

    background:
        var(--account-tan);

}


/* ==================================================
   SAME ADDRESS BOX
================================================== */

.same-address-box {

    margin-bottom:
        24px;

    padding:
        18px;

    border:
        2px solid
        var(--account-green-soft);

    border-radius:
        10px;

    background:
        #f1f7f1;

}


.same-address-box label {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    cursor:
        pointer;

}


.same-address-box input {

    width:
        24px;

    height:
        24px;

    margin:
        2px 0 0;

    flex:
        0 0 auto;

    accent-color:
        var(--account-green);

}


.same-address-box span {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.same-address-box strong {

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

    font-size:
        1rem;

}


.same-address-box small {

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

    font-size:
        0.9rem;

}


/* ==================================================
   NEWSLETTER
================================================== */

.newsletter-box {

    margin:
        0 0 26px;

    padding:
        20px;

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

    border-radius:
        12px;

    background:
        var(--account-bg-soft);

}


.newsletter-box label {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    cursor:
        pointer;

}


.newsletter-box input {

    width:
        24px;

    height:
        24px;

    margin:
        2px 0 0;

    flex:
        0 0 auto;

    accent-color:
        var(--account-green);

}


.newsletter-box span {

    display:
        flex;

    flex-direction:
        column;

}


.newsletter-box strong {

    color:
        var(--account-text);

}


.newsletter-box small {

    color:
        var(--account-muted);

}


/* ==================================================
   CREATE ACCOUNT BUTTON
================================================== */

.account-submit-section {

    text-align:
        center;

}


.account-button {

    width:
        100%;

    min-height:
        60px;

    padding:
        15px 20px;

    border:
        none;

    border-radius:
        10px;

    color:
        #fffaf0;

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

    font-size:
        1.12rem;

    font-weight:
        800;

    cursor:
        pointer;

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

}


.account-button:hover {

    transform:
        translateY(-1px);

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

}


.account-button:disabled {

    opacity:
        0.6;

    cursor:
        not-allowed;

    transform:
        none;

}


.submit-help {

    margin:
        12px 0 0;

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

    font-size:
        0.92rem;

}


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

.field-error {

    min-height:
        18px;

    margin:
        0;

    color:
        var(--account-error);

    font-size:
        0.9rem;

    font-weight:
        700;

}


.input-error {

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

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

}


.form-message {

    min-height:
        22px;

    margin:
        16px 0 0;

    font-weight:
        700;

}


.form-message.error {

    padding:
        13px 15px;

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

    border-radius:
        9px;

    color:
        var(--account-error);

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

}


.form-message.success {

    padding:
        13px 15px;

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

    border-radius:
        9px;

    color:
        var(--account-success);

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

}


/* ==================================================
   BOTTOM SIGN IN
================================================== */

.bottom-signin {

    margin-top:
        30px;

    padding-top:
        25px;

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

    text-align:
        center;

}


.bottom-signin p {

    margin:
        0 0 8px;

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

}


.bottom-signin a {

    color:
        var(--account-green);

    font-size:
        1.05rem;

    font-weight:
        800;

    text-decoration:
        none;

}


.bottom-signin a:hover,
.bottom-signin a:focus {

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

    text-decoration:
        underline;

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 750px) {

    .form-grid {

        grid-template-columns:
            1fr;

    }


    .form-group.full-width {

        grid-column:
            auto;

    }


    .signin-reminder {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .signin-link-button {

        width:
            100%;

    }

}


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

@media (max-width: 600px) {

    .create-account-header {

        padding:
            30px 16px;

    }


    .create-account-container {

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

        margin:
            20px auto 40px;

    }


    .registration-card {

        padding:
            20px;

    }


    fieldset {

        padding:
            18px;

    }


    legend {

        font-size:
            1.08rem;

    }


    .form-group input,
    .form-group select {

        min-height:
            58px;

        font-size:
            16px;

    }


    .account-button {

        min-height:
            62px;

    }

}