/* Copyright (c) 2026 Silk Road Merchants LLC. All Rights Reserved
 * Filename: login.css
 * Author: Michael Taciroglu
 * Date Created: October 11, 2026
 * Description: Login, passkey and two-step sign-in page styles.
 */
body {
    background: url('/images/login_background.png') center center / cover no-repeat fixed;
    min-height: 100vh;
    /* Phone browsers' toolbars come and go on scroll; svh is the height with them showing. */
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
}
.login-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    overflow: hidden;
}
.login-header-logo {
    background: #fff;
    padding: 1.5rem 1rem 1.25rem;
    text-align: center;
}
.login-header-logo img {
    height: 70px;
    width: auto;
    display: block;
    margin: 0 auto;
}
.login-header-title {
    background: #1a2340;
    padding: .9rem 1rem .75rem;
    text-align: center;
}
.login-header-title h1 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: .02em;
}
.login-header-title p {
    color: rgba(255,255,255,.65);
    font-size: .8rem;
    margin: .25rem 0 0;
}
.login-body { padding: 1.75rem 1.75rem 1.25rem; }
.login-footer { font-size: .72rem; }

/* Two-step sign-in (admin/account/two_step.php) */
.two-step-code { text-align: center; letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.link-button { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* Passkeys: the button above the password form, and the line between them. */
.passkey-button { padding-top: .6rem; padding-bottom: .6rem; font-weight: 600; }
.login-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 1rem; color: #6c757d; font-size: .8rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; border-top: 1px solid #dee2e6; }