/**
 * @file
 * Restyle DS (vSHIFT FASE 2) COMPARTILHADO dos webforms legados (agendamentos,
 * encaminhamento-terapia-celular, telemedicina, coleta-domiciliar…).
 * Escopado no wrapper `.ac-agend` + na classe `.ac-agend-form` (ambos injetados
 * no form_alter via o mapa `_mahi_facelift_v2_form_restyle_map()`). Anexado
 * depois da CSS global.
 *
 * Tokens: Verde/Nobre #033936 · Verde/Camargo #0E5236 · Verde Menta #D7F9D3
 * · Amarelo claro #FFD16C · placeholder #B8B8B8 · body #404040 · title #242424
 * · input bg #F6F7F9 · border #E2E5E9 · danger #F70B3A.
 * Fontes: Raleway (títulos/labels) · Arial (corpo/inputs).
 */

/* ── Seção IGUAL ao `ac-section` das páginas_v2 ─────────────────────── */
/* Section full-width (100% da tela) full-bleed, com overflow-x:clip pra
 * recortar a mancha sem gerar scroll horizontal. Mesma técnica do ac-section. */
.ac-agend {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow-x: clip;
  box-sizing: border-box;
}

/* ⚠️ Ambiente vs local: pro VISITANTE (`.user-guest`) o CSS legado
 * (`style-geral-accamargo.css`) dá `#main-wrapper { margin:0 5%; overflow:hidden }`
 * — wrapper de só ~90vw que RECORTA o full-bleed 100vw da seção (a mancha some
 * na borda do grid). Logado (local) a regra não casa, por isso local≠ambiente.
 * Libera o overflow SÓ nas páginas de form (`:has(.ac-agend)` + este CSS só
 * carrega nos webforms restilizados) → não reintroduz scroll nas demais páginas
 * de visitante. A própria `.ac-agend` (overflow-x:clip) contém a mancha. */
.user-guest #main-wrapper:has(.ac-agend) {
  overflow: visible;
}

/* Mancha decorativa verde (0.3 no próprio SVG): layer full-bleed ancorado à
 * direita da tela, atrás do conteúdo (igual ac-section__bg-mancha). */
.ac-agend::before {
  content: "";
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-34%);
  width: 100%;
  height: 100%;
  background: url("../images/mancha-agendamento.svg?v=2") no-repeat right bottom;
  background-size: 600px auto;
  pointer-events: none;
  z-index: 0;
}

/* Inner IGUAL ao `.ac-section__inner`: 1104px centrado + 16px (tokens do site
 * chrome, os mesmos do header/footer). */
.ac-agend__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px !important;
  max-width: var(--container-max, 1104px);
  margin-inline: auto;
  /* Gutter lateral (16px, igual ao site chrome): a seção é full-bleed (100vw)
   * e o full-bleed `calc(50% - 50vw)` desloca ~½ da barra de rolagem pra
   * esquerda; sem padding aqui o card/texto encostam (e vazam) na borda em
   * telas < 1104px. O padding protege o conteúdo. */
  padding-inline: 16px;
  padding-block: 0 80px;
  box-sizing: border-box;
}

#block-mahi-facelift-page-title .block-content {
  max-width: var(--container-max, 1104px);
  margin-inline: auto;
  padding-inline: 16px;
  box-sizing: border-box;
}
/* Mobile: o `#main-wrapper` legado vira `max-width:90%` (inset ~5vw), então o
 * gutter de 16px do desktop EMPILHA nesse inset e joga o título ~18px à direita
 * do form (que full-bleeda pra 16px da viewport). Zera o gutter aqui — o inset
 * do wrapper (~5vw) já dá o respiro e alinha com a coluna do form. */
@media (max-width: 767px) {
  #block-mahi-facelift-page-title .block-content {
    padding-inline: 0;
  }
}

.ac-agend__aside {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ac-agend__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ac-agend__title {
  margin: 0;
  font-family: Raleway, Arial, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: #242424;
}

.ac-agend__phone {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #404040;
}

.ac-agend__desc {
  margin: 5px 0 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #404040;
}

.ac-agend__formcol {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 900px) {
  .ac-agend__inner {
    gap: 28px;
  }
  .ac-agend__title {
    font-size: 24px;
  }
  .ac-agend::before {
    right: -160px;
    opacity: .6;
  }
}

@media (max-width: 767px) {
  .ac-agend__inner {
    padding-block: 0 48px;
  }
  .ac-agend::before {
    display: none;
  }
}

/* ── Card do formulário (header verde + corpo branco) ───────────────── */
.ac-agend-form {
  --ac-verde-nobre: #033936;
  --ac-verde-camargo: #0E5236;
  --ac-menta: #D7F9D3;
  --ac-amarelo: #FFD16C;
  --ac-body: #404040;
  --ac-title: #242424;
  --ac-placeholder: #B8B8B8;
  --ac-input-bg: #F6F7F9;
  --ac-border: #E2E5E9;
  --ac-danger: #F70B3A;

  width: 100%;
  margin-inline: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 16px -2px rgba(0, 0, 0, .08);
  overflow: hidden;
  font-family: Arial, sans-serif;
  color: var(--ac-body);
  box-sizing: border-box;
}

/* Corpo (wizard-page container) e footer de ações ganham o padding;
 * o header verde do stepper é full-bleed. Só a PÁGINA do wizard (`div`) —
 * NÃO os `details` top-level (seções de staff), senão viram bloco solto. */
.ac-agend-form > div[data-webform-key] {
  padding: 32px 32px 8px;
}
.ac-agend-form > .webform-actions,
.ac-agend-form > .form-actions {
  padding: 16px;
  margin-top: 8px;
}

/* Form de PÁGINA ÚNICA (sem wizard): os campos são filhos DIRETOS do <form>,
 * não há o div[data-webform-key] que carrega o padding do corpo. Detecta
 * "sem wizard" via :not(:has(.webform-progress)) e dá o respiro no topo do
 * form + padding horizontal em cada campo (o footer full-bleed segue com
 * padding próprio, edge-to-edge). Não afeta wizard (que tem .webform-progress). */
.ac-agend-form:not(:has(.webform-progress)) {
  padding-top: 32px;
}
.ac-agend-form:not(:has(.webform-progress)) > .js-form-item {
  padding-inline: 32px;
}

/* Seções top-level em `details` (controles de staff: Resposta Médica, Controle
 * central/triagem/tboard) — só visíveis a usuário privilegiado. Alinha dentro
 * do grid do card (não full-bleed) em vez de herdar os 32px de página. */
.ac-agend-form > details[data-webform-key] {
  margin: 0 32px 20px;
}

/* Página de sucesso (webform_confirmation) — sem o container [data-webform-key],
 * então o padding do corpo não pega; aplica direto na mensagem de confirmação. */
.ac-agend-form .webform-confirmation {
  padding: 32px;
}

/* Na tela de sucesso: esconde o aside (título/texto/imagem) e deixa só a
 * mensagem de confirmação, centralizada. */
.ac-agend__inner:has([data-webform-wizard-current-page="webform_confirmation"]) {
  justify-content: center;
}
.ac-agend__inner:has([data-webform-wizard-current-page="webform_confirmation"]) .ac-agend__aside {
  display: none;
}
/* ...e remove a mancha de fundo na tela de sucesso */
.ac-agend:has([data-webform-wizard-current-page="webform_confirmation"])::before {
  display: none;
}

@media (max-width: 768px) {
  .ac-agend-form > div[data-webform-key] {
    padding: 20px 20px 4px;
  }
  .ac-agend-form > details[data-webform-key] {
    margin: 0 20px 16px;
  }
  .ac-agend-form > .webform-actions,
  .ac-agend-form > .form-actions {
    padding: 12px 20px 20px;
  }
  .ac-agend-form:not(:has(.webform-progress)) {
    padding-top: 20px;
  }
  .ac-agend-form:not(:has(.webform-progress)) > .js-form-item {
    padding-inline: 20px;
  }
}

/* ── Stepper: header verde-nobre full-width no topo do card ─────────── */
.ac-agend-form .webform-progress {
  background: var(--ac-verde-nobre);
  padding: 22px 40px;
  margin: 0;
}

.ac-agend-form .progress-tracker {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ac-agend-form .progress-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* O círculo visível é `.progress-marker::before` (número via data-text) */
.ac-agend-form .progress-marker {
  position: relative;
  z-index: 1;
  display: flex;
}

.ac-agend-form .progress-step .progress-marker::before {
  content: attr(data-text);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 32px !important;
  border-radius: 36px !important;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, .12);
  border: 0;
  color: rgba(255, 255, 255, .75);
  font-family: Raleway, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
}

/* Mata a linha conectora DEFAULT do progress-tracker (o `.progress-marker::after`
 * cinza), que duplicava com a minha e criava o "aro a mais" nos steps 1 e 2. */
.ac-agend-form .progress-marker::after {
  display: none !important;
}

/* Linha conectora centralizada no meio do círculo (32px → top 16px) */
.ac-agend-form .progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 16px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 2px;
  background: rgba(255, 255, 255, .3);
}

/* Etapa ativa/concluída = círculo amarelo, número escuro */
.ac-agend-form .progress-step.is-active .progress-marker::before,
.ac-agend-form .progress-step.is-complete .progress-marker::before,
.ac-agend-form .progress-step.is-progress .progress-marker::before {
  background-color: var(--ac-amarelo);
  border-color: var(--ac-amarelo);
  color: var(--ac-title);
}

/* Hover: em vez do azul default (ou do verde-nobre que sumia a bolinha),
 * um realce sutil — bolinha mais clara + número/rótulo em branco cheio. */
.ac-agend-form .progress-step:hover .progress-marker::before {
  background-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.ac-agend-form .progress-step:hover .progress-title {
  color: #fff;
}
/* Ativa/concluída mantêm o amarelo (número escuro) no hover. */
.ac-agend-form .progress-step.is-active:hover .progress-marker::before,
.ac-agend-form .progress-step.is-complete:hover .progress-marker::before,
.ac-agend-form .progress-step.is-progress:hover .progress-marker::before {
  background-color: var(--ac-amarelo);
  color: var(--ac-title);
}

/* Título de cada etapa: rótulo discreto sob a bolinha (desktop). */
.ac-agend-form .progress-text {
  margin-top: 10px;
  max-width: 14ch;
  text-align: center;
}
.ac-agend-form .progress-title {
  font-family: Raleway, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .5);
  transition: color .15s ease;
}
/* Etapa atual/concluída em destaque (branco cheio) */
.ac-agend-form .progress-step.is-active .progress-title,
.ac-agend-form .progress-step.is-complete .progress-title,
.ac-agend-form .progress-step.is-progress .progress-title {
  color: #fff;
}

/* Mobile: 5 rótulos não cabem sem poluir → volta pro modo só-números
   (esconde o texto mantendo no DOM p/ a11y). */
@media (max-width: 768px) {
  .ac-agend-form .progress-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }
}

/* ── Textos introdutórios (processed_text / hb-text) ────────────────── */
.ac-agend-form .hb-text {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ac-body);
  margin: 0 0 12px;
}

/* Remove o bloco de texto introdutório do AGENDAMENTOS (Central de
 * Relacionamento + "Você pode solicitar…") — foi movido pro aside. Escopado
 * SÓ no agendamentos (classe automática do webform): outros forms têm um
 * `processed_text` com o MESMO id `#edit-processed-text` que NÃO deve sumir
 * (ex.: o texto do "Paciente" no encaminhamento é condicional via #states). */
.webform-submission-agendamentos-add-form #edit-processed-text {
  display: none;
}

/* ── Labels e fieldset legends ──────────────────────────────────────── */
.ac-agend-form label,
.ac-agend-form .fieldset-legend {
  font-family: Raleway, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  /* color: var(--ac-title); */
  display: inline-block;
}

.ac-agend-form .form-required::after {
  color: var(--ac-danger);
}

/* ── Inputs de texto / e-mail / telefone / select / textarea ────────── */
.ac-agend-form input[type="text"],
.ac-agend-form input[type="email"],
.ac-agend-form input[type="tel"],
.ac-agend-form input[type="date"],
.ac-agend-form input[type="number"],
.ac-agend-form textarea,
.ac-agend-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ac-title);
  background: var(--ac-input-bg);
  border: 1px solid var(--ac-border);
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ac-agend-form textarea {
  min-height: 120px;
  resize: vertical;
}

.ac-agend-form input::placeholder,
.ac-agend-form textarea::placeholder {
  color: var(--ac-placeholder);
}

.ac-agend-form input:focus,
.ac-agend-form textarea:focus,
.ac-agend-form select:focus {
  outline: none;
  border-color: var(--ac-verde-camargo);
  box-shadow: 0 0 0 3px rgba(14, 82, 54, .12);
}

/* iOS Safari: o input[type=date] tem chrome nativo (`-webkit-appearance`) que
 * (1) CENTRALIZA o valor e (2) adiciona um inset interno ESQUERDO próprio, que
 * soma em cima do nosso `padding:13px 14px` → o valor fica mais indentado que os
 * demais campos ("não respeita o padding"). Zerar só os pseudos não tira esse
 * inset nativo. `appearance:none` remove o chrome → o input passa a respeitar o
 * padding como um input de texto normal; o picker nativo segue abrindo no toque
 * (comportamento OK no iOS moderno). Pseudos alinham o valor à esquerda e zeram
 * as margens/padding internos. `min-height` protege contra colapso de altura. */
.ac-agend-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}
.ac-agend-form input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
.ac-agend-form input[type="date"]::-webkit-datetime-edit {
  text-align: left;
  padding: 0;
}
.ac-agend-form input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

/* Estado de erro/validação (ex.: Nome completo obrigatório) */
.ac-agend-form input.error,
.ac-agend-form .form-item--error input,
.ac-agend-form input[aria-invalid="true"] {
  border-color: var(--ac-danger);
}
.ac-agend-form .form-item--error label,
.ac-agend-form label.error {
  color: var(--ac-danger);
}

/* select2 (convênios/plano) — alinhar altura/estilo ao input */
.ac-agend-form .select2-container--default .select2-selection--single {
  height: 48px;
  background: var(--ac-input-bg);
  border: 1px solid var(--ac-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
}
.ac-agend-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  padding-left: 14px;
  color: var(--ac-title);
}
.ac-agend-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
}

/* Espaçamento vertical entre campos */
.ac-agend-form .form-item {
  margin-block: 0 20px;
}

/* Descrição/erro sob o campo */
.ac-agend-form .form-item .description,
.ac-agend-form .form-item--error-message {
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
}

/* ── Radios e checkboxes (DS): pílula com ícone circle → check ──────────
 * O legado esconde o <input> e usa label.option como pílula (borda cinza) +
 * classe .ac-checked (JS, no .form-item) = fundo verde. Aqui reestilizamos pro
 * visual DS: ícone de círculo (cinza) que vira check-circle (verde) quando
 * selecionado, fundo Verde/Menta e texto verde. Cobre radios (.js-webform-radios)
 * E TODOS os checkboxes — single (.js-form-type-checkbox solto) e itens de
 * checkbox plural (que também são .js-form-type-checkbox), inclusive
 * consentimento (o texto longo vai na DESCRIÇÃO, não no label → o label é curto
 * e a pílula funciona). O estado marcado do checkbox usa input:checked + label
 * (o .ac-checked/:has resolvem os radios). Vale em TODOS os forms restilizados. */
.ac-agend-form :is(.js-webform-radios, .js-form-type-checkbox) label.option {
  display: inline-flex;
  align-items: center;
  border: 0;
  /* 8px antes do ícone (esquerda) + 16px depois do texto (direita): o fundo
   * verde/menta alinha com o label do campo (não ultrapassa a esquerda) e o
   * ícone ganha só um respiro interno de 8px. */
  padding: 10px 16px 10px 8px;
  border-radius: 999px;
  background: transparent;
  color: var(--ac-body);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
/* Ícone (círculo vazio cinza por padrão) via ::before */
.ac-agend-form :is(.js-webform-radios, .js-form-type-checkbox) label.option::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-inline-end: 8px;
  background: no-repeat center / 20px 20px
    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 18.3332C14.6024 18.3332 18.3334 14.6022 18.3334 9.99984C18.3334 5.39746 14.6024 1.6665 10 1.6665C5.39765 1.6665 1.66669 5.39746 1.66669 9.99984C1.66669 14.6022 5.39765 18.3332 10 18.3332Z' stroke='%23B8B8B8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Selecionado: fundo Verde/Menta + texto verde + ícone check-circle verde.
 * Cobre os 3 caminhos (JS .ac-checked, :has(:checked), input+label). */
.ac-agend-form :is(.js-webform-radios, .js-form-type-checkbox) .ac-checked label.option,
.ac-agend-form :is(.js-webform-radios, .js-form-type-checkbox) .form-item:has(input:checked) label.option,
.ac-agend-form :is(.js-webform-radios, .js-form-type-checkbox) input:checked + label.option {
  background: var(--ac-menta) !important;
  color: var(--ac-verde-camargo) !important;
  border: 0 !important;
}
.ac-agend-form :is(.js-webform-radios, .js-form-type-checkbox) .ac-checked label.option::before,
.ac-agend-form :is(.js-webform-radios, .js-form-type-checkbox) .form-item:has(input:checked) label.option::before,
.ac-agend-form :is(.js-webform-radios, .js-form-type-checkbox) input:checked + label.option::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.50002 9.99984L9.16669 11.6665L12.5 8.33317M18.3334 9.99984C18.3334 14.6022 14.6024 18.3332 10 18.3332C5.39765 18.3332 1.66669 14.6022 1.66669 9.99984C1.66669 5.39746 5.39765 1.6665 10 1.6665C14.6024 1.6665 18.3334 5.39746 18.3334 9.99984Z' stroke='%230E5236' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* Container de ações: flex row (Voltar à esquerda, Continuar à direita).
 * O botão de UPLOAD (carteirinha) NÃO é .webform-button--* → segue o legado. */
.ac-agend-form .webform-actions,
.ac-agend-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px !important;
  border-top: 1px solid #D9D9D9;
  background-color: #F6F7F9;
}

/* ── Botões de navegação (DS) ─────────────────────────────────────────
 * "Continuar"/"Enviar" = pílula Verde/Nobre com chevron-right branco (SVG).
 * "Voltar" = ghost com chevron-left escuro (SVG). Chevrons via background-image
 * porque <input type=submit> não aceita ::before/::after. Sempre à direita o
 * next (margin-left:auto) mesmo quando não há Voltar (1ª página). */
.ac-agend-form .webform-button--next,
.ac-agend-form .webform-button--submit,
.ac-agend-form .webform-button--previous {
  appearance: none;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: Raleway, Arial, sans-serif;
  font-weight: 700 !important;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  background-repeat: no-repeat;
}

/* Continuar / Enviar — filled Verde/Nobre + chevron-right branco à direita */
.ac-agend-form .webform-button--next,
.ac-agend-form .webform-button--submit {
  margin-left: auto;
  padding: 14px 52px 14px 28px !important;
  color: #fff !important;
  background-color: var(--ac-verde-nobre) !important;
  background-position: right 24px center;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ac-agend-form .webform-button--next:hover,
.ac-agend-form .webform-button--submit:hover {
  background-color: #052b28 !important;
  color: #fff !important;
}

/* Voltar — ghost + chevron-left escuro à esquerda */
.ac-agend-form .webform-button--previous {
  padding: 14px 20px 14px 44px !important;
  color: var(--ac-title) !important;
  background-color: transparent !important;
  background-position: left 16px center;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 6l-6 6 6 6' stroke='%23242424' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ac-agend-form .webform-button--previous:hover {
  background-color: rgba(3, 57, 54, .06) !important;
  color: var(--ac-title) !important;
}

/* ── Container de convênio / anexos / fieldsets ─────────────────────── */
.ac-agend-form .form-composite,
.ac-agend-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 10px;
}