/* ===============================
   ESTILO GERAL DO FORMULÁRIO
================================ */
.fp-widget {
  background: var(--fp-bg, #f9f9f9);
  border-radius: var(--fp-radius, 12px);
  box-shadow: var(--fp-shadow, 0 2px 10px rgba(0,0,0,0.1));
  font-family: var(--fp-font, 'Inter', sans-serif);
  max-width: 420px;
  margin: 30px auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ===============================
   LABELS
================================ */
.fp-widget label {
  display: block;
  font-weight: 600;
  color: var(--fp-label, #333333);
  margin-bottom: 5px;
}

/* ===============================
   CAMPOS
================================ */
.fp-widget input,
.fp-widget select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: var(--fp-radius, 6px);
  font-size: 15px;
  font-family: inherit;
  transition: all 0.2s ease;
  background: var(--fp-bg-input, #ffffff);
  color: var(--fp-text-input, #000000);
}

.fp-widget input:focus,
.fp-widget select:focus {
  border-color: #0073aa;
  box-shadow: 0 0 4px rgba(0,115,170,0.4);
  outline: none;
}

/* ===============================
   BOTÃO PRINCIPAL
================================ */
#fp-btn {
  background: linear-gradient(90deg, var(--fp-btn1, #0073aa), var(--fp-btn2, #005c88));
  color: var(--fp-btn-text, #ffffff);
  border: none;
  width: 100%;
  padding: 10px;
  border-radius: var(--fp-radius, 6px);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.25s ease;
}

#fp-btn:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

/* ===============================
   RESULTADO
================================ */
#fp-resultado {
  margin-top: 18px;
  text-align: center;
  color: var(--fp-result, #000);
}

/* ===============================
   MODAL DE LEAD
================================ */
.fp-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.fp-modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  position: relative;
}

.fp-close-modal {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  font-size: 18px;
}

.fp-modal-content input {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.fp-modal-content button {
  background: var(--fp-whats, #25D366);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}

/* ===============================
   VALIDAÇÃO (setinha elegante)
================================ */
.fp-field {
  position: relative;
  margin-bottom: 12px;
}

.fp-field.erro input,
.fp-field.erro select {
  border-color: #e63946 !important;
  background: #fff8f8 !important;
  animation: shake 0.25s ease;
}

.fp-erro-msg {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-130%);
  background: #e63946;
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 5;
}

.fp-field.erro .fp-erro-msg {
  opacity: 1;
  transform: translateY(-150%);
}

.fp-erro-msg::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 10px;
  border-width: 5px;
  border-style: solid;
  border-color: #e63946 transparent transparent transparent;
}

/* Animação leve */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* ===============================
   RESPONSIVO
================================ */
@media (max-width: 480px) {
  .fp-widget {
    box-shadow: none;
    border-radius: 0;
  }
}


/* ================================
   🎯 COR DOS TEXTOS DENTRO DOS CAMPOS (SEM BUGAR DEGRADÊ/SOMBRA)
================================ */
.fp-widget input[type="text"],
.fp-widget input[type="number"],
.fp-widget input[type="email"],
.fp-widget input[type="tel"],
.fp-widget select,
.fp-widget textarea {
  color: var(--fp-text-input, #000);
  background-color: var(--fp-bg-input, #fff);
}

/* Placeholders — usa cor configurada, sem !important */
.fp-widget input::placeholder,
.fp-widget textarea::placeholder {
  color: var(--fp-text-input, #000);
  opacity: 0.6;
}

/* Corrige autofill Chrome/Safari */
.fp-widget input:-webkit-autofill {
  -webkit-text-fill-color: var(--fp-text-input, #000);
  box-shadow: 0 0 0 1000px var(--fp-bg-input, #fff) inset;
}

/* Mantém prioridade de degradê e sombra */
#fp-btn {
  background: linear-gradient(90deg, var(--fp-btn1, #0073aa), var(--fp-btn2, #005c88));
  color: var(--fp-btn-text, #fff);
}

.fp-widget {
  box-shadow: var(--fp-shadow, 0 2px 10px rgba(0,0,0,0.1));
}