/* Account (login / reset / change password) dark background with a static
   product-glyph overlay. Replaces the legacy automotive photo background.
   The overlay is now fully static - the animated version (accountBackground.js)
   was removed for reliability, so the glyphs and glow never move. */

:root {
    --apbg-base: #202427;
    --apbg-brand: #DD2323;
    --apbg-glyph: #f26a6a;
}

body {
    background: var(--apbg-base) !important;
    background-image: none !important;
    padding: 0;
}

/* Full-screen overlay sits behind all page content. */
.account-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--apbg-base);
}

/* Every direct child of body except the overlay renders above it.
   Excludes .ng-confirm: angular-confirm appends its dialog wrapper directly to
   body, and this selector's specificity (0,1,1) otherwise beats confirm.css's
   `.ng-confirm { position: fixed }` (0,1,0), collapsing the dialog to
   position:relative/height:0 and rendering it off-screen - DEV-679. */
body > *:not(.account-bg):not(.ng-confirm) {
    position: relative;
    z-index: 1;
}

.account-bg__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1100px;
    height: 720px;
    max-width: 150vw;
    transform: translate(-50%, -50%);
    background: radial-gradient(rgba(221, 35, 35, 0.24) 0, rgba(221, 35, 35, 0.09) 40%, transparent 68%);
    filter: blur(10px);
    pointer-events: none;
}

.hero-glyphs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-glyph {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gs, 28px);
    height: var(--gs, 28px);
    margin-left: calc(var(--gs, 28px) / -2);
    margin-top: calc(var(--gs, 28px) / -2);
    color: var(--apbg-glyph);
    opacity: var(--op, 0.5);
}

.hero-glyph svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* On phones keep only the four corner glyphs so they never crowd the centred
   login panel. */
@media (max-width: 640px) {
    .hero-glyph:nth-child(n + 5) { display: none; }
}

/* ds-reskin.css rounds the .panel-heading top corners, but the Bootstrap .panel
   background is white, so it peeks through as a light arc behind the heading's
   rounded corners. Match the panel background to the (dark) heading so nothing
   light shows through. The panel body keeps its own white background, so only
   the sliver behind the heading is affected. Scoped to the account screens (this
   stylesheet only loads there); ds-reskin.css is left untouched. The `body`
   prefix wins over Bootstrap's `.panel { background-color: #fff }`. */
body .panel-autoPlay {
    background-color: var(--ap-shark, var(--apbg-base));
}