/* Match the store pages: flat charcoal background instead of the lime-glow theme. */
body { background: radial-gradient(1200px 700px at 28% -5%, #262626, transparent 60%), linear-gradient(160deg, #1c1c1c, #141414) !important; background-attachment: fixed !important; }
/* Consistent buttons: no resting glow; green glow on hover (ghost → green border + glow). */
button { box-shadow: none; }
button:hover { filter: brightness(1.04); box-shadow: 0 0 10px -2px rgba(198, 255, 0, 0.5); }
button.ghost:hover { border-color: rgba(198, 255, 0, 0.5); box-shadow: 0 0 10px -4px rgba(198, 255, 0, 0.35); filter: none; }
.card { background: rgba(23, 23, 23, 0.6); }
/* Smaller glow under the logo. */
.logo { filter: drop-shadow(0 3px 10px rgba(198, 255, 0, 0.16)); }
/* Logo + wordmark link back to the landing page without looking like a link. */
.brand h1 a { color: inherit; text-decoration: none; }

.card.card-wide { max-width: 560px; }
.card input:focus { box-shadow: none; }
.card .alert { margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }

.foot a { color: var(--accent); text-decoration: none; cursor: pointer; }

/* account-type toggle (Osoba prywatna ⇄ Firma) */
.seg { display: flex; gap: 8px; margin-bottom: 16px; }
.seg label { flex: 1; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg .opt { display: block; text-align: center; padding: 10px; border: 1px solid var(--border); border-radius: 11px;
            cursor: pointer; font-size: 14px; color: var(--muted); transition: border-color .15s, color .15s, background .15s; }
.seg input:checked + .opt { border-color: var(--accent); color: var(--text); background: rgba(198,255,0,.08); }

.nip-row { display: flex; gap: 8px; align-items: flex-end; }
.nip-row > label { flex: 1; margin: 0; }
.nip-row button { white-space: nowrap; }
#nipMsg { font-size: 12.5px; min-height: 16px; margin: 6px 0 0; }
#nipMsg.ok { color: #34d399; }
#nipMsg.err { color: #ffb4b5; }

/* ---- card flip (Zaloguj ⇄ Zarejestruj) ---- */
/* During the flip both faces are laid out; the taller one briefly overflows and would add a
   transient scrollbar. Clip the viewport box only while flipping (restored right after, so a
   genuinely tall settled form can still scroll). */
.auth-wrap.is-flipping { max-height: 100vh; overflow: hidden; }
.flip-wrap { width: 100%; max-width: 560px; }
.flip { perspective: 2000px; }
.flip-inner { position: relative; transform-style: preserve-3d;
              transition: transform .55s cubic-bezier(.4,0,.2,1), height .55s cubic-bezier(.4,0,.2,1); }
.flip-inner.no-anim { transition: none; }
.flip-inner.flipped { transform: rotateY(180deg); }
.face { position: absolute; top: 0; left: 0; width: 100%; margin: 0;
        -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }

/* ---- Osoba prywatna ⇄ Firma: crossfade in place + height morph ---- */
.switch-box { position: relative; overflow: hidden;
              transition: height .34s cubic-bezier(.4,0,.2,1); }
.switch-box.no-anim { transition: none; }
.pane { display: flex; flex-direction: column; gap: 16px; opacity: 0; transition: opacity .24s ease; }
.pane.active { opacity: 1; }
.pane.leaving { position: absolute; top: 0; left: 0; right: 0; opacity: 0; }
.pane.hidden { display: none; }

/* password visibility toggle */
.pw-field { position: relative; }
.pw-field input { padding-right: 42px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
             display: grid; place-items: center; width: 30px; height: 30px;
             background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
             color: var(--muted); -webkit-appearance: none; appearance: none;
             -webkit-tap-highlight-color: transparent; box-shadow: none; outline: none; }
.pw-toggle:hover, .pw-toggle:focus, .pw-toggle:focus-visible, .pw-toggle:active {
  color: var(--muted); background: none; outline: none; box-shadow: none; transform: translateY(-50%); }
.pw-toggle svg { display: block; }

/* live password requirements */
.pw-rules { list-style: none; margin: 2px 0 0; padding: 0;
            display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12px; color: var(--muted); }
.pw-rules li { display: flex; align-items: center; gap: 6px; transition: color .15s; }
.pw-rules li::before { content: '○'; font-size: 12px; line-height: 1; color: #6f6f6f; }
.pw-rules li.met { color: var(--text); }
.pw-rules li.met::before { content: '✓'; color: #34d399; }

/* ---- mobile: full-screen, no card chrome, no flip animation ---- */
@media (max-width: 560px) {
  html, body { overflow-x: hidden; }
  /* flat, near-black page background on mobile (softer than pure #000) */
  body { background: #141414; }
  .auth-wrap { padding: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
  /* margin:auto centers the panel; a form taller than the screen aligns to the top and
     scrolls instead of being clipped — and no fixed height means no phantom empty space */
  .flip-wrap { margin: auto; width: 100%; max-width: none; transform: none !important; }
  .flip { perspective: none; }
  /* drop the 3D flip — faces just stack, JS shows the active one via display */
  .flip-inner { transform: none !important; transform-style: flat; transition: none !important; height: auto !important; }
  .face { position: static;
          -webkit-backface-visibility: visible; backface-visibility: visible; }
  .face.back { transform: none; }   /* neutralize the 3D back-rotation on mobile */
  /* subtle fade-in for the incoming side (login ⇄ register AND osoba ⇄ firma) */
  @keyframes authFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .animate-in { animation: authFadeIn .22s ease-out both; }
  /* no black card box — form sits directly on the page, content centered horizontally */
  .card.face {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 34px 22px 40px;
    display: flex; flex-direction: column; align-items: center;
  }
  .card.face > * { width: 100%; max-width: 420px; }
  /* 16px inputs stop iOS from auto-zooming on focus */
  .card input, .card select { font-size: 16px; }
  /* keep the Osoba⇄Firma crossfade (.switch-box height + .pane opacity) for a uniform,
     subtle transition; only the flip itself is instant on mobile */
  .seg .opt, .pw-rules li { transition: none !important; }
  .brand { margin-bottom: 22px; }
  .logo { width: 54px; height: 54px; margin-bottom: 12px; }
  .brand h1 { font-size: 21px; }
}
@media (max-width: 400px) {
  .nip-row { flex-wrap: wrap; }
  .nip-row > label { flex: 1 1 100%; }
  .nip-row button { width: 100%; }
}