/* ============================= LOG IN (NEW LOOK) ===========================
   modal/login.php: the dialog itself (.lg) and, while it is open in the modal window, the window made to
   fit it (.lg-modal, set by the template, removed by main.js closeModal/loadModal). Also drawn inside
   users/login-page.php when user/login is opened as an address.
   ========================================================================= */
@keyframes lgDrift { from { transform: scale(1.03); } to { transform: scale(1.09) translate(-1%, -1%); } }
@keyframes lgIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* the modal window, for this dialog only */
.modal_window.lg-modal { top: 50%; left: 50%; width: min(1680px, calc(100vw - 48px)); max-width: none; height: calc(100vh - 48px); transform: translate(-50%, -50%);   /* most of the screen */
    border-radius: 0; background: #f5f5f3; box-shadow: 0 40px 120px rgba(0,0,0,.7); }
.modal_window.lg-modal .modal_close { display: none; }
.modal_window.lg-modal .scroll_wrapper, .modal_window.lg-modal #modal_content { height: 100%; padding: 0; overflow: hidden; }
.modal_mask.lg-modal { background: rgba(5,5,5,.6); }

/* the dialog */
.lg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; min-height: 560px; background: #f5f5f3; color: #0a0a0a; font-family: 'Archivo', sans-serif; text-align: left; animation: lgIn .45s cubic-bezier(.2,.7,.2,1) both; }
.lg p { margin: 0; }
.lg-art { position: relative; overflow: hidden; background: #0a0a0a; color: #f5f5f3; }
.lg-art-img { position: absolute; inset: 0; background: center / cover no-repeat; animation: lgDrift 24s ease-in-out infinite alternate; }
.lg-art-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.25) 38%, rgba(10,10,10,0) 60%); }
.lg-big { position: absolute; left: -2%; top: 18px; font: 900 clamp(110px, 15vw, 280px)/.8 'Archivo', sans-serif; letter-spacing: -.075em; color: transparent; -webkit-text-stroke: 1.5px rgba(0,255,80,.6); white-space: nowrap; pointer-events: none; }
.lg .lg-credit { position: absolute; left: 24px; bottom: 18px; font: 600 11.5px 'Archivo', sans-serif; color: #bdbdb8; }
.lg-credit a { color: #f5f5f3 !important; text-decoration: underline; }

.lg-side { position: relative; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.lg-stripe { flex: none; height: 8px; background: repeating-linear-gradient(-45deg, #0a0a0a 0 4px, #00FF50 4px 8px); }
.lg-x { position: absolute; top: 22px; right: 20px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 2px solid #0a0a0a; background: #f5f5f3; cursor: pointer; font: 400 24px/1 'Archivo', sans-serif; color: #0a0a0a; }
.lg-x:hover { background: #0a0a0a; color: #00FF50; }
.lg-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 44px clamp(22px, 4vw, 56px) 30px; }
.lg-in { width: 100%; max-width: 500px; margin: 0 auto; }
.lg-kick { font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; margin-bottom: 12px; }
.lg h1 { font: 900 clamp(44px, 5vw, 80px)/.86 'Archivo', sans-serif; letter-spacing: -.06em; margin: 0 0 12px; color: #0a0a0a; }
.lg h1 span { background: #00FF50; padding: 0 6px; }
.lg .lg-lead { font: 600 14.5px/1.5 'Archivo', sans-serif; color: #2a2a2a; margin: 0 0 22px; }
.lg-sso .au_gbtn { justify-content: flex-start; min-height: 44px; }
.lg-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.lg-or span { flex: 1; height: 2px; background: #0a0a0a; }
.lg-or b { font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; }

.lg-form label { display: block; margin: 0 0 12px; }
.lg-form label > span { display: flex; justify-content: space-between; gap: 10px; font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; margin-bottom: 6px; color: #0a0a0a; }
.lg-form label > span button { border: 0; background: none; padding: 0; cursor: pointer; font: 800 10px 'Archivo', sans-serif; letter-spacing: .1em; text-decoration: underline; color: #0a0a0a; }
.lg .lg-form input[type=email], .lg .lg-form input[type=password], .lg .lg-form input[type=text] { width: 100%; height: 50px; box-sizing: border-box; border: 2px solid #0a0a0a; background: #fff; padding: 0 14px; outline: none; font: 700 15.5px 'Archivo', sans-serif; color: #0a0a0a; border-radius: 0; margin: 0; }
.lg .lg-form input:focus { box-shadow: 0 0 0 3px rgba(0,255,80,.55); }
.lg .lg-form input::placeholder { color: #8d8d88; }
.lg-forgot { display: inline-block; margin: -4px 0 14px; font: 800 12px 'Archivo', sans-serif; text-decoration: underline; color: #0a0a0a !important; }
.lg-stay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; }
.lg-stay-l { font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; white-space: nowrap; }
.lg-seg { display: flex; border: 2px solid #0a0a0a; background: #fff; }
.lg-seg button { cursor: pointer; white-space: nowrap; padding: 8px 11px; border: 0; background: transparent; font: 800 11px 'Archivo', sans-serif; letter-spacing: .08em; color: #0a0a0a; }
.lg-seg button.on { background: #0a0a0a; color: #00FF50; }
.lg .lg-stay-n { font: 600 12px 'Archivo', sans-serif; color: #4a4a46; margin-bottom: 16px; }
.lg-go { display: flex; width: 100%; align-items: center; justify-content: space-between; height: 58px; padding: 0 20px; cursor: pointer; font: 800 13.5px 'Archivo', sans-serif; letter-spacing: .14em; background: #0a0a0a; color: #f5f5f3; border: 2px solid #0a0a0a; transition: background .2s, color .2s; }
.lg-go.ready { background: #00FF50; color: #0a0a0a; }
.lg-go.is_busy { opacity: .6; }
.lg .lg-msg { margin-top: 12px; padding: 10px 12px; background: #fff; border: 2px solid #b3261e; font: 700 13px 'Archivo', sans-serif; color: #b3261e; }
.lg .lg-msg:not(.is_bad) { border-color: #0a0a0a; color: #0a0a0a; background: #00FF50; }
.lg-msg a { color: inherit !important; text-decoration: underline; }

.lg-foot { margin-top: 22px; padding-top: 16px; border-top: 2px solid #0a0a0a; display: flex; flex-direction: column; gap: 10px; }
.lg-inv { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #cfcfca; }
.lg-inv em { padding: 3px 6px; background: #00FF50; font: 800 9px 'Archivo', sans-serif; letter-spacing: .12em; font-style: normal; flex: none; }
.lg-inv span { font: 600 12.5px/1.5 'Archivo', sans-serif; }
.lg-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 700 13px 'Archivo', sans-serif; }
.lg-links a { color: #0a0a0a !important; font-weight: 900; text-decoration: underline; }
.lg-links .lg-help { margin-left: auto; font-weight: 700; }

@media (prefers-reduced-motion: reduce){ .lg, .lg-art-img { animation: none; } }
@media (max-width: 900px){
    .modal_window.lg-modal #modal_content { overflow-y: auto; }
    .lg { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .lg-art { height: 200px; }
    .lg-big { font-size: 80px; top: auto; bottom: 20px; }
    .lg-side { overflow: visible; }
}
@media (max-width: 520px){ .lg-stay { flex-direction: column; align-items: flex-start; } }

/* ---- the entrance: after the dialog itself rises in, each piece of the form pushes up and fades in after
   the one before it (CSS only: nothing waits on a script). Delays by name, since a <script> sits among them. ---- */
@keyframes lgUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lgFade { from { opacity: 0; } to { opacity: 1; } }
.lg-kick, .lg h1, .lg .lg-lead, .lg-sso, .lg-or, .lg-form > label, .lg-forgot, .lg-stay, .lg .lg-stay-n, .lg-go, .lg-inv, .lg-links, .lg-x { animation: lgUp .6s cubic-bezier(.2,.7,.2,1) both; }
.lg-kick { animation-delay: .15s; }
.lg h1 { animation-delay: .22s; }
.lg .lg-lead { animation-delay: .30s; }
.lg-sso { animation-delay: .37s; }
.lg-or { animation-delay: .43s; }
.lg-form > label:nth-of-type(1) { animation-delay: .49s; }
.lg-form > label:nth-of-type(2) { animation-delay: .55s; }
.lg-forgot { animation-delay: .60s; }
.lg-stay { animation-delay: .65s; }
.lg .lg-stay-n { animation-delay: .69s; }
.lg-go { animation-delay: .74s; }
.lg-inv { animation-delay: .82s; }
.lg-links { animation-delay: .88s; }
.lg-x { animation-delay: .35s; }
.lg-stripe { animation: lgFade .6s .1s both; }
.lg-foot { animation: lgFade .5s .78s both; }   /* its dividing line, with the two below it */
.lg-big { animation: lgFade 1.4s .2s ease both; }
.lg .lg-credit { animation: lgFade .8s .9s both; }
.lg h1 span { display: inline-block; }
@media (prefers-reduced-motion: reduce){
    .lg-kick, .lg h1, .lg .lg-lead, .lg-sso, .lg-or, .lg-form > label, .lg-forgot, .lg-stay, .lg .lg-stay-n, .lg-go, .lg-inv, .lg-links, .lg-x,
    .lg-stripe, .lg-big, .lg .lg-credit, .lg-foot { animation: none !important; }
}