/* ===========================
   AUTH OLDALAK ALAP / BODY
   =========================== */

body.auth-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.25), transparent 55%),
    radial-gradient(circle at bottom, rgba(16, 185, 129, 0.15), transparent 55%),
    #020617;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e5e7eb;
}

/* Full-screen center */
.auth-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 10;
}

/* ===========================
   KÁRTYA – AUTH CARD
   =========================== */

.auth-card {
  background: linear-gradient(135deg, #020617 0%, #0b1120 45%, #020617 100%);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
  padding: 28px 26px 24px;
  box-sizing: border-box;
}

/* Fejléc a kártyán belül */
.auth-header {
  text-align: center;
  margin-bottom: 20px;
}

.auth-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #f9fafb;
}

.auth-subtitle {
  margin: 0;
  font-size: 13px;
  color: #9ca3af;
}

/* ===========================
   MEZŐK / INPUTOK
   =========================== */

.auth-field-group {
  margin-bottom: 14px;
}

.auth-label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: #e5e7eb;
}

.auth-input,
.auth-password-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #4b5563;
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  padding: 9px 11px;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    transform 0.05s ease;
}

/* jelszó input kapjon plusz helyet az ikon miatt */
.auth-password-input {
  padding-right: 40px;
}

.auth-input::placeholder,
.auth-password-input::placeholder {
  color: #6b7280;
}

.auth-input:focus,
.auth-password-input:focus {
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.8);
  background: #020617;
  transform: translateY(-1px);
}

/* Jelszó + szem ikon konténer */
.auth-password-wrap {
  position: relative;
}

/* ikon a mező jobb szélén, optikailag középen */
.auth-eye-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-140%); /* picit feljebb húzva, hogy ne "üljön le" */
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-eye-btn:hover {
  color: #e5e7eb;
}

/* ===========================
   GOMBOK
   =========================== */

.auth-btn {
  width: 100%;
  margin-top: 12px;
  border: none;
  border-radius: 999px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(135deg,
    var(--color-primary, #3b82f6),
    var(--color-primary-hover, #1d4ed8)
  );
  color: #ffffff;
  cursor: pointer;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    filter 0.08s ease;
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.45);
}

.auth-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.6);
}

.auth-btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.4);
}

/* Másodlagos (szürke/kiegészítő) gomb – pl. "Külön számlázási címet adok meg" */
.auth-secondary-btn {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.auth-secondary-btn:hover {
  background: #1f2937;
  border-color: #6b7280;
  transform: translateY(-1px);
}

/* ===========================
   LINKEK, HIBÁK, LÁBLÉC
   =========================== */

.auth-links {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: #d1d5db;
}

.auth-links a {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
}

.auth-links a:hover {
  text-decoration: underline;
}

.auth-error {
  margin-top: 10px;
  font-size: 13px;
  color: #fca5a5;
  text-align: center;
}

.auth-success {
  margin-top: 10px;
  font-size: 13px;
  color: #bbf7d0;
  text-align: center;
}

.auth-footer-text {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
}

/* ===========================
   REGISZTRÁCIÓ SPECIFIKUS
   =========================== */

.auth-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.auth-checkbox-row .auth-label {
  margin-bottom: 0;
}

.auth-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Rejtett blokkokra */
.hidden {
  display: none !important;
}

/* ===========================
   MOBIL FINOMHANGOLÁS
   =========================== */

@media (max-width: 640px) {
  .auth-card {
    padding: 22px 18px 20px;
    border-radius: 16px;
  }

  .auth-title {
    font-size: 22px;
  }
}

/* Auth oldalak: rejtsük el a layout header/footer részét */
body.auth-body header,
body.auth-body .topnav,
body.auth-body .navbar,
body.auth-body footer {
  display: none !important;
}