/* ============================================================================
   /agendar — CSS enxuto e independente.

   Duplicamos aqui só as variáveis de marca (cor/fonte) usadas por esta
   página, em vez de importar assets/css/main.css. Isso é intencional: a
   página precisa abrir rápido em 3G/4G vinda de um deep link externo
   (Google Maps), sem depender do peso/CSS do site institucional carregar.
   ============================================================================ */

:root {
  --color-primary: #8F7445;
  --color-primary-dark: #6F5934;
  --color-bg: #FDFDFD;
  --color-bg-alt: #F7F3ED;
  --color-text: #1A1A1A;
  --color-text-soft: #4A4A4A;
  --color-text-muted: #707070;
  --color-border: #E6DDD0;
  --color-error: #B3261E;
  --color-error-bg: #FBEAEA;
  --color-success: #3F6B3F;
  --color-success-bg: #EAF3EA;
  --color-info-bg: #EEF2F7;
  --color-info-text: #2C4A63;

  --font-title: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --radius: cantos de elementos "de entrada" (inputs, chips, cards menores).
     --radius-lg: cards de etapa e o card de destaque do link de reserva.
     --radius-btn: CTAs principais — mesma faixa (8-10px) já usada no .btn-lg
     do site institucional (assets/css/main.css), para manter a linguagem
     visual coerente mesmo sem importar aquele arquivo. */
  --radius: 8px;
  --radius-lg: 16px;
  --radius-btn: 10px;
  --shadow-card: 0 4px 16px rgba(35, 26, 10, 0.07);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--font-title); font-weight: 600; margin: 0 0 0.4rem; color: var(--color-text); }
h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; }
p { margin: 0 0 0.6rem; }

.mini-header {
  padding: 1.1rem 1.25rem 1.35rem;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mini-logo {
  display: inline-flex;
  text-decoration: none;
}
.mini-logo img {
  height: 44px;
  width: auto;
  display: block;
}

/* ---- Faixa "exclusivo para mulheres" (reforço, ver comentário no HTML) ----
   Antes era um selinho discreto dentro do header; agora é a primeira coisa
   visível da página: faixa full-bleed (encosta nas duas bordas da tela),
   fundo com a cor mais forte da paleta (--color-primary-dark) e texto claro
   em cima — mesma paleta de sempre, nenhuma cor nova. Fica ANTES de
   .mini-header no HTML (elemento de nível de página, não filho do header),
   então não corre risco nenhum de reintroduzir o bug antigo de elemento
   inline grudado ao lado do logo — nem é descendente de .mini-header.
   display:block + text-align:center + line-height enxuto mantêm a altura
   baixa (1 linha na maioria das telas, no máximo 2 em telas muito estreitas)
   para não empurrar o formulário para baixo da dobra no mobile. */
.destaque-publico {
  display: block;
  margin: 0;
  padding: 0.55rem 1rem;
  background: var(--color-primary-dark);
  color: #fff;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.agendar-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.lead { color: var(--color-text-soft); font-size: 0.95rem; margin-bottom: 1.5rem; }

.muted { color: var(--color-text-muted); font-size: 0.85rem; }

/* ---- Indicador de progresso ----
   O "acender" de cada segmento é puramente CSS: reage ao atributo "hidden"
   que o agendar.js já alterna em cada .step. Cada segmento acende quando a
   etapa correspondente é alcançada pela primeira vez (e continua aceso
   depois disso, mesmo se a cliente voltar a uma etapa anterior — ver
   irParaEtapa em agendar.js); a etapa 1 já nasce acesa porque #step-servico
   é a única sempre visível de início. O cursor de clique (mais abaixo)
   também usa esses mesmos seletores para saber quais etapas já são
   navegáveis de volta. */
.progresso {
  display: flex;
  list-style: none;
  gap: 0.4rem;
  margin: 0 0 1.75rem;
  padding: 0;
}
.progresso-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.progresso-barra {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--color-border);
  transition: background 0.25s ease;
}
.progresso-nome {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color 0.25s ease;
}

.progresso-item[data-step="1"] .progresso-barra { background: var(--color-primary); }
.progresso-item[data-step="1"] .progresso-nome { color: var(--color-primary-dark); font-weight: 600; }

body:has(#step-data:not([hidden])) .progresso-item[data-step="2"] .progresso-barra { background: var(--color-primary); }
body:has(#step-data:not([hidden])) .progresso-item[data-step="2"] .progresso-nome { color: var(--color-primary-dark); font-weight: 600; }

body:has(#step-dados:not([hidden])) .progresso-item[data-step="3"] .progresso-barra { background: var(--color-primary); }
body:has(#step-dados:not([hidden])) .progresso-item[data-step="3"] .progresso-nome { color: var(--color-primary-dark); font-weight: 600; }

/* Na tela de sucesso todas as etapas voltam a ficar "hidden" (o JS some com
   elas), então o indicador de progresso deixaria de fazer sentido — esconde
   a trilha inteira quando a confirmação é exibida. */
body:has(#step-sucesso:not([hidden])) #progressoEtapas { display: none; }

/* Etapas já alcançadas ficam clicáveis (agendar.js permite voltar a uma
   etapa anterior a partir do indicador de progresso, já que o carrossel
   acima só mostra uma etapa por vez e a antiga navegação "role a página e
   toque em outro serviço" deixou de existir). Reaproveita o mesmo :has()
   usado para acender a barrinha, então só ganham o cursor de link as etapas
   realmente já visitadas. */
body:has(#step-data:not([hidden])) .progresso-item[data-step="1"],
body:has(#step-data:not([hidden])) .progresso-item[data-step="2"],
body:has(#step-dados:not([hidden])) .progresso-item[data-step="1"],
body:has(#step-dados:not([hidden])) .progresso-item[data-step="2"],
body:has(#step-dados:not([hidden])) .progresso-item[data-step="3"] {
  cursor: pointer;
}

/* ---- Feedback de estado (loading / erro / sucesso / info) ---- */
.feedback {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.feedback.loading { background: var(--color-bg); color: #6B5B3D; }
.feedback.error { background: var(--color-error-bg); color: var(--color-error); }
.feedback.success { background: var(--color-success-bg); color: var(--color-success); }
.feedback.info { background: var(--color-info-bg); color: var(--color-info-text); }

/* ---- Transição horizontal entre etapas ----
   O container abaixo troca a etapa visível com um deslize lateral (efeito
   "carrossel"), em vez do antigo empilhamento vertical por "hidden" puro.
   Fora de uma transição, .steps-viewport fica em fluxo normal (altura
   automática, sem overflow escondido) — só ganha altura fixa em pixels e
   overflow:hidden pelo tempo curto em que DUAS etapas (a que sai e a que
   entra) ficam simultaneamente fora de [hidden]/display:none, para que elas
   se sobreponham no lugar em vez de empurrar o layout/scroll da página
   (classe .is-animating, controlada por agendar.js). */
.steps-viewport {
  position: relative;
}
.steps-viewport.is-animating {
  overflow: hidden;
}
.steps-viewport.is-animating .step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 0;
}

/* ---- Etapas: cada uma é um card sutil sobre o fundo --color-bg-alt da
   página, em vez da antiga divisão por borda inferior — dá mais estrutura
   visual sem pesar (uma única sombra suave, sem camadas). ---- */
.step {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.3rem 1.25rem 1.5rem;
  margin-bottom: 1.1rem;
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Etapa já concluída/ultrapassada: continua com "hidden" removido (o
   indicador de progresso depende disso para permanecer aceso), mas some
   visualmente do fluxo — o deslize propriamente dito (classes abaixo) já
   terminou quando esta classe é aplicada. */
.step.step-parked {
  display: none;
}

/* #step-servico é a única etapa que convive com a barra fixa de resumo
   (#servicosSelecionadosBox, mais abaixo neste arquivo) — reserva espaço
   extra no rodapé para o último serviço da lista não ficar escondido atrás
   dela. --altura-barra-resumo é escrita pelo agendar.js (0px quando a
   barra está oculta) a cada mudança na seleção, então o respiro acompanha
   a altura real dela mesmo com muitos serviços/chips selecionados. */
#step-servico {
  padding-bottom: calc(1.5rem + var(--altura-barra-resumo, 0px));
}

/* Estado inicial da etapa que está entrando (removido no frame seguinte
   pelo JS, o que dispara a transição até translateX(0)/opacity:1 acima). */
.step.step-slide-in-right { transform: translateX(100%); opacity: 0; }
.step.step-slide-in-left { transform: translateX(-100%); opacity: 0; }

/* Estado final da etapa que está saindo (aplicado pelo JS já no frame
   seguinte à entrada, disparando a transição para fora). */
.step.step-slide-out-left { transform: translateX(-100%); opacity: 0; }
.step.step-slide-out-right { transform: translateX(100%); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .step {
    transition: none;
  }
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.85rem;
  font-family: var(--font-body);
  flex-shrink: 0;
}

/* ---- Serviços agrupados por categoria (accordion) ---- */
.categoria-acordeon {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.categoria-acordeon:last-child { margin-bottom: 0; }

.categoria-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 1rem;
  border: none;
  background: var(--color-bg-alt);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.categoria-header .categoria-contagem {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.categoria-header .categoria-seta {
  flex-shrink: 0;
  transition: transform 0.2s;
  color: var(--color-primary);
}
.categoria-header.open .categoria-seta { transform: rotate(180deg); }

.categoria-content {
  padding: 0.75rem;
  background: var(--color-bg);
}

/* ---- Lista de opções (serviços) ---- */
.options-list { display: flex; flex-direction: column; gap: 0.6rem; }

.option-btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.8rem 2.3rem 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.12s ease;
}
.option-btn:hover { border-color: var(--color-primary); }
.option-btn:active { transform: scale(0.98); }
.option-btn.selected {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.option-btn.selected::after {
  content: '\2713';
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.05rem;
}
.option-btn .meta {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

/* ---- Resumo dos serviços selecionados (multi-seleção da Etapa 1) ----
   Fica oculto (ver "hidden" em agendar.js) até a cliente selecionar ao menos
   1 serviço. Reaproveita a mesma paleta/raio de borda do restante do arquivo
   — nada de cor nova aqui.

   Fixa no rodapé da TELA (não do card): vive fora de .steps-viewport/.step
   de propósito (ver comentário no HTML), porque um .step tem "transform" e
   viraria containing block de um descendente position:fixed. z-index acima
   do conteúdo da página (que não usa nenhum z-index) mas sem exagero — não
   há overlay/modal nesta página com quem competir. padding-bottom soma
   env(safe-area-inset-bottom) para não ficar colada na barra de gestos do
   iOS em telas sem "home button". ---- */
.servicos-selecionados {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin-top: 0;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px dashed var(--color-border);
  box-shadow: 0 -4px 16px rgba(35, 26, 10, 0.09);
}

/* Etapa 1 ultrapassada (.step-parked, ver agendar.js): a visibilidade da
   barra deixou de ser resolvida por herança de "display:none" de um
   ancestral (ela não é mais descendente de #step-servico), então é
   reafirmada aqui via :has() — mesmo padrão já usado pelo indicador de
   progresso logo acima neste arquivo. O "hidden" continua sendo a única
   fonte de verdade para o caso "nenhum serviço selecionado ainda"
   (atualizarResumoServicosSelecionados em agendar.js); esta regra só cobre
   o caso "tem serviço selecionado, mas a cliente já avançou de etapa". */
body:has(#step-servico.step-parked) .servicos-selecionados {
  display: none;
}
.servicos-selecionados-titulo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 0.6rem;
}

.chips-servicos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.chip-servico {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.chip-servico-nome {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text);
}
.chip-servico-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.chip-servico-remover {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--color-text-soft);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.12s ease;
}
.chip-servico-remover:hover { background: var(--color-error-bg); color: var(--color-error); }
.chip-servico-remover:active { transform: scale(0.9); }

/* Card "+" logo após o(s) chip(s) selecionados: reaproveita exatamente a
   paleta do estado "selecionado" já usado por .option-btn na lista da Etapa
   1 (mesma --color-primary/--color-primary-dark/--color-bg-alt), só com
   borda tracejada para diferenciar visualmente "adicionar" de "já
   selecionado" sem introduzir nenhuma cor nova. */
.chip-servico-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  color: var(--color-primary-dark);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.12s ease;
}
.chip-servico-add:hover { background: #fff; }
.chip-servico-add:active { transform: scale(0.98); }
.chip-servico-add-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.servicos-total {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin: 0 0 0.9rem;
}
.servicos-total strong { color: var(--color-text); }

/* Mesmo padrão visual do .btn-confirmar (CTA principal da página), usado
   aqui para o "Continuar" da Etapa 1. */
.btn-continuar {
  width: 100%;
  padding: 0.95rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.12s ease;
}
.btn-continuar:hover:not(:disabled) { background: var(--color-primary-dark); }
.btn-continuar:active:not(:disabled) { transform: scale(0.98); }
.btn-continuar:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- Data (calendário customizado) ----
   Substitui o antigo <input type="date"> nativo (picker do sistema
   operacional, ruim para navegar mês/ano no celular). Uma primeira versão
   também tinha um campo de texto (DD/MM/AAAA) ao lado do calendário, aceito
   em paralelo ao clique — removido a pedido do usuário depois de testar em
   staging ("o calendário ficou excelente"), mantendo só a seleção por
   clique num dia. */

.calendario {
  margin-top: 1rem;
  padding: 0.9rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.calendario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.calendario-titulo {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  text-transform: capitalize;
}
.calendario-nav {
  flex-shrink: 0;
  width: 2.3rem;
  height: 2.3rem;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.calendario-nav:hover:not(:disabled) { background: var(--color-border); }
.calendario-nav:disabled { opacity: 0.35; cursor: not-allowed; }

.calendario-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
.calendario-dia-vazio { visibility: hidden; }

/* min-height 2.75rem (~44px) mantém o alvo de toque dentro do mínimo
   recomendado, mesmo com a grade de 7 colunas apertando a largura em telas
   pequenas. */
.calendario-dia {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s ease;
}
.calendario-dia:hover:not(:disabled) { border-color: var(--color-primary); }
.calendario-dia:active:not(:disabled) { transform: scale(0.92); }
.calendario-dia.calendario-dia-hoje { border-color: var(--color-primary); font-weight: 600; }
.calendario-dia.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.calendario-dia:disabled {
  background: transparent;
  color: var(--color-text-muted);
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- Horários (chips), agora dentro da Etapa 2 (Data), logo abaixo do
   calendário — antes era a Etapa 3 separada. ---- */
.horarios-wrap {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--color-border);
}
.horarios-titulo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 0.6rem;
}

.profissional-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0.75rem 0 0.4rem;
}
.profissional-label:first-child { margin-top: 0; }

/* Hint de combo: mesma classe .muted do resto do arquivo, só com um respiro
   extra abaixo pra separar do grid de chips que vem em seguida. */
.horarios-hint-combo { margin-bottom: 0.75rem; }

.horarios-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }

.horario-chip {
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s ease;
}
.horario-chip:hover { border-color: var(--color-primary); }
.horario-chip:active { transform: scale(0.95); }
.horario-chip.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---- Formulário ---- */
label {
  display: block;
  font-size: 0.85rem;
  margin: 0.9rem 0 0.35rem;
  color: var(--color-text-soft);
}
input, textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: #fff;
  transition: border-color 0.2s;
}
input:focus, textarea:focus, button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
textarea { resize: vertical; }

/* ---- Cadastro único (primeiro agendamento com aquele telefone) ----
   Só reaproveita label/input já estilizados acima; a única coisa nova aqui
   é a moldura sutil pra não parecer um formulário solto aparecendo do nada
   dentro do formulário principal. ---- */
.cadastro-extra {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--color-border);
}
.cadastro-extra-aviso {
  margin-top: 0;
}

.resumo {
  margin: 1.1rem 0;
  padding: 0.85rem 1rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--color-text-soft);
  line-height: 1.5;
}
.resumo strong { color: var(--color-text); }

.btn-confirmar {
  width: 100%;
  padding: 0.95rem;
  margin-top: 0.6rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.12s ease;
}
.btn-confirmar:hover:not(:disabled) { background: var(--color-primary-dark); }
.btn-confirmar:active:not(:disabled) { transform: scale(0.98); }
.btn-confirmar:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- Confirmação final ---- */
.sucesso-box { text-align: center; }
.sucesso-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: 2rem;
  line-height: 1;
}

/* ---- Card de destaque do link de autoatendimento (/minha-reserva/{codigo}) ----
   É o elemento mais importante da tela de sucesso: maior, com mais respiro
   e com o único botão preenchido/primário da tela (o resto é texto ou link
   discreto), para deixar claro que é aqui que a cliente deve prestar atenção. */
.link-reserva-box {
  margin: 1.75rem 0 1.25rem;
  padding: 1.5rem 1.25rem;
  background: var(--color-bg-alt);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  text-align: left;
}
.link-reserva-titulo {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}
.link-reserva-url {
  display: block;
  word-break: break-all;
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  margin: 0.4rem 0 1rem;
}
.btn-copiar-link {
  display: block;
  width: 100%;
  padding: 0.9rem;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.12s ease;
}
.btn-copiar-link:hover { background: var(--color-primary-dark); }
.btn-copiar-link:active { transform: scale(0.98); }

/* ---- Contato discreto por WhatsApp: canal opcional, não é mais a etapa de
   confirmação, então não deve competir visualmente com o link de autoatendimento. ---- */
.whatsapp-discreto {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.whatsapp-discreto a { color: var(--color-text-soft); }

@media (min-width: 600px) {
  .agendar-wrap { padding-top: 2.25rem; }
  h1 { font-size: 2.2rem; }
  .mini-logo img { height: 55px; }
  .destaque-publico { font-size: 0.9rem; padding: 0.65rem 1rem; }
  .step { padding: 1.6rem 1.75rem 1.85rem; }
  #step-servico { padding-bottom: calc(1.85rem + var(--altura-barra-resumo, 0px)); }
  /* Acima do breakpoint mobile o conteúdo já fica centralizado numa coluna
     de 480px (.agendar-wrap) — a barra fixa acompanha a mesma largura em
     vez de esticar full-bleed, senão destoa do resto da página. */
  .servicos-selecionados {
    max-width: 480px;
    margin: 0 auto;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
  }
}