.login-section {
    min-height      : calc(100vh - var(--nav-height) - var(--footer-height));
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 3rem 1rem;
    background      : #faf6ef;
}

.login-card {
    display       : flex;
    width         : 100%;
    max-width     : 760px;
    min-height    : 460px;
    border-radius : 6px;
    overflow      : hidden;
    border        : 1px solid var(--border);
    box-shadow    : 0 8px 40px rgba(160, 135, 90, 0.13);
}

.login-card__brand {
    flex            : 0 0 42%;
    background      : var(--beige-solid-strong-accent);
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 1.25rem;
    padding         : 2.5rem 2rem;
    border-right    : 1px solid var(--border);
}

.login-card__brand-logo {
    width           : 340px;
    height          : 340px;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.login-card__brand-logo img {
    width      : 100%;
    height     : 100%;
    object-fit : contain;
}

.login-card__brand-name {
    font-family    : 'Cormorant Garamond', serif;
    font-size      : 1.05rem;
    font-weight    : 600;
    letter-spacing : 0.08em;
    text-transform : uppercase;
    color          : var(--ink);
}

.login-card__brand-name span {
    color : var(--accent);
}

.login-card__form {
    flex            : 1;
    background      : var(--beige-solid-strong);
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    padding         : 3rem 2.5rem;
}

.login-card__form h2 {
    font-family   : 'Cormorant Garamond', serif;
    font-size     : 1.85rem;
    font-weight   : 600;
    color         : var(--ink);
    margin-bottom : 0.3rem;
}

.login-card__form .login-subtitle {
    font-size     : 0.8rem;
    color         : var(--ink-muted);
    font-weight   : 400;
    margin-bottom : 2rem;
}

/* ── FORM FIELDS ─────────────────────────────── */
.login-field {
    margin-bottom : 1.2rem;
}

.login-field label {
    display        : block;
    font-size      : 0.75rem;
    font-weight    : 500;
    letter-spacing : 0.05em;
    color          : var(--ink-muted);
    margin-bottom  : 0.4rem;
    text-transform : uppercase;
}

.login-field input {
    width         : 100%;
    padding       : 0.65rem 0.9rem;
    border        : 1px solid var(--border);
    border-radius : 2px;
    font-family   : 'Jost', sans-serif;
    font-size     : 0.875rem;
    color         : var(--ink);
    background    : #faf6ef;
    outline       : none;
    transition    : border-color 0.2s, box-shadow 0.2s;
}

.login-field input::placeholder {
    color : rgba(122, 111, 96, 0.5);
}

.login-field input:focus {
    border-color : var(--accent);
    box-shadow   : 0 0 0 3px rgba(176, 141, 91, 0.12);
    background   : #fff;
}

.login-field input.is-invalid {
    border-color : #c0392b;
}


/* ── SUBMIT BUTTON ───────────────────────────── */
.btn-login-submit {
    width          : 100%;
    padding        : 0.8rem;
    background     : var(--accent);
    color          : #fff;
    border         : none;
    border-radius  : 2px;
    font-family    : 'Jost', sans-serif;
    font-size      : 0.8rem;
    font-weight    : 500;
    letter-spacing : 0.12em;
    text-transform : uppercase;
    cursor         : pointer;
    transition     : background 0.2s, transform 0.1s;
}

.btn-login-submit:hover  { background : #8a6b3a; }
.btn-login-submit:active { transform  : scale(0.99); }

/* ── VALIDATION ERROR ────────────────────────── */
.login-alert-error {
    background    : rgba(192, 57, 43, 0.06);
    border        : 1px solid rgba(192, 57, 43, 0.25);
    color         : #c0392b;
    border-radius : 2px;
    padding       : 0.65rem 0.9rem;
    font-size     : 0.8rem;
    margin-bottom : 1.2rem;
}

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 580px) {
    .login-card {
        flex-direction : column;
    }

    .login-card__brand {
        flex          : none;
        padding       : 2rem;
        border-right  : none;
        border-bottom : 1px solid var(--border);
    }

    .login-card__brand-logo {
        width  : 90px;
        height : 90px;
    }

    .login-card__form {
        padding : 2rem 1.5rem;
    }
}