/* ==================================================
   MY CARE WIZARD - SIGN IN / ACCOUNT 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.10);

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

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


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

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;

    font-family: Arial, sans-serif;

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

    color: var(--signin-text);

    line-height: 1.5;
}


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

.account-header {
    padding: 34px 20px;

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

    color: #fffaf0;

    text-align: center;

    border-bottom:
        1px solid rgba(255, 250, 240, 0.14);
}

.account-header h1 {
    margin: 0 0 8px;

    color: #fffaf0;

    font-size: 2rem;
}

.account-header p {
    margin: 0;

    color: #e8dcc6;
}


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

.account-container {
    width:
        min(1200px, calc(100% - 32px));

    margin:
        40px auto;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.75fr)
        minmax(0, 1.5fr);

    gap: 28px;

    align-items: start;
}


/* ==================================================
   ACCOUNT SECTIONS
================================================== */

.account-section {
    padding: 30px;

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

    border-radius: 16px;

    background:
        var(--signin-card);

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

.account-section h2 {
    margin:
        0 0 8px;

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

    font-size:
        1.6rem;
}

.account-section > p {
    margin:
        0 0 22px;

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

.returning-customer-section {
    position: sticky;

    top: 20px;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #f9f0df
        );
}


/* ==================================================
   FIELDSETS AND LEGENDS
================================================== */

fieldset {
    margin:
        0 0 28px;

    padding:
        22px;

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

    border-radius:
        12px;

    background:
        var(--signin-bg-soft);
}

legend {
    padding:
        0 10px;

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

    font-size:
        1.15rem;

    font-weight:
        800;
}

.registration-section fieldset:last-of-type {
    margin-bottom:
        22px;
}


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

.form-grid {
    display:
        grid;

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

    gap:
        18px;
}

.form-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}

.form-group.full-width {
    grid-column:
        1 / -1;
}


/* ==================================================
   LABELS AND OPTIONAL TEXT
================================================== */

.form-group label {
    color:
        var(--signin-text);

    font-weight:
        700;
}

.form-group label span[aria-hidden="true"],
.captcha-section p span[aria-hidden="true"] {
    color:
        var(--signin-error);
}

.optional-text {
    margin-left:
        5px;

    color:
        var(--signin-muted);

    font-size:
        0.85rem;

    font-weight:
        400;
}


/* ==================================================
   INPUTS AND SELECTS
================================================== */

.form-group input,
.form-group select {
    width:
        100%;

    min-height:
        48px;

    padding:
        11px 13px;

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

    border-radius:
        8px;

    background:
        #fffaf0;

    color:
        var(--signin-text);

    font:
        inherit;

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

.form-group input:hover,
.form-group select:hover {
    border-color:
        var(--signin-green-soft);
}

.form-group input:focus,
.form-group select:focus {
    outline:
        none;

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

    box-shadow:
        0 0 0 3px rgba(45, 86, 59, 0.12);

    background:
        #fffdf7;
}

.form-group input:disabled,
.form-group select:disabled {
    cursor:
        not-allowed;

    background:
        #eee4d2;

    color:
        var(--signin-muted);
}

.form-group small {
    color:
        var(--signin-muted);

    font-size:
        0.85rem;
}


/* ==================================================
   CHECKBOXES
================================================== */

.checkbox-group {
    margin-bottom:
        20px;
}

.checkbox-group label {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        var(--signin-text);

    font-weight:
        700;

    cursor:
        pointer;
}

.checkbox-group input[type="checkbox"] {
    width:
        20px;

    height:
        20px;

    flex:
        0 0 auto;

    margin:
        2px 0 0;

    cursor:
        pointer;

    accent-color:
        var(--signin-green);
}


/* ==================================================
   BILLING ADDRESS
================================================== */

.billing-address-fields {
    padding-top:
        8px;
}

input:disabled,
select:disabled {
    opacity:
        0.75;
}


/* ==================================================
   CAPTCHA AREA
================================================== */

.captcha-section {
    margin-top:
        18px;
}

.captcha-section > p {
    margin:
        0 0 10px;

    color:
        var(--signin-text);

    font-weight:
        700;
}

.captcha-placeholder {
    width:
        min(100%, 310px);

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    padding:
        16px 18px;

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

    border-radius:
        7px;

    background:
        #fffaf0;

    color:
        var(--signin-text);

    font-weight:
        700;
}

.captcha-placeholder::before {
    content:
        "";

    width:
        26px;

    height:
        26px;

    margin-right:
        14px;

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

    border-radius:
        4px;

    background:
        #fffaf0;
}


/* ==================================================
   BUTTONS
================================================== */

.account-button {
    width:
        100%;

    min-height:
        52px;

    padding:
        12px 18px;

    border:
        none;

    border-radius:
        9px;

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

    color:
        #fffaf0;

    font-size:
        1rem;

    font-weight:
        800;

    cursor:
        pointer;

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

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

.account-button:hover {
    background:
        linear-gradient(
            135deg,
            var(--signin-green-dark),
            var(--signin-green)
        );

    transform:
        translateY(-1px);

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

.account-button:active {
    transform:
        translateY(1px);
}

.account-button:disabled {
    cursor:
        not-allowed;

    opacity:
        0.6;

    box-shadow:
        none;
}


/* ==================================================
   ERROR AND SUCCESS MESSAGES
================================================== */

.field-error {
    min-height:
        18px;

    margin:
        0;

    color:
        var(--signin-error);

    font-size:
        0.85rem;

    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 {
    min-height:
        22px;

    margin:
        14px 0 0;

    font-weight:
        700;
}

.form-message.error {
    padding:
        11px 13px;

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

    border-radius:
        8px;

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

    color:
        var(--signin-error);
}

.form-message.success {
    padding:
        11px 13px;

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

    border-radius:
        8px;

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

    color:
        var(--signin-success);
}


/* ==================================================
   RETURNING CUSTOMER FORM
================================================== */

#returningCustomerForm {
    display:
        grid;

    gap:
        18px;
}

#returningCustomerForm .form-message {
    margin-top:
        0;
}


/* ==================================================
   LINKS
================================================== */

.account-section a {
    color:
        var(--signin-green);

    font-weight:
        700;

    text-decoration:
        none;
}

.account-section a:hover,
.account-section a:focus {
    color:
        var(--signin-green-dark);

    text-decoration:
        underline;
}


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

@media (max-width: 900px) {

    .account-container {
        grid-template-columns:
            1fr;
    }

    .returning-customer-section {
        position:
            static;
    }
}


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

@media (max-width: 600px) {

    .account-header {
        padding:
            26px 16px;
    }

    .account-header h1 {
        font-size:
            1.65rem;
    }

    .account-container {
        width:
            min(100% - 20px, 1200px);

        margin:
            18px auto;

        gap:
            18px;
    }

    .account-section {
        padding:
            20px;
    }

    fieldset {
        padding:
            17px;
    }

    .form-grid {
        grid-template-columns:
            1fr;
    }

    .form-group.full-width {
        grid-column:
            auto;
    }

    .captcha-placeholder {
        width:
            100%;
    }
}