.awcf-hm-login {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--hm-color-line);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    font-family: inherit;

    & .awcf-hm-login__heading {
        margin: 0 0 1.25rem;
        font-size: 1.5rem;
        color: var(--hm-color-navy);
    }

    & .awcf-hm-login__message {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
        border-radius: 4px;
        font-size: 0.9rem;
        line-height: 1.4;

        &.awcf-hm-login__message--error {
            background: #fdecea;
            color: #b3261e;
            border: 1px solid #f5c6c3;
        }

        &.awcf-hm-login__message--success {
            background: #e8f5e9;
            color: #1b5e20;
            border: 1px solid #b9dfbb;
        }
    }

    & .awcf-hm-login__form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    & .awcf-hm-login__form-group {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;

        &.awcf-hm-login__form-group--password {
            position: relative;
        }

        &.awcf-hm-login__form-group--checkbox {
            flex-direction: row;
            align-items: center;
            gap: 0.5rem;
        }
    }

    & .awcf-hm-login__label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #333;
    }

    & .awcf-hm-login__input {
        width: 100%;
        padding: 0.65rem 0.85rem;
        font-size: 1rem;
        border: 1px solid var(--hm-color-line);
        border-radius: 4px;
        background: #fcfcfd;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;

        &:focus {
            border-color: var(--hm-color-gold);
            box-shadow: 0 0 0 3px rgba(157, 129, 0, 0.18);
            outline: none;
        }
    }

    & .awcf-hm-login__toggle-pass {
        position: absolute;
        right: 0.35rem;
        top: 1.65rem;
        padding: 0.35rem 0.6rem;
        background: transparent;
        border: none;
        font-size: 0.75rem;
        color: #666;
        cursor: pointer;

        &:hover {
            color: var(--hm-color-navy);
        }
    }

    & .awcf-hm-login__checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: #444;
        cursor: pointer;
    }

    & .awcf-hm-login__submit {
        padding: 0.75rem 1rem;
        background: var(--hm-color-navy);
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.15s ease;

        &:hover {
            background: var(--hm-color-gold);
        }

        &:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
    }

    & .awcf-hm-login__links {
        list-style: none;
        padding: 0;
        margin: 1.25rem 0 0;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        font-size: 0.9rem;

        & a {
            color: var(--hm-color-navy);
            text-decoration: underline;

            &:hover {
                color: var(--hm-color-gold);
            }
        }
    }

    & .awcf-hm-login__welcome {
        margin: 0 0 1rem;
        font-size: 1.05rem;
        color: var(--hm-color-navy);
    }
}

.awcf-hm-lost-password {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--hm-color-line);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    & .awcf-hm-lost-password__heading {
        margin: 0 0 0.75rem;
        font-size: 1.5rem;
        color: var(--hm-color-navy);
    }

    & .awcf-hm-lost-password__intro {
        margin: 0 0 1rem;
        font-size: 0.9rem;
        color: #555;
        line-height: 1.45;
    }

    & .awcf-hm-lost-password__message {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
        border-radius: 4px;
        font-size: 0.9rem;

        &.awcf-hm-lost-password__message--error {
            background: #fdecea;
            color: #b3261e;
            border: 1px solid #f5c6c3;
        }

        &.awcf-hm-lost-password__message--success {
            background: #e8f5e9;
            color: #1b5e20;
            border: 1px solid #b9dfbb;
        }
    }

    & .awcf-hm-lost-password__form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    & .awcf-hm-lost-password__form-group {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    & .awcf-hm-lost-password__label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #333;
    }

    & .awcf-hm-lost-password__input {
        width: 100%;
        padding: 0.65rem 0.85rem;
        font-size: 1rem;
        border: 1px solid var(--hm-color-line);
        border-radius: 4px;
        background: #fcfcfd;

        &:focus {
            border-color: var(--hm-color-gold);
            box-shadow: 0 0 0 3px rgba(157, 129, 0, 0.18);
            outline: none;
        }
    }

    & .awcf-hm-lost-password__submit {
        padding: 0.75rem 1rem;
        background: var(--hm-color-navy);
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;

        &:hover {
            background: var(--hm-color-gold);
        }
    }

    & .awcf-hm-lost-password__back {
        margin: 1.25rem 0 0;
        font-size: 0.9rem;

        & a {
            color: var(--hm-color-navy);
            text-decoration: underline;

            &:hover {
                color: var(--hm-color-gold);
            }
        }
    }
}

.awcf-hm-account-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--hm-color-navy);

    & a {
        color: inherit;
        text-decoration: none;
        font-weight: 600;

        &:hover {
            color: var(--hm-color-gold);
            text-decoration: underline;
        }
    }

    & .awcf-hm-account-status__sep {
        color: #aaa;
    }

    & .awcf-hm-account-status__welcome {
        color: #555;
        font-weight: 500;
    }
}

@media (max-width: 480px) {
    .awcf-hm-login,
    .awcf-hm-lost-password {
        max-width: 100%;
        margin: 1rem 0;
        padding: 1.25rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }
}