/* Auth page layout.
   IMPORTANT: do NOT hardcode any colour here. The page background AND the login "shader"/glow come
   from the active retailer theme. Each theme (Content/SASS/{style}/GlobalDesktop.min.css) styles
   `.Login` with a radial glow and `.Login .panel` with a matching card box-shadow, in that retailer's
   colour (red for the retailer, green for default, etc.). We add the `.Login` class to the auth card's
   container (see _LayoutNoNav.cshtml) so the wallet picks up that exact theme glow, then below we undo
   the cashier-login form rules from `.Login` that don't suit the wallet's labelled form. */

body.RetailInterface {
    min-height: 100vh;
}

/* Full-page ambient login glow: an empty `.Login` layer behind everything so the theme's
   `.RetailInterface .Login` radial gradient spreads across the whole page (like the cashier login),
   instead of only filling the narrow card container. The colour stays the theme's. */
.wallet-bg-glow.Login {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 60vh;          /* same extent as the cashier login's .Login row */
    z-index: 0;
    pointer-events: none;
}

.wallet-auth-container {
    position: relative;    /* sit above the full-page glow layer */
    z-index: 1;
    max-width: 460px;
    margin: 48px auto;
    /* breathing room around the card; the ambient glow shows through here */
    padding: 48px 36px;
}

.wallet-auth-logo h2 {
    font-weight: bold;
}

/* ---- Theme login-glow reuse: keep the colour from `.Login` / `.Login .panel`, undo the layout ---- */
.wallet-auth-container.Login {
    height: auto;                       /* theme: 60vh */
    background: none;                   /* broad radial now comes from .wallet-bg-glow; keep only the card rim glow */
}

.wallet-auth-container.Login .wallet-auth-logo h2 {
    font-size: 1.6rem;                  /* theme: 2em */
    font-weight: bold;
}

.wallet-auth-container.Login .wallet-auth-card.panel {
    top: auto;                          /* theme: top:30% */
    display: block;                     /* theme: inline-block */
    padding: 0;                         /* theme: 5px 10px 20px; .panel-body handles inner padding */
    border-radius: 8px;                 /* theme: 20px */
    /* card glow (box-shadow) is intentionally left to the theme's `.Login .panel` rule */
}

.wallet-auth-container.Login label {
    float: none;                        /* theme: float:right */
    font-size: inherit;
}

.wallet-auth-container.Login input[type="password"] {
    height: auto;                       /* theme: 32px */
    padding: 6px 12px;
    font-size: inherit;
}

.form-control-lg {
    font-size: 1.25em;
}

.btn-group-justified {
    display: flex;
    gap: 8px;
}

.btn-group-justified .btn {
    flex: 1;
}