/* ==========================================================================
   Log in / sign up (v15): poster on the left, calm and clean form on the right.
   Charcoal surfaces, one gold accent for the main action.
   ========================================================================== */
.pxa-auth-card {
  grid-template-columns: 400px minmax(0, 1fr); width: min(920px, 100%); height: min(790px, calc(100dvh - 32px)); max-height: none;
  border-radius: 20px; background: #03131B; border: 1px solid rgba(120, 170, 200, .06); box-shadow: 0 40px 120px -30px rgba(0, 7, 11, .9);
}
.pxa-auth-card .pxa-auth-art { display: block; padding: 0; background: #000D13; overflow: hidden; }
.pxa-auth-card .pxa-auth-art::after { content: ''; position: absolute; inset: 0; right: -1px; width: auto; height: auto; top: 0; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(90deg, transparent 82%, rgba(3, 19, 27, .55) 100%); pointer-events: none; }
.pxa-auth-poster { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

.pxa-auth-card .pxa-auth-main { display: flex; flex-direction: column; padding: 36px 40px 28px; background: #03131B; font-family: var(--pa-font); }
.pxa-auth-card .pxa-x { top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 10px; background: transparent; border-color: rgba(120, 170, 200, .08); }
.pxa-auth-card .pxa-x:hover { background: rgba(120, 170, 200, .05); }
.pxa-auth-card .pxa-auth-tabs { align-self: flex-start; margin-bottom: 28px; padding: 3px; gap: 2px; border-radius: 10px; background: #061B25; border: 1px solid rgba(120, 170, 200, .06); }
.pxa-auth-card .pxa-auth-tabs button { min-width: 96px; height: 34px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #87A5B7; }
.pxa-auth-card .pxa-auth-tabs button:hover { color: #E2ECF1; }
.pxa-auth-card .pxa-auth-tabs button.is-active { background: #102D3C; color: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 7, 11, .4); }
.pxa-auth-card .pxa-auth-title { font-family: var(--pa-font); font-size: 24px; font-weight: 700; letter-spacing: -.015em; color: #F1F6F8; margin-bottom: 6px; }
.pxa-auth-card .pxa-auth-sub { font-size: 14px; color: #7595A8; margin-bottom: 24px; }
.pxa-auth-card .pxa-form { gap: 16px; }
.pxa-auth-card .pxa-field > span { font-size: 12.5px; font-weight: 500; color: #AEC5D2; }
.pxa-auth-card .pxa-input, .pxa-auth-card .pxa-field select, .pxa-auth-card .pxa-code {
  height: 46px; border-radius: 10px; background: #061923; border: 1px solid #0E2A38; box-shadow: none;
}
.pxa-auth-card .pxa-input:hover, .pxa-auth-card .pxa-field select:hover { border-color: #173647; }
.pxa-auth-card .pxa-input:focus-within, .pxa-auth-card .pxa-field select:focus, .pxa-auth-card .pxa-code:focus { border-color: #608AA3; box-shadow: 0 0 0 3px rgba(120, 170, 200, .06); }
.pxa-auth-card .pxa-input input { font-size: 14.5px; }
.pxa-auth-card .pxa-input > .px-ic-svg { color: #608AA3; }
.pxa-auth-card .pxa-hint { color: #608AA3; }
.pxa-auth-card .pxa-strength i { background: #0C2835; }
.pxa-auth-card .pxa-check { font-size: 12.5px; color: #87A5B7; }
.pxa-auth-card .pxa-check input { accent-color: #00B075; }
.pxa-auth-card .pxa-check a, .pxa-auth-card .pxa-link { color: #00B075; text-decoration: none; }
.pxa-auth-card .pxa-check a:hover, .pxa-auth-card .pxa-link:hover { text-decoration: underline; }
.pxa-auth-card .pxa-btn-gold { height: 48px; border-radius: 10px; background: #00B075; color: #021018; font-size: 14.5px; font-weight: 700; box-shadow: none; filter: none; }
.pxa-auth-card .pxa-btn-gold:hover:not(:disabled) { background: #0EC185; filter: none; }
.pxa-auth-card .pxa-or { margin: 22px 0 16px; color: #608AA3; }
.pxa-auth-card .pxa-or::before, .pxa-auth-card .pxa-or::after { background: #0C2734; }
.pxa-auth-card .pxa-btn-google { height: 46px; border-radius: 10px; }
.pxa-auth-card .pxa-auth-secure { margin-top: auto; padding-top: 18px; color: #4F7B94; }
.pxa-auth-card .pxa-2fa-badge { background: rgba(0, 176, 117, .1); color: #00B075; }
.pxa-auth-card .pxa-form-error.is-confirm { background: rgba(0, 176, 117, .08); border-color: rgba(0, 176, 117, .25); }
.pxa-auth-card .pxa-input input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #061923 inset; box-shadow: 0 0 0 1000px #061923 inset; }

@media (max-width: 980px) and (min-width: 901px) {
  .pxa-auth-card { grid-template-columns: 340px minmax(0, 1fr); }
  .pxa-auth-card .pxa-auth-main { padding: 32px 28px 24px; }
}
/* phones: full-screen form with a slim strip of the poster on top */
@media (max-width: 900px) {
  .pxa-auth-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100dvh; border-radius: 0; border: 0; }
  .pxa-auth-card .pxa-auth-art { display: block; height: 170px; }
  .pxa-auth-poster { object-position: 50% 36%; }
  .pxa-auth-card .pxa-auth-art::after { background: linear-gradient(180deg, transparent 55%, #03131B 100%); }
  .pxa-auth-card .pxa-auth-main { padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px)); background: #03131B; }
  .pxa-auth-card .pxa-auth-main::before { display: none; }
  .pxa-auth-card .pxa-x { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; background: rgba(3, 19, 27, .7); z-index: 3; }
  .pxa-auth-card .pxa-auth-tabs { align-self: stretch; margin-bottom: 20px; }
}

/* Google button: keep its space while Google's button loads (no jump), then fade it in */
.pxa-auth .pxa-google { min-height: 44px; }
@keyframes pxGoogleWait { to { background-position: -220% 0; } }
@keyframes pxGoogleIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Continue with Google (home welcome banner + sign-up window) ----
   Our own button in the site style, same size and shape as the green button
   above it. It opens Google's sign-in popup directly. */
html .px-welcome-google { display: flex; justify-content: center; min-height: 50px; }
html .px-welcome-google > .px-welcome-gbtn,
html .pxa-google > .pxa-btn-google {
  position: relative; display: flex !important; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 18px !important;
  border: 1px solid rgba(255, 255, 255, .06) !important; border-radius: 10px !important; box-shadow: none !important;
  background: #1A3C4B !important; color: #FFFFFF !important; cursor: pointer; white-space: nowrap;
  font-family: 'Manrope', system-ui, sans-serif !important; letter-spacing: 0 !important;
  transition: background .15s ease, transform .1s ease, opacity .2s ease;
}
html .px-welcome-google > .px-welcome-gbtn { flex: none !important; height: 50px !important; min-height: 50px !important; font-size: 16px !important; font-weight: 800 !important; }
html .pxa-google > .pxa-btn-google { flex: none !important; height: 48px !important; min-height: 48px !important; font-size: 14.5px !important; font-weight: 700 !important; }
html .px-welcome-google > .px-welcome-gbtn:hover,
html .pxa-google > .pxa-btn-google:hover { background: #22495A !important; }
html .px-welcome-google > .px-welcome-gbtn:active,
html .pxa-google > .pxa-btn-google:active { transform: scale(.99); }
html .px-welcome-google > .px-welcome-gbtn:focus-visible,
html .pxa-google > .pxa-btn-google:focus-visible { outline: 2px solid #00B175; outline-offset: 2px; }
/* the coloured G, no box behind it */
html .px-welcome-google > .px-welcome-gbtn > svg,
html .pxa-google > .pxa-btn-google .pxg-g,
html .pxa-google > .pxa-btn-google .pxg-g svg { position: static !important; flex: none; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }
html .pxa-google > .pxa-btn-google .pxg-g { display: grid; place-items: center; }
html .pxa-google > #pxGoogleBtn:empty { display: none !important; }
html .px-welcome-google > #pxWelcomeGoogle:empty { display: none !important; }

/* Only if the server is not set up for the popup: Google's own drawn button is
   loaded invisibly on top and fades in once it is fully drawn (class pxg-live). */
.pxg-wrap { position: relative !important; }
html .pxg-wrap > .pxg-layer { position: absolute !important; inset: 0; display: flex !important; justify-content: center; align-items: center;
  width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
  background: none !important; animation: none !important; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
html .pxg-wrap.pxg-live > .pxg-layer { opacity: 1; pointer-events: auto; }
html .pxg-wrap.pxg-live > .pxa-btn-google,
html .pxg-wrap.pxg-live > .px-welcome-gbtn { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
@media (prefers-reduced-motion: reduce) { html .px-welcome-gbtn, html .pxa-btn-google, html .pxg-layer { transition: none !important; } }