/**
 * ░░░░░██╗░█████╗░░█████╗░░█████╗░  ░░██╗  ██████╗░███████╗██╗░░░██╗  ██╗░░
 * ░░░░░██║██╔══██╗██╔══██╗██╔══██╗  ░██╔╝  ██╔══██╗██╔════╝██║░░░██║  ╚██╗░
 * ░░░░░██║██║░░██║███████║██║░░██║  ██╔╝░  ██║░░██║█████╗░░╚██╗░██╔╝  ░╚██╗
 * ██╗░░██║██║░░██║██╔══██║██║░░██║  ╚██╗░  ██║░░██║██╔══╝░░░╚████╔╝░  ░██╔╝
 * ╚█████╔╝╚█████╔╝██║░░██║╚█████╔╝  ░╚██╗  ██████╔╝███████╗░░╚██╔╝░░  ██╔╝░
 * ░╚════╝░░╚════╝░╚═╝░░╚═╝░╚════╝░  ░░╚═╝  ╚═════╝░╚══════╝░░░╚═╝░░░  ╚═╝░░
 *
 * Central iGaming — desenvolvido por João
 *
 * Canal      https://t.me/central_igaming_channel
 * Network    https://t.me/central_igaming
 * Contato    https://t.me/Joao_igaming
 */

/* ============================================================================
   JogPIX — pages/auth.css  (/login e /register na MESMA tela)
   Card centralizado sobre o BG do astronauta (--jp-auth-bg). Abas Registro/
   Entrar alternam o formulário via JS, sem recarregar. body.jp-auth-body.
   ============================================================================ */

@keyframes jpAuthIn { from { transform: translateY(14px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }

/* página = moldura de celular; no PC fica centralizada, BG do astronauta atrás */
.jp-auth-page {
  position: relative;
  width: min(100vw, var(--jp-frame-w, 480px));
  min-height: 100dvh;
  margin: 0 auto;
  /* overflow-x, não overflow: com o teclado aberto o card fica mais alto que a
     tela, e overflow:hidden sumiria com o botão do fim do formulário. */
  overflow-x: hidden;
  display: flex;
  align-items: center;           /* CARD CENTRALIZADO no meio */
  justify-content: center;
  padding: 20px 16px;
  background-color: var(--jp-bg2, #120342);
  background-image: var(--jp-auth-bg, url('/assets/remote/bg/homev2_Login_bg.png'));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 18px 80px rgba(0, 0, 0, .5);
}
/* leve escurecida no fundo pra dar contraste ao card */
.jp-auth-page::before {
  content: "";
  /* inset:0 cobre a ALTURA TODA da página, que cresce junto com o card — se
     fosse `position:fixed` a escurecida pararia na dobra da tela. */
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,0,25,.18), rgba(7,0,25,.42));
  pointer-events: none;
}
/* laterais no PC com a cor do tema */
@media (min-width: 481px) {
  body.jp-auth-body {
    background:
      radial-gradient(circle at 50% 0, rgba(var(--jp-purple-rgb), .22), transparent 46%),
      var(--jp-bg2, #120342);
    background-attachment: fixed;
  }
}

/* botão fechar (X) no topo direito da tela */
.jp-auth-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 5;
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; font-size: 18px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---- CARD centralizado --------------------------------------------------- */
.jp-auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  padding: 20px 18px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(var(--jp-panel2-rgb), .80), rgba(var(--jp-card-rgb), .90));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  animation: jpAuthIn .4s ease both;
}

/* ---- ABAS Registro / Entrar --------------------------------------------- */
.jp-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  padding: 6px;
  margin-bottom: 18px;
}
.jp-auth-tab {
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
  color: var(--jp-muted, #cabbf4);
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.jp-auth-tab.is-active {
  color: #fff;
  background: var(--jp-grad-action, linear-gradient(100deg, #ff8d24, #e83a9a));
  box-shadow: 0 8px 20px rgba(var(--jp-pink-rgb), .3);
}

/* ---- mensagem de erro ---------------------------------------------------- */
.jp-auth-error { display: block; width: 100%; text-align: center; margin-bottom: 12px; }

/* ---- FORMS (só o ativo aparece) ----------------------------------------- */
/* O gap é menor no registro (5 campos) que no login (2): sem isso o card passa
   de 600px e o botão cai fora da tela num celular baixo. */
.jp-auth-form { display: none; flex-direction: column; gap: 14px; }
.jp-auth-form[data-form="register"] { gap: 10px; }
.jp-auth-form.is-active { display: flex; }

.jp-auth-field {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: 16px;
  background: rgba(var(--jp-bg-rgb), .45);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 0 14px;
  transition: border-color .2s, box-shadow .2s;
}
.jp-auth-field:focus-within {
  border-color: var(--jp-pink, #e83a9a);
  box-shadow: 0 0 0 3px rgba(var(--jp-pink-rgb), .18);
}

.jp-auth-ico {
  flex: 0 0 22px; width: 22px; text-align: center;
  color: var(--jp-muted, #cabbf4); font-size: 16px;
}

.jp-auth-flag {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 7px;
  padding-right: 12px; margin-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, .16);
  font-weight: 800; color: #fff;
}
.jp-flag-br { font-size: 20px; line-height: 1; }
.jp-auth-flag b:last-child { font-size: 15px; color: var(--jp-muted, #cabbf4); }

.jp-auth-input {
  flex: 1; min-width: 0; height: 100%;
  background: transparent; border: 0; outline: none;
  color: #fff; font-size: 15px; padding: 0 10px;
}
.jp-auth-input::placeholder { color: rgba(255, 255, 255, .45); }

.jp-auth-eye {
  flex: 0 0 auto;
  background: transparent; border: 0;
  color: var(--jp-muted, #cabbf4);
  font-size: 16px; cursor: pointer; padding: 6px;
}

/* ---- termos -------------------------------------------------------------- */
/* Aviso, não caixa de marcar: o aceite é o próprio ato de criar a conta, então
   aqui é um <p> — nada para clicar além dos dois links. */
.jp-auth-terms {
  margin: 2px 0 0;
  color: var(--jp-muted, #cabbf4);
  font-size: 12px; line-height: 1.45; text-align: center;
}
.jp-auth-terms a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ---- BOTÃO grande -------------------------------------------------------- */
.jp-auth-submit {
  margin-top: 6px;
  width: 100%; height: 56px;
  border: 0; border-radius: 16px;
  background: var(--jp-grad-action, linear-gradient(100deg, #ff8d24, #e83a9a));
  color: #fff; font-size: 18px; font-weight: 800; cursor: pointer;
  box-shadow: 0 12px 28px rgba(var(--jp-pink-rgb), .32);
  transition: opacity .2s, transform .08s;
}
.jp-auth-submit:hover { opacity: .94; }
.jp-auth-submit:active { transform: scale(.985); }

/* ---- tela BAIXA: encolhe em vez de rolar --------------------------------- */
/* Celular pequeno (360x640) e, principalmente, qualquer celular com o teclado
   aberto. A regra é por ALTURA, não por largura: quem tem 390px de largura e
   660px de altura sofre o mesmo problema de quem tem 360. */
@media (max-height: 720px) {
  .jp-auth-page { padding: 14px 16px; }
  .jp-auth-card { padding: 14px 16px 16px; border-radius: 18px; }
  .jp-auth-tabs { margin-bottom: 12px; padding: 5px; border-radius: 14px; }
  .jp-auth-tab { height: 40px; font-size: 15px; }
  .jp-auth-field { height: 48px; border-radius: 14px; }
  .jp-auth-submit { height: 48px; font-size: 16px; border-radius: 14px; }
  .jp-auth-form[data-form="register"] { gap: 8px; }
  .jp-auth-terms { font-size: 11.5px; }
}