/* ===================================================== */
/* REGISTER — EXTENSÃO DO LOGIN                          */
/* ===================================================== */

.register-flow {
  position: relative;
  overflow: hidden; /* IMPORTANTE para slide lateral */
}

/* ===================================================== */
/* STEPS — TRANSIÇÃO PROFISSIONAL (WEBVIEW SAFE)         */
/* ===================================================== */

/* Estado base */
.register-step {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;

  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;

  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

/* Step visível */
.register-step.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Step que sai para a esquerda (avançar) */
.register-step.is-prev {
  opacity: 0;
  transform: translateX(-100%);
}

/* Step que entra da direita (avançar) */
.register-step.is-next {
  opacity: 1;
  transform: translateX(100%);
}

/* ===================================================== */
/* HEADER COMPACTO (STEP 2 E 3)                           */
/* ===================================================== */

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.step-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ===================================================== */
/* TÍTULOS DE SEÇÃO                                      */
/* ===================================================== */

.form-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 24px 0 8px;
  text-align: left;
}

.form-divider {
  width: 100%;
  height: 1px;
  background: rgba(160, 160, 192, 0.25);
  margin-bottom: 20px;
}

/* ===================================================== */
/* LABELS E TEXTOS AUXILIARES                             */
/* ===================================================== */

.input-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  text-align: left;
}

.input-helper {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: left;
}

/* ===================================================== */
/* INPUTS EM LINHA (DATA NASCIMENTO)                     */
/* ===================================================== */

.input-row {
  display: flex;
  gap: 10px;
}

.input-row .auth-input {
  flex: 1;
  text-align: center;
}

/* ===================================================== */
/* BOTÃO VOLTAR (FIDELIDADE AO FIGMA)                    */
/* ===================================================== */

.step-back {
  width: 100%;
  height: 51px;
  margin-top: 16px;

  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(50, 60, 86, 0.82);
  border-radius: 15px;

  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #A0A0C0;

  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.step-back:active {
  transform: scale(0.98);
}

/* ===================================================== */
/* BOTÃO PRÓXIMO (HERDADO DO LOGIN)                      */
/* ===================================================== */

.register-step .btn-primary {
  margin-top: 22px;
}

/* ===================================================== */
/* BOTÃO ENTRAR (BRANCO — FIGMA)                         */
/* ===================================================== */

.register-flow .btn-secondary {
  background: #ffffff;
  border: 2px solid rgba(50, 60, 86, 0.82);

  border-radius: 15px;

  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1B1B1B;
}

/* ===================================================== */
/* TERMOS DE USO (STEP 3)                                */
/* ===================================================== */

.terms-text {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: left;
}

.terms-text a {
  color: #00D5FF;
  text-decoration: none;
  font-weight: 500;
}

/* ===================================================== */
/* AJUSTES FINAIS                                        */
/* ===================================================== */

.register-step .auth-divider {
  margin: 28px 0;
}






/* ===================================================== */
/* CUSTOM SELECT — BASE (FIGMA STYLE)                    */
/* ===================================================== */

.custom-select {
  position: relative;
  width: 100%;
}

.select-trigger {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: #1E2538;
  border: 2px solid rgba(50, 60, 86, 0.87);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}



/* 2️⃣ APLICA A NOVA SETA (SVG) */
.select-trigger {
  position: relative;
  padding-right: 44px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}


.custom-select.is-open .select-trigger {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
}


/* =========================================
   CUSTOM SELECT — SETA (ARROW)
========================================= */

.select-trigger {
  position: relative;
  width: 100%;
  padding-right: 44px; /* espaço para a seta */
  background: var(--input-bg);
  border: 2px solid rgba(50, 60, 86, 0.87);
  border-radius: 10px;
  color: #fff;
  text-align: left;
  cursor: pointer;

  /* seta */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}
/* seta gira quando aberto */
.custom-select.is-open .select-trigger {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
}



/* ===================================================== */
/* DROPDOWN (ABERTO)                                     */
/* ===================================================== */

.select-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #1E2538;
  border: 2px solid rgba(50, 60, 86, 0.87);
  border-radius: 10px;

  max-height: 150px;
  overflow-y: auto;
  display: none;
  z-index: 50;
}

.custom-select.is-open .select-dropdown {
  display: block;
}

.select-dropdown-itens-left {
    text-align: left;
}

/* ===================================================== */
/* OPTION                                                */
/* ===================================================== */

.select-option {
  padding: 10px 16px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.select-option:hover {
  background: rgba(50, 60, 86, 0.87);
}


/* ===================================================== */
/* CUSTOM SELECT — ERRO / SUCESSO                        */
/* ===================================================== */

/* ERRO */
.custom-select.is-error .select-trigger {
  border-color: #ff4d4f;
}

/* SUCESSO */
.custom-select.is-success .select-trigger {
  border-color: #31ff7a;
}





/* ===================================================== */
/* 🔐 FORÇA DA SENHA — FEEDBACK VISUAL                  */
/* ===================================================== */

.input-helper {
  font-size: 13px;
  color: #9aa0b5;
  margin-top: 6px;
}

/* texto da força */
.input-helper strong {
  font-weight: 600;
  transition: color 0.25s ease;
}

/* 🔴 fraca / muito fraca */
.input-helper strong.weak {
  color: #ff4d4f;
}

/* 🟠 média / boa */
.input-helper strong.medium {
  color: #f7b731;
}

/* 🟢 forte */
.input-helper strong.strong {
  color: #31ff7a;
}





/* ===============================
   REGISTER BUTTON — SPINNER
   =============================== */

#register-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Texto visível por padrão */
#register-btn .btn-text {
  display: inline;
}

/* Spinner ESCONDIDO por padrão */
#register-btn .spinner-register {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
}

/* Quando o botão está desabilitado */
#register-btn:disabled .btn-text {
  display: none;
}

#register-btn:disabled .spinner-register {
  display: inline-flex;
}

/* ===============================
   SPINNER REGISTER (CIRCULAR)
   =============================== */
.spinner-register {
  display: inline-block;
  width: 25px;
  height: 25px;
  box-sizing: border-box;

  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #ffffff;
  border-radius: 50%;

  animation: spin-register 0.9s linear infinite;

  will-change: transform;
  pointer-events: none;
}

@keyframes spin-register {
  to {
    transform: rotate(360deg);
  }
}