/* ============================================================
 * Hubeurope — new-look sign-in page (redesign step 2)
 * Loaded by auth/login.php only when wh_ui_new_login() says so, in place
 * of site.css + login.css. Restyles the SAME form markup and ids that the
 * login script (password eye, Face ID, install prompt) relies on.
 * Every rule hangs off body.hx.hx-login.
 * ============================================================ */

body.hx.hx-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(110% 90% at 30% 50%, #1d1410 0%, #0b0b0c 55%, #060607 100%);
  overflow-x: hidden;
}
body.hx.hx-login::after { display: none; }   /* this page has its own glow */

/* ---------- stage: hero left, card right ---------- */
body.hx-login .hxl-stage { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 48px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 72px; isolation: isolate; }
body.hx-login .hxl-glow { position: absolute; z-index: -1; width: 720px; height: 720px; left: 0; top: 50%; margin-top: -360px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,68,0,.26), transparent 62%); filter: blur(60px); pointer-events: none; }
body.hx-login .hxl-ring { position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(255,255,255,.06); pointer-events: none; }
body.hx-login .hxl-ring--a { width: 760px; height: 760px; left: -40px; top: 50%; margin-top: -380px; animation: hxl-spin 60s linear infinite; }
body.hx-login .hxl-ring--b { width: 560px; height: 560px; left: 60px; top: 50%; margin-top: -280px; border-style: dashed; animation: hxl-spin 90s linear infinite reverse; }
body.hx-login .hxl-ring--c { width: 360px; height: 360px; left: 160px; top: 50%; margin-top: -180px; border-color: rgba(255,68,0,.18); }
body.hx-login .hxl-sat { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--hx-acc); box-shadow: 0 0 14px 3px rgba(255,68,0,.8); }
body.hx-login .hxl-ring--a .hxl-sat { left: 376px; top: -4px; }
body.hx-login .hxl-ring--b .hxl-sat { left: -4px; top: 276px; background: var(--hx-acc-2); }
@keyframes hxl-spin { to { transform: rotate(360deg); } }

body.hx-login .hxl-hero { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
body.hx-login .hxl-hero img { height: 44px; width: auto; align-self: flex-start; }
body.hx-login .hxl-title { margin: 0; font-size: clamp(44px, 6vw, 78px); font-weight: 800; letter-spacing: -.04em; line-height: .98; color: #fff; }
body.hx-login .hxl-points { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 18px; border-top: 1px solid var(--hx-line); max-width: 560px;
  list-style: none; margin: 0; padding-left: 0; }
body.hx-login .hxl-points li { display: flex; align-items: center; gap: 8px; font: 600 11px var(--hx-mono); letter-spacing: .16em; text-transform: uppercase; color: #c9c9cf; }
body.hx-login .hxl-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hx-acc); box-shadow: 0 0 8px rgba(255,68,0,.8); }

/* ---------- the card (existing .login-* markup) ---------- */
body.hx-login .login-container { flex: 0 0 440px; max-width: 100%; position: relative; z-index: 1; padding: 40px;
  border-radius: 24px; border: 1px solid rgba(255,255,255,.1); background: rgba(16,16,18,.74); color: var(--hx-ink);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 50px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
  opacity: 1; animation: hxl-rise .6s cubic-bezier(.2,.9,.3,1) both; }
@keyframes hxl-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

body.hx-login .login-header { text-align: left; margin: 0 0 26px; }
body.hx-login .login-logo { display: none !important; }    /* the hero carries the logo */
body.hx-login .login-title::before { content: "Welcome back"; display: block; margin-bottom: 8px;
  font: 600 11px var(--hx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--hx-acc-ink); }
body.hx-login .login-title { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
body.hx-login .login-subtitle { margin: 0; font-size: 15px; color: var(--hx-ink-2); }

body.hx-login .form-group { margin: 0 0 18px; }
body.hx-login .form-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #c9c9cf; }
body.hx-login .form-input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35); color: #fff; font: 500 16px var(--hx-sans); outline: 0; transition: border-color .15s, box-shadow .15s; }
body.hx-login .form-input:focus { border-color: var(--hx-acc); box-shadow: 0 0 0 4px rgba(255,68,0,.18); }
body.hx-login .form-input::placeholder { color: var(--hx-ink-3); }
body.hx-login .form-input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 100px #141416 inset; caret-color: #fff; }
body.hx-login .password-wrapper { position: relative; }
body.hx-login .password-wrapper .form-input { padding-right: 52px; }
body.hx-login .password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--hx-ink-3); }
body.hx-login .password-toggle:hover { color: #fff; }
body.hx-login .password-toggle .eye-icon { width: 20px; height: 20px; }
body.hx-login .forgot-password-link { text-align: right; margin-top: 10px; }
body.hx-login .text-link { color: var(--hx-acc-ink); font-size: 13px; font-weight: 600; text-decoration: none; }
body.hx-login .text-link:hover { color: #ffb08a; text-decoration: underline; }

body.hx-login .login-button { width: 100%; min-height: 54px; margin-top: 6px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--hx-acc); color: #fff; font: 700 16px var(--hx-sans);
  box-shadow: 0 14px 40px rgba(255,68,0,.45), inset 0 1px 0 rgba(255,255,255,.25); transition: background .15s, transform .15s; }
body.hx-login .login-button:hover { background: #ff5a1f; transform: translateY(-1px); }
body.hx-login .login-button[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

body.hx-login .error-message { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600;
  color: #ffd2d2; background: rgba(255,93,93,.12); border: 1px solid rgba(255,93,93,.35); }

/* Face ID (button in browser, full panel in the installed app) */
body.hx-login .biometric-divider { color: var(--hx-ink-3); }
body.hx-login .biometric-divider::before, body.hx-login .biometric-divider::after { background: rgba(255,255,255,.1); }
body.hx-login .biometric-btn { min-height: 52px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 12px; }
body.hx-login .biometric-btn:hover { background: rgba(255,255,255,.09); }
body.hx-login .biometric-screen .bio-icon { background: rgba(255,68,0,.15); border: 1px solid rgba(255,68,0,.4); }
body.hx-login .biometric-screen .bio-icon svg { color: var(--hx-acc-ink); }
body.hx-login .biometric-screen h2 { color: #fff; }
body.hx-login .biometric-screen .bio-sub { color: var(--hx-ink-2); }
body.hx-login .biometric-screen .bio-retry { background: var(--hx-acc); min-height: 48px; }
body.hx-login .biometric-screen .bio-fallback { color: var(--hx-acc-ink); min-height: 44px; }

/* Staff Google sign-in */
body.hx-login .hxl-sso .biometric-divider { display: flex; align-items: center; margin: 22px 0 14px; font-size: 12px;
  font-family: var(--hx-mono); letter-spacing: .14em; text-transform: uppercase; }
body.hx-login .hxl-sso .biometric-divider::before, body.hx-login .hxl-sso .biometric-divider::after { content: ""; flex: 1; height: 1px; }
body.hx-login .hxl-sso .biometric-divider span { padding: 0 12px; }
body.hx-login .hxl-google { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; border-radius: 12px;
  background: #fff; color: #1f1f1f; font: 600 15px var(--hx-sans); text-decoration: none; transition: transform .15s, box-shadow .15s; }
body.hx-login .hxl-google:hover { color: #1f1f1f; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }

body.hx-login .login-footer { margin-top: 24px; text-align: center; font-size: 13px; color: var(--hx-ink-3); }
body.hx-login .login-footer p { margin: 0; }
body.hx-login .login-footer p + p { color: var(--hx-ink-3) !important; }
body.hx-login .login-footer strong { color: #c9c9cf !important; }

/* ---------- smaller screens: card first, hero trimmed ---------- */
@media (max-width: 960px) {
  body.hx.hx-login { align-items: flex-start; }
  body.hx-login .hxl-stage { flex-direction: column-reverse; align-items: stretch; gap: 32px; padding: 28px 16px 40px; overflow: hidden; }
  body.hx-login .hxl-glow { width: 100%; left: 0; }
  body.hx-login .hxl-ring--c { display: none; }
  body.hx-login .login-container { flex: none; width: 100%; max-width: 480px; margin: 0 auto; padding: 28px 22px; }
  body.hx-login .hxl-hero { flex: none; max-width: 480px; margin: 0 auto; gap: 18px; }
  body.hx-login .hxl-hero .hx-lede { font-size: 16px; }
  body.hx-login .hxl-ring--a, body.hx-login .hxl-ring--b { display: none; }
}
@media (max-width: 960px) {
  /* Logo goes back on top of the card when the hero drops below it */
  body.hx-login .login-logo { display: flex !important; width: auto !important; height: 36px !important; margin: 0 0 22px !important; justify-content: flex-start !important; }
  body.hx-login .login-logo img { width: auto; height: 30px; content: url("/assets/logos/FOR%20DARK%20BG.png"); }  /* full wordmark, not the icon */
  body.hx-login .hxl-hero > img { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.hx-login .hxl-ring, body.hx-login .login-container { animation: none !important; }
}