/* ==========================================================================
   CPL Form – Estilos
   Formulário de Cadastro CPL / Docas de Santana (CDSA)
   ========================================================================== */

/* Variáveis */
:root {
  --color-primary: #384789;
  --color-primary-dark: #2b3770;
}

/* Wrapper geral
   Não usa .container pois o template ja-purity-iv já envolve o conteúdo
   em seu próprio container. Apenas limitamos a largura máxima. */
.cpl-form-wrapper {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Compatibilidade com JA Purity IV:
   Força 100% de largura em todos os controles de formulário.
   O template pode redefinir 'width' com seletores de baixa especificidade;
   usamos !important e box-sizing para garantir consistência. */
.cpl-form-wrapper input[type="text"],
.cpl-form-wrapper input[type="email"],
.cpl-form-wrapper input[type="tel"],
.cpl-form-wrapper input[type="url"],
.cpl-form-wrapper input[type="number"],
.cpl-form-wrapper select,
.cpl-form-wrapper textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
.cpl-form-wrapper .form-control,
.cpl-form-wrapper .form-select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.cpl-form-wrapper .input-group {
  width: 100%;
  flex-wrap: nowrap;
  display: flex !important;
}
.cpl-form-wrapper .input-group .form-control,
.cpl-form-wrapper .input-group input {
  width: 1% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.cpl-form-wrapper .col-1,
.cpl-form-wrapper .col-2,
.cpl-form-wrapper .col-3,
.cpl-form-wrapper .col-4,
.cpl-form-wrapper .col-5,
.cpl-form-wrapper .col-6,
.cpl-form-wrapper .col-7,
.cpl-form-wrapper .col-8,
.cpl-form-wrapper .col-9,
.cpl-form-wrapper .col-10,
.cpl-form-wrapper .col-11,
.cpl-form-wrapper .col-12,
.cpl-form-wrapper [class*="col-"] {
  box-sizing: border-box !important;
}
.cpl-form-wrapper .row {
  --bs-gutter-x: 1rem;
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Logo */
.cpl-logo {
  max-height: 80px;
  object-fit: contain;
}

/* Cabeçalho do formulário */
.cpl-form-header h1 {
  color: var(--color-primary);
  font-weight: 700;
}

/* Card headers customizados */
.cpl-card-header {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.cpl-card-header h2,
.cpl-card-header .h5 {
  color: #fff !important;
}

/* Badge de passo (círculo branco sobre fundo primário) */
.cpl-badge-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 700;
  vertical-align: middle;
}

/* Botões outline primary */
.cpl-form-wrapper .btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.cpl-form-wrapper .btn-outline-primary:hover,
.cpl-form-wrapper .btn-check:checked + .btn-outline-primary,
.cpl-form-wrapper .btn-outline-primary.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Dropzone de arquivos */
.cpl-dropzone {
  transition:
    background-color 0.2s,
    border-color 0.2s;
  cursor: pointer;
  border-color: #9ab !important;
  background-color: #f8fbff;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cpl-dropzone:hover,
.cpl-dropzone:focus {
  background-color: #e8f0fe;
  border-color: var(--color-primary) !important;
  outline: none;
}

.cpl-dropzone--over {
  background-color: #d0e4ff !important;
  border-color: var(--color-primary) !important;
  border-style: solid !important;
}

/* Scroll do termo */
.cpl-termo-scroll {
  scrollbar-width: thin;
  scrollbar-color: #aab #f0f0f0;
}

.cpl-termo-scroll::-webkit-scrollbar {
  width: 6px;
}

.cpl-termo-scroll::-webkit-scrollbar-thumb {
  background: #aab;
  border-radius: 3px;
}

.cpl-termo-scroll h5 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 1rem;
  color: var(--color-primary);
}

/* Campos obrigatórios */
.required label::after {
  content: " *";
  color: #dc3545;
}

/* Botão de envio */
#cplBtnSubmit {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  min-width: 220px;
  transition: background-color 0.2s;
}

#cplBtnSubmit:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Lista de arquivos */
#cplFileList .list-group-item {
  font-size: 0.875rem;
}

/* Feedback de duplicidade CPF/CNPJ */
#cpfStatus,
#cnpjStatus {
  min-width: 32px;
  justify-content: center;
  font-size: 1rem;
}

/* Grupo PF/PJ — largura limitada a não ocupar a linha toda */
.cpl-tipo-group {
  display: inline-flex;
  max-width: 300px;
}
.cpl-tipo-group .btn {
  flex: 1;
  white-space: nowrap;
}

/* Textarea 100% */
#informacoes {
  width: 100% !important;
  resize: vertical;
}

/* Responsivo */
@media (max-width: 576px) {
  .cpl-card-header h2 {
    font-size: 0.9rem;
  }
  .cpl-tipo-group {
    max-width: 100%;
  }
}