/* ══ KATIS Auth Pages (login / rejestracja / newpass) ══════════════════════
   Wspólne style dla stron uwierzytelniania.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper centrujący kartę ────────────────────────────────────────────── */
.auth-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 7vh 1rem 4rem;
  min-height: 78vh;
}

/* ── Karta ────────────────────────────────────────────────────────────────── */
.auth-card {
  background: rgba(255, 255, 255, .97);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .22);
  padding: 2.5rem 2.25rem;
  width: 100%;
  max-width: 480px;
}

.auth-card-wide {
  max-width: 740px;
}

.auth-card h2 {
  color: #0b2d5e;
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1.75rem;
}

/* ── Etykiety ─────────────────────────────────────────────────────────────── */
.auth-card label {
  display: block;
  color: #0b2d5e;
  font-weight: 600;
  font-size: .93rem;
  margin-bottom: .28rem;
}

/* ── Inputy ──────────────────────────────────────────────────────────────── */
.auth-input {
  display: block;
  width: 100%;
  padding: .58rem .88rem;
  border: 1.5px solid #c5d3e8;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 1rem;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
  background: #fff;
  color: #1e293b;
  font-family: inherit;
}

.auth-input:focus {
  border-color: #397cc0;
  box-shadow: 0 0 0 3px rgba(57, 124, 192, .14);
}

.auth-input::placeholder {
  color: #94a3b8;
}

/* ── Select ──────────────────────────────────────────────────────────────── */
.auth-select {
  display: block;
  width: 100%;
  padding: .58rem .88rem;
  border: 1.5px solid #c5d3e8;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 1rem;
  outline: none;
  background: #fff;
  color: #1e293b;
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color .18s;
}

.auth-select:focus {
  border-color: #397cc0;
  box-shadow: 0 0 0 3px rgba(57, 124, 192, .14);
}

/* ── Przycisk główny ─────────────────────────────────────────────────────── */
.auth-btn {
  display: block;
  width: 100%;
  background: #b7d434;
  color: #0b2d5e;
  font-weight: 700;
  border: 2px solid #b7d434;
  border-radius: 8px;
  padding: .78rem 1.5rem;
  font-size: 1.05rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .16s, border-color .16s, transform .08s;
  font-family: inherit;
  letter-spacing: .01em;
}

.auth-btn:hover {
  background: #a0bc2a;
  border-color: #a0bc2a;
  color: #0b2d5e;
  text-decoration: none;
}

.auth-btn:active {
  transform: scale(.98);
}

/* ── Komunikat błędu ─────────────────────────────────────────────────────── */
.auth-error {
  background: #fef2f2;
  color: #dc2626;
  border: 1.5px solid #fecaca;
  border-radius: 8px;
  padding: .65rem 1rem;
  font-size: .9rem;
  margin-bottom: .9rem;
  line-height: 1.6;
}

/* ── Link pomocniczy ─────────────────────────────────────────────────────── */
.auth-link {
  display: block;
  text-align: center;
  margin-top: .85rem;
  color: #397cc0;
  font-size: .9rem;
  text-decoration: none;
}

.auth-link:hover {
  color: #0b2d5e;
  text-decoration: underline;
}

/* ── Separator ───────────────────────────────────────────────────────────── */
.auth-divider {
  border: 0;
  border-top: 1.5px solid #e2e8f0;
  margin: 1.5rem 0 1.1rem;
}

/* ── Stopka karty ────────────────────────────────────────────────────────── */
.auth-footer {
  text-align: center;
  font-size: .92rem;
  color: #64748b;
}

.auth-footer a {
  color: #397cc0;
  font-weight: 600;
  text-decoration: none;
}

.auth-footer a:hover {
  color: #0b2d5e;
  text-decoration: underline;
}

/* ── Wymogi hasła ────────────────────────────────────────────────────────── */
.auth-pass-rules {
  font-size: .8em;
  margin: -6px 0 12px;
  line-height: 2;
  color: #64748b;
}

/* ── Zgody (checkboxy) ───────────────────────────────────────────────────── */
.auth-agree {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .88rem;
  color: #334155;
  margin-bottom: .85rem;
  line-height: 1.5;
}

.auth-agree input[type="checkbox"] {
  margin-top: .18rem;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #397cc0;
}

.auth-agree label {
  font-weight: 400 !important;
  margin: 0 !important;
  cursor: pointer;
  color: #334155;
}

/* ── Dwukolumnowy układ formularza rejestracji ───────────────────────────── */
.auth-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2rem;
}

@media (min-width: 600px) {
  .auth-cols {
    grid-template-columns: 1fr 1fr;
  }
}