/*  =====================================================================

    1. Reset e utilidades

    ===================================================================== */

*,
*::before,
*::after {
  margin: 0;

  padding: 0;

  box-sizing: border-box;

  color: #fff;
}

.sfctfm-block {
  display: block !important;
}

.sfctfm-hidden {
  display: none !important;
}

/*  =====================================================================

                2. Overlay modal (sempre ocupa tela toda)

            ===================================================================== */

#sfctfm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start; /* cola o topo do form no topo da tela */
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 50px 15px;
  width: 100vw;
  margin: 0 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#sfctfm-close {
  position: absolute;

  top: 12px;

  right: 12px;

  width: 32px;

  height: 32px;

  line-height: 30px;

  font-size: 22px;

  font-weight: 700;

  color: #fff;

  background: rgba(255, 255, 255, 0.25);

  border: none;

  border-radius: 50%;

  cursor: pointer;

  transition: background 0.3s;

  display: none;
}

#sfctfm-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

/*  =====================================================================

                3. Botão vermelho (apenas no shortcode)

            ===================================================================== */

#sfctfm-shortcode-close {
  position: absolute;

  top: 5px;

  right: 5px;

  font-size: 40px;

  font-weight: 700;

  color: #fff;

  padding: 0;

  margin: 0;

  /* background: red; */

  border: none;

  cursor: pointer;

  z-index: 9999;

  background: none;
}

#sfctfm-shortcode-close:hover {
  background: #d10000;
}

/*  =====================================================================

                4. Containers genéricos

            ===================================================================== */

.sfctfm-login-instance,
.sfctfm-hubspot-instance {
  position: relative;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: none !important;
  overflow: visible !important;
}

/*  =====================================================================

                5. Login

            ===================================================================== */

.sfctfm-login-instance, .sfctfm-resetpass-instance {
  display: flex;
  justify-content: center;
  margin: 50px auto;
}
.sfctfm-resetpass-instance{
  min-width: 400px;
}

.sfctfm-login-box, .sfctfm-reset-box  {
  width: 100%;
  padding: 40px 20px 20px;

  border-radius: 5px;

  color: #fff;

  background: linear-gradient(180deg, #240f2d 0%, #280e32 100%);
}

#sfctfm-header {
  text-align: center;
}

#sfctfm-header img {
  width: 50%;
}


.sfctfm-resetpass-instance h2 {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 20px;
  font-size: 1.2em;
}


.sfctfm-login-box label {
  display: block;

  margin-top: 12px;
}

.sfctfm-login-box input, .sfctfm-resetpass-instance input {
  width: 100%;
  height: 35px;
  border-radius: 5px;
}

.sfctfm-login-box button, .sfctfm-resetpass-instance button {
  margin: 25px 0 10px;

  width: 100%;

  padding: 10px;
}

.links_fluxo {
  text-align: center;

  padding: 5px;
}

.links_fluxo a {
  color: #fff;

  text-decoration: none;
}

/*  =====================================================================

                6. HubSpot (a única instância)

            ===================================================================== */

.sfctfm-hubspot-instance {
  background: linear-gradient(180deg, #240f2d 0%, #280e32 100%);

  padding: 20px;

  display: none;

  position: relative;
}

.sfctfm-hubspot-instance fieldset {
  width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  border: none !important;
}

.sfctfm-hubspot-instance .inputs-list {
  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;
}

/* duas colunas */

.sfctfm-hubspot-instance .form-columns-2 {
  display: flex !important;

  flex-wrap: wrap !important;

  gap: 1rem;
}

.sfctfm-hubspot-instance .form-columns-2 .hs-form-field {
  flex: 1 1 48%;

  max-width: 45%;
}

/* linha cheia */

.sfctfm-hubspot-instance .form-columns-1 .hs-form-field,
.sfctfm-hubspot-instance .hs-dependent-field > .hs-form-field {
  flex: 1 1 100%;

  max-width: 100%;
}

.sfctfm-hubspot-instance .hs-form-field {
  margin-bottom: 1rem;
}

.sfctfm-hubspot-instance input:not([type="checkbox"]),
.sfctfm-hubspot-instance select {
  width: 100% !important;

  height: 35px;

  margin: 0 !important;

  padding: 5px !important;

  border-radius: 5px;

  box-sizing: border-box;

  color: initial;
}

.sfctfm-hubspot-instance label {
  margin: 0;

  padding: 0;
}

/* --- INÍCIO DA CORREÇÃO DEFINITIVA DO CHECKBOX --- */

/* 1. Torna o container do checkbox um ponto de referência e garante que seja clicável */

.sfctfm-hubspot-instance .hs-form-booleancheckbox-display {
  position: relative;

  display: flex !important;

  align-items: center !important;

  width: 100%;

  cursor: pointer;

  padding: 5px 0; /* Adiciona um respiro vertical */
}

/* 2. Esconde o input real, mas o mantém funcional e acessível */

#sfctfm-hubspot-form .hs-form-booleancheckbox-display input[type="checkbox"] {
  position: absolute;

  opacity: 0;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  margin: 0;

  cursor: pointer;

  z-index: 2; /* Garante que o input invisível esteja sobre o visual */
}

/* 3. Alinha o span do texto e cria o nosso checkbox visual com `::before` */

#sfctfm-hubspot-form .hs-form-booleancheckbox-display span {
  display: inline-flex;

  align-items: center;

  position: relative; /* Para o z-index funcionar */

  z-index: 1;
}

#sfctfm-hubspot-form .hs-form-booleancheckbox-display span::before {
  content: "";

  flex-shrink: 0;

  display: inline-block;

  width: 20px;

  height: 20px;

  border: 2px solid #fff;

  border-radius: 4px;

  margin-right: 12px; /* Espaço entre o checkbox e o texto */

  background-color: transparent;

  transition: all 0.2s ease;
}

/* 4. Estiliza o estado MARCADO do nosso checkbox visual */

#sfctfm-hubspot-form .hs-form-booleancheckbox-display input[type="checkbox"]:checked + span::before {
  background-color: #ff00c8; /* Cor de destaque do tema */

  border-color: #ff00c8;

  /* Adiciona um "check" (V) via SVG embutido. Funciona em todos os navegadores. */

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");

  background-repeat: no-repeat;

  background-position: center;

  background-size: 50%;
}

/* 5. Estilo de foco para acessibilidade: quando o input invisível recebe foco, desenhamos um anel no visual */

#sfctfm-hubspot-form .hs-form-booleancheckbox-display input[type="checkbox"]:focus + span::before {
  box-shadow: 0 0 0 2px rgba(255, 0, 200, 0.5);
}

/* --- FIM DA CORREÇÃO DEFINITIVA DO CHECKBOX --- */

/*  =====================================================================

                7. Campos personalizados (Senha)

            ===================================================================== */

#sfctfm-custom-form-fields {
  border-top: 1px solid rgba(255, 255, 255, 0.2);

  font-weight: 300;
}

#sfctfm-custom-form-fields .sfctfm-row {
  display: flex;

  flex-wrap: wrap;

  gap: 1rem;
}

#sfctfm-custom-form-fields .sfctfm-field {
  flex: 1 1 48%;

  max-width: 48%;
}

#sfctfm-custom-form-fields input[type="password"] {
  width: 100%;

  height: 35px;

  border-radius: 5px;

  padding: 5px;

  box-sizing: border-box;
}

#sfctfm-custom-register {
  display: block !important;

  width: 100% !important;

  height: 40px;

  margin: 30px 0;

  font-weight: 600 !important;

  color: #fff !important;

  background: #ff00c8 !important;

  border: none !important;

  border-radius: 5px !important;

  cursor: pointer !important;

  transition: background 0.3s;
}

#sfctfm-custom-register:hover {
  background: #d100a8 !important;
}

/*  =====================================================================

                8. Responsivo

            ===================================================================== */

@media (max-width: 500px) {
  /* --- CORREÇÃO PRINCIPAL DO SCROLL --- */

  /* 1. Faz o OVERLAY ser o container de rolagem */

  #sfctfm-overlay {
    align-items: flex-start; /* Alinha o form no topo */

    overflow-y: auto; /* PERMITE que o overlay role */

    padding-top: 20px; /* Reduz o espaçamento superior */

    padding-bottom: 20px; /* Reduz o espaçamento inferior */
  }

  /* 2. Permite que o FORMULÁRIO cresça o quanto precisar, SEM barra de rolagem interna */

  .sfctfm-hubspot-instance {
    max-height: none; /* REMOVE o limite de altura */

    overflow-y: visible; /* DESATIVA a rolagem interna */
  }

  /* --- AJUSTES DE ESPAÇAMENTO PARA DEIXAR O FORMULÁRIO MENOR --- */

  /* Reduz o espaçamento entre os campos do HubSpot */

  .sfctfm-hubspot-instance .hs-form-field {
    margin-bottom: 0.75rem; /* Era 1rem */
  }

  /* Reduz a margem do botão de cadastro */

  #sfctfm-custom-register {
    margin: 20px 0 10px; /* Era 30px 0 */
  }

  /* Reduz o padding da dica de senha */

  .sfctfm-tip-pass {
    padding: 5px 0 10px; /* Era 10px 0 */
  }

  /* Garante que todos os campos fiquem com largura total */

  .sfctfm-hubspot-instance .form-columns-2 .hs-form-field,
  #sfctfm-custom-form-fields .sfctfm-field,
  input:not([type="checkbox"]),
  select {
    flex: 1 1 100% !important;

    max-width: 100% !important;
  }

  #sfctfm-custom-form-fields .sfctfm-row {
    flex-direction: column;

    gap: 0.75rem; /* Ajusta o espaçamento entre os campos de senha */
  }
}
@media (min-height: 700px) {
  /* ajuste a altura a gosto */
  #sfctfm-overlay.modal-fit {
    /* classe opcional via JS (abaixo) */
    align-items: center;
  }
}

/*  =====================================================================

                9. Shortcode container centralizado quando expandido

            ===================================================================== */

#sfctfm-shortcode-container.sfctfm-expanded {
  margin: 0 auto;

  width: 100%;

  color: #fff;
}

select option {
  color: #000;
}

.sfctfm-feedback {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-weight: bold;

  font-size: 1rem;

  margin: 0.5em 0;
}

.sfctfm-feedback--info {
  color: #fff;
}

.sfctfm-feedback--success {
  color: green;
}

.sfctfm-feedback--error {
  color: red;
}

.sfctfm-feedback__texto {
  margin-right: 0.25em;
}

.sfctfm-gerador-senha {
  display: flex !important;

  flex-wrap: nowrap !important;

  justify-content: center;

  align-items: center;

  gap: 8px;

  margin: 16px auto;

  width: 100%;
}

.sfctfm-gerador-senha .sfctfm-icone,
.sfctfm-gerador-senha .sfctfm-icone-olho {
  width: 22px !important;

  height: 22px !important;

  cursor: pointer;

  flex-shrink: 0;
}

.sfctfm-password-wrapper {
  position: relative;

  flex: 1 1 auto;
}

.sfctfm-input-senha {
  width: 100%;

  padding: 4px 8px;

  padding-right: 32px;

  font-family: monospace;

  font-size: 0.9rem;
}

.sfctfm-icone-olho {
  position: absolute;

  top: 50%;

  right: 8px;

  transform: translateY(-50%);
}

.hs-error-msg {
  color: red;
}

.sfctfm-tip-pass {
  padding: 10px 0;

  font-size: 0.9em;
}