/* ============================================================================
 * ARQUIVO: modulos/shortcodes/shortcodes.css
 * FUNÇÃO: Estilo do formulário renderizado pelo shortcode (FRONT)
 * ----------------------------------------------------------------------------
 * ✅ Inputs com borda um pouco mais escura
 * ✅ Mantém foco verde
 * ✅ Botão verde premium
 * ============================================================================ */

.ibx-leads-form-wrap {
  --ibx-font: inherit;

  --ibx-bg: #ffffff;
  --ibx-text: #111827;
  --ibx-muted: #6b7280;

  /* 🔥 Bordas levemente mais escuras */
  --ibx-border: #cbd5e1;
  --ibx-border-strong: #94a3b8;

  --ibx-focus: rgba(16, 185, 129, 0.18);
  --ibx-radius: 12px;

  --ibx-field-h: 50px;
  --ibx-gap: 14px;

  --ibx-btn: #16a34a;
  --ibx-btn-hover: #15803d;
  --ibx-btn-text: #ffffff;

  font-family: var(--ibx-font);
  color: var(--ibx-text);
}

.ibx-leads-form-wrap .ibx-leads-form {
  background: var(--ibx-bg);
  width: 100%;
}

.ibx-leads-form-wrap .ibx-form-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ibx-gap);
}

.ibx-leads-form-wrap .ibx-field {
  display: grid;
  gap: 8px;
}

.ibx-leads-form-wrap .ibx-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ibx-muted);
  line-height: 1.2;
}

/* INPUTS */
.ibx-leads-form-wrap .ibx-field input,
.ibx-leads-form-wrap .ibx-field select,
.ibx-leads-form-wrap .ibx-field textarea {
  width: 100%;
  box-sizing: border-box;

  border: 1px solid var(--ibx-border);
  border-radius: var(--ibx-radius);

  background: #ffffff;
  color: var(--ibx-text);

  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.25;

  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ibx-leads-form-wrap .ibx-field input,
.ibx-leads-form-wrap .ibx-field select {
  min-height: var(--ibx-field-h);
}

.ibx-leads-form-wrap .ibx-field textarea {
  min-height: 110px;
  resize: vertical;
}

/* Hover mais perceptível */
.ibx-leads-form-wrap .ibx-field input:hover,
.ibx-leads-form-wrap .ibx-field select:hover,
.ibx-leads-form-wrap .ibx-field textarea:hover {
  border-color: var(--ibx-border-strong);
}

/* Foco verde */
.ibx-leads-form-wrap .ibx-field input:focus,
.ibx-leads-form-wrap .ibx-field select:focus,
.ibx-leads-form-wrap .ibx-field textarea:focus {
  border-color: var(--ibx-btn);
  box-shadow: 0 0 0 4px var(--ibx-focus);
}

/* Select com seta custom */
.ibx-leads-form-wrap .ibx-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 44px;

  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

/* BOTÃO */
.ibx-leads-form-wrap .ibx-form-actions {
  margin-top: 18px;
}

.ibx-leads-form-wrap .ibx-form-submit {
  width: 100%;
  min-height: 56px;

  border: 0;
  border-radius: 14px;

  background: var(--ibx-btn);
  color: var(--ibx-btn-text);

  font-size: 18px;
  font-weight: 700;

  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
}

.ibx-leads-form-wrap .ibx-form-submit:hover {
  background: var(--ibx-btn-hover);
  filter: brightness(1.02);
}

.ibx-leads-form-wrap .ibx-form-submit:active {
  transform: translateY(1px);
}

.ibx-leads-form-wrap .ibx-form-feedback {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.35;
  border: 1px solid var(--ibx-border);
  background: #f9fafb;
  color: var(--ibx-text);
}

.ibx-leads-form-wrap .ibx-form-feedback[data-ibx-type="error"] {
  border-color: rgba(239, 68, 68, 0.30);
  background: rgba(239, 68, 68, 0.06);
  color: #991b1b;
}

.ibx-leads-form-wrap .ibx-form-feedback[data-ibx-type="ok"] {
  border-color: rgba(16, 185, 129, 0.30);
  background: rgba(16, 185, 129, 0.07);
  color: #065f46;
}
