/* Базовые сбросы */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: #f9f9fb;
  font-family: 'Inter', sans-serif;
  color: #111;
}

/* Лого */
.logo-link {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  margin-bottom: 0.2rem;
}

.logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 5.2rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -1.5px;
}

.logo-red {
  color: #ff4444;
}

/* Центрирование всей страницы */
.auth-main {
  min-height: 100vh;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
}

/* Карточка формы */
.auth-container {
  width: 100%;
  max-width: 500px;
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  padding: 2.4rem 2rem;           /* ← больше воздуха внутри карточки */
}

/* Табы */
.auth-tabs {
  display: flex;
  background: #f1f1f1;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.8rem;
}

.tab-btn {
  flex: 1;
  padding: 0.95rem 0;
  background: transparent;
  border: none;
  color: #666;
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.22s ease;
}

.tab-btn.active {
  background: #ff4444;
  color: #000;
  box-shadow: 0 0 12px rgba(255,68,68,0.3);
}

.tab-btn:hover {
  color: #000;
}

/* Самое важное — контент табов с большими отступами */
.tab-content {
  display: none;
  flex-direction: column;
  gap: 1.8rem;                    /* ← основной и заметный отступ между ВСЕМИ элементами */
}

.tab-content.active {
  display: flex;
}

/* Инпуты */
.input-wrapper {
  position: relative;
}

.input-wrapper i {
  position: absolute;
  top: 50%;
  left: 1.2rem;
  transform: translateY(-50%);
  color: #999;
  font-size: 1.2rem;
  pointer-events: none;
  transition: color 0.2s;
}

.input-wrapper input {
  width: 100%;
  padding: 1rem 1rem 1rem 3.4rem;
  background: #fdfdfd;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  font-size: 1.05rem;
  color: #111;
  transition: all 0.18s ease;
}

.input-wrapper input:focus {
  outline: none;
  border-color: #ff4444;
  box-shadow: 0 0 0 3px rgba(255,68,68,0.14);
  background: white;
}

.input-wrapper input:focus ~ i {
  color: #ff4444;
}

.input-wrapper input::placeholder {
  color: #aaa;
}

/* Кнопка с дополнительным отступом сверху */
.submit-btn {
  width: 100%;
  padding: 1.05rem;
  background: #000;
  color: white;
  border: none;
  border-radius: 10px;
  font-family: 'Bangers', cursive;
  font-size: 1.45rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.22s ease;
  margin-top: 0.6rem;             /* ← явный отступ от последнего инпута до кнопки */
}

.submit-btn:hover {
  background: #ff4444;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,68,68,0.3);
}

/* Сообщения об ошибке / успехе */
.error-block,
.success-block {
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  text-align: center;
  margin: 0.4rem 0 1rem 0;        /* ← отступы сверху и снизу */
}

.error-block:empty,
.success-block:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.error-block {
  background: #fff5f5;
  border: 1px solid #ffcccc;
  color: #c62828;
}

.success-block {
  background: #f0fff4;
  border: 1px solid #c6ffdd;
  color: #2e7d32;
}

/* Мобилки */
@media (max-width: 480px) {
  .logo {
    font-size: 4.2rem;
  }
  .auth-container {
    padding: 2rem 1.6rem;
  }
  .tab-content {
    gap: 1.5rem;
  }
  .submit-btn {
    font-size: 1.35rem;
  }
}

/* Делаем отступы внутри самой формы */
#loginForm,
#registerForm {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;                    /* ← вот где настоящие отступы между полями и кнопкой */
}

/* Если есть сообщение ошибки/успеха — оно тоже получит место */
#loginError,
#formError,
#formSuccess {
  margin-bottom: 1rem;            /* дополнительный воздух под сообщением */
}

/* Увеличиваем gap на tab-content для общего воздуха */
.tab-content {
  gap: 1.2rem;                    /* уменьшаем здесь, т.к. основной gap теперь в форме */
}

/* Кнопка получает свой отступ сверху (если нужно) */
.submit-btn {
  margin-top: 0.4rem;             /* опционально, если gap в форме маловато */
}

/* 1. Уменьшаем расстояние от логотипа до формы */
.auth-main {
  min-height: 100vh;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;           /* было 2.2rem → уменьшили до 1.4–1.5rem */
}

/* 2. Логотип — чуть уменьшим, чтобы не выглядел слишком огромным */
.logo {
  font-size: 4.8rem;     /* было 5.2rem */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -1.5px;
}

/* 3. Красивые инпуты + красная подсветка иконок при фокусе */
.input-wrapper {
  position: relative;
}

.input-wrapper i {
  position: absolute;
  top: 50%;
  left: 1.25rem;
  transform: translateY(-50%);
  color: #b0b0b0;           /* более мягкий серый в обычном состоянии */
  font-size: 1.25rem;
  pointer-events: none;
  transition: color 0.25s ease, transform 0.25s ease;
}

.input-wrapper input {
  width: 100%;
  padding: 1.05rem 1.1rem 1.05rem 3.5rem;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  font-size: 1.05rem;
  color: #111;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.input-wrapper input:focus {
  outline: none;
  border-color: #ff4444;
  box-shadow: 0 0 0 4px rgba(255, 68, 68, 0.15);
  background: white;
}

/* Красная подсветка иконки + небольшой подъём при фокусе */
.input-wrapper input:focus ~ i {
  color: #ff4444;
  transform: translateY(-50%) scale(1.15);   /* лёгкое увеличение */
}

/* Placeholder тоже чуть красивее */
.input-wrapper input::placeholder {
  color: #a0a0a0;
  opacity: 1;
}

/* 4. Увеличиваем отступы внутри формы (чтобы всё выглядело сбалансированно) */
#loginForm,
#registerForm {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;          /* основной отступ между элементами формы */
}

/* Если сообщение ошибки/успеха — чуть меньше места занимает */
#loginError,
#formError,
#formSuccess {
  margin-bottom: 0.8rem;
}

/* Кнопка — чуть больше воздуха сверху */
.submit-btn {
  margin-top: 0.6rem;   /* уже есть, но можно оставить */
}


/* ===============================
   MEMECOIN / CRYPTO FORM STYLE
   =============================== */

/* Карточка формы — GLASS + GLOW */
.auth-container {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.75),
    rgba(255,255,255,0.55)
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,68,68,0.15),
    0 0 40px rgba(255,68,68,0.18);
  padding: 2.6rem 2.2rem;
}

/* ---------------- TABS ---------------- */

.auth-tabs {
  background: rgba(0,0,0,0.06);
  padding: 0.35rem;
  border-radius: 14px;
  gap: 0.3rem;
}

.tab-btn {
  border-radius: 12px;
  font-size: 1.6rem;
  color: #555;
  position: relative;
  z-index: 1;
}

.tab-btn.active {
  background: linear-gradient(135deg, #ff3c3c, #ff6a6a);
  color: white;
  box-shadow:
    0 6px 20px rgba(255,68,68,0.45),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ---------------- INPUTS ---------------- */

.input-wrapper {
  position: relative;
}

.input-wrapper i {
  position: absolute;
  top: 50%;
  left: 1.3rem;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 1.3rem;
  pointer-events: none;
  transition: all 0.3s ease;
}

.input-wrapper input {
  width: 100%;
  padding: 1.1rem 1.2rem 1.1rem 3.8rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: -0.4px;
  color: #111;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}

.input-wrapper input:focus {
  border-color: #ff4444;
  box-shadow: 
    0 0 0 1px #ff444466,
    0 0 20px  rgba(255,68,68,0.45),
    inset 0 1px 3px rgba(255,255,255,0.9);
  background: white;
}

.input-wrapper input:focus ~ i {
  color: #ff2f2f;
  filter: drop-shadow(0 0 6px #ff4444) drop-shadow(0 0 14px #ff4444aa);
  transform: translateY(-50%) scale(1.22);
}

/* ---------------- BUTTON ---------------- */

.submit-btn {
  background: linear-gradient(
    135deg,
    #ff2f2f,
    #ff5f5f
  );
  color: white;
  border-radius: 16px;
  letter-spacing: 1px;
  box-shadow:
    0 10px 30px rgba(255,68,68,0.55),
    inset 0 1px 0 rgba(255,255,255,0.45);
  position: relative;
  overflow: hidden;
}

/* Глянцевая полоска */
.submit-btn::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 160%;
  height: 120%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,0.45),
    transparent 60%
  );
  transform: rotate(8deg);
  transition: opacity 0.3s;
  opacity: 0.4;
}

.submit-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 16px 45px rgba(255,68,68,0.7);
    color: white;
}

.submit-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ---------------- ERRORS / SUCCESS ---------------- */

.error-block {
  background: rgba(255,60,60,0.12);
  border: 1px solid rgba(255,60,60,0.35);
  box-shadow: 0 0 18px rgba(255,60,60,0.25);
}

.success-block {
  background: rgba(60,255,140,0.12);
  border: 1px solid rgba(60,255,140,0.35);
  box-shadow: 0 0 18px rgba(60,255,140,0.25);
}


.input-wrapper input:focus ~ i {
  color: #ff2f2f !important;               /* или #ff4444 */
  filter: 
    drop-shadow(0 0 6px #ff4444) 
    drop-shadow(0 0 14px #ff4444aa);
  transform: translateY(-50%) scale(1.22);
  transition: all 0.3s ease;               /* если хочешь плавность */
  /* animation: neon-pulse 1.6s infinite ease-in-out; */  /* ← закомментировать или удалить, если не нужен пульс */
}


.input-wrapper:focus-within i {
  color: #ff4444;
}

@keyframes input-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

.input-wrapper.input-animate input {
  animation: input-pop 0.18s ease;
}


/* ================================================
   Мобильная версия — уменьшаем все элементы формы
   ================================================ */
@media (max-width: 768px) {
  .auth-main {
    padding: 1rem;                    /* было 1.5rem */
    gap: 1.6rem;                      /* было 2.2rem → -27% */
  }

  .logo {
    font-size: 4.2rem;                /* было 5.2rem → -19% */
    letter-spacing: -1.2px;
    margin-bottom: 0.8rem;
  }

  .auth-container {
    max-width: 420px;                 /* было 500px */
    padding: 1.8rem 1.4rem;           /* было 2.4/2rem → -25% */
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  }

  .auth-tabs {
    margin-bottom: 1.4rem;            /* было 1.8rem */
    border-radius: 8px;
    padding: 0.3rem;
  }

  .tab-btn {
    padding: 0.8rem 0;
    font-size: 1.2rem;                /* было 1.4rem */
  }

  .tab-content,
  #loginForm,
  #registerForm {
    gap: 1.2rem;                      /* было 1.8/1.6 → -25% */
  }

  .input-wrapper input {
    padding: 0.9rem 0.9rem 0.9rem 3.2rem; /* было 1.05/1.1/3.5 → -15–20% */
    font-size: 0.95rem;               /* было 1.05rem */
    border-radius: 10px;
  }

  .input-wrapper i {
    left: 1rem;
    font-size: 1.1rem;
  }

  .submit-btn {
    padding: 0.9rem;
    font-size: 1.3rem;                /* было 1.45rem */
    border-radius: 10px;
    margin-top: 0.4rem;
  }

  .error-block,
  .success-block {
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    margin: 0.3rem 0 0.8rem 0;
    border-radius: 8px;
  }
}

/* Очень маленькие экраны (≤ 480px) — ещё сильнее уменьшаем */
@media (max-width: 480px) {
  .auth-main {
    padding: 0.8rem;
    gap: 1.2rem;
  }

  .logo {
    font-size: 3.6rem;
    letter-spacing: -1px;
  }

  .auth-container {
    padding: 1.6rem 1.2rem;
    border-radius: 12px;
  }

  .tab-btn {
    font-size: 1.1rem;
    padding: 0.7rem 0;
  }

  .input-wrapper input {
    padding: 0.8rem 0.8rem 0.8rem 3rem;
    font-size: 0.9rem;
    border-radius: 9px;
  }

  .input-wrapper i {
    left: 0.9rem;
    font-size: 1rem;
  }

  .submit-btn {
    padding: 0.8rem;
    font-size: 1.2rem;
  }

  .error-block,
  .success-block {
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
  }
}