/* ===== Agendamento + pagamento (demonstração) — usa os tokens de index.html ===== */
html.bk-aberto { overflow: hidden; }

.bk { padding: 0; border: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  background: var(--ink); color: var(--cream); }
.bk::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
/* Coluna flexível: só o corpo cresce e rola; cabeçalho, etapas e rodapé ficam do tamanho do conteúdo,
   não importa quais faixas estejam visíveis. */
.bk-shell { display: flex; flex-direction: column; height: 100%; }
.bk-head, .bk-progress, .bk-foot { flex: none; }

.bk-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 6px; }
.bk-head h2 { font-size: 1.7rem; text-align: center; outline: none; }
.bk-icon { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); cursor: pointer; display: grid; place-items: center;
  transition: background-color .2s, transform .15s var(--ease-out); }
.bk-icon:hover { background: var(--surface-2); }
.bk-icon:active { transform: scale(.92); }
.bk-icon svg { width: 22px; height: 22px; }

.bk-progress { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 4px 16px 0; padding: 0; }
.bk-progress li { font-size: .66rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-align: center; }
.bk-progress li::before { content: ""; display: block; height: 3px; border-radius: 3px; background: var(--line); margin-bottom: 6px;
  transition: background-color .3s; }
.bk-progress li.feito::before, .bk-progress li.atual::before { background: var(--gold-grad); }
.bk-progress li.atual { color: var(--gold); }
.bk-progress li span { display: none; }
.bk-progress li.atual span { display: inline; }

.bk-demo { margin: 10px 16px 0; padding: 6px 10px; border-radius: 8px; font-size: .74rem; font-weight: 600; text-align: center;
  color: var(--gold-light); background: rgba(226,167,77,.1); border: 1px dashed var(--gold-deep); }

.bk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 24px; }
.bk-foot { border-top: 1px solid var(--line); background: rgba(0,0,0,.94); display: grid; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.bk-foot:empty { display: none; }
.bk-next { width: 100%; }
.bk-next:disabled { filter: grayscale(1) brightness(.55); cursor: not-allowed; box-shadow: none; }
.bk-sum { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; color: var(--chrome); }
.bk-sum span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-sum strong { color: var(--cream); }
.bk-sum b { color: var(--gold); white-space: nowrap; }

/* Unidade */
.bk-units { border: 0; padding: 0; margin: 0 0 16px; }
.bk-units legend { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; padding: 0; }
.bk-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.bk-seg-btn { min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--chrome); font-weight: 700; cursor: pointer;
  transition: background-color .2s, color .2s; }
.bk-seg-btn.on { background: var(--gold-grad); color: var(--ink); }
.bk-unit-addr { margin: 8px 2px 0; font-size: .8rem; color: var(--muted); }
.bk-unit-addr.pendente { color: var(--gold-light); }

/* Estilo desejado */
.bk-field em { font-style: normal; font-weight: 500; color: var(--muted); }
.bk-estilos { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-estilo { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--chrome);
  font-weight: 600; font-size: .82rem; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .15s var(--ease-out); }
.bk-estilo:active { transform: scale(.95); }
.bk-estilo.on { border-color: var(--gold); color: var(--gold-light); background: rgba(226,167,77,.12); }
.bk-field textarea[name="obs"] { font: 500 16px/1.4 var(--font-body); color: var(--cream); min-height: 64px; word-break: normal; }

/* Chips de categoria */
.bk-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px 2px; }
.bk-chips::-webkit-scrollbar { display: none; }
.bk-chip { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 700; font-size: .86rem;
  background: var(--surface); color: var(--chrome); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, color .2s; }
.bk-chip[aria-selected="true"] { background: var(--gold-grad); color: var(--ink); box-shadow: none; }

/* Opções (serviço, pagamento) */
.bk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-opt, .bk-pay { width: 100%; display: grid; grid-template-columns: 1fr auto 24px; align-items: center; gap: 12px; text-align: left;
  padding: 14px 14px 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .15s var(--ease-out); }
.bk-pay { grid-template-columns: 40px 1fr 24px; }
.bk-opt:active, .bk-pay:active { transform: scale(.985); }
.bk-opt.on, .bk-pay.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(226,167,77,.12), rgba(226,167,77,.04)); }
.bk-pay:disabled { opacity: .45; cursor: not-allowed; }
.bk-opt-main { display: grid; gap: 2px; min-width: 0; }
.bk-opt-name { font-weight: 700; }
.bk-opt-meta { font-size: .8rem; color: var(--muted); }
.bk-opt-price { font-weight: 800; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-check { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); position: relative; transition: box-shadow .2s, background-color .2s; }
.on > .bk-check { background: var(--gold); box-shadow: none; }
.on > .bk-check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--ink);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.bk-pay-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--gold); }
.bk-pay-ico svg { width: 22px; height: 22px; }

/* Profissionais */
.bk-pros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.bk-pro { width: 100%; display: grid; justify-items: center; gap: 6px; padding: 16px 10px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; text-align: center; transition: border-color .2s, background-color .2s, transform .15s var(--ease-out); }
.bk-pro:active { transform: scale(.97); }
.bk-pro.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(226,167,77,.14), rgba(226,167,77,.03)); }
.bk-av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--gold); font: 900 1.5rem/1 var(--font-display); box-shadow: 0 0 0 2px var(--line); transition: box-shadow .2s; }
.bk-pro.on .bk-av { box-shadow: 0 0 0 2px var(--gold); }
.bk-av--any { font-size: 1.6rem; }
.bk-pro-name { font-weight: 700; }

/* Dias e horários */
.bk-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x proximity; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-day { flex: none; scroll-snap-align: center; width: 62px; padding: 10px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  display: grid; gap: 2px; justify-items: center; cursor: pointer; transition: border-color .2s, background-color .2s, transform .15s var(--ease-out); }
.bk-day span { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .06em; }
.bk-day b { font: 800 1.5rem/1 var(--font-display); }
.bk-day small { font-size: .68rem; color: var(--muted); }
.bk-day:disabled { opacity: .35; cursor: not-allowed; }
.bk-day.on { background: var(--gold-grad); border-color: transparent; color: var(--ink); }
.bk-day.on span, .bk-day.on small { color: rgba(0,0,0,.7); }
.bk-day:not(:disabled):active { transform: scale(.95); }
.bk-daylabel { margin: 14px 0 4px; font-size: .86rem; color: var(--chrome); }
.bk-daylabel::first-letter { text-transform: uppercase; }
.bk-turno { font: 700 .74rem/1 var(--font-body); letter-spacing: .18em; color: var(--gold); margin: 18px 0 10px; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.bk-slot { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, background-color .2s, transform .15s var(--ease-out); }
.bk-slot:hover:not(:disabled) { border-color: var(--gold-deep); }
.bk-slot:active:not(:disabled) { transform: scale(.94); }
.bk-slot:disabled { color: #4a4a4a; text-decoration: line-through; cursor: not-allowed; background: transparent; }
.bk-slot.on { background: var(--gold-grad); color: var(--ink); border-color: transparent; }
.bk-empty { color: var(--chrome); padding: 24px 0; text-align: center; }

/* Formulário */
.bk-form { display: grid; gap: 14px; }
.bk-field { display: grid; gap: 6px; }
.bk-field span { font-size: .82rem; font-weight: 700; color: var(--chrome); }
.bk-field input, .bk-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--cream); font: 500 16px/1.4 var(--font-body); /* 16px evita zoom no iOS */
  transition: border-color .2s, box-shadow .2s; }
.bk-field textarea { font: 500 .78rem/1.4 ui-monospace, monospace; resize: none; word-break: break-all; color: var(--chrome); }
.bk-field input:focus, .bk-field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226,167,77,.25); }
.bk-consent { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: .86rem; color: var(--chrome); cursor: pointer; }
.bk-consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gold); }
.bk-note { font-size: .86rem; color: var(--chrome); margin: 14px 0 0; }
.bk-erro { color: var(--danger); font-weight: 600; margin: 0; }

/* Pix */
.bk-pix { display: grid; gap: 14px; }
.bk-pix-valor { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.bk-pix-valor span { color: var(--chrome); }
.bk-pix-valor b { font: 800 2rem/1 var(--font-display); color: var(--gold); }
.bk-qr { width: min(240px, 70vw); aspect-ratio: 1; margin: 0 auto; padding: 10px; border-radius: 16px; background: #fff;
  display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(226,167,77,.35); }
.bk-qr svg { width: 100%; height: 100%; }
.bk-qr-load { color: #333; font-size: .85rem; text-align: center; padding: 10px; }
.bk-timer { text-align: center; margin: 0; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.bk-copy.is-ok { box-shadow: inset 0 0 0 2px #4ADE80; color: #4ADE80; }
.bk-howto { margin: 0; padding-left: 20px; color: var(--chrome); font-size: .88rem; display: grid; gap: 4px; }
.bk-demo-box { border: 1px dashed var(--gold-deep); border-radius: 14px; padding: 14px; background: rgba(226,167,77,.06); display: grid; gap: 10px; }
.bk-demo-box b { color: var(--gold-light); }
.bk-demo-box p { margin: 0; font-size: .86rem; color: var(--chrome); }

/* Confirmação / consulta */
.bk-done { width: 76px; height: 76px; margin: 4px auto 16px; }
.bk-done svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bk-done circle { stroke: var(--gold); }
.bk-done path { stroke: var(--gold-light); }
.bk-ticket { position: relative; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.bk-ticket::before { content: ""; display: block; height: 4px; background: var(--gold-grad); }
.bk-ticket-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px dashed var(--line); }
.bk-code { font: 800 1.5rem/1 var(--font-display); letter-spacing: .06em; color: var(--gold); }
.bk-badge { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.bk-badge--ok { background: rgba(74,222,128,.14); color: #4ADE80; }
.bk-badge--wait { background: rgba(226,167,77,.16); color: var(--gold-light); }
.bk-badge--off { background: rgba(240,100,95,.14); color: var(--danger); }
.bk-ticket dl { margin: 0; padding: 6px 16px 12px; }
.bk-ticket dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bk-ticket dl div:last-child { border-bottom: 0; }
.bk-ticket dt { color: var(--muted); font-size: .84rem; }
.bk-ticket dd { margin: 0; font-weight: 600; }
.bk-actions { display: grid; gap: 10px; margin-top: 16px; }
.bk-link-danger { background: none; border: 0; color: var(--danger); font-weight: 700; padding: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Desktop: painel centralizado em vez de tela cheia */
@media (min-width: 720px) {
  .bk { width: min(560px, 100% - 48px); height: min(820px, 100% - 48px); margin: auto; border-radius: 22px;
    box-shadow: 0 0 0 1px var(--line), 0 40px 120px -20px rgba(0,0,0,.9), 0 0 80px -30px rgba(226,167,77,.35); }
  .bk-progress li span { display: inline; }
  .bk-head { padding-top: 14px; }
}

/* Animações (só com movimento permitido) */
@media (prefers-reduced-motion: no-preference) {
  .bk[open] { animation: bk-in .32s cubic-bezier(.2,.8,.2,1); }
  .bk[open]::backdrop { animation: bk-fade .32s ease; }
  .bk.is-closing { animation: bk-out .2s ease-in forwards; }
  .bk.is-closing::backdrop { animation: bk-fade .2s ease reverse forwards; }
  .bk-list > li > *, .bk-pros > li > *, .bk-slot { animation: bk-rise .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
  .bk-done circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: bk-draw .6s .1s ease-out forwards; }
  .bk-done path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: bk-draw .4s .6s ease-out forwards; }
  .bk-ticket { animation: bk-rise .5s .3s cubic-bezier(.2,.8,.2,1) both; }
  .bk-qr svg { animation: bk-pop .45s cubic-bezier(.2,.8,.2,1.2) both; }
}
@keyframes bk-in { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bk-out { to { opacity: 0; transform: translateY(20px) scale(.98); } }
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bk-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bk-draw { to { stroke-dashoffset: 0; } }
@keyframes bk-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* Estados da versão com servidor */
.bk-load { color: var(--chrome); text-align: center; padding: 28px 0; }
.bk-foot .bk-erro { margin: 0; font-size: .88rem; }
.bk-link { background: none; border: 0; color: var(--chrome); font-weight: 700; padding: 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bk-consent a { color: var(--gold); }

.bk-actions .btn--wa { background: #128C4A; color: #fff; }
.bk-actions .btn--wa svg { width: 20px; height: 20px; }

.bk-progress[hidden] { display: none; }

/* Barra de rolagem no visual da marca (fina, escura, com o dourado) */
.bk-body, html { scrollbar-width: thin; scrollbar-color: #6b5530 #0d0d0d; }
.bk-body::-webkit-scrollbar, html::-webkit-scrollbar { width: 8px; }
.bk-body::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background: #0d0d0d; }
.bk-body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background: #6b5530; border-radius: 8px; border: 2px solid #0d0d0d; }
.bk-body::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.bk-body::-webkit-scrollbar-button, html::-webkit-scrollbar-button { display: none; height: 0; }
/* O título recebe foco ao trocar de etapa (leitores de tela), mas não deve parecer selecionado */
#bk-titulo:focus { outline: none; }
/* iPhone: a barra do Safari muda a altura útil; dvh acompanha a área realmente visível */
@media (max-width: 719px) { .bk { height: 100dvh; max-height: 100dvh; } }

/* Pix automático */
.bk-aguarda { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(226,167,77,.08); color: var(--gold-light); font-size: .88rem; font-weight: 600; }
.bk-spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgba(226,167,77,.3); border-top-color: var(--gold); animation: bk-girar .9s linear infinite; }
@keyframes bk-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bk-spin { animation: none !important; border-top-color: rgba(226,167,77,.3); } }
.bk-pago { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(74,222,128,.12); color: #4ADE80; font-weight: 700; text-align: center; }