@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@400;700&display=swap');


#fm-programa { 
  font-family: 'Roboto Condensed', sans-serif;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 8px;
 
}
.economize-titulo {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.descricao-programa, .informe {
  margin: 8px 0;
}
.preco-programa {
  font-size: 20px;
  font-weight: bold;
  margin: 12px 0;
}
/* onde está #fm-cpf-step ... use o id correto */
#fm-step-cpf input {
  width: calc(100% - 20px);
  padding: 8px 10px;
  border-radius: 20px;
  border: 1px solid #ccc;
  margin-right: 4px;
}
#fm-step-cpf button {
  padding: 8px 12px;
  border-radius: 20px;
  background: #e63946;
  color: #fff;
  border: none;
  cursor: pointer;
}

#retornoApi {
  margin-top: 16px;
  font-family: 'Roboto', sans-serif;
}
.elementor-container .fm-cadastro {
  max-width: 100%;
  width: 100%;
  font-family: 'Roboto Condensed', sans-serif;
  margin: 0 auto;
  margin-bottom: 40px; /* Ajuste de espaçamento extra */
}

.fm-cadastro label {
  display: block;
  margin: 20px 0 5px;
  font-size: 17px;
  font-weight: 600;
  color: #333;
}

.fm-cadastro input,
.fm-cadastro select {
  width: 100%;
  padding: 14px;
  border: 1px solid #ccc;
  border-radius: 30px;
  font-size: 16px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* foco em inputs e selects de texto */
.fm-cadastro input:focus,
.fm-cadastro select:focus {
  border-color: #31518c;
  outline: none;
  box-shadow: 0 0 0 2px rgba(49, 81, 140, 0.2);
}

.fm-cadastro select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22292%22%20height%3D%22292%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M287%2069.4c5.7-5.7%205.7-15%200-20.7l-24-24c-5.7-5.7-15-5.7-20.7%200L146%20120.6%2049.4%2024c-5.7-5.7-15-5.7-20.7%200l-24%2024c-5.7%205.7-5.7%2015%200%2020.7l122%20122c5.7%205.7%2015%205.7%2020.7%200l122-122z%22%20fill%3D%22%23666%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}

/* botão de submit */
.fm-cadastro button[type="submit"] {
  display: block;
  margin: 25px auto 0 auto;
  background-color: #e63946;
  color: white;
  border: none;
  padding: 14px 30px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}
.fm-cadastro button[type="submit"]:hover {
  background-color: #d62839;
}

/* container de respostas */
#retornoApi {
  max-width: 100%;
  background-color: #f9f9f9;
  border-left: 5px solid #31518c;
  padding: 25px 25px 20px 25px;
  border-radius: 8px;
  font-size: 16px;
  color: #1d3557;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  margin-top: 30px;
  box-sizing: border-box;
}
#retornoApi strong {
  color: #000;
  font-weight: bold;
}
#retornoApi p {
  margin: 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}
#retornoApi p:last-child {
  border-bottom: none;
}

/*  ────────────────────────────────────────────────────────────────────── */
/*  AQUI VEM O OVERRIDE PARA OS CHECKBOXES, que antes eram estilizados   */
/*  como input texto:                                                   */
.fm-cadastro input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: 0 8px 0 0;
  vertical-align: middle;
  /* caso queira aumentar o tamanho: */
  /* transform: scale(1.2); */
}
.fm-cadastro input[type="checkbox"] + label,
.fm-cadastro label > input[type="checkbox"] + span {
  display: inline-block;
  font-size: 16px;
  vertical-align: middle;
  margin: 0;
}




/* ────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .fm-cadastro input,
  .fm-cadastro select {
    font-size: 15px;
  }
  .fm-cadastro label {
    font-size: 16px;
  }
  .fm-cadastro button[type="submit"] {
    width: 100%;
    padding: 12px 20px;
  }
  #retornoApi {
    padding: 20px;
    font-size: 15px;
  }
}

.fm-btn-primario{
  display:block; width:100%;
  padding:14px 16px; border:0; border-radius:30px;
  background:#e63946; color:#fff; font-weight:700; cursor:pointer;
}
.fm-btn-primario:disabled{ opacity:.5; cursor:not-allowed; }

.fm-hidden{ display:none !important; }

#fm-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
}
#fm-modal{
  background:#fff; border-radius:12px; padding:24px; width:92%; max-width:560px;
  position:relative; box-shadow:0 10px 40px rgba(0,0,0,.2);
  font-family:'Roboto', sans-serif;
}
.fm-modal-close{
  position:absolute; top:10px; right:14px;
  background:transparent; border:0; font-size:28px; line-height:1; cursor:pointer;
}
#fm-modal input[type="text"]{
  width:100%; padding:14px; border:1px solid #ccc; border-radius:30px; margin:12px 0 16px;
}
.fm-modal-title{ margin:0 0 8px; color:#e63946; }

/* — modal responsivo e rolável — */
#fm-modal{
  width: min(560px, 92vw);
  max-height: calc(100vh - 48px);   /* ocupa quase a tela toda, com respiro */
  overflow-y: auto;                  /* rola o conteúdo interno */
  overscroll-behavior: contain;      /* não “puxa” o scroll do fundo */
}



/* área dinâmica longa rola sozinha, deixando cabeçalho/botões à vista */
#retornoApi{
  max-height: 65vh;                  /* ajuste fino: 60–70vh costuma ficar bom */
  overflow-y: auto;
}

#fm-modal, #retornoApi { -webkit-overflow-scrolling: touch; }




#fm-modal-overlay,
#fm-modal,
#retornoApi{
  overscroll-behavior: contain;
}

/* modal mais compacto no mobile */
@media (max-width: 768px){
  #fm-modal{
    max-width: 94vw;
    padding: 18px;
    border-radius: 12px;
    max-height: calc(100vh - 32px);
  }
}


html.fm-noscroll,
body.fm-noscroll{
  overflow: hidden !important; /* só esconde a barra do fundo */
}

#fm-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overscroll-behavior: contain;
  touch-action: auto;
   /* não passa gesto para o fundo */
}


/* 1) O modal precisa de ALTURA real e virar coluna */
#fm-modal{
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);     /* altura DEFINIDA (não só max-height) */
  max-height: calc(100vh - 48px);
  overflow: hidden;                /* quem vai rolar é o passo, não o modal */
}
@supports (height: 100dvh){
  #fm-modal{
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
  }
}

/* 2) Deixe SÓ o passo 2 (#fm-step-next) como scroller */
#fm-step-next{
  flex: 1 1 auto;
  min-height: 0;                   /* ESSENCIAL em layouts flex */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* 3) Zere regras antigas do #retornoApi (não queremos dois scrollers) */
#retornoApi{
  max-height: none !important;
  overflow: visible !important;
}

/* (opcional) Título azul ganhando do Elementor */
#fm-modal h3, #retornoApi h3 { color:#31518C !important; }


.fm-modal-title{
  color:#31518C!important ;
  font-size: 22px!important;
  line-height: 1.2;
  margin: 10px 0 12px;
  padding-right: 56px;   /* espaço horizontal pro X */
}

/* botão fechar menor e sem área “invisível” gigante */
.fm-modal-close{
  position: absolute; top: 10px; right: 12px;
  width: 40px; height: 40px; padding: 0;   /* <— tira o excesso de padding */
  border-radius: 9999px;
  background: #e63946; color: #fff; font-weight: 700;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  z-index: 3; /* fica acima só do conteúdo do modal */
}

/* dá um respiro extra no topo do conteúdo do modal */
#fm-modal{ padding-top: 54px; }



#fm-modal, #fm-modal *:not(.fm-modal-close){
  color: inherit;
}
#fm-modal, #retornoApi{ color:#1d3557!important; }   /* cor base */



#fm-step-cpf #fm-cpf-submit{
  background-color: var(--e-global-color-29ba9af9);
  font-family: "Roboto Condensed", Sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  font-style: normal;
  text-decoration: none;
  line-height: initial;
  letter-spacing: 2.4px;
  color: var(--e-global-color-41379e7b);
  border-style: solid;
  border-width: 0px 0px 0px 0px;
  border-radius: 50px 50px 50px 50px;
  padding: 1.8em 3.3em 1.8em 3.3em;
}


.elementor-kit-123 #btnEnviarCadastro{
  margin-top: 30px!important;
}


.elementor-kit-123 #btnEnviarCadastro {
  color: #FFF !important;
}

/* coloca label + checkbox lado a lado apenas nos campos que têm checkbox */
.fm-cadastro .fm-field:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* anula o label em bloco que você já tem no formulário */
.fm-cadastro .fm-field:has(input[type="checkbox"]) > label {
  display: inline;           /* ou inline-flex */
  margin: 0 8px 0 0;         /* tira as margens grandes do label */
}

/* checkbox alinhadinho */
.fm-cadastro .fm-field:has(input[type="checkbox"]) > input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}


.fm-vit-title{
  margin: 0 0 10px; color:#31518C; font:700 1.1rem/1.2 'Roboto',sans-serif;
}

.fm-vit-card{
  border:1px solid #e7e7e7; border-radius:10px; background:#fff; padding:14px;
  text-decoration:none; color:inherit; display:block;
}
.fm-vit-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.fm-vit-name{ font-size:.95rem; font-weight:700; color:#0f172a; margin:8px 0; min-height:2.4em; }
.fm-vit-badge{ font-weight:700; font-size:.75rem; padding:4px 8px; border-radius:999px; background:#e8f3ff; display:inline-block; margin-top:6px; }
.fm-vit-prices{ display:flex; align-items:baseline; gap:10px; }
.fm-vit-old{ text-decoration:line-through; color:#9ca3af; font-size:.9rem; }
.fm-vit-new{ font-size:1.25rem; font-weight:800; color:#1d3557; }
.fm-vit-new small{ font-weight:600; font-size:.8rem; margin-left:4px; color:#475569; }
.fm-vit-img img{ width:100%; height:auto; display:block; border-radius:8px; }



/* FM vitrine — 3x2 fixo no desktop, compacto */
.fm-vit-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important; /* 3 colunas */
  gap:14px !important;
}
@media (max-width:900px){
  .fm-vit-grid{ grid-template-columns:repeat(2,1fr) !important; }  /* tablet */
}
@media (max-width:640px){
  .fm-vit-grid{ grid-template-columns:1fr !important; }            /* mobile */
}

/* compacto + imagem menor */
.fm-vit-card{ padding:10px !important; border-radius:12px !important; }
.fm-vit-img{ height:110px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.fm-vit-img img{ max-height:100% !important; width:auto !important; object-fit:contain !important; }

.fm-vit-name{ font-size:.9rem !important; line-height:1.2 !important; min-height:2.2em !important; margin:6px 0 4px !important; }
.fm-vit-prices{ gap:8px !important; }
.fm-vit-old{ font-size:.8rem !important; }
.fm-vit-new{ font-size:1rem !important; font-weight:800 !important; }

/* 1) Padroniza raio dos inputs/selects do modal e do cadastro */
#fm-modal input[type="text"],
#fm-modal input[type="date"],
#fm-modal input[type="number"],
#fm-modal select,
.fm-cadastro input,
.fm-cadastro select {
  border-radius: 28px;           /* todos iguais */
  line-height: 1.2;
  box-sizing: border-box;
}

/* 2) Botões sempre em bloco + espaçamento consistente */
.fm-btn-primario,
#btnPreAuth,
#btnCancelarPre,
#btnConfirmar,
#fm-invoice-save,
#fm-cancel-sale,
#btnAceitarTermo,
#btnEnviarCadastro {
  display: block;
  width: 100%;
  margin: 10px 0;               /* dá respiro vertical */
  padding: 14px 16px;
  border-radius: 28px;
}

/* 3) Quando houver múltiplos botões empilhados, garanta espaçamento */
#retornoApi button + button {
  margin-top: 10px;
}

/* 4) Deixa o “Cancelar venda” com cor neutra e legível */
#fm-cancel-sale {
  background: #444 !important;
  color: #fff !important;
}

/* 5) Evita sobreposição por flutuações do Elementor */
#retornoApi * {
  float: none !important;
}

/* 6) Inputs do bloco de prescrição (print) – mesma altura dos selects */
#retornoApi input,
#retornoApi select {
  height: 42px;
}

/* 7) Em telas pequenas, garantimos que nada fique lado a lado sem querer */
@media (max-width: 480px){
  #retornoApi .fm-actions,
  #retornoApi p,
  #retornoApi div,
  #retornoApi button {
    width: 100%;
  }
}

.fm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;            /* espaço entre botões */
}


/* — Inputs e selects com mesma cara e FUNDO BRANCO — */
#fm-modal #retornoApi input[type="text"],
#fm-modal #retornoApi input[type="date"],
#fm-modal #retornoApi input[type="number"],
#fm-modal #retornoApi select,
#fm-step-cpf input[type="text"]{
  background:#fff !important;
  color:#1d3557 !important;
  border:1px solid #cbd5e1 !important;    /* cinza suave */
  border-radius:28px !important;
  height:48px !important;
  padding:12px 16px !important;
  box-shadow:none !important;
  outline:0 !important;
  width:100% !important;
}

/* Placeholders legíveis */
#fm-modal #retornoApi ::placeholder { color:#64748b !important; opacity:1; }

/* Select com caret padrão (evita caret azul do tema) */
#fm-modal #retornoApi select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  background-image:none !important;
}

/* Botões: sempre bloco, com respiro entre eles e texto BRANCO */
#fm-modal #retornoApi button,
#fm-modal #retornoApi .fm-btn-primario,
#fm-step-cpf #fm-cpf-submit,
#btnPreAuth,#btnCancelarPre,#btnConfirmar,
#fm-invoice-save,#fm-cancel-sale,#btnAceitarTermo,#btnEnviarCadastro{
  display:block !important;
  width:100% !important;
  margin:12px 0 !important;
  padding:14px 16px !important;
  border-radius:28px !important;
  border:0 !important;
  background:#e63946 !important; /* vermelho padrão do widget */
  color:#fff !important;          /* <<< texto branco */
  letter-spacing:.12em;
  cursor:pointer;
}

/* Estado disabled visível */
#fm-modal #retornoApi button:disabled{ opacity:.55 !important; cursor:not-allowed !important; }

/* Botão “Cancelar venda” com fundo cinza e texto BRANCO */
#fm-cancel-sale{
  background:#444 !important;
  color:#fff !important;
}

/* Evita qualquer flutuação do Elementor que grude botões */
#retornoApi *{ float:none !important; }


#fm-modal #retornoApi input, #fm-modal #retornoApi select { font-family: inherit !important; box-shadow:none !important; }

/* 1) Mata a herança de cor do Elementor dentro do modal */
body .elementor-kit-123 #fm-modal,
body .elementor-kit-123 #fm-modal *:not(.fm-modal-close) {
  color: #1d3557 !important; /* cor base legível */
}

/* 2) Inputs/selects do modal SEMPRE com fundo branco */
body .elementor-kit-123 #fm-modal :is(input[type="text"],input[type="number"],input[type="date"],select),
body #fm-modal :is(input[type="text"],input[type="number"],input[type="date"],select) {
  background: #fff !important;
  color: #1d3557 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 28px !important;
  height: 48px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  outline: 0 !important;
  width: 100% !important;
  margin: 8px 0 12px !important;
}

/* 3) Botões padronizados (display bloco, espaçamento, texto branco) */
body .elementor-kit-123 #fm-modal :is(button, .fm-btn-primario),
#fm-modal :is(button, .fm-btn-primario),
#btnPreAuth, #btnConfirmar, #fm-invoice-save, #fm-cancel-sale, #btnAceitarTermo, #btnEnviarCadastro, #fm-cpf-submit {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 !important;
  padding: 14px 16px !important;
  border-radius: 28px !important;
  border: 0 !important;
  background: #e63946 !important;
  color: #fff !important;              /* <<< FONTE BRANCA GARANTIDA */
  letter-spacing: .12em !important;
  cursor: pointer !important;
}

/* 3.1) “Cancelar venda” cinza, mas com fonte branca */
#fm-cancel-sale {
  background: #444 !important;
  color: #fff !important;
}

/* 4) Dá respiro entre o último input (data) e o botão "Pré‑autorizar" */
#btnPreAuth { margin-top: 14px !important; }

/* 5) Evita qualquer flutuação que cole botões */
#retornoApi *, #fm-step-next * { float: none !important; }

/* 6) Se ainda houver alguma herança teimosa, força o label dos botões a branco */
#fm-modal button, #fm-modal .fm-btn-primario { color: #fff !important; }

/* 1) COR DE TEXTO NO MODAL (cor de base branca no conteúdo, sem afetar inputs) */
body .elementor-kit-123 #fm-modal,
body .elementor-kit-123 #fm-modal *:not(.fm-modal-close):not(input):not(select):not(textarea) {
  color: #fff !important; /* texto branco */
}

/* 1.1) Mantém inputs legíveis (preto em fundo branco) */
body #fm-modal :is(input[type="text"],input[type="number"],input[type="date"],select,textarea) {
  background: #fff !important;
  color: #1d3557 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 28px !important;
  height: 48px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  margin: 8px 0 12px !important;
  box-shadow: none !important;
}

/* 2) BOTÕES padronizados (texto sempre branco) */
body #fm-modal :is(button, .fm-btn-primario),
#btnPreAuth, #btnConfirmar, #fm-invoice-save, #fm-cancel-sale, #btnAceitarTermo, #btnEnviarCadastro, #fm-cpf-submit {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 !important;
  padding: 14px 16px !important;
  border-radius: 28px !important;
  border: 0 !important;
  background: #e63946 !important;
  color: #fff !important; /* <<< garante fonte branca */
  letter-spacing: .12em !important;
  cursor: pointer !important;
}

/* 2.1) Se quiser manter o Cancelar em cinza mas com texto branco */
#fm-cancel-sale { background: #444 !important; color: #fff !important; }

/* 3) Espaço entre o input Data e o botão Pré‑autorizar */
#btnPreAuth { margin-top: 14px !important; }

/* 4) Nada “cola” por float do Elementor */
#retornoApi *, #fm-step-next * { float: none !important; }

/* 5) Placeholders legíveis */
#fm-modal ::placeholder { color: #e6e6e6 !important; }

.fm-vit-programa{color:#31518c;font-size:12px;margin-top:2px}