/* ===== Paleta Nextflow/NextAge ===== */
:root{
  --flow-bg: #CFE6EA;            /* fundo cartão */
  --flow-text: #1D3C45;          /* títulos/textos principais */
  --flow-muted: #537B83;         /* subtítulos/descrições */
  --flow-rail: rgba(29,60,69,.28);
  --flow-accent: #A61B27;        /* destaques */
  --vermelhinho: #E85657;
}

/* Escopo do cartão do modal */
#formModal .modal-content.nx-form{
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(900px 300px at 10% -10%, rgba(29,60,69,.07), transparent 60%),
    var(--flow-bg);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  overflow: hidden;
  color: var(--flow-text);
}

/* Cabeçalho com gradiente levemente “deep teal → accent” */
#formModal .modal-header{
  padding: 18px 22px;
  border-bottom: 0;
  background: linear-gradient(135deg, var(--flow-text), var(--flow-muted) 60%, var(--flow-accent));
  color: #fff;
}
#formModal .modal-title{ font-weight: 700; letter-spacing:.2px; }
#formModal .btn-close{ filter: invert(1) grayscale(100%); opacity:.9; }
#formModal .btn-close:hover{ opacity:1; }

/* Labels & campos */
#formModal .form-label{
  font-weight: 600;
  color: var(--flow-text);
  margin-bottom: .35rem;
}
#formModal .vermelinho{ color: var(--vermelhinho); }

#formModal .form-control{
  border: 2px solid #e3eef1;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .05s;
}
#formModal .form-control:focus{
  border-color: var(--flow-muted);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--flow-muted) 25%, transparent);
  outline: none;
}
#formModal textarea.form-control{
  min-height: 110px;
  resize: vertical;
}

/* Estados nativos */
#formModal .form-control:required:invalid{ border-color: var(--flow-muted); }
#formModal .form-control:required:invalid:focus{
  box-shadow: 0 0 0 6px rgba(1, 87, 185, 0.2);
}

/* intl-tel-input ocupar 100% */
#formModal #telefone, #formModal .iti{ width: 100% !important; }

/* Rodapé / botão primário com gradiente teal → accent */
#formModal .modal-footer{
  border-top: 0;
  padding-top: 0;
}
#formModal .modal-footer .btn.btn-secondary{
  --_padY: 12px; --_padX: 18px;
  display: inline-flex; align-items:center; justify-content:center;
  width: 100%;
  border: 0; border-radius: 12px; padding: var(--_padY) var(--_padX);
  font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--flow-text), var(--flow-muted) 60%, var(--flow-accent));
  box-shadow: 0 10px 24px rgba(29,60,69,.25), inset 0 -2px 0 rgba(0,0,0,.12);
  position: relative; overflow: hidden;
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
#formModal .modal-footer .btn.btn-secondary::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,0) 80%);
  transform: translateX(-120%);
}
#formModal .modal-footer .btn.btn-secondary:hover{
  filter: brightness(1.02);
  box-shadow: 0 12px 28px rgba(29,60,69,.32), inset 0 -2px 0 rgba(0,0,0,.14);
}
#formModal .modal-footer .btn.btn-secondary:hover::after{
  transform: translateX(120%); transition: transform .8s ease;
}
#formModal .modal-footer .btn.btn-secondary:active{
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(29,60,69,.28), inset 0 -2px 0 rgba(0,0,0,.18);
}
#formModal .modal-footer .btn.btn-secondary:disabled{ opacity:.95; cursor:not-allowed; }
#formModal .modal-footer .btn.btn-secondary.is-loading{ pointer-events:none; }
#formModal .modal-footer .btn.btn-secondary.is-loading::before{
  content:""; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.6); border-top-color:#fff;
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  animation: nxspin .7s linear infinite;
}
@keyframes nxspin{ to { transform: translateY(-50%) rotate(360deg); } }

/* Feedback */
#formModal #form-feedback{
  padding: 12px 14px; border-radius: 12px;
  background: rgba(43,185,52,.08); color: #187326;
}

/* Ajustes mobile */
@media (max-width: 420px){
  #formModal .modal-header{ padding: 16px 18px; }
  #formModal .form-control{ padding: 11px 12px; }
}

/* Hovers coerentes com o site */
.card-planos .btn:hover,
.container__titulo-div1--btn:hover {
  box-shadow: 0px 1px 6px 2px rgba(25, 33, 61, 0.08);
}