@media (min-width:768px){#book-appointment-wizard{border-radius:var(--bs-border-radius)!important;box-shadow:var(--bs-box-shadow-sm)!important}}#book-appointment-wizard .book-step.active-step{height:45px!important;width:45px!important;background:var(--bs-white)!important;padding:7px!important;margin-right:13px!important;margin-top:0!important}#book-appointment-wizard .book-step.active-step strong{color:var(--bs-primary)!important;font-size:21px!important}#book-appointment-wizard .book-step:not(.active-step){height:35px!important;width:35px!important;background:rgba(0,0,0,.2)!important;padding:8px!important;margin-right:12px!important;margin-top:6px!important}#book-appointment-wizard .book-step:not(.active-step) strong{color:rgba(255,255,255,.5)!important;font-size:12px!important}#book-appointment-wizard #available-hours .available-hour{margin-bottom:10px}#book-appointment-wizard #available-hours .selected-hour{background-color:var(--bs-primary)!important;border-color:var(--bs-primary)!important;color:var(--bs-white)!important}#book-appointment-wizard .captcha-title .fa-sync-alt{cursor:pointer;transition:all .3s linear}#book-appointment-wizard .captcha-title .fa-sync-alt:hover{color:var(--bs-primary)}.popover .popover-title{text-align:center}.popover .popover-content #language-list .language{margin:15px 0}#book-appointment-wizard .flatpickr-calendar.inline{margin:auto}/* --- Barbershop brand polish --- */
#company-name span {
  font-family: Georgia, 'Times New Roman', serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600 !important;
}

#company-name .display-booking-selection {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
}

#header {
  border-bottom: 3px solid rgba(0, 0, 0, 0.35);
}

#book-appointment-wizard {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

#book-appointment-wizard #available-hours .available-hour {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 1rem;
  border-radius: 8px;
}

#book-appointment-wizard .btn-primary,
#book-appointment-wizard .btn-dark {
  border-radius: 8px;
  letter-spacing: 0.5px;
}

#book-appointment-wizard {
  background-color: #1a1410 !important;
  border: 1px solid rgba(212, 175, 55, 0.25);
}

/* ============================================================================
 * VISUAL DO CATALOGO DE VENDAS
 *
 * Aproxima a pagina publica de agendamento do mockup usado para vender
 * (Marketing/gerador-mockup/template.html e Marketing/catalogo/*.png).
 * O que o barbeiro viu na proposta e o que o cliente dele encontra.
 *
 * Regras deste bloco:
 *  - a cor vem de var(--bs-primary) (a company_color do cliente), nunca de um
 *    hex fixo — trocar a cor da barbearia continua funcionando;
 *  - !important e' necessario porque o markup do EA usa style="" inline, que
 *    so' perde para !important;
 *  - NAO definir "display" em .book-step: o booking.js:245 esconde o passo 1
 *    com .hide(), e display com !important impediria isso. Centralizacao
 *    vertical por line-height, de proposito.
 *
 * Supera regras do bloco "Barbershop brand polish" acima (letter-spacing da
 * marca e tamanho do subtitulo), por vir depois com a mesma especificidade.
 * ========================================================================= */

/* ---------- topo dourado com base curva ---------- */
#book-appointment-wizard #header {
  position: relative;
  overflow: hidden;
  flex-direction: column !important;
  text-align: center;
  padding: 24px 16px 30px !important;
  border-bottom: 0 !important;
  border-radius: 0 0 50% 50% / 0 0 38px 38px;
  background-image: linear-gradient(168deg,
      rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.10) 34%,
      rgba(0, 0, 0, 0.10) 66%, rgba(0, 0, 0, 0.32) 100%) !important;
}

/* faixa diagonal discreta — referencia ao poste de barbeiro */
#book-appointment-wizard #header::after {
  content: '';
  position: absolute;
  right: -34px;
  top: -10px;
  width: 150px;
  height: 130%;
  background: repeating-linear-gradient(36deg,
      rgba(0, 0, 0, 0.09) 0 15px, rgba(0, 0, 0, 0) 15px 42px);
  border-radius: 50%;
  pointer-events: none;
}

#book-appointment-wizard #header > * {
  position: relative;
  z-index: 1;
}

/* ---------- logo circular ---------- */
#book-appointment-wizard #company-logo {
  display: block !important;
  float: none !important;
  width: 96px;
  height: 96px;
  max-height: 96px !important;
  margin: 0 auto 13px !important;
  padding: 16px;
  border-radius: 50%;
  background: #17140f;
  border: 3px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  object-fit: contain;
}

/* ---------- marca ---------- */
#book-appointment-wizard #company-name {
  flex-grow: 0 !important;
  margin: 0 !important;
  color: #141008 !important;
}

#book-appointment-wizard #company-name > span {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700 !important;
  font-size: 23px;
  letter-spacing: 5px;
  line-height: 1.15;
  text-transform: uppercase;
  color: #141008;
}

/* linha fina separando marca e subtitulo (a tesoura do mockup fica de fora:
   exigiria SVG no markup, e a linha ja da o mesmo respiro) */
#book-appointment-wizard #company-name > div {
  justify-content: center !important;
  margin: 9px 6px 0;
  padding-top: 9px;
  border-top: 1px solid rgba(0, 0, 0, 0.35);
}

#book-appointment-wizard .display-booking-selection {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase;
  color: #1c1710 !important;
}

/* ---------- passos 1-2-3-4 ---------- */
#book-appointment-wizard #steps {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 11px;
  width: auto !important;
  float: none !important;
  overflow: visible !important;
  margin: 15px auto 0 !important;
}

#book-appointment-wizard .book-step,
#book-appointment-wizard .book-step:not(.active-step) {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 9px !important;
  background: #241f16 !important;
  text-align: center;
}

#book-appointment-wizard .book-step strong,
#book-appointment-wizard .book-step:not(.active-step) strong {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  color: #7d7466 !important;
}

#book-appointment-wizard .book-step.active-step {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(0, 0, 0, 0.10)),
      var(--bs-primary) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

#book-appointment-wizard .book-step.active-step strong {
  font-size: 17px !important;
  line-height: 38px !important;
  color: #1a1408 !important;
}

/* ---------- corpo ---------- */

/* o markup traz min-height:500px inline, o que jogava o botao de avancar para
   fora da tela do celular — CTA abaixo da dobra derruba conversao.
   16/08/2026: caiu de 300 para 260 depois de MEDIR o conteudo real de cada passo
   no ar, a 375px: passo 1 = 263px, passo 2 = 591 (calendario), passo 3 = 313,
   passo 4 = 164. Ou seja, os 300 so sobravam nos passos 1 e 4, e no 1 empurravam
   o botao Seguinte 37px para baixo — o bastante para a tela inicial nao caber em
   812px e pedir rolagem. Com 260 o passo 1 fecha em uma tela so.
   Continua existindo um piso para o passo 4 (164px) nao ficar espremido; o "pulo
   de altura entre passos" que a nota antiga citava ja era inevitavel de qualquer
   forma, porque o calendario do passo 2 tem o dobro da altura. */
#book-appointment-wizard .frame-container {
  min-height: 260px !important;
}

#book-appointment-wizard .frame-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400 !important;
  font-size: 25px;
  line-height: 1.3;
  color: #ffffff !important;
  margin-top: 26px !important;
  margin-bottom: 0 !important;
}

#book-appointment-wizard .frame-title::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  margin: 13px auto 26px;
  background: var(--bs-primary);
}

#book-appointment-wizard .frame-content label {
  display: block;
  margin: 0 0 9px 3px !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bs-primary) !important;
}

#book-appointment-wizard .frame-content .form-select,
#book-appointment-wizard .frame-content .form-control {
  height: 50px;
  padding: 0 15px;
  font-size: 15.5px;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.55) !important;
  border-radius: 11px !important;
  background-color: #1a1510 !important;
  color: #f2ede2 !important;
}

#book-appointment-wizard .frame-content textarea.form-control {
  height: auto;
  padding: 12px 15px;
}

/* card de duracao + preco */
#book-appointment-wizard #service-description {
  margin-top: 4px;
  padding: 16px;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
  border-radius: 11px;
  text-align: center;
  font-size: 14px !important;
  font-style: normal;
  color: #f2ede2;
}

#book-appointment-wizard #service-description:empty {
  display: none;
}

/* ---------- passo 2: calendario e horarios ---------- */
/* O mockup usa uma tira de 4 dias. Mantive o calendario do flatpickr de
   proposito: a tira so' mostra 4 dias e tiraria do cliente marcar mais adiante.
   Aqui entra so' a paleta, para nao brigar com o tema escuro. */
#book-appointment-wizard .flatpickr-calendar {
  background: #1a1510;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
  border-radius: 11px;
  box-shadow: none;
}

/* o innerContainer e' quem carrega o branco do flatpickr — sem ele o resto
   nao adianta */
#book-appointment-wizard .flatpickr-months,
#book-appointment-wizard .flatpickr-month,
#book-appointment-wizard .flatpickr-innerContainer,
#book-appointment-wizard .flatpickr-rContainer,
#book-appointment-wizard .flatpickr-days,
#book-appointment-wizard .dayContainer,
#book-appointment-wizard .flatpickr-weekdays,
#book-appointment-wizard .flatpickr-weekdaycontainer {
  background: transparent !important;
  color: var(--bs-primary);
  fill: var(--bs-primary);
}

#book-appointment-wizard .flatpickr-monthDropdown-months,
#book-appointment-wizard .numInputWrapper {
  background: transparent !important;
  color: var(--bs-primary) !important;
}

#book-appointment-wizard .flatpickr-monthDropdown-months option {
  background: #1a1510;
  color: #ece4d2;
}

#book-appointment-wizard .flatpickr-current-month .cur-month,
#book-appointment-wizard .flatpickr-current-month input.cur-year {
  color: var(--bs-primary);
  font-weight: 700;
}

#book-appointment-wizard span.flatpickr-weekday {
  background: transparent;
  color: rgba(var(--bs-primary-rgb), 0.85);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#book-appointment-wizard .flatpickr-months .flatpickr-prev-month svg,
#book-appointment-wizard .flatpickr-months .flatpickr-next-month svg {
  fill: var(--bs-primary);
}

#book-appointment-wizard .flatpickr-day {
  color: #ece4d2;
  border-radius: 8px;
}

#book-appointment-wizard .flatpickr-day:hover {
  background: rgba(var(--bs-primary-rgb), 0.15);
  border-color: transparent;
}

#book-appointment-wizard .flatpickr-day.today {
  border-color: rgba(var(--bs-primary-rgb), 0.6);
}

/* dia indisponivel precisa ser obvio: no tom anterior (#5b5342) eu mesmo
   confundi domingo bloqueado com dia livre olhando a tela */
#book-appointment-wizard .flatpickr-day.flatpickr-disabled,
#book-appointment-wizard .flatpickr-day.prevMonthDay,
#book-appointment-wizard .flatpickr-day.nextMonthDay {
  color: #4a4335;
  text-decoration: line-through;
  text-decoration-color: rgba(74, 67, 53, 0.9);
}

#book-appointment-wizard .flatpickr-day.selected,
#book-appointment-wizard .flatpickr-day.selected:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(0, 0, 0, 0.10)),
      var(--bs-primary);
  border-color: transparent;
  color: #1a1408;
  font-weight: 700;
}

/* grade de 3 colunas como no mockup — o padrao era 1 por linha, o que empurrava
   tudo para baixo e exigia rolagem longa */
#book-appointment-wizard #available-hours {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: 240px !important;
  padding-right: 4px !important;
}

#book-appointment-wizard #available-hours .available-hour {
  width: 100% !important;
  height: 46px;
  margin-bottom: 0 !important;
  padding: 0 4px;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.45) !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #f2ede2 !important;
  font-size: 14px;
}

/* o fuso horario nao existe no mockup e e' ruido para o cliente de uma
   barbearia: o default_timezone da instancia ja e' America/Sao_Paulo */
#book-appointment-wizard #select-timezone,
#book-appointment-wizard label[for="select-timezone"] {
  display: none !important;
}

#book-appointment-wizard #available-hours .selected-hour {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(0, 0, 0, 0.10)),
      var(--bs-primary) !important;
  border-color: transparent !important;
  color: #1a1408 !important;
  font-weight: 700;
}

/* ---------- botoes ---------- */
/* O py-3 do Bootstrap poe 16px embaixo de cada passo do assistente, entre o botao
   Seguinte e o rodape. Somado ao resto, era isso que mantinha a assinatura
   "Agendamento online" longe do botao e colada na pilula "Meus horarios".
   Vale para os 4 passos, entao a folga fica igual em todos. */
#book-appointment-wizard [id^="wizard-frame-"] {
  padding-bottom: 2px !important;
}

#book-appointment-wizard .command-buttons {
  display: flex !important;
  gap: 12px;
  margin: 0 !important;
  /* 16/08/2026: o padding-bottom era 26px e, somado ao padding do rodape, deixava
     63px entre o botao Seguinte e a frase "Agendamento online" — contra 8px entre
     essa frase e a pilula "Meus horarios". A frase lia como legenda da pilula, e
     ela e' assinatura do passo, nao do link. */
  padding: 0 24px 4px;
}

#book-appointment-wizard .command-buttons > span {
  display: none;
}

/* o botao final do passo 4 nao usa .button-next: e' #book-appointment-submit
   com .btn-primary. Sem ele na lista, o CTA mais importante do fluxo ficava
   destoando dos outros tres passos. */
#book-appointment-wizard .button-next,
#book-appointment-wizard .button-book,
#book-appointment-wizard #book-appointment-submit {
  flex: 1;
  height: 52px;
  margin-right: 0 !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(0, 0, 0, 0.10)),
      var(--bs-primary) !important;
  color: #1a1408 !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

#book-appointment-wizard .button-back {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.45) !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--bs-primary) !important;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- rodape ---------- */
#book-appointment-wizard #frame-footer {
  border-top-color: rgba(var(--bs-primary-rgb), 0.25) !important;
  /* o p-3 do Bootstrap poe 16px em cima; aqui isso so afasta a assinatura do botao */
  padding-top: 4px !important;
}

#book-appointment-wizard .brand-tagline {
  display: block;
  padding-top: 0;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(var(--bs-primary-rgb), 0.75);
}

/* "Meus horarios" e' a porta de quem perdeu o link do proprio agendamento. Continua
   no rodape (o assistente de 4 passos e' funil e nao pode ganhar link concorrente no
   topo), mas como <a> solto dentro de um <small> ninguem enxergava. Vira pilula: mesma
   linguagem dos botoes do assistente, area de toque de ~40px no celular. */
#book-appointment-wizard .meus-horarios {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 2px;
  /* 13px de padding levam a pilula a ~44px de altura, que e o alvo minimo de
     toque recomendado. Com 10px dava 36px — clicavel, mas apertado no celular,
     que e justamente onde este link e usado. */
  padding: 13px 20px;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.5);
  border-radius: 999px;
  color: var(--bs-primary) !important;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

#book-appointment-wizard .meus-horarios:hover,
#book-appointment-wizard .meus-horarios:focus {
  background: rgba(var(--bs-primary-rgb), 0.14);
  border-color: var(--bs-primary);
}

/* o seletor de idioma e' ruido para o cliente do barbeiro — o app e' pt-br */
#book-appointment-wizard #select-language {
  display: none !important;
}