/* Estilos globais MF Lead */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.card {
  background: #fff;
  border: 1px solid #e7eaf3;
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(16,24,64,.04);
}

h1, h2, h3, .font-display { font-family: 'Space Grotesk', sans-serif; }

.btn-primary {
  background: #E0FF04;
  color: #0E0E0E;
  font-weight: 700;
  border-radius: .9rem;
  padding: .65rem 1.2rem;
  transition: .15s;
  box-shadow: 0 6px 16px rgba(224,255,4,.30);
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

.btn-secondary {
  background: #fff;
  color: #0E0E0E;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  border-radius: .9rem;
  padding: .6rem 1.15rem;
  transition: .15s;
}
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }

.input-field {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: .85rem;
  padding: .65rem .9rem;
  font-size: .9rem;
  background: #fff;
}
.input-field:focus { outline: 2px solid #5E6E00; border-color: transparent; }

/* selects: seta customizada com margem da borda */
select.input-field {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
}

/* Acentos da marca em utilitarios usados nas paginas */
.text-brand-600 { color: #5E6E00 !important; }
.text-brand-500 { color: #5E6E00 !important; }
.bg-brand-500 { background: #E0FF04 !important; color: #0E0E0E !important; }
.bg-brand-50, .bg-blue-50 { background: #fbffd6 !important; }
.from-brand-500 { --tw-gradient-from: #E0FF04 var(--tw-gradient-from-position) !important; }
.to-indigo-500 { --tw-gradient-to: #c7e300 var(--tw-gradient-to-position) !important; }
.accent-\[var\(--brand\,\#3b6df0\)\] { accent-color: #5E6E00; }

/* Editor de funil */
#canvas-wrap { background-image: radial-gradient(#dbe2f0 1px, transparent 1px); background-size: 22px 22px; }
.step-card { width: 280px; }
.step-card.selected { box-shadow: 0 0 0 2px #5E6E00; }
.connector-dot { width: 12px; height: 12px; border-radius: 999px; background: #5E6E00; border: 2px solid #fff; box-shadow:0 0 0 1px #5E6E00; }
.elem-block { border: 1px dashed transparent; }
.elem-block:hover { border-color: #5E6E00; }
.elem-block.selected-el { border-color: #5E6E00; background: #fbffd6; }

/* ---- Painel de propriedades padronizado ---- */
#property-panel { font-size: 14px; }
#property-panel input.input-field { height: 38px; }
#property-panel select.input-field { height: 40px; padding-top: .35rem; padding-bottom: .35rem; line-height: 1.4; }
#property-panel textarea.input-field { height: auto; }
#property-panel input[type="color"] { height: 38px; padding: 2px; cursor: pointer; }
#property-panel input[type="number"] { -moz-appearance: textfield; }
#property-panel label { display: block; }
#property-panel details { background: #fbfcfe; }
#property-panel details > summary { user-select: none; }
#property-panel details[open] > summary { border-bottom: 1px solid #eef1f6; }
/* cada campo ocupa uma linha inteira (evita campos espremidos/desalinhados) */
#property-panel .grid { grid-template-columns: 1fr !important; gap: .6rem !important; }
#property-panel .grid > div { min-width: 0; }

/* ---- Pilha de elementos no popup de edição da etapa ---- */
.se-item { transition: box-shadow .12s; }
.se-item .se-drag { cursor: grab; }
.se-dropzone { border-radius: 8px; }
#se-preview { transition: background .2s; }

/* Hover configuravel de botoes e opcoes (via CSS vars inline) */
.funnel-btn { transition: background .18s, color .18s, border-color .18s, transform .12s, filter .18s; }
.funnel-btn:hover { transform: translateY(-1px); }
.funnel-btn[style*="--hbg"]:hover { background: var(--hbg) !important; }
.funnel-btn[style*="--hcol"]:hover { color: var(--hcol) !important; }
.option-choice { transition: background .18s, color .18s, border-color .18s, box-shadow .18s; }
.option-choice[style*="--ohbg"]:hover { background: var(--ohbg) !important; }
.option-choice[style*="--ohborder"]:hover { border-color: var(--ohborder) !important; }