/* =========================
   LZ Toggle Buttons (por field)
   Ativa apenas quando o field tem .lz-toggle-ui
========================= */

.forminator-ui .lz-toggle-ui {
  --lz-radius: 999px;
  --lz-btn-bg: #f3f5f7;
  --lz-btn-bg-hover: #e9edf1;
  --lz-btn-text: #5b6670;
  --lz-btn-active-text: #5b6670;

  --lz-shadow: 0 10px 24px rgba(0, 0, 0, .08);
  --lz-border: 1px solid rgba(0, 0, 0, .06);
}

/* wrapper de botões */
.forminator-ui .lz-toggle-ui .lz-toggle-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(220px, calc(25% - 9px)), 1fr));
  gap: 12px;
  margin-top: 10px;
}

/* Garante máximo de 4 colunas */
@supports (width: min(100%, 1fr)) {
  .forminator-ui .lz-toggle-ui .lz-toggle-group {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, 25%)), 1fr));
  }
}

/* "título" do grupo */
.forminator-ui .lz-toggle-ui .lz-group-title {
  display: block;
  width: 100%;
  padding: 10px 18px;
  border-radius: var(--lz-radius);
  background: #7b8794; /* default */
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 14px 0 10px;
  text-align: center;
}

/* Título do campo (label principal) */
.forminator-ui .lz-toggle-ui .forminator-label {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--lz-radius);
  background: var(--lz-label-bg, #e8ebef); /* cinza claro padrão */
  color: var(--lz-label-text, #5b6670);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  margin: 0 0 16px 0;
  text-align: center;
  text-transform: uppercase;
}

/* botões */
.forminator-ui .lz-toggle-ui label.forminator-radio,
.forminator-ui .lz-toggle-ui label.forminator-checkbox {
  margin: 0 !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 18px;
  border-radius: var(--lz-radius);
  background: var(--lz-btn-bg);
  color: var(--lz-btn-text);
  border: var(--lz-border);
  box-shadow: none;

  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

/* remove bullet/box nativo */
.forminator-ui .lz-toggle-ui .forminator-radio-bullet,
.forminator-ui .lz-toggle-ui .forminator-checkbox-box {
  display: none !important;
}

/* esconde input mantendo acessível */
.forminator-ui .lz-toggle-ui label.forminator-radio > input,
.forminator-ui .lz-toggle-ui label.forminator-checkbox > input {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ativo */
.forminator-ui .lz-toggle-ui label.is-active {
  color: var(--lz-label-text, #ffffff);
  box-shadow: var(--lz-shadow);
  border-color: transparent;
  background: var(--lz-label-bg, #d94e28);
}

/* foco (fallback via JS) */
.forminator-ui .lz-toggle-ui label.is-focus {
  outline: 3px solid rgba(24, 169, 184, .35);
  outline-offset: 2px;
}

/* Responsivo */
@media (max-width: 640px) {
  .forminator-ui .lz-toggle-ui .lz-toggle-group {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Suporte para IDs de formulário específicos
   Mantém compatibilidade com código existente
========================= */

#forminator-module-2028 .lz-toggle-ui {
  --lz-radius: 999px;
  --lz-btn-bg: #f3f5f7;
  --lz-btn-bg-hover: #e9edf1;
  --lz-btn-text: #5b6670;
  --lz-btn-active-text: #5b6670;

  --lz-shadow: 0 10px 24px rgba(0, 0, 0, .08);
  --lz-border: 1px solid rgba(0, 0, 0, .06);
}

#forminator-module-2028 .lz-toggle-ui .lz-toggle-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(220px, calc(25% - 9px)), 1fr));
  gap: 12px;
  margin-top: 10px;
}

/* Garante máximo de 4 colunas */
@supports (width: min(100%, 1fr)) {
  #forminator-module-2028 .lz-toggle-ui .lz-toggle-group {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, 25%)), 1fr));
  }
}

#forminator-module-2028 .lz-toggle-ui .lz-group-title {
  display: block;
  width: 100%;
  padding: 10px 18px;
  border-radius: var(--lz-radius);
  background: #7b8794;
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 14px 0 10px;
  text-align: center;
}

/* Título do campo (label principal) */
#forminator-module-2028 .lz-toggle-ui .forminator-label {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--lz-radius);
  background: var(--lz-label-bg, #e8ebef); /* cinza claro padrão */
  color: var(--lz-label-text, #5b6670);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  margin: 0 0 16px 0;
  text-align: center;
  text-transform: uppercase;
}

#forminator-module-2028 .lz-toggle-ui label.forminator-radio,
#forminator-module-2028 .lz-toggle-ui label.forminator-checkbox {
  margin: 0 !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 18px;
  border-radius: var(--lz-radius);
  background: var(--lz-btn-bg);
  color: var(--lz-btn-text);
  border: var(--lz-border);
  box-shadow: none;

  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

#forminator-module-2028 .lz-toggle-ui .forminator-radio-bullet,
#forminator-module-2028 .lz-toggle-ui .forminator-checkbox-box {
  display: none !important;
}

#forminator-module-2028 .lz-toggle-ui label.forminator-radio > input,
#forminator-module-2028 .lz-toggle-ui label.forminator-checkbox > input {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#forminator-module-2028 .lz-toggle-ui label.is-active {
  color: var(--lz-label-text, #ffffff);
  box-shadow: var(--lz-shadow);
  border-color: transparent;
  background: var(--lz-label-bg, #d94e28);
}

#forminator-module-2028 .lz-toggle-ui label.is-focus {
  outline: 3px solid rgba(24, 169, 184, .35);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  #forminator-module-2028 .lz-toggle-ui .lz-toggle-group {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Classes de Cores para Labels
   Adicione estas classes ao campo no Forminator
========================= */

/* Dourado (como na imagem "DESIGN") */
.forminator-ui .lz-toggle-ui.lz-label-gold,
#forminator-module-2028 .lz-toggle-ui.lz-label-gold {
  --lz-label-bg: #c9a961;
  --lz-label-text: #ffffff;
}

/* Cinza claro */
.forminator-ui .lz-toggle-ui.lz-label-gray,
#forminator-module-2028 .lz-toggle-ui.lz-label-gray {
  --lz-label-bg: #e8ebef;
  --lz-label-text: #5b6670;
}

/* Azul */
.forminator-ui .lz-toggle-ui.lz-label-blue,
#forminator-module-2028 .lz-toggle-ui.lz-label-blue {
  --lz-label-bg: #3498db;
  --lz-label-text: #ffffff;
}

/* Verde */
.forminator-ui .lz-toggle-ui.lz-label-green,
#forminator-module-2028 .lz-toggle-ui.lz-label-green {
  --lz-label-bg: #27ae60;
  --lz-label-text: #ffffff;
}

/* Laranja */
.forminator-ui .lz-toggle-ui.lz-label-orange,
#forminator-module-2028 .lz-toggle-ui.lz-label-orange {
  --lz-label-bg: #e67e22;
  --lz-label-text: #ffffff;
}

/* Roxo */
.forminator-ui .lz-toggle-ui.lz-label-purple,
#forminator-module-2028 .lz-toggle-ui.lz-label-purple {
  --lz-label-bg: #9b59b6;
  --lz-label-text: #ffffff;
}

/* Vermelho */
.forminator-ui .lz-toggle-ui.lz-label-red,
#forminator-module-2028 .lz-toggle-ui.lz-label-red {
  --lz-label-bg: #e74c3c;
  --lz-label-text: #ffffff;
}

/* Preto */
.forminator-ui .lz-toggle-ui.lz-label-dark,
#forminator-module-2028 .lz-toggle-ui.lz-label-dark {
  --lz-label-bg: #2c3e50;
  --lz-label-text: #ffffff;
}