/* Calendiário · módulo de reserva (estilos) · versão 0.5 · 2026-10-13
   Tudo se adapta por variáveis --bk-*. Cada aplicativo ou site troca só estas variáveis. */
:where(.bk) {
  --bk-ink: var(--ink, #14122B); --bk-muted: var(--muted, #5B5873); --bk-paper: var(--paper, #FFFFFF); --bk-bg: var(--bg, #F5F2EC);
  --bk-line: var(--line, #D9D4C8); --bk-accent: var(--accent, #FF5A1F); --bk-on-accent: var(--on-accent, #14122B); --bk-hot: var(--hot, #D6213A);
  --bk-info-bg: var(--side-bg, #14122B); --bk-info-ink: var(--side-ink, #F6F1E7); --bk-info-muted: var(--side-muted, #B4B0CC);
  --bk-display: var(--display, 'Gabarito', system-ui, sans-serif); --bk-sans: var(--sans, 'Schibsted Grotesk', system-ui, sans-serif);
  --bk-radius: 4px; --bk-hard: 3px 3px 0 var(--bk-ink);
}
.bk { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); font-family: var(--bk-sans); color: var(--bk-ink); line-height: 1.45; font-size: 15px; }
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
.bk button, .bk input, .bk select { font: inherit; color: inherit; }
.bk button { cursor: pointer; background: none; border: 0; padding: 0; }
.bk :focus-visible { outline: 2px solid var(--bk-accent); outline-offset: 2px; }
.bk-info { background: var(--bk-info-bg); color: var(--bk-info-ink); padding: clamp(24px, 4vw, 52px); display: flex; flex-direction: column; gap: 18px; align-self: start; position: sticky; top: 0; min-height: 100%; }
.bk-who { font: 700 12px/1 var(--bk-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bk-info-muted); }
.bk-info h2 { font: 800 clamp(28px, 3.2vw, 42px)/1.04 var(--bk-display); margin: 0; letter-spacing: -.015em; overflow-wrap: break-word; hyphens: auto; }
.bk-desc { margin: 0; color: var(--bk-info-muted); white-space: pre-line; overflow-wrap: anywhere; }
.bk-sticker { display: inline-flex; gap: 10px; align-items: baseline; align-self: flex-start; background: var(--bk-accent); color: var(--bk-on-accent); border: 2px solid var(--bk-info-ink); border-radius: var(--bk-radius); padding: 8px 12px; font-weight: 800; box-shadow: 4px 4px 0 var(--bk-info-ink); transform: rotate(-1.5deg); }
.bk-sticker small { font-weight: 600; opacity: .85; font-size: 13px; }
.bk-note { margin: 0; font-size: 13.5px; color: var(--bk-info-muted); }
.bk-main { padding: clamp(20px, 4vw, 52px); display: grid; align-content: start; gap: 22px; max-width: 780px; background: var(--bk-bg); }
.bk-step { display: grid; gap: 10px; }
.bk-lab { font: 700 11px/1 var(--bk-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bk-muted); }
.bk-days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 6px 12px 2px; scroll-snap-type: x proximity; align-items: stretch; }
.bk-day { flex: 0 0 auto; min-width: 66px; scroll-snap-align: start; border: 1.5px solid var(--bk-ink); border-radius: var(--bk-radius); background: var(--bk-paper); padding: 8px 6px; text-align: center; display: grid; gap: 2px; transition: transform .12s, box-shadow .12s; }
.bk-day b { font: 800 22px/1 var(--bk-display); }
.bk-day span { font-size: 12px; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .06em; }
.bk-day[aria-pressed="true"] { background: var(--bk-accent); color: var(--bk-on-accent); transform: translate(-3px, -3px); box-shadow: var(--bk-hard); }
.bk-day[aria-pressed="true"] span { color: inherit; }
.bk-day:disabled { border-style: dashed; border-color: var(--bk-line); opacity: .55; cursor: default; }
.bk-more { flex: 0 0 auto; align-self: center; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 0 10px; white-space: nowrap; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.bk-slot { border: 1.5px solid var(--bk-ink); border-radius: var(--bk-radius); background: var(--bk-paper); padding: 9px 4px; font-weight: 700; text-align: center; transition: transform .12s, box-shadow .12s; }
.bk-slot[aria-pressed="true"] { background: var(--bk-ink); color: var(--bk-paper); }
@media (hover: hover) {
  .bk-day:not(:disabled):hover, .bk-slot:hover, .bk-btn:hover { transform: translate(-3px, -3px); box-shadow: var(--bk-hard); }
}
.bk-form { display: grid; gap: 12px; border: 1.5px solid var(--bk-ink); border-radius: var(--bk-radius); background: var(--bk-paper); padding: 18px; box-shadow: 6px 6px 0 var(--bk-accent); }
.bk-when { font: 800 20px/1.2 var(--bk-display); margin: 0; }
.bk-fld { display: grid; gap: 4px; }
.bk-fld label, .bk-fld .bk-lab { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bk-muted); }
.bk-fld input[type="text"], .bk-fld input[type="email"], .bk-fld input[type="tel"] { width: 100%; padding: 10px 11px; border: 1.5px solid var(--bk-line); border-radius: var(--bk-radius); background: var(--bk-bg); transition: box-shadow .12s, transform .12s; }
.bk-fld input:focus { outline: none; border-color: var(--bk-ink); background: var(--bk-paper); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--bk-ink); }
.bk-radios { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-radios label, .bk-chk { display: flex; gap: 8px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--bk-ink); border: 1.5px solid var(--bk-line); border-radius: var(--bk-radius); padding: 8px 12px; cursor: pointer; }
.bk-radios input, .bk-chk input { margin-top: 3px; accent-color: var(--bk-accent); width: 16px; height: 16px; }
.bk-chk { border: 0; padding: 0; font-weight: 500; font-size: 13.5px; color: var(--bk-muted); }
.bk-chk a { color: var(--bk-ink); text-underline-offset: 3px; }
.bk-erro { color: var(--bk-hot); font-weight: 600; font-size: 14px; margin: 0; }
.bk-erro:empty { display: none; }
.bk-btn { border: 1.5px solid var(--bk-ink); border-radius: var(--bk-radius); padding: 11px 16px; font-weight: 700; background: var(--bk-paper); text-align: center; text-decoration: none; display: inline-block; transition: transform .12s, box-shadow .12s; }
.bk-btn.primary { background: var(--bk-accent); color: var(--bk-on-accent); }
.bk-btn:disabled { opacity: .6; cursor: default; }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-done { border: 2px solid var(--bk-ink); border-radius: var(--bk-radius); background: var(--bk-paper); padding: 22px; display: grid; gap: 12px; box-shadow: 8px 8px 0 var(--bk-accent); }
.bk-done h3 { font: 800 30px/1.1 var(--bk-display); margin: 0; }
.bk-done p { margin: 0; }
.bk-done .bk-btn { justify-self: start; }
.bk-msg { padding: 60px 20px; text-align: center; font-family: var(--bk-sans); }
.bk-empty { margin: 0; color: var(--bk-muted); font-size: 14px; }
@media (max-width: 820px) {
  .bk { grid-template-columns: 1fr; }
  .bk-info { position: static; padding: 22px 20px; gap: 12px; }
  .bk-info h2 { font-size: 30px; }
  .bk-main { padding: 20px 16px 40px; }
  .bk-fld input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bk * { transition: none !important; } }
.bk-msg { grid-column: 1 / -1; }