/*
 * Login page (Views/Account/Login.cshtml), 2026-10-14 design: cream background with red waves and leaf line art
 * (img/login-bg.jpg), the Rue logo with gold rules, and a white sign-in card. Sizes follow the design at
 * 1672 x 941 and shrink on shorter and narrower screens. Brand red as in css/rue-theme.css.
 */
:root {
    --rue-red: #80303E;
    --rue-red-dark: #6C2834;
    --rue-red-darker: #5A212C;
    --login-gold: #C99142;
    --login-gold-soft: #CEA15C;
    --login-ink: #1B2126;
    --login-text: #343A3F;
    --login-muted: #7C848C;
    --login-faint: #8E959C;
    --login-icon: #5F666E;
    --login-line: #E3E5E8;
    --login-card: #FFFDFA;
    --login-page: #FAF7F3;
    --login-focus: rgba(128, 48, 62, 0.14);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

/* Labels the screen reader reads; the design shows placeholders instead. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html,
body {
    min-height: 100%;
}

body.login-body {
    margin: 0;
    font-family: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--login-text);
    background: var(--login-page) url("../img/login-bg.jpg") center / cover no-repeat;
    -webkit-font-smoothing: antialiased;
}

.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(20px, 6vh, 56px) 16px clamp(20px, 4vh, 40px);
}

/* Centred when the screen is taller than the design; auto margins (not justify-content) so nothing is cut off on short screens. */
.login-shell {
    width: 100%;
    max-width: 600px;
    margin: auto 0;
}

/* ---------- logo ---------- */

.login-logo {
    position: relative;
    display: block;
    width: clamp(210px, 36vh, 336px);
    max-width: calc(100% - 100px); /* room for the gold rules */
    margin: 0 auto;
}

    .login-logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Gold rules either side of "CATERING BOUTIQUE" (the logo's caption: 11.2% to 88.5% across, centred 93.7% down). */
    .login-logo::before,
    .login-logo::after {
        content: "";
        position: absolute;
        top: 93.7%;
        width: clamp(18px, 2.8vh, 26px);
        height: 1.5px;
        background: var(--login-gold-soft);
        transform: translateY(-50%);
    }

    .login-logo::before {
        right: calc(88.8% + 14px);
    }

    .login-logo::after {
        left: calc(88.5% + 14px);
    }

/* ---------- card ---------- */

.login-card {
    width: 100%;
    max-width: 600px;
    margin-top: clamp(20px, 5.2vh, 48px);
    padding: clamp(30px, 5.8vh, 55px) clamp(22px, 5vw, 55px) clamp(22px, 3.5vh, 33px);
    background: var(--login-card);
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(90, 48, 40, 0.10), 0 3px 12px rgba(90, 48, 40, 0.05);
    text-align: center;
}

.login-accent {
    display: block;
    width: 58px;
    height: 2px;
    margin: 0 auto clamp(16px, 2.8vh, 26px);
    background: var(--login-gold);
    border-radius: 1px;
}

.login-title {
    margin: 0 0 clamp(8px, 1.4vh, 12px);
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: clamp(34px, 5.2vh, 48px);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--login-ink);
}

.login-subtitle {
    max-width: 24.5em;
    margin: 0 auto clamp(20px, 3.8vh, 36px);
    font-size: clamp(14.5px, 1.8vh, 16.5px);
    line-height: 1.7;
    color: var(--login-muted);
    text-wrap: balance; /* two even lines, breaking after "access" as in the design */
}

/* ---------- fields ---------- */

.login-form {
    text-align: left;
}

.login-field {
    position: relative;
}

    .login-field + .login-field {
        margin-top: clamp(10px, 1.5vh, 14px);
    }

.login-field-icon {
    position: absolute;
    top: 50%;
    left: 21px;
    width: 22px;
    height: 22px;
    color: var(--login-icon);
    transform: translateY(-50%);
    pointer-events: none;
    transition: color .15s ease;
}

.login-input {
    display: block;
    width: 100%;
    height: clamp(50px, 6.4vh, 60px);
    padding: 0 18px 0 68px;
    font: inherit;
    font-size: 16px; /* 16px keeps iOS from zooming in on focus */
    color: var(--login-ink);
    background: #fff;
    border: 1px solid var(--login-line);
    border-radius: 8px;
    outline: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .login-input::placeholder {
        color: #9AA1A9;
        opacity: 1;
    }

    .login-input:hover {
        border-color: #CDD1D6;
    }

    .login-input:focus {
        border-color: var(--rue-red);
        box-shadow: 0 0 0 4px var(--login-focus);
    }

    .login-input:-webkit-autofill,
    .login-input:-webkit-autofill:hover,
    .login-input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--login-ink);
        -webkit-box-shadow: 0 0 0 1000px #fff inset;
        transition: background-color 9999s ease-in-out 0s;
    }

.login-field:focus-within .login-field-icon {
    color: var(--rue-red);
}

.login-input-password {
    padding-right: 58px;
}

.login-eye {
    position: absolute;
    top: 50%;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #868B91;
    background: transparent;
    border: 0;
    border-radius: 6px;
    transform: translateY(-50%);
    cursor: pointer;
}

    .login-eye:hover {
        color: var(--login-text);
    }

    .login-eye:focus-visible {
        outline: 2px solid var(--rue-red);
        outline-offset: -2px;
    }

    .login-eye svg {
        width: 22px;
        height: 22px;
    }

/* ---------- remember me / forgot password ---------- */

.login-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: clamp(14px, 2.2vh, 21px);
}

.login-check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--login-text);
    cursor: pointer;
    user-select: none;
}

    .login-check input {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        margin: 0;
        appearance: none;
        -webkit-appearance: none;
        background: #fff center / 14px no-repeat;
        border: 1.5px solid #7C7D80;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease;
    }

        .login-check input:checked {
            background-color: var(--rue-red);
            border-color: var(--rue-red);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
        }

        .login-check input:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 4px var(--login-focus);
            border-color: var(--rue-red);
        }

.login-link {
    padding: 0;
    font: inherit;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--rue-red);
    background: none;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

    .login-link:hover {
        color: var(--rue-red-darker);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .login-link:focus-visible {
        outline: 2px solid var(--rue-red);
        outline-offset: 3px;
    }

.login-note,
.login-error {
    margin-top: 14px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 8px;
}

.login-note {
    color: var(--login-text);
    background: #F7F1EA;
    border: 1px solid #EADFD2;
}

.login-error {
    color: #A12A2A;
    background: #FBEDED;
    border: 1px solid #F2D3D3;
}

/* ---------- sign in ---------- */

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: clamp(52px, 6.9vh, 65px);
    margin-top: clamp(16px, 2.4vh, 22px);
    padding: 0 20px;
    font: inherit;
    font-size: clamp(17px, 2.1vh, 20px);
    font-weight: 500;
    color: #fff;
    background: linear-gradient(90deg, var(--rue-red-dark) 0%, var(--rue-red) 100%);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(108, 40, 52, 0.26);
    cursor: pointer;
    transition: box-shadow .15s ease, filter .15s ease, transform .1s ease;
}

    .login-submit svg {
        width: 22px;
        height: 22px;
        transition: transform .15s ease;
    }

    .login-submit:hover {
        filter: brightness(1.07);
        box-shadow: 0 12px 26px rgba(108, 40, 52, 0.32);
    }

        .login-submit:hover svg {
            transform: translateX(3px);
        }

    .login-submit:active {
        transform: translateY(1px);
    }

    .login-submit:focus-visible {
        outline: 3px solid rgba(201, 145, 66, 0.75);
        outline-offset: 3px;
    }

    .login-submit:disabled {
        cursor: progress;
        filter: saturate(.85);
        opacity: .85;
    }

        .login-submit:disabled:hover {
            filter: saturate(.85);
            box-shadow: 0 10px 22px rgba(108, 40, 52, 0.26);
        }

            .login-submit:disabled:hover svg {
                transform: none;
            }

        .login-submit:disabled:active {
            transform: none;
        }

/* Signing in: a spinner in place of the arrow; the button stays locked (no second click) until the next page opens. */
.login-spinner {
    display: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin .7s linear infinite;
}

.login-submit.is-loading .login-spinner {
    display: inline-block;
}

.login-submit.is-loading .login-arrow {
    display: none;
}

@keyframes login-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- footer ---------- */

.login-divider {
    height: 1px;
    margin: clamp(22px, 4.6vh, 44px) 0 clamp(16px, 3vh, 28px);
    background: #EBEAE8;
    border: 0;
}

.login-copy {
    margin: 0;
    font-size: 13px;
    color: var(--login-faint);
    text-wrap: balance;
}

/* ---------- small screens ---------- */

@media (max-width: 575.98px) {
    .login-card {
        border-radius: 18px;
    }

    .login-title {
        font-size: 34px;
    }

    .login-field-icon {
        left: 17px;
    }

    .login-input {
        padding-left: 56px;
    }

    .login-input-password {
        padding-right: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-input,
    .login-field-icon,
    .login-check input,
    .login-submit,
    .login-submit svg {
        transition: none;
    }

    .login-spinner {
        animation-duration: 1.6s; /* slower, but still turning: it is the only sign that something is happening */
    }
}