/* =========================================================
   LOGIN - Estilos completos (mobile-first) 
   - Burbujas SIEMPRE visibles y animadas
   - Layout estable en escritorio (sin saltos al escribir)
   - Sin cambios de IDs ni estructura HTML
   ========================================================= */

/* --- Reset básico --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background-color: #3d2cf3;
    overflow-x: hidden; /* evita scroll horizontal */
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mantener siempre la barra vertical en desktop para evitar “saltos” por aparición/desaparición */
@media (min-width: 992px) {
    html, body {
        height: 100%;
        overflow-y: scroll;
        scroll-behavior: auto;
    }
}

/* =========================================================
   Fondo de Burbujas (siempre activas)
   ========================================================= */
.bubbles {
    position: fixed; /* no empuja el layout */
    inset: 0;
    pointer-events: none; /* no interfiere con clics */
    z-index: 0; /* detrás de la tarjeta */
}

    /* Burbujas */
    .bubbles div {
        position: absolute;
        bottom: -100px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        animation: rise 20s infinite ease-in; /* SIEMPRE animadas */
        will-change: transform, opacity;
    }

/* Animación */
@keyframes rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-1200px) scale(1.3);
        opacity: 0;
    }
}

/* Tamaños y velocidades variadas */
.bubbles div:nth-child(1) {
    left: 10%;
    width: 60px;
    height: 60px;
    animation-duration: 18s;
}

.bubbles div:nth-child(2) {
    left: 25%;
    width: 40px;
    height: 40px;
    animation-duration: 12s;
}

.bubbles div:nth-child(3) {
    left: 45%;
    width: 70px;
    height: 70px;
    animation-duration: 16s;
}

.bubbles div:nth-child(4) {
    left: 65%;
    width: 50px;
    height: 50px;
    animation-duration: 20s;
}

.bubbles div:nth-child(5) {
    left: 80%;
    width: 90px;
    height: 90px;
    animation-duration: 25s;
}

/* En móviles muy pequeños reducimos la cantidad visual para no saturar */
@media (max-width: 575.98px) {
    .bubbles div:nth-child(n+4) {
        display: none;
    }
}

/* Nota: incluso si el usuario tiene “reducir movimiento”, aquí mantenemos animación
   porque solicitaste que las burbujas aparezcan en todo momento. 
   (Si luego deseas respetar esa preferencia, podemos pausar la animación con un media query). */

/* =========================================================
   Tarjeta de Login / Card
   ========================================================= */
.card {
    border: 2px solid #fff !important;
}

.login-card {
    background: #fff;
    border: 3px solid #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    max-width: 400px;
    width: 100%;
    transition: none; /* sin micro-animaciones */
    position: relative;
    z-index: 1; /* por delante de burbujas */
}

/* En escritorio evitamos efectos hover que causen “saltos” */
@media (min-width: 992px) {
    .login-card:hover {
        transform: none !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    }
}

/* Contenedor translúcido opcional (si lo usas alrededor) */
.login-container {
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid #ffffff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    max-width: 400px;
    margin: auto;
}

/* =========================================================
   Header de la tarjeta
   ========================================================= */
.login-header {
    background-color: #3d2cf3;
    text-align: center;
    padding: clamp(24px, 4vw, 36px) 0;
}

    .login-header img {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        object-fit: cover;
        background: #fff;
        padding: 5px;
    }

    .login-header h5 {
        color: #fff;
        font-weight: 600;
        margin-top: 10px;
    }

    .login-header small {
        color: rgba(255, 255, 255, 0.8);
    }

/* =========================================================
   Formulario
   ========================================================= */
.card-body {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.form-label {
    font-weight: 600;
    color: #222;
}

.input-group.shadow-sm {
    box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}

.input-group-text {
    background-color: #f8f9fa;
    border-radius: 8px 0 0 8px;
}

.form-control {
    border-radius: 0 8px 8px 0;
    font-size: 16px; /* evita zoom de iOS al foco */
    min-height: 44px; /* área táctil mínima */
}

/* Botón principal */
.btn-primary {
    background-color: #3d2cf3;
    border: none;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

    .btn-primary:hover {
        background-color: #3320db;
    }

/* Alertas */
.alert {
    border-radius: 10px;
    font-size: 15px;
}

/* =========================================================
   Footer
   ========================================================= */
footer {
    color: #6c757d;
    font-size: 14px;
}

    footer a {
        color: #3d2cf3;
        text-decoration: none;
    }

        footer a:hover {
            text-decoration: underline;
        }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 575.98px) {
    body {
        overflow-y: auto;
    }

    .login-card {
        margin: 0 1rem;
    }

    .login-header img {
        width: 70px;
        height: 70px;
    }

    .card-body {
        padding: 1.25rem;
    }

    .btn-primary {
        font-size: 1rem;
        padding: .75rem;
    }
}

/* En desktop, la tarjeta no “salta”: altura controlada y sin overflow del body */
@media (min-width: 992px) {
    .login-card {
        max-height: calc(100vh - 40px);
        overflow: hidden;
    }
}


/* =========================================================
   Ajuste para Zoom y Pantallas Cortas (Applaundry)
   ========================================================= */

/* Esta query se activa cuando el alto disponible es poco, 
   lo cual ocurre al subir el zoom o en pantallas pequeñas */
@media (max-height: 750px) {

    /* Reducimos el espacio del header para que todo suba */
    .login-header {
        padding: 15px 0 !important;
    }

        .login-header img {
            width: 60px !important;
            height: 60px !important;
        }

        .login-header h5 {
            font-size: 1.1rem;
            margin-top: 5px;
        }

    /* Reducimos el padding del cuerpo del formulario */
    .card-body {
        padding-top: 1rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Ajustamos los márgenes de los inputs para ganar espacio */
    .mb-3, .mb-4 {
        margin-bottom: 0.8rem !important;
    }

    /* Reducimos el padding del footer para que el link "Crear Cuenta" suba */
    .card-footer {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* Si el zoom es muy alto (pantalla aún más pequeña) */
@media (max-height: 600px) {
    .login-header small {
        display: none; /* Ocultamos el texto secundario para priorizar el link de cuenta */
    }

    .login-card {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/* =========================================================
   LOGIN LAVASIS 2026
   El alcance se limita a .login-page para conservar las otras
   pantallas públicas que reutilizan este archivo.
   ========================================================= */
.login-page,
.login-page * {
    box-sizing: border-box;
}

.login-page {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: clamp(18px, 3vw, 42px);
    display: grid;
    place-items: start center;
    overflow-x: hidden;
    overflow-y: auto;
    color: #14213d;
    background:
        radial-gradient(circle at 8% 10%, rgba(48, 149, 255, .18), transparent 31%),
        radial-gradient(circle at 92% 85%, rgba(35, 190, 116, .14), transparent 30%),
        linear-gradient(145deg, #f5f9ff 0%, #eef6ff 48%, #f5fbf8 100%);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.login-page button,
.login-page input {
    font: inherit;
}

.login-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(2px);
}

.login-orb-one {
    top: -180px;
    right: -110px;
    width: 430px;
    height: 430px;
    background: linear-gradient(145deg, rgba(44, 134, 240, .14), rgba(37, 188, 115, .08));
}

.login-orb-two {
    bottom: -210px;
    left: -120px;
    width: 480px;
    height: 480px;
    background: linear-gradient(145deg, rgba(37, 188, 115, .11), rgba(44, 134, 240, .08));
}

.login-grid {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(48, 105, 180, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48, 105, 180, .08) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.login-shell {
    position: relative;
    z-index: 1;
    width: min(1160px, 100%);
    min-height: min(720px, calc(100vh - 84px));
    min-height: min(720px, calc(100dvh - 84px));
    margin-block: auto;
    display: grid;
    grid-template-columns: minmax(390px, .92fr) minmax(480px, 1.08fr);
    overflow: hidden;
    border: 1px solid rgba(205, 220, 239, .86);
    border-radius: 30px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 34px 90px rgba(33, 65, 109, .18), 0 8px 24px rgba(33, 65, 109, .08);
    isolation: isolate;
}

.login-brand-panel {
    position: relative;
    min-height: 100%;
    padding: clamp(34px, 4.3vw, 58px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(155deg, #0d4fae 0%, #1678dd 55%, #0b95b6 100%);
}

.login-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .11;
    background: url("../img/lavanderia_1.jpeg") center / cover no-repeat;
    mix-blend-mode: screen;
}

.login-brand-panel::after {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -190px;
    z-index: -1;
    width: 440px;
    height: 440px;
    border: 80px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
}

.login-brand-content {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 7vh, 74px);
}

.login-brand {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    text-decoration: none;
}

.login-logo-box {
    width: 58px;
    height: 58px;
    padding: 7px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .64);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(4, 44, 98, .24);
}

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

.login-brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .16em;
}

.login-brand-copy {
    max-width: 470px;
}

.login-kicker,
.login-form-kicker {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.login-kicker {
    margin-bottom: 17px;
    color: rgba(255, 255, 255, .78);
}

.login-brand-copy h1 {
    margin: 0;
    max-width: 520px;
    color: #ffffff;
    font-size: clamp(32px, 3.5vw, 49px);
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.login-brand-copy p {
    margin: 22px 0 0;
    max-width: 470px;
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
    line-height: 1.72;
}

.login-benefits {
    display: grid;
    gap: 17px;
}

.login-benefit {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 13px;
}

.login-benefit > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .21);
    border-radius: 13px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(8px);
}

.login-benefit > span i {
    font-size: 18px;
}

.login-benefit div {
    display: grid;
    gap: 3px;
}

.login-benefit strong {
    font-size: 14px;
    font-weight: 800;
}

.login-benefit small {
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    line-height: 1.4;
}

.login-brand-footer {
    margin-top: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .66);
    font-size: 12px;
    font-weight: 650;
}

.login-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #61e89e;
    box-shadow: 0 0 0 5px rgba(97, 232, 158, .14);
}

.login-form-panel {
    min-width: 0;
    padding: clamp(36px, 5vw, 70px) clamp(34px, 6vw, 86px) 27px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(255, 255, 255, .96);
}

.login-form-wrap {
    width: min(430px, 100%);
    margin: auto;
}

.login-mobile-brand {
    display: none;
}

.login-heading {
    margin-bottom: 30px;
}

.login-form-kicker {
    margin-bottom: 9px;
    color: #16865d;
}

.login-heading h2 {
    margin: 0;
    color: #11213b;
    font-size: clamp(30px, 3.1vw, 40px);
    font-weight: 850;
    line-height: 1.14;
    letter-spacing: -.035em;
}

.login-heading p {
    margin: 10px 0 0;
    color: #6b7a91;
    font-size: 15px;
    line-height: 1.6;
}

.login-alert {
    margin: 0 0 22px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 11px;
    border: 1px solid #f6c9ce;
    border-radius: 14px;
    color: #9f2532;
    background: #fff5f6;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.login-alert-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #c13243;
    background: #ffe3e6;
}

.login-form {
    display: grid;
    gap: 20px;
}

.login-field {
    display: grid;
    gap: 8px;
}

.login-field > label {
    color: #253551;
    font-size: 13px;
    font-weight: 800;
}

.login-input-wrap {
    position: relative;
    min-height: 54px;
    display: flex;
    align-items: center;
    border: 1px solid #d9e2ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 13px rgba(31, 73, 125, .045);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.login-input-wrap:focus-within {
    border-color: #2f86ea;
    box-shadow: 0 0 0 4px rgba(47, 134, 234, .12), 0 8px 20px rgba(31, 73, 125, .07);
    transform: translateY(-1px);
}

.login-input-wrap > i {
    position: absolute;
    left: 17px;
    color: #7a8ca5;
    font-size: 18px;
    pointer-events: none;
}

.login-input {
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 16px 0 49px;
    border: 0;
    outline: 0;
    border-radius: 14px;
    color: #172944;
    background: transparent;
    font-size: 15px;
    font-weight: 650;
}

.login-input::placeholder {
    color: #9aa8ba;
    font-weight: 500;
}

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

.login-password-toggle {
    position: absolute;
    right: 8px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 11px;
    color: #70829b;
    background: transparent;
    cursor: pointer;
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
    color: #176bd1;
    background: #edf5ff;
    outline: none;
}

.login-captcha-field {
    gap: 7px;
}

.login-captcha-challenge {
    display: grid;
    grid-template-columns: minmax(0, 190px) 1fr;
    align-items: center;
    gap: 12px;
}

.login-captcha-image-wrap {
    height: 58px;
    overflow: hidden;
    border: 1px solid #cfe0ee;
    border-radius: 13px;
    background: #eff8ff;
    box-shadow: 0 4px 13px rgba(31, 73, 125, .06);
}

.login-captcha-image {
    display: block;
    width: 190px;
    height: 58px;
    object-fit: cover;
    user-select: none;
}

.login-captcha-refresh {
    min-height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #cfe0ee;
    border-radius: 12px;
    color: #176bd1;
    background: #f5f9ff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.login-captcha-refresh:hover,
.login-captcha-refresh:focus-visible {
    border-color: #86b9ed;
    background: #eaf4ff;
    outline: none;
    transform: translateY(-1px);
}

.login-captcha-refresh:disabled {
    opacity: .55;
    cursor: wait;
}

.login-captcha-refresh:disabled i {
    animation: login-spin .75s linear infinite;
}

.login-captcha-answer .login-input {
    text-transform: uppercase;
    letter-spacing: .12em;
}

.login-field-help,
.login-validation {
    min-height: 0;
    color: #8795a8;
    font-size: 11px;
    line-height: 1.35;
}

.login-validation:not(:empty) {
    color: #b62c3b;
    font-weight: 700;
}

.login-security-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #75849a;
    font-size: 11px;
    line-height: 1.45;
}

.login-security-note i {
    margin-top: 1px;
    color: #20a46d;
    font-size: 14px;
}

.login-submit {
    position: relative;
    width: 100%;
    min-height: 55px;
    margin-top: 2px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #1268d5 0%, #268cef 64%, #18a67a 130%);
    box-shadow: 0 14px 30px rgba(25, 112, 213, .25);
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.login-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255, 255, 255, .22), transparent 46%);
    pointer-events: none;
}

.login-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(25, 112, 213, .31);
    filter: saturate(1.05);
}

.login-submit:focus-visible {
    outline: 3px solid rgba(38, 140, 239, .27);
    outline-offset: 3px;
}

.login-submit:disabled {
    cursor: wait;
    opacity: .78;
}

.login-spinner {
    width: 17px;
    height: 17px;
    display: none;
    border: 2px solid rgba(255, 255, 255, .38);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: login-spin .7s linear infinite;
}

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

.login-submit .is-hidden {
    display: none;
}

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

.login-support {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    color: #7b899c;
    font-size: 12px;
}

.login-support a {
    color: #176bd1;
    font-weight: 800;
    text-decoration: none;
}

.login-support a:hover {
    text-decoration: underline;
}

.login-form-footer {
    width: min(500px, 100%);
    margin: 34px auto 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #9aa6b6;
    font-size: 10px;
    font-weight: 650;
}

@media (max-width: 940px) {
    .login-page {
        padding: 20px;
        place-items: start center;
    }

    .login-shell {
        width: min(600px, 100%);
        min-height: auto;
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
        min-height: min(720px, calc(100vh - 40px));
        min-height: min(720px, calc(100dvh - 40px));
        padding: 38px clamp(25px, 7vw, 62px) 24px;
    }

    .login-form-wrap {
        margin: 0 auto;
    }

    .login-mobile-brand {
        margin-bottom: 38px;
        display: flex;
        align-items: center;
        gap: 11px;
        color: #15305b;
        font-size: 17px;
        font-weight: 900;
        letter-spacing: .13em;
    }

    .login-mobile-brand img {
        width: 44px;
        height: 44px;
        padding: 4px;
        border: 1px solid #d8e5f3;
        border-radius: 13px;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(30, 94, 168, .13);
    }
}

@media (max-width: 575.98px) {
    .login-page {
        min-height: 100dvh;
        padding: 0;
        place-items: stretch;
        background: #ffffff;
    }

    .login-ambient {
        display: none;
    }

    .login-shell {
        width: 100%;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .login-form-panel {
        min-height: 100dvh;
        padding: max(26px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
    }

    .login-mobile-brand {
        margin-bottom: 26px;
    }

    .login-heading {
        margin-bottom: 21px;
    }

    .login-heading h2 {
        font-size: 31px;
    }

    .login-input,
    .login-submit {
        font-size: 16px;
    }

    .login-form {
        gap: 16px;
    }

    .login-captcha-challenge {
        grid-template-columns: minmax(0, 190px) minmax(48px, 1fr);
        gap: 10px;
    }

    .login-captcha-image-wrap {
        width: min(190px, 100%);
    }

    .login-captcha-image {
        width: 190px;
        max-width: 100%;
    }

    .login-captcha-refresh {
        min-width: 48px;
        padding-inline: 10px;
    }

    .login-captcha-refresh span {
        display: none;
    }

    .login-support {
        margin-top: 20px;
    }

    .login-form-footer {
        margin-top: 25px;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .login-form-footer {
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }
}

@media (max-width: 359.98px) {
    .login-form-panel {
        padding-right: 16px;
        padding-left: 16px;
    }

    .login-mobile-brand {
        margin-bottom: 21px;
    }

    .login-heading h2 {
        font-size: 28px;
    }

    .login-heading p {
        font-size: 13px;
    }

    .login-captcha-challenge {
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .login-captcha-refresh {
        width: 46px;
        padding: 0;
    }
}

@media (max-width: 940px) and (max-height: 700px) {
    .login-page {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .login-form-panel {
        padding-top: 24px;
        padding-bottom: 20px;
    }

    .login-mobile-brand {
        margin-bottom: 20px;
    }

    .login-heading {
        margin-bottom: 18px;
    }

    .login-form {
        gap: 14px;
    }
}

@media (min-width: 941px) and (max-height: 760px) {
    .login-page {
        padding-top: 18px;
        padding-bottom: 18px;
        place-items: start center;
    }

    .login-shell {
        min-height: 680px;
    }

    .login-brand-content {
        gap: 36px;
    }

    .login-brand-copy h1 {
        font-size: 37px;
    }

    .login-form-panel {
        padding-top: 32px;
        padding-bottom: 20px;
    }

    .login-heading {
        margin-bottom: 22px;
    }

    .login-form {
        gap: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-page *,
    .login-page *::before,
    .login-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}