/* ==========================================
   Login OTP Modal (NO inline CSS)
   Uses site.css tokens: --brand / --accent
   ========================================== */

.hidden {
    display: none !important;
}

/* Modal layout */
.login-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

@media (min-width: 768px) {
    .login-modal {
        align-items: center;
    }
}

/* Overlay */
.login-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@media (min-width: 768px) {
    .login-overlay {
        background: rgba(0,0,0,.40);
    }
}

/* Shell (centering container) */
.login-shell {
    position: relative;
    width: 100%;
    max-width: 28rem; /* ~max-w-md */
    margin: 0 auto;
}

@media (min-width: 768px) {
    .login-shell {
        max-width: 36rem; /* md:max-w-lg */
    }
}

/* Card */
.login-card {
    position: relative;
    width: 100%;
    background: rgba(255,255,255,.95);
    border-top: 4px solid var(--accent);
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    padding: 3rem 1.5rem 1.5rem; /* pt-12 p-6 */
    box-shadow: 0 20px 45px rgba(0,0,0,.22);
    max-height: 65vh;
    overflow: auto;
}

@media (min-width: 768px) {
    .login-card {
        max-height: 80vh;
        border-radius: 1.5rem;
        border-top-width: 1px;
        border-color: color-mix(in srgb, var(--accent) 55%, white);
    }
}

/* Animations */
@keyframes loginSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes loginZoomIn {
    from {
        transform: scale(.96);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.login-anim {
    animation: loginSlideUp .40s cubic-bezier(.4,2,.2,1);
}

@media (min-width: 768px) {
    .login-anim {
        animation: loginZoomIn .28s cubic-bezier(.2,.8,.2,1);
    }
}

/* Close button */
.login-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, white);
    background: rgba(255,255,255,.85);
    color: var(--brand);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    transition: transform .15s ease, background .2s ease;
}

    .login-close:hover {
        transform: scale(1.06);
        background: #fff;
    }

/* Labels/inputs */
.login-label {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: .25rem;
}

.login-input {
    width: 100%;
    border: 2px solid color-mix(in srgb, var(--brand) 15%, white);
    border-radius: .75rem;
    padding: .75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    background: rgba(255,255,255,.85);
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .login-input:focus {
        outline: none;
        border-color: var(--brand);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
    }

.login-error {
    margin-top: .35rem;
    font-size: .875rem;
    color: #ef4444;
    font-weight: 600;
}

.login-help {
    margin-top: .75rem;
    text-align: center;
    font-size: .875rem;
    color: #475569;
    font-weight: 600;
}

/* Buttons */
.login-btn {
    width: 100%;
    border: 0;
    border-radius: .9rem;
    padding: .9rem 1rem;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: filter .2s ease, transform .08s ease;
    box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

    .login-btn:hover {
        filter: brightness(1.05);
    }

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

    .login-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

/* OTP Row */
.login-otp-row {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .75rem;
}

.login-otp {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 900;
    border-radius: .75rem;
    border: 0;
    border-bottom: 4px solid var(--accent);
    background: rgba(255,255,255,.75);
    color: var(--brand);
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
    transition: box-shadow .2s ease;
}

    .login-otp:focus {
        outline: none;
        border-bottom-color: var(--brand);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
    }

@media (min-width: 768px) {
    .login-otp {
        width: 3.25rem;
        height: 3.75rem;
        font-size: 1.65rem;
    }
}

/* Link */
.login-link {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--brand);
    font-weight: 700;
    cursor: pointer;
}

    .login-link:disabled {
        opacity: .55;
        cursor: not-allowed;
    }