/* ======================
   REGISTER PAGE - SNDesk
   ====================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

.register-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.register-page .login-card {
  display: flex;
  width: 950px;
  height: 650px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/*.register-page .login-left {
  flex: 1;
  background: #f8b722;
  color: #fff;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}*/


.register-page .login-left h2 {
  font-size: 26px;
  line-height: 1.4em;
}

.register-page .login-left .highlight {
  background: #3ebfdd;
  padding: 2px 6px;
  border-radius: 4px;
}

.register-page .login-right {
  flex: 1;
  background: #3ebfdd;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.register-page .login-right h3 {
  font-weight: 700 !important;
  text-align: center;
  margin-bottom: 25px;
}

.register-page .form-control {
  background-color: #fff !important;
  color: #000 !important;
  border: 1.5px solid #ccc !important;
  border-radius: 25px !important;
  padding: 12px 15px !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
}

.register-page .form-control:focus {
  border: 2px solid #3ebfdd !important;
  box-shadow: none !important;
  background-color: #fff !important;
  color: #000 !important;
}

.register-page .form-floating > label {
  background-color: transparent !important;
  color: #000 !important;
  opacity: 1 !important;
}


.register-page .form-floating > .form-control:focus ~ label,
.register-page .form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: none !important;
  font-size: 1rem !important;
  top: 70% !important;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
  font-weight: 600 !important;
}





.register-page .btn-primary {
  background-color: #1D2F59 !important;
  border: none;
  color: #fff !important;
  font-weight: 500;
  border-radius: 25px;
  transition: background-color 0.3s ease;
  margin-bottom: -35px;
  margin-top: -5px;
}

.register-page .btn-primary:hover {
  background-color: #e0a300 !important;
}

.register-page .links a {
  color: #1d2f59;
 text-decoration: underline;
}

.register-page .links a:hover {
  color: #f8b722;
}

/* Inputs iguais ao login */
.register-input {
    background: #fff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    color: #000 !important;
    outline: none !important;
    box-shadow: none !important;
}

.register-input:focus {
    border: 2px solid #3ebfdd !important;
}

/* Separação das colunas */
/*.register-page .row .col-md-6 {
    padding-left: 6px;
    padding-right: 6px;
}

/* Labels acima do input */
.register-page .form-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;

}

/* Evitar inputs colados */
/*.mb-3 {
    margin-bottom: 1.2rem !important;
}*/

.register-form-container {
.register-form-container {
    width: 100% !important;       /* ocupa toda a área */
    max-width: 400px !important;  /* limite igual ao Figma */
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px 8px !important;
    box-sizing: border-box !important;
}

}

.input-full {
    flex: 0 0 100% !important; /* linha inteira */
}

.input-half {
    flex: 0 0 calc(50% - 8px) !important; /* metade */
    box-sizing: border-box !important;
}


.register-input {
    background: #F8F8F8 !important;
    border: 1px solid #CBCBCB !important;
    border-radius: 4px !important;
    padding: 7px 8px !important;
    height: 38px; /* (30px do Figma + padding internos) */
    font-size: 14px !important;
    box-shadow: none !important;
}

.register-input:focus {
    border: 1px solid #3ebfdd !important;
    background: #fff !important;
}

/* RESETAR Bootstrap/form-control/form-floating somente nesta página */
.register-page .form-control,
.register-page .form-floating,
.register-page .form-floating > label {
    all: unset !important;
}

/* Container da direita igual ao Figma */
.register-page .login-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* alinhamento central igual ao Figma */
    padding: 32px 0px !important;
    background: #FEFEFE !important;
    border-radius: 0 20px 20px 0; /* ajusta o canto direito */
    color: #1D2F59 !important;
    font-family: 'Poppins', sans-serif;
}

/* Container dos campos */
.register-form-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 8px;
    width: 400px;
}

/* Tamanhos */
.input-full {
    width: 400px;
}

.input-half {
    width: 196px;
}

/* Input estilo Figma */
.register-input {
    background: #F8F8F8 !important;
    border: 1px solid #CBCBCB !important;
    color: #1D2F59 !important;
    border-radius: 4px !important;
    padding: 7px 8px !important;
    height: 30px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

/* Foco */
.register-input:focus {
    border-color: #3EBFDD !important;
    background: #FFF !important;
}

/* Label */
.form-label {
    font-size: 14px;

    display: block;
    color: #1D2F59 !important;
}

.input-stack {
    width: 100%; /* ajuste o valor até ficar idêntico ao Figma */
}

/* Container */


/* --- Grid responsivo para o form (robusto contra zoom) --- */
.register-page .register-form-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colunas iguais */
  gap: 16px 8px;
  width: 100% !important;
  max-width: 448px !important;
  box-sizing: border-box !important;
  align-items: start;
}

/* itens que ocupam a linha inteira */
.register-page .input-group-full {
  grid-column: 1 / -1; /* span nas 2 colunas */
}

/* metades */
.register-page .input-group-half {
  /* ocupam 1 coluna do grid cada um */
}

/* inputs (estilo figma) - manter como já definido */
.register-page .register-input {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* CONTAINER DO RADIO */
.radio-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    margin-right: 24px;
    font-size: 16px;
    font-weight: 500;
}

/* RADIO RESETADO DE VERDADE */
.radio-option input[type="radio"] {
    all: unset; /* remove absolutamente tudo */
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 20px;
    height: 20px;

    border: 2px solid #1D2F59;
    border-radius: 50%;
    background: #FFF;

    display: block;

    /* impede escala automática do Chrome */
    font-size: 0px !important;

    position: relative;
    cursor: pointer;
    box-sizing: border-box;
}

/* CÍRCULO INTERNO (centralizado matematicamente) */
.radio-option input[type="radio"]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* centro perfeito */
}

/* TEXTO */
.radio-option span {
    color: #9CA3AF;
}

/* Remove visual padrão do Bootstrap */
.form-check-input {
    box-shadow: none !important;
    background-image: none !important;
}

/* Remove fundo azul quando marcado */
.form-check-input:checked {
    background-color: transparent !important;
}

/* Texto ativo */
.form-check-input:checked + .form-check-label {
    color: var(--bs-primary);
}

.radio-group {
    display: flex;
    align-items: center;
    gap: 15px;
}
.form-check-input[type="radio"] {
    transform: scale(1.3);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check-input {
    margin-top: 0 !important;
}

/* Desliga o radio nativo */
.form-check-input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;

    width: 14px;
    height: 14px;

    border: 2px solid #adb5bd; /* borda padrão */
    border-radius: 50%;

    background: transparent;

    display: grid;
    place-content: center;

    margin-top: 0; /* evita desalinhamento */
    cursor: pointer;
}

/* Bolinha interna */
.form-check-input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;

    background: var(--bs-primary); /* sua cor */

    transform: scale(0);
    transition: 0.15s;
}

/* Marcado */
.form-check-input[type="radio"]:checked {
    border-color: var(--bs-primary);
}

.form-check-input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Texto ativo */
.form-check-input:checked + .form-check-label {
    color: var(--bs-primary);
}

/* Remove glow */
.form-check-input:focus {
    box-shadow: none;
}