/* ==========================================================================
   BioMed Forms - padrão visual dos formulários do site
   --------------------------------------------------------------------------
   - Tudo fica dentro de .bm-form (não interfere no restante do tema).
   - Cores, raios e gradientes vêm da identidade já usada no app.css.
   - Documentação e exemplos: app/assets/css/FORMS.md
   ========================================================================== */

.bm-form {
  /* Marca */
  --bm-navy-950: #001022;
  --bm-navy: #144172;
  --bm-ink: #0e2f54;
  --bm-cyan: #2CBCE0;
  --bm-cyan-light: #89E7FF;
  --bm-cyan-50: #e8f6fa;
  --bm-sky: #f4fbfe;

  /* Texto e linhas */
  --bm-text: #3d4f60;
  --bm-muted: #50677D;
  --bm-subtle: #5e7489;   /* 4.8:1 sobre branco (texto pequeno precisa de 4.5:1) */
  --bm-line: #d6e2ec;     /* divisórias e borda do cartão (decorativo) */
  --bm-field: #7d92a6;    /* contorno de campos e opções: 3.2:1, o mínimo para controles */

  /* Estados */
  --bm-danger: #c0392b;
  --bm-danger-bg: #fdf1f0;
  --bm-danger-line: #f2c4bf;
  --bm-success: #13865a;
  --bm-success-bg: #ecfaf3;
  --bm-success-line: #bfe9d4;

  /* Gradientes da marca */
  --bm-grad-cyan: linear-gradient(to right, #2CBCE0, #89E7FF);
  --bm-grad-navy: linear-gradient(to right, #001022, #144172);

  /* Forma */
  --bm-r-sm: 8px;
  --bm-r: 12px;
  --bm-r-lg: 15px;
  --bm-pill: 99px;
  --bm-shadow: 0 10px 30px rgba(20, 65, 114, .08);
  --bm-shadow-lift: 0 12px 28px rgba(20, 65, 114, .16);
  --bm-ring: 0 0 0 3px rgba(44, 188, 224, .3);
  --bm-tap: 48px;

  color: var(--bm-text);
  font-size: 1rem;
  line-height: 1.5;
}

.bm-form *,
.bm-form *::before,
.bm-form *::after {
  box-sizing: border-box;
}

.bm-form [hidden] {
  display: none !important;
}

.bm-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Tipografia de formulário
   -------------------------------------------------------------------------- */

.bm-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bm-form legend,
.bm-form .bm-title {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--bm-ink);
  text-wrap: balance;
}

/* Sem float, o legend "fura" a borda do fieldset (comportamento nativo do navegador) */
.bm-form legend {
  float: left;
}

.bm-form legend + * {
  clear: both;
}

.bm-form legend:focus {
  outline: none;
}

.bm-form .bm-help {
  display: block;
  margin: 0 0 20px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--bm-muted);
}

.bm-form .bm-field .bm-help {
  margin: 6px 0 0;
  font-size: .85rem;
}

.bm-form .bm-req {
  color: var(--bm-danger);
  font-weight: 600;
  text-decoration: none;
  border: 0;
}

.bm-form .bm-optional {
  font-weight: 400;
  color: var(--bm-subtle);
}

/* --------------------------------------------------------------------------
   Seções (agrupam campos relacionados)
   -------------------------------------------------------------------------- */

.bm-form .bm-section {
  padding: 24px;
  margin: 0 0 16px;
  background: #fff;
  border: solid 1px var(--bm-line);
  border-radius: var(--bm-r-lg);
}

.bm-form .bm-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bm-ink);
}

.bm-form .bm-num {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bm-ink);
  background: var(--bm-grad-cyan);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Grade de campos
   -------------------------------------------------------------------------- */

.bm-form .bm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.bm-form .bm-col-2 {
  grid-column: 1 / -1;
}

@media (max-width: 549px) {
  .bm-form .bm-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Campo (rótulo + controle)
   -------------------------------------------------------------------------- */

.bm-form .bm-field {
  display: block;
  min-width: 0;
  margin: 0;
  font-weight: inherit;
}

.bm-form .bm-label {
  display: block;
  margin: 0 0 6px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bm-navy);
}

.bm-form .wpcf7-form-control-wrap {
  display: block;
}

.bm-form input[type="text"],
.bm-form input[type="email"],
.bm-form input[type="tel"],
.bm-form input[type="search"],
.bm-form input[type="number"],
.bm-form select,
.bm-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: var(--bm-tap);
  margin: 0;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--bm-ink);
  background-color: #fff;
  border: solid 1px var(--bm-field);
  border-radius: var(--bm-r-sm);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.bm-form textarea {
  min-height: 130px;
  resize: vertical;
}

.bm-form select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23144172' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.bm-form input::placeholder,
.bm-form textarea::placeholder {
  color: #6c7f91;
  opacity: 1;
}

.bm-form input:hover,
.bm-form select:hover,
.bm-form textarea:hover {
  border-color: var(--bm-navy);
}

.bm-form input:focus,
.bm-form select:focus,
.bm-form textarea:focus {
  outline: none;
  border-color: var(--bm-cyan);
  box-shadow: var(--bm-ring);
}

/* Erro (CF7 e validação própria) */
.bm-form .wpcf7-not-valid,
.bm-form .is-invalid {
  border-color: var(--bm-danger) !important;
  background-color: var(--bm-danger-bg) !important;
}

.bm-form .wpcf7-not-valid-tip,
.bm-form .bm-field-error {
  /* o Flatsome transforma o aviso do CF7 num balão; aqui vira texto simples */
  position: static;
  top: auto;
  left: auto;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bm-danger);
}

.bm-form .wpcf7-not-valid-tip::after {
  display: none;
}

/* O Flatsome desenha o aviso como balão (margin-top:-10px) e, dentro de .flex-col,
   como position:absolute, o que o põe por cima do campo. Cache/minificação podem
   mudar a ordem dos CSS, então estas propriedades não dependem da ordem. */
.wpcf7 .bm-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: auto !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  opacity: 1 !important;
  display: flex !important;
  color: var(--bm-danger) !important;
  font-size: .85rem !important;
  line-height: 1.3 !important;
}

.wpcf7 .bm-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip::after {
  display: none !important;
}

.bm-form .wpcf7-not-valid-tip::before,
.bm-form .bm-field-error::before {
  content: '!';
  display: inline-flex;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  background: var(--bm-danger);
  border-radius: 50%;
}

/* Contador de caracteres */
.bm-form .bm-count {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
  text-align: right;
  color: var(--bm-subtle);
  font-variant-numeric: tabular-nums;
}

.bm-form .bm-count.is-near {
  color: #b7791f;
}

/* --------------------------------------------------------------------------
   Opções em cartão (rádio / checkbox escondidos, mas acessíveis)
   -------------------------------------------------------------------------- */

.bm-form .bm-choice {
  position: relative;
  display: block;
  margin: 0;
  font-weight: inherit;
  cursor: pointer;
}

.bm-form .bm-choice > input {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.bm-form .bm-choice__box {
  position: relative;
  display: flex;
  height: 100%;
  min-height: var(--bm-tap);
  background: #fff;
  border: solid 1px var(--bm-field);
  border-radius: var(--bm-r);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.bm-form .bm-choice:hover .bm-choice__box {
  border-color: var(--bm-navy);
  box-shadow: var(--bm-shadow);
}

.bm-form .bm-choice > input:focus-visible + .bm-choice__box {
  border-color: var(--bm-cyan);
  box-shadow: var(--bm-ring);
}

.bm-form .bm-choice > input:checked + .bm-choice__box {
  border-color: var(--bm-navy);
  box-shadow: 0 0 0 1px var(--bm-navy), var(--bm-shadow);
}

/* selo de "escolhido" */
.bm-form .bm-choice--check > input:checked + .bm-choice__box::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%230e2f54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center, var(--bm-grad-cyan);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(20, 65, 114, .2);
}

/* Destaca só o grupo sem resposta (não a etapa inteira) */
.bm-form .bm-step:not([data-bm-final]).has-error .bm-choice__box,
.bm-form .bm-group.has-error .bm-choice__box {
  border-color: var(--bm-danger);
}

/* --------------------------------------------------------------------------
   Opções em linha (segmented) - ex.: Sim / Somente por e-mail / Não
   -------------------------------------------------------------------------- */

.bm-form .bm-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bm-form .bm-segment .bm-choice__box {
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px 14px 52px;
}

/* Círculo de rádio sempre visível: deixa claro que é uma escolha antes de tocar */
.bm-form .bm-segment .bm-choice__box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 16px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: #fff;
  border: solid 2px var(--bm-field);
  border-radius: 50%;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.bm-form .bm-segment .bm-choice > input:checked + .bm-choice__box::before {
  background: var(--bm-navy);
  border-color: var(--bm-navy);
  box-shadow: inset 0 0 0 4px #fff;
}

.bm-form .bm-segment .bm-choice--check > input:checked + .bm-choice__box::after {
  display: none;
}

.bm-form .bm-segment strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bm-ink);
}

.bm-form .bm-segment small {
  display: block;
  margin-top: 2px;
  font-size: .85rem;
  line-height: 1.35;
  color: var(--bm-muted);
}

.bm-form .bm-segment .bm-choice > input:checked + .bm-choice__box {
  background: var(--bm-cyan-50);
}

@media (max-width: 549px) {
  .bm-form .bm-segment {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Checkbox de aceite (pesquisa e CF7 [acceptance])
   -------------------------------------------------------------------------- */

.bm-form .bm-check,
.bm-form .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--bm-text);
  cursor: pointer;
}

.bm-form .wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

.bm-form .bm-check input[type="checkbox"],
.bm-form .wpcf7-acceptance input[type="checkbox"] {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--bm-navy);
  cursor: pointer;
}

.bm-form .bm-check a,
.bm-form .wpcf7-acceptance a {
  color: var(--bm-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bm-cyan-light);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.bm-form .bm-btn,
.bm-form input[type="submit"].bm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: var(--bm-tap);
  margin: 0;
  padding: 0 28px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  border: solid 1px transparent;
  border-radius: var(--bm-pill);
  box-shadow: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}

.bm-form .bm-btn:focus-visible {
  outline: none;
  box-shadow: var(--bm-ring);
}

.bm-form .bm-btn--primary,
.bm-form input[type="submit"].bm-btn--primary {
  color: var(--bm-ink) !important;
  background: var(--bm-grad-cyan);
  /* sem isto o gradiente se repete sob a borda transparente e a ponta parece cortada */
  background-origin: border-box;
}

.bm-form .bm-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(44, 188, 224, .35);
}

.bm-form .bm-btn--ghost {
  color: var(--bm-navy) !important;
  background: transparent;
  border-color: var(--bm-field);
}

.bm-form .bm-btn--ghost:hover {
  background: var(--bm-sky);
  border-color: var(--bm-navy);
}

.bm-form .bm-btn[disabled],
.bm-form .bm-btn.is-loading {
  opacity: .7;
  cursor: progress;
  transform: none;
}

.bm-form .bm-btn.is-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(14, 47, 84, .25);
  border-top-color: var(--bm-ink);
  border-radius: 50%;
  animation: bm-spin .7s linear infinite;
}

@keyframes bm-spin {
  to {
    transform: rotate(360deg);
  }
}

.bm-form .bm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 8px;
}

.bm-form .bm-actions .bm-help {
  margin: 0;
}

/* CF7 coloca o spinner ao lado do botão */
.bm-form .wpcf7-spinner {
  margin: 0 0 0 8px;
}

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */

.bm-form .bm-alert {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: .95rem;
  line-height: 1.45;
  border: solid 1px;
  border-radius: var(--bm-r);
}

.bm-form .bm-alert--error {
  color: #8a2a20;
  background: var(--bm-danger-bg);
  border-color: var(--bm-danger-line);
}

.bm-form .bm-alert--success {
  color: #0e5c3e;
  background: var(--bm-success-bg);
  border-color: var(--bm-success-line);
}

/* Mensagem geral do CF7 (fica fora do .bm-form, por isso o :has) */
.wpcf7 form:has(.bm-form) .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: .95rem;
  line-height: 1.45;
  color: #8a2a20;
  background: #fdf1f0;
  border: solid 1px #f2c4bf;
  border-radius: 12px;
}

.wpcf7 form.sent:has(.bm-form) .wpcf7-response-output,
.wpcf7 form:has(.bm-form) .wpcf7-response-output:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Tela de "enviado"
   -------------------------------------------------------------------------- */

.bm-form .bm-done {
  padding: 40px 24px;
  text-align: center;
  background: linear-gradient(180deg, var(--bm-sky) 0%, #fff 100%);
  border: solid 1px var(--bm-line);
  border-radius: var(--bm-r-lg);
}

.bm-form .bm-done:focus {
  outline: none;
}

.bm-form .bm-done__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none' stroke='%230e2f54' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center, var(--bm-grad-cyan);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(44, 188, 224, .35);
}

.bm-form .bm-done h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bm-ink);
}

.bm-form .bm-done p {
  max-width: 460px;
  margin: 0 auto 20px;
  color: var(--bm-muted);
}

/* Fale conosco: o painel só aparece depois do envio (o CF7 remove o atributo hidden do template) */
.bm-contact:not(.is-sent) > .bm-done,
.bm-contact.is-sent > :not(.bm-done) {
  display: none !important;
}

/* ==========================================================================
   FALE CONOSCO (cartão único, campos lado a lado conforme a largura)
   ========================================================================== */

/* A grade reage à largura do próprio formulário (container query), não da tela:
   funciona igual em coluna estreita, coluna larga ou página inteira. */
.bm-contact {
  container-type: inline-size;
}

.bm-form .bm-card {
  background: #fff;
  border: solid 1px var(--bm-line);
  border-top: 4px solid var(--bm-cyan);
  border-radius: var(--bm-r-lg);
  box-shadow: var(--bm-shadow);
}

.bm-form .bm-part {
  padding: 22px 26px;
}

.bm-form .bm-part + .bm-part {
  border-top: solid 1px var(--bm-line);
}

.bm-form .bm-part__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bm-ink);
}

.bm-form .bm-part__title .bm-num {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  font-size: .78rem;
}

/* Grade de 6 colunas: 1 coluna até 480px de formulário */
.bm-form .bm-grid6 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 16px;
  align-items: start;
}

@container (min-width: 480px) {
  .bm-form .bm-grid6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .bm-form .bm-s2 { grid-column: span 2; }
  .bm-form .bm-s3 { grid-column: span 3; }
  .bm-form .bm-s4 { grid-column: span 4; }
  .bm-form .bm-s6 { grid-column: 1 / -1; }
}

/* Formulário largo: endereço, cidade e UF numa linha só */
@container (min-width: 720px) {
  .bm-form .bm-street { grid-column: span 3; }
  .bm-form .bm-city { grid-column: span 2; }
  .bm-form .bm-uf { grid-column: span 1; }
}

/* Campo opcional que abre com um link (ex.: Empresa) */
.bm-form .bm-reveal .bm-link {
  display: none;
  margin: 0;
  padding: 2px 0;
}

.bm-form .bm-reveal.is-collapsed .bm-link {
  display: inline-flex;
}

.bm-form .bm-reveal.is-collapsed .bm-reveal__body {
  display: none;
}

.bm-form .bm-reveal__body {
  display: block;
  margin: 0;
  font-weight: inherit;
}

/* Rodapé: aceite + botão na mesma linha */
.bm-form .bm-part--footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  background: var(--bm-sky);
  border-radius: 0 0 var(--bm-r-lg) var(--bm-r-lg);
}

.bm-form .bm-consent {
  flex: 1 1 280px;
  min-width: 0;
}

.bm-form .bm-consent .wpcf7-acceptance .wpcf7-list-item label {
  font-size: .88rem;
}

.bm-form .bm-part--footer .wpcf7-spinner {
  display: none;
}

.bm-form .bm-part--footer .submitting .wpcf7-spinner,
.wpcf7 form.submitting .bm-part--footer .wpcf7-spinner {
  display: inline-block;
}

@container (max-width: 479px) {
  .bm-form .bm-part {
    padding: 24px 18px;
  }

  .bm-form .bm-part__title {
    margin-bottom: 18px;
    font-size: 1.1rem;
  }

  .bm-form .bm-grid6 {
    gap: 20px 12px;
  }

  .bm-form .bm-label {
    font-size: .95rem;
  }

  .bm-form .bm-consent .wpcf7-acceptance .wpcf7-list-item label {
    font-size: .95rem;
  }

  /* Cidade e UF dividem a linha mesmo no celular */
  .bm-form .bm-grid6:has(> .bm-uf) {
    grid-template-columns: minmax(0, 1fr) 104px;
  }

  .bm-form .bm-grid6 > .bm-street {
    grid-column: 1 / -1;
  }

  .bm-form .bm-part--footer input[type="submit"].bm-btn {
    width: 100%;
  }
}

/* Página do Fale conosco: o formulário ganha 2/3 da largura e as informações 1/3
   (vale para qualquer linha do Flatsome que tenha o formulário numa coluna). */
@media (min-width: 850px) {
  .row:has(> .col .bm-contact) > .col:has(.bm-contact) {
    flex-basis: 64%;
    max-width: 64%;
  }

  .row:has(> .col .bm-contact) > .col:not(:has(.bm-contact)) {
    flex-basis: 36%;
    max-width: 36%;
  }
}

/* ==========================================================================
   PESQUISA DE SATISFAÇÃO (assistente em etapas)
   ========================================================================== */

.bm-survey {
  max-width: 920px;
  margin: 0 auto;
}

/* Progresso */
.bm-survey .bm-progress {
  margin: 0 0 24px;
}

.bm-survey .bm-progress__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 10px;
  font-size: .85rem;
}

.bm-survey .bm-progress__label {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bm-navy);
}

.bm-survey .bm-progress__time {
  color: var(--bm-subtle);
}

.bm-survey .bm-progress__track {
  height: 6px;
  overflow: hidden;
  background: var(--bm-line);
  border-radius: var(--bm-pill);
}

.bm-survey .bm-progress__fill {
  display: block;
  height: 100%;
  background: var(--bm-grad-cyan);
  border-radius: var(--bm-pill);
  transition: width .35s ease;
}

.bm-survey .bm-progress__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.bm-survey .bm-progress__steps li {
  margin: 0;
}

.bm-survey .bm-progress__steps button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: var(--bm-subtle);
  background: none;
  border: 0;
  box-shadow: none;
  cursor: default;
}

.bm-survey .bm-progress__dot {
  display: inline-flex;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--bm-subtle);
  background: #fff;
  border: solid 1px var(--bm-field);
  border-radius: 50%;
  transition: all .2s ease;
}

.bm-survey .is-current button {
  color: var(--bm-ink);
  font-weight: 600;
}

.bm-survey .is-current .bm-progress__dot {
  color: #fff;
  background: var(--bm-grad-navy);
  border-color: var(--bm-navy);
}

.bm-survey .is-done button {
  color: var(--bm-navy);
  cursor: pointer;
}

.bm-survey .is-done .bm-progress__dot {
  color: var(--bm-ink);
  background: var(--bm-grad-cyan);
  border-color: transparent;
}

/* Etapa */
.bm-survey .bm-step {
  padding: 28px;
  background: #fff;
  border: solid 1px var(--bm-line);
  border-top: 4px solid var(--bm-cyan);
  border-radius: var(--bm-r-lg);
  box-shadow: var(--bm-shadow);
}

/* Sem JavaScript: todas as etapas aparecem uma embaixo da outra */
.bm-survey:not(.is-enhanced) .bm-step {
  margin-bottom: 20px;
}

.bm-survey:not(.is-enhanced) .bm-step__nav [data-bm-next],
.bm-survey:not(.is-enhanced) .bm-step__nav [data-bm-prev],
.bm-survey:not(.is-enhanced) .bm-progress {
  display: none;
}

.bm-survey.is-enhanced .bm-step.is-active {
  animation: bm-in .3s ease both;
}

@keyframes bm-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm-survey.is-enhanced .bm-step.is-active,
  .bm-survey .bm-progress__fill {
    animation: none;
    transition: none;
  }
}

.bm-survey .bm-step__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: solid 1px var(--bm-line);
}

.bm-survey .bm-step__nav .bm-btn--primary {
  margin-left: auto;
}

.bm-survey .bm-group {
  margin-top: 26px;
}

.bm-survey .bm-group:first-of-type {
  margin-top: 0;
}

.bm-survey .bm-group__title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bm-ink);
}

/* Busca de unidade */
.bm-survey .bm-search {
  position: relative;
  margin-bottom: 16px;
}

.bm-survey .bm-search input {
  padding-left: 44px;
  border-radius: var(--bm-pill);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23144172' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;
}

/* Unidades */
.bm-survey .bm-units {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.bm-survey .bm-unit .bm-choice__box {
  flex-direction: column;
  overflow: hidden;
}

.bm-survey .bm-unit__img {
  display: block;
  height: 120px;
  overflow: hidden;
  background: var(--bm-grad-navy);
}

.bm-survey .bm-unit__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.bm-survey .bm-unit:hover .bm-unit__img img {
  transform: scale(1.04);
}

.bm-survey .bm-unit__body {
  display: block;
  padding: 14px 16px 16px;
}

.bm-survey .bm-unit__name {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bm-ink);
}

.bm-survey .bm-unit__city {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 9px;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bm-navy);
  border: solid 1px var(--bm-cyan-light);
  border-radius: 5px;
}

.bm-survey .bm-unit > input:checked + .bm-choice__box {
  background: var(--bm-grad-navy);
}

.bm-survey .bm-unit > input:checked + .bm-choice__box .bm-unit__name {
  color: #fff;
}

.bm-survey .bm-unit > input:checked + .bm-choice__box .bm-unit__city {
  color: var(--bm-cyan-light);
}

.bm-survey .bm-empty {
  padding: 24px 12px;
  margin: 0;
  text-align: center;
  color: var(--bm-muted);
}

@media (max-width: 549px) {
  .bm-survey .bm-units {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .bm-survey .bm-unit .bm-choice__box {
    flex-direction: row;
    align-items: center;
    padding-right: 44px;
  }

  .bm-survey .bm-unit__img {
    flex: 0 0 84px;
    width: 84px;
    height: 72px;
    margin: 8px 0 8px 8px;
    border-radius: var(--bm-r-sm);
  }

  .bm-survey .bm-unit__body {
    padding: 10px 14px;
  }

  .bm-survey .bm-choice--check > input:checked + .bm-choice__box::after {
    top: 50%;
    margin-top: -12px;
  }
}

/* Satisfação (rostos) */
.bm-survey .bm-faces {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.bm-survey .bm-face .bm-choice__box {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 10px 16px;
  text-align: center;
}

.bm-survey .bm-face img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: grayscale(.35);
  transition: transform .2s ease, filter .2s ease;
}

.bm-survey .bm-face__label {
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bm-text);
}

.bm-survey .bm-face:hover img {
  filter: none;
  transform: scale(1.06);
}

.bm-survey .bm-face > input:checked + .bm-choice__box {
  background: color-mix(in srgb, var(--bm-face) 16%, #fff);
  border-color: var(--bm-face);
  box-shadow: 0 0 0 1px var(--bm-face), var(--bm-shadow);
}

.bm-survey .bm-face > input:checked + .bm-choice__box img {
  filter: none;
  transform: scale(1.1);
}

.bm-survey .bm-face > input:checked + .bm-choice__box .bm-face__label {
  font-weight: 700;
  color: var(--bm-ink);
}

@media (max-width: 549px) {
  .bm-survey .bm-faces {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .bm-survey .bm-face .bm-choice__box {
    flex-direction: row;
    gap: 14px;
    padding: 10px 44px 10px 14px;
    text-align: left;
  }

  .bm-survey .bm-face img {
    width: 40px;
    height: 40px;
  }

  .bm-survey .bm-face__label {
    font-size: 1rem;
  }
}

/* Recomendação 1 a 10 */
.bm-survey .bm-scale {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}

.bm-survey .bm-scale .bm-choice__box {
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bm-ink);
  font-variant-numeric: tabular-nums;
}

.bm-survey .bm-scale .bm-choice__box::before {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 6px;
  left: 10px;
  height: 3px;
  border-radius: var(--bm-pill);
  background: var(--bm-zone);
  opacity: .55;
}

.bm-survey .bm-scale [data-zone="low"] {
  --bm-zone: #e6483d;
}

.bm-survey .bm-scale [data-zone="mid"] {
  --bm-zone: #f1893f;
}

.bm-survey .bm-scale [data-zone="high"] {
  --bm-zone: #74dd1d;
}

.bm-survey .bm-scale .bm-choice > input:checked + .bm-choice__box {
  color: #fff;
  background: var(--bm-grad-navy);
  transform: translateY(-2px);
}

.bm-survey .bm-scale .bm-choice > input:checked + .bm-choice__box::before {
  opacity: 1;
}

.bm-survey .bm-scale__legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: .85rem;
  color: var(--bm-muted);
}

@media (max-width: 549px) {
  .bm-survey .bm-scale {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .bm-survey .bm-scale .bm-choice__box {
    min-height: 52px;
  }
}

/* Etapa final: retorno | comentário lado a lado no desktop */
.bm-survey .bm-final {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  align-items: stretch;
}

.bm-survey .bm-final > .bm-group {
  margin-top: 0;
}

.bm-survey .bm-final__comment {
  display: flex;
  flex-direction: column;
}

.bm-survey .bm-final__comment textarea {
  flex: 1 1 auto;
  min-height: 150px;
}

.bm-survey label.bm-group__title {
  display: block;
}

/* Opções de retorno empilhadas e compactas */
.bm-form .bm-segment--stack {
  grid-template-columns: 1fr;
  gap: 10px;
}

.bm-form .bm-segment--stack .bm-choice__box {
  min-height: 0;
  padding: 12px 16px 12px 52px;
}

/* 3 campos numa linha */
.bm-form .bm-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 849px) {
  /* Um bloco embaixo do outro, separados por divisória para não parecer um bloco só */
  .bm-survey .bm-final {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bm-survey .bm-final > .bm-final__comment {
    margin-top: 26px;
    padding-top: 24px;
    border-top: solid 1px var(--bm-line);
  }

  .bm-survey .bm-final__comment textarea {
    min-height: 120px;
  }

  .bm-form .bm-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bm-form .bm-grid--3 > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 549px) {
  .bm-form .bm-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Link discreto ("Quero me identificar") */
.bm-form .bm-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  margin: 16px 0 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bm-navy);
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--bm-cyan-light);
  text-underline-offset: 4px;
}

.bm-form .bm-link:focus-visible {
  outline: none;
  box-shadow: var(--bm-ring);
  border-radius: 4px;
}

/* Rodapé final: aceite + botões na mesma linha */
.bm-survey .bm-step__nav--final .bm-step__agree {
  flex: 1 1 300px;
  margin-right: auto;
  font-size: .9rem;
}

.bm-survey .bm-step__nav--final .bm-btn--primary {
  margin-left: 0;
}

/* Dados pessoais: destaque quando a pessoa pede retorno */
.bm-survey .bm-identity {
  margin-top: 20px;
  padding: 18px;
  background: var(--bm-sky);
  border: solid 1px var(--bm-line);
  border-radius: var(--bm-r);
}

.bm-survey[data-reply="Sim"] .bm-identity,
.bm-survey[data-reply="Somente por e-mail"] .bm-identity {
  background: var(--bm-cyan-50);
  border-color: var(--bm-cyan-light);
}

.bm-survey .bm-identity .bm-help {
  margin-bottom: 14px;
}

/* Etapas no celular */
@media (max-width: 549px) {
  .bm-survey .bm-step {
    padding: 24px 18px 0;
    border-radius: var(--bm-r);
  }

  .bm-form legend,
  .bm-form .bm-title {
    font-size: 1.25rem;
  }

  .bm-form .bm-help {
    margin-bottom: 24px;
  }

  .bm-survey .bm-group__title {
    margin-bottom: 14px;
  }

  .bm-survey .bm-identity {
    padding: 18px 16px;
  }

  .bm-survey .bm-progress__name {
    display: none;
  }

  .bm-survey .bm-progress__steps {
    display: flex;
    gap: 6px;
  }

  .bm-survey .bm-progress__steps li {
    flex: 0 0 auto;
  }

  /* Navegação sempre visível, fixa no rodapé do cartão */
  .bm-survey.is-enhanced .bm-step__nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 24px -18px 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    border-top: solid 1px var(--bm-line);
    border-radius: 0 0 var(--bm-r) var(--bm-r);
  }

  .bm-survey .bm-step__nav .bm-btn {
    flex: 1 1 0;
    padding: 0 16px;
  }

  .bm-survey .bm-step__nav .bm-btn--ghost {
    flex: 0 0 auto;
  }

  /* Na etapa final o aceite ocupa a linha de cima e a barra não fica fixa (ficaria alta demais) */
  .bm-survey.is-enhanced .bm-step__nav--final {
    position: static;
    background: none;
    backdrop-filter: none;
  }

  /* Aceite em caixa própria, separado dos botões */
  .bm-survey .bm-step__nav--final {
    gap: 14px 10px;
    padding-top: 18px;
  }

  .bm-survey .bm-step__nav--final .bm-step__agree {
    flex: 1 1 100%;
    margin: 0 0 4px;
    padding: 14px;
    font-size: .95rem;
    background: var(--bm-sky);
    border: solid 1px var(--bm-line);
    border-radius: var(--bm-r);
  }

  .bm-form .bm-section {
    padding: 18px 16px;
  }

  .bm-form .bm-actions .bm-btn,
  .bm-form .bm-actions input[type="submit"].bm-btn {
    width: 100%;
  }
}