/* ==========================================================================
   Modal de cadastro — Área do Cliente Company Conferi
   Depende de css/login.css (tokens e classes de formulário) e de css/modal.css
   (caixa e backdrop). Carregue os dois antes deste arquivo.
   ========================================================================== */

/* 1. Estrutura em duas colunas
   -------------------------------------------------------------------------- */
.modal--duplo {
  width: min(960px, calc(100% - 32px));
}

.modal__box--duplo {
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  padding: 0;
}

.cadastro-conteudo {
  padding: 32px 30px 28px;
}

/* 2. Seção lateral
   -------------------------------------------------------------------------- */
/* Logo, texto e imagem centrados verticalmente na coluna */
.cadastro-lateral {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 40px 30px;
  color: rgba(255, 255, 255, .84);
  background: linear-gradient(160deg, var(--azul-noite) 0%, var(--azul-profundo) 100%);
}

/* O SVG tem o traço em verde institucional; o filtro o deixa branco sobre o fundo escuro */
.cadastro-lateral__logo {
  width: 56px;
  filter: brightness(0) invert(1);
}

.cadastro-lateral__titulo {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--branco);
}

.cadastro-lateral__titulo span {
  color: var(--azul-claro);
}

.cadastro-lateral__texto {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
}

.cadastro-lateral__img {
  width: 100%;
  margin-top: 6px;
  pointer-events: none;
}

/* 3. Layout do formulário
   -------------------------------------------------------------------------- */
.cadastro-form {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.login-field--largo {
  grid-column: 1 / -1;
}

/* 4. Seletor Pós-pago / Pré-pago
   -------------------------------------------------------------------------- */
.segmentado {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}

.segmentado legend {
  padding: 0;
  float: left; /* mantém a legend no fluxo do grid em todos os navegadores */
}

.segmentado__opcoes {
  clear: both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  background: var(--cinza-transparente);
  border: 1.5px solid var(--cinza);
  border-radius: var(--raio-sm);
}

.segmentado__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--texto);
  border-radius: 7px;
  cursor: pointer;
  transition: color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}

/* O input fica sob o rótulo para não perder foco de teclado nem leitura por AT */
.segmentado__item input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmentado__item:hover {
  background: rgba(0, 71, 111, .06);
}

/* Regras separadas de propósito: navegador sem :has() descartaria a lista toda */
.segmentado__item:has(input:checked) {
  color: var(--branco);
  background: linear-gradient(120deg, var(--azul) 0%, var(--verde) 100%);
  box-shadow: 0 6px 14px -10px rgba(0, 71, 111, .8);
}

.segmentado__item--ativo {
  color: var(--branco);
  background: linear-gradient(120deg, var(--azul) 0%, var(--verde) 100%);
  box-shadow: 0 6px 14px -10px rgba(0, 71, 111, .8);
}

.segmentado__item:has(input:focus-visible) {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}

/* 5. Estado de sucesso do cadastro
   -------------------------------------------------------------------------- */
.cadastro-sucesso {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 20px 0;
}

.cadastro-sucesso__icone {
  width: 52px;
  height: 52px;
  color: var(--verde);
}

.cadastro-sucesso .login-button {
  margin-top: 8px;
  padding: 0 34px;
}

/* 6. Aviso de privacidade
   -------------------------------------------------------------------------- */
.modal__lgpd {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--cinza);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--texto-suave);
}

.modal__lgpd a {
  color: var(--verde);
  font-weight: 700;
  text-decoration: none;
}

.modal__lgpd a:hover {
  text-decoration: underline;
}

/* 6. Responsivo
   -------------------------------------------------------------------------- */

/* Sem largura para duas colunas, a lateral sai — como no modal antigo, cuja
   coluna de ilustração era d-none d-lg-block */
@media (max-width: 820px) {
  .modal--duplo {
    width: min(560px, calc(100% - 32px));
  }

  .modal__box--duplo {
    grid-template-columns: 1fr;
  }

  .cadastro-lateral {
    display: none;
  }
}

@media (max-width: 520px) {
  .cadastro-form {
    grid-template-columns: 1fr;
  }

  .cadastro-conteudo {
    padding: 28px 20px 24px;
  }
}