/* ── Page wrapper ── */
.auth-page {
    min-height: calc(100vh - 108px);
    background-color: #f5ede9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 60px 16px;
    position: relative;
    overflow: hidden;
}

    /* Decorative blobs */
    .auth-page::before {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: rgba(232,201,193,.35);
        top: -120px;
        right: -100px;
        pointer-events: none;
    }

    .auth-page::after {
        content: '';
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(201,169,126,.12);
        bottom: -80px;
        left: -60px;
        pointer-events: none;
    }

/* ── Card ── */
.auth-card {
    background: #ffffff;
    border: 1px solid rgba(232,201,193,.5);
    border-radius: 0;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    -webkit-box-shadow: 0 24px 64px rgba(0,0,0,.08);
    box-shadow: 0 24px 64px rgba(0,0,0,.08);
}

/* Card top accent bar */
.auth-card-bar {
    height: 4px;
    background: linear-gradient(90deg, #e8c9c1, #c9a97e, #e8c9c1);
}

.auth-card-body {
    padding: 44px 44px 40px;
}

/* ── Logo + heading ── */
.auth-logo {
    display: block;
    height: 56px;
    width: auto;
    margin: 0 auto 20px;
    filter: brightness(0) saturate(100%) invert(80%) sepia(20%) saturate(500%) hue-rotate(320deg) brightness(.9);
}

.auth-eyebrow {
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #010101;
    text-align: center;
    display: block;
    margin-bottom: .4rem;
}

.auth-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    color: #111111;
    text-align: center;
    line-height: 1.15;
    margin-bottom: .35rem;
}

    .auth-heading em {
        font-style: italic;
        color: #d4a89a;
        font-weight: 400;
    }

.auth-subtext {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    text-align: center;
    margin-bottom: 2rem;
}

.auth-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, #e8c9c1, #c9a97e);
    border: none;
    margin: 0 auto 2rem;
}

/* ── Form fields ── */
.auth-field {
    margin-bottom: 18px;
}

.auth-label {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #444444;
    margin-bottom: 7px;
}

.auth-input-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    z-index: 2;
    opacity: .45;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}

.auth-input-wrap:focus-within .auth-input-icon {
    opacity: .8;
}

.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 42px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #111111;
    background: #faf7f5;
    border: 1.5px solid rgba(232,201,193,.5);
    border-radius: 0;
    outline: none;
    -webkit-transition: border-color .22s ease, background-color .22s ease, -webkit-box-shadow .22s ease;
    transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    .auth-input::-webkit-input-placeholder {
        color: #bbbbbb;
    }

    .auth-input::-moz-placeholder {
        color: #bbbbbb;
    }

    .auth-input:-ms-input-placeholder {
        color: #bbbbbb;
    }

    .auth-input::placeholder {
        color: #bbbbbb;
    }

    .auth-input:focus {
        border-color: #e8c9c1;
        background: #ffffff;
        -webkit-box-shadow: 0 0 0 3px rgba(232,201,193,.2);
        box-shadow: 0 0 0 3px rgba(232,201,193,.2);
    }

/* Show/hide password toggle */
.auth-toggle-pw {
    position: absolute;
    right: 14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    opacity: .4;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
    z-index: 2;
}

    .auth-toggle-pw:hover {
        opacity: .85;
    }

    .auth-toggle-pw svg {
        width: 16px;
        height: 16px;
        display: block;
    }

/* ── Remember + forgot row ── */
.auth-row-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 24px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
}

/* Custom checkbox */
.auth-check-wrap {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .auth-check-wrap input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border: 1.5px solid rgba(232,201,193,.6);
        background: #faf7f5;
        border-radius: 2px;
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
        -webkit-transition: border-color .2s, background .2s;
        transition: border-color .2s, background .2s;
    }

        .auth-check-wrap input[type="checkbox"]:checked {
            background: #e8c9c1;
            border-color: #e8c9c1;
        }

            .auth-check-wrap input[type="checkbox"]:checked::after {
                content: '';
                position: absolute;
                left: 3px;
                top: 1px;
                width: 8px;
                height: 5px;
                border-left: 2px solid #111111;
                border-bottom: 2px solid #111111;
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

.auth-check-label {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.auth-forgot {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #111111;
    letter-spacing: .04em;
    text-decoration: none;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
}

    .auth-forgot:hover {
        color: #d4a89a;
        text-decoration: none;
    }

/* ── Submit button ── */
.auth-btn {
    display: block;
    width: 100%;
    height: 50px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #111111;
    background-color: #e8c9c1;
    border: 2px solid #e8c9c1;
    border-radius: 0;
    cursor: pointer;
    -webkit-transition: background-color .22s ease, border-color .22s ease, -webkit-transform .18s ease, -webkit-box-shadow .22s ease;
    transition: background-color .22s ease, border-color .22s ease, transform .18s ease, box-shadow .22s ease;
}

    .auth-btn:hover, .auth-btn:focus {
        background-color: #ffffff;
        border-color: #e8c9c1;
        color: #d4a89a;
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
        -webkit-box-shadow: 0 0 0 3px rgba(232,201,193,.25), 0 8px 20px rgba(212,168,154,.2);
        box-shadow: 0 0 0 3px rgba(232,201,193,.25), 0 8px 20px rgba(212,168,154,.2);
        outline: none;
    }

/* ── Or divider ── */
.auth-or {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
}

    .auth-or::before, .auth-or::after {
        content: '';
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 1px;
        background: rgba(232,201,193,.4);
    }

    .auth-or span {
        font-family: 'Lato', sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #010101;
    }

/* ── Register link ── */
.auth-switch {
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    margin-top: 4px;
}

    .auth-switch a {
        font-weight: 700;
        color: #111111;
        text-decoration: none;
        border-bottom: 1px solid #e8c9c1;
        padding-bottom: 1px;
        -webkit-transition: color .2s, border-color .2s;
        transition: color .2s, border-color .2s;
    }

        .auth-switch a:hover {
            color: #d4a89a;
            border-color: #d4a89a;
        }

/* ── Error / validation message ── */
.auth-error {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #c0392b;
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(192,57,43,.07);
    border-left: 3px solid #c0392b;
}

.auth-success {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #27ae60;
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(39,174,96,.07);
    border-left: 3px solid #27ae60;
}

@media (max-width: 575.98px) {
    .auth-card-body {
        padding: 32px 24px 28px;
    }

    .auth-heading {
        font-size: 1.65rem;
    }
}