/* Booking widget. Все цвета/шрифты — переменные с фолбэком на переменные темы.
   Любая тема может переопределить: --bk-acc, --bk-bg, --bk-ink, --bk-r … в своём CSS. */
:root {
  --bk-acc: var(--acc, #a8323a);
  --bk-acc-ink: var(--acc-ink, #fff);
  --bk-acc-t: var(--acc-t, var(--bk-acc));
  --bk-bg: var(--bg, #f7f5f0);
  --bk-bg2: var(--bg2, #efece5);
  --bk-card: var(--card, #fcfbf8);
  --bk-ink: var(--ink, #23262b);
  --bk-ink2: var(--ink2, #5f646b);
  --bk-ink3: var(--ink3, #8d9198);
  --bk-line: var(--line, rgba(35, 38, 43, .12));
  --bk-line2: var(--line2, rgba(35, 38, 43, .26));
  --bk-inv: var(--inv, #2d3036);
  --bk-inv-ink: var(--inv-ink, #f3f1ec);
  --bk-gold: var(--gold, #cfb27a);
  --bk-r: var(--r, 12px);
  --bk-serif: var(--serif, 'Cormorant Garamond', Georgia, serif);
  --bk-sans: var(--sans, system-ui, -apple-system, 'Segoe UI', sans-serif);
  --bk-mono: var(--mono, ui-monospace, 'JetBrains Mono', monospace);
  --bk-ease: cubic-bezier(.16, .84, .2, 1);
}
.bk-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(15, 17, 20, .55); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.bk-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9991; width: min(620px, 100vw); background: var(--bk-bg); color: var(--bk-ink); border-left: 1px solid var(--bk-line);
  display: flex; flex-direction: column; transform: translateX(102%); visibility: hidden; transition: transform .6s var(--bk-ease), visibility .6s; font-family: var(--bk-sans); }
html.bk-open { overflow: hidden; }
html.bk-open .bk-overlay { opacity: 1; visibility: visible; }
html.bk-open .bk-drawer { transform: none; visibility: visible; }
.bk-pole { height: 4px; flex: none; background-image: linear-gradient(45deg, var(--bk-acc) 12.5%, #f3efe6 12.5% 25%, #2f4a8c 25% 37.5%, #f3efe6 37.5% 50%, var(--bk-acc) 50% 62.5%, #f3efe6 62.5% 75%, #2f4a8c 75% 87.5%, #f3efe6 87.5%); background-size: 16px 16px; }
.bk-in, .bk-inline { display: flex; flex-direction: column; min-height: 0; flex: 1; font-family: var(--bk-sans); color: var(--bk-ink); }
.bk-inline { border: 1px solid var(--bk-line); border-radius: calc(var(--bk-r) + 4px); background: var(--bk-bg); overflow: hidden; max-height: 860px; }
.bk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px clamp(18px, 3vw, 32px) 14px; }
.bk-head__l { display: flex; gap: 12px; align-items: flex-start; }
.bk-kicker { font: 500 10.5px var(--bk-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bk-ink2); }
.bk-title { font: 500 clamp(30px, 4vw, 40px)/1 var(--bk-serif); margin-top: 8px; }
.bk-title em { color: var(--bk-acc-t); }
.bk-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 clamp(18px, 3vw, 32px) 16px; border-bottom: 1px solid var(--bk-line); }
.bk-bars i { height: 3px; background: var(--bk-line2); transition: background .4s; }
.bk-bars i.on { background: var(--bk-acc); }
.bk-body { flex: 1; overflow: auto; padding: 22px clamp(18px, 3vw, 32px) 30px; overscroll-behavior: contain; }
.bk-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px clamp(18px, 3vw, 32px) 18px; border-top: 1px solid var(--bk-line); background: var(--bk-bg2); }
.bk-foot__i { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-foot__i b { font: 600 18px var(--bk-sans); }
.bk-foot__i span { font: 500 11px var(--bk-mono); color: var(--bk-ink2); }
.bk-icon { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--bk-line2); background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.bk-icon:hover { border-color: var(--bk-ink); }
.bk-icon:disabled { opacity: .3; cursor: default; }
.bk-btn { height: 50px; padding: 0 24px; border-radius: 999px; border: 0; background: var(--bk-acc); color: var(--bk-acc-ink); font: 500 15px var(--bk-sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background-color .25s, color .25s, opacity .25s; white-space: nowrap; }
.bk-btn:hover { background: var(--bk-ink); color: var(--bk-bg); }
.bk-btn:disabled { opacity: .4; cursor: not-allowed; background: var(--bk-acc); color: var(--bk-acc-ink); }
.bk-btn--ghost { background: transparent; color: var(--bk-ink); border: 1px solid var(--bk-line2); }
.bk-btn--ghost:hover { border-color: var(--bk-ink); background: transparent; color: var(--bk-ink); }
.bk-link { border: 0; background: none; padding: 0; color: var(--bk-acc-t); text-decoration: underline; font: 500 13px var(--bk-sans); cursor: pointer; }
.bk-muted { color: var(--bk-ink2); }
.bk-hint { font: 400 13px/1.5 var(--bk-sans); color: var(--bk-ink2); margin: 12px 0 0; }
.bk-hint.ok { color: #2f8a55; } .bk-hint.err { color: #b3322e; }
.bk-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
.bk-chip { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bk-line2); background: transparent; color: inherit; font: 500 13px var(--bk-sans); cursor: pointer; }
.bk-chip.on, .bk-chip:hover { background: var(--bk-ink); color: var(--bk-bg); border-color: var(--bk-ink); }
.bk-search, .bk-fl input, .bk-fl select, .bk-fl textarea, .bk-promo input, .bk-wait input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; border-radius: calc(var(--bk-r) - 4px); border: 1px solid var(--bk-line2); background: var(--bk-card); color: var(--bk-ink); font: 400 15px var(--bk-sans); outline: 0; transition: border-color .2s; }
.bk-fl textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.bk-search:focus, .bk-fl input:focus, .bk-fl textarea:focus, .bk-fl select:focus, .bk-promo input:focus { border-color: var(--bk-ink); }
.bk-search { margin-bottom: 12px; }
.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .bk-grid { grid-template-columns: 1fr; } }
.bk-svc { position: relative; text-align: left; padding: 14px 40px 14px 14px; border-radius: calc(var(--bk-r) - 2px); border: 1px solid var(--bk-line2); background: var(--bk-card); color: inherit; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .2s, box-shadow .2s; font-family: var(--bk-sans); }
.bk-svc:hover { border-color: var(--bk-ink); }
.bk-svc.on { border-color: var(--bk-ink); box-shadow: inset 0 0 0 1px var(--bk-ink); }
.bk-svc__img { height: 84px; margin: -14px -40px 6px -14px; border-radius: calc(var(--bk-r) - 3px) calc(var(--bk-r) - 3px) 0 0; background: var(--bk-bg2) center/cover; }
.bk-svc__t { font: 500 14.5px/1.25 var(--bk-sans); }
.bk-svc__d { font: 400 12.5px/1.4 var(--bk-sans); color: var(--bk-ink2); }
.bk-svc__m { display: flex; justify-content: space-between; gap: 8px; font: 500 11px var(--bk-mono); color: var(--bk-ink2); margin-top: auto; }
.bk-svc__m b { color: var(--bk-ink); font-weight: 500; }
.bk-badge { font: 500 9.5px var(--bk-mono); letter-spacing: .1em; text-transform: uppercase; background: var(--bk-acc); color: var(--bk-acc-ink); padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
.bk-check { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--bk-line2); box-sizing: border-box; transition: all .2s; }
.bk-svc.on .bk-check { background: var(--bk-acc); border-color: var(--bk-acc); box-shadow: inset 0 0 0 3px var(--bk-card); }
.bk-repeat { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px 16px; margin-bottom: 16px; border-radius: calc(var(--bk-r) - 2px); border: 1px dashed var(--bk-acc); background: transparent; color: inherit; cursor: pointer; font-family: var(--bk-sans); }
.bk-repeat svg { color: var(--bk-acc); flex: none; }
.bk-repeat span { display: flex; flex-direction: column; gap: 3px; }
.bk-repeat small { color: var(--bk-ink2); font-size: 12.5px; }
.bk-staffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bk-staff { padding: 16px 10px 14px; border-radius: calc(var(--bk-r) - 2px); border: 1px solid var(--bk-line2); background: var(--bk-card); color: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; font-family: var(--bk-sans); transition: border-color .2s; }
.bk-staff:hover, .bk-staff.on { border-color: var(--bk-ink); }
.bk-staff.on { box-shadow: inset 0 0 0 1px var(--bk-ink); }
.bk-ava { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--bk-bg2) center/cover; border: 1px solid var(--bk-line); font: 500 14px var(--bk-mono); color: var(--bk-ink2); }
.bk-ava--any { font-size: 26px; color: var(--bk-acc-t); }
.bk-staff__t { font: 500 14px/1.2 var(--bk-sans); }
.bk-staff__m { font: 500 10.5px var(--bk-mono); color: var(--bk-ink2); }
.bk-rate { font: 500 12px var(--bk-sans); color: var(--bk-acc-t); }
.bk-rate small { color: var(--bk-ink3); }
.bk-cal { border: 1px solid var(--bk-line); border-radius: var(--bk-r); padding: 14px; background: var(--bk-card); }
.bk-cal__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bk-cal__h b { font: 500 22px var(--bk-serif); text-transform: capitalize; }
.bk-cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-cal__dow { text-align: center; font: 500 10px var(--bk-mono); color: var(--bk-ink3); padding: 4px 0; }
.bk-day { position: relative; aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--bk-ink3); font: 500 14px var(--bk-sans); cursor: default; }
.bk-day.has { color: var(--bk-ink); cursor: pointer; border-color: var(--bk-line); }
.bk-day.has:hover { border-color: var(--bk-ink); }
.bk-day.on { background: var(--bk-ink); color: var(--bk-bg); border-color: var(--bk-ink); }
.bk-day i { position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--bk-acc); }
.bk-day.on i { background: var(--bk-bg); }
.bk-slots__title { font: 500 26px var(--bk-serif); margin: 22px 0 10px; text-transform: capitalize; }
.bk-slots__g { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bk-line); }
.bk-slots__g > span { font: 500 10.5px var(--bk-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bk-ink2); padding-top: 13px; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.bk-slot { height: 42px; border-radius: calc(var(--bk-r) - 4px); border: 1px solid var(--bk-line2); background: transparent; color: inherit; font: 500 13px var(--bk-mono); cursor: pointer; transition: all .2s; }
.bk-slot:hover { border-color: var(--bk-ink); }
.bk-slot.on { background: var(--bk-acc); border-color: var(--bk-acc); color: var(--bk-acc-ink); }
.bk-empty { padding: 22px; margin-top: 14px; border: 1px dashed var(--bk-line2); border-radius: var(--bk-r); color: var(--bk-ink2); font: 400 14.5px/1.55 var(--bk-sans); }
.bk-near { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.bk-wait { margin-top: 18px; font: 400 14px var(--bk-sans); }
.bk-wait summary { cursor: pointer; color: var(--bk-acc-t); }
.bk-wait__f { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.bk-wait__f .bk-btn { grid-column: 1 / -1; }
.bk-sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px; border-radius: calc(var(--bk-r) - 2px); background: var(--bk-bg2); margin-bottom: 22px; }
.bk-sum span { font: 500 11.5px var(--bk-mono); color: var(--bk-ink2); grid-column: 1; }
.bk-sum .bk-link { grid-row: 1; grid-column: 2; }
.bk-sec { font: 500 10.5px var(--bk-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bk-ink2); margin: 22px 0 10px; }
.bk-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-fl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bk-fl > span { font: 500 10px var(--bk-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bk-ink2); }
.bk-fl em { font: normal 400 12px var(--bk-sans); color: #b3322e; }
.bk-fl.err input, .bk-fl.err select, .bk-fl.err textarea { border-color: #b3322e; }
.bk-toggle { display: flex; align-items: center; gap: 12px; padding: 8px 0; font: 400 14.5px var(--bk-sans); cursor: pointer; }
.bk-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bk-toggle span { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--bk-line2); transition: background .25s; }
.bk-toggle span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bk-bg); transition: transform .25s; }
.bk-toggle input:checked + span { background: var(--bk-acc); }
.bk-toggle input:checked + span::after { transform: translateX(18px); }
.bk-toggle input:focus-visible + span { outline: 2px solid var(--bk-acc); outline-offset: 2px; }
.bk-pays { display: flex; flex-direction: column; gap: 8px; }
.bk-pay { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: calc(var(--bk-r) - 2px); border: 1px solid var(--bk-line2); background: var(--bk-card); color: inherit; font: 500 14.5px var(--bk-sans); cursor: pointer; text-align: left; }
.bk-pay small { font: 500 12px var(--bk-mono); color: var(--bk-ink2); }
.bk-pay.on { border-color: var(--bk-ink); box-shadow: inset 0 0 0 1px var(--bk-ink); }
.bk-promo { display: flex; gap: 8px; }
.bk-promo input { font-family: var(--bk-mono); text-transform: uppercase; }
.bk-promo .bk-btn { height: 48px; border-radius: calc(var(--bk-r) - 4px); }
.bk-total { margin-top: 18px; border-top: 1px solid var(--bk-line2); }
.bk-total > div { display: flex; justify-content: space-between; padding: 9px 0; font: 400 14px var(--bk-sans); color: var(--bk-ink2); }
.bk-total__t { border-top: 1px solid var(--bk-line); color: var(--bk-ink) !important; }
.bk-total__t b { font: 600 22px var(--bk-sans); }
.bk-earn { font: 500 12px var(--bk-mono) !important; color: var(--bk-acc-t) !important; justify-content: flex-end !important; }
.bk-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font: 400 13px/1.5 var(--bk-sans); color: var(--bk-ink2); }
.bk-consent input { margin-top: 3px; accent-color: var(--bk-acc); }
.bk-consent a { color: inherit; }
.bk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.bk-error { margin-top: 16px; padding: 14px 16px; border-radius: calc(var(--bk-r) - 2px); background: rgba(179, 50, 46, .08); color: #b3322e; font: 500 14px/1.5 var(--bk-sans); }
.bk-note { padding: 14px; border-radius: 10px; background: var(--bk-bg2); font: 400 14px var(--bk-sans); margin-bottom: 14px; }
.bk-done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 8px; }
.bk-done__ic { width: 84px; height: 84px; border-radius: 50%; background: var(--bk-acc); color: var(--bk-acc-ink); display: grid; place-items: center; animation: bkPop .6s var(--bk-ease); }
@keyframes bkPop { from { transform: scale(.4); opacity: 0; } }
.bk-ticket { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--bk-r); background: var(--bk-inv); color: var(--bk-inv-ink); font: 400 14px var(--bk-sans);
  -webkit-mask: radial-gradient(circle 11px at 0 70%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 11px at 100% 70%, transparent 98%, #000) right/51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 70%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 11px at 100% 70%, transparent 98%, #000) right/51% 100% no-repeat; }
.bk-ticket .bk-kicker { color: var(--bk-gold); }
.bk-ticket b { font: 500 26px/1.1 var(--bk-serif); }
.bk-ticket__sum { border-top: 1px dashed rgba(255, 255, 255, .2); padding-top: 12px; margin-top: 8px; }
.bk-row2 { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-loading { display: flex; gap: 6px; justify-content: center; padding: 40px 0; }
.bk-loading i { width: 8px; height: 8px; border-radius: 50%; background: var(--bk-acc); animation: bkDot 1s infinite ease-in-out; }
.bk-loading i:nth-child(2) { animation-delay: .15s; } .bk-loading i:nth-child(3) { animation-delay: .3s; }
@keyframes bkDot { 0%, 80%, 100% { transform: scale(.4); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.bk-toast { position: fixed; left: 50%; bottom: 110px; z-index: 9999; transform: translate(-50%, 16px); opacity: 0; visibility: hidden; padding: 14px 20px; border-radius: 999px; background: var(--bk-ink); color: var(--bk-bg); font: 500 14px var(--bk-sans); transition: all .35s var(--bk-ease); pointer-events: none; }
.bk-toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.bk-fab { position: fixed; right: 20px; bottom: 20px; z-index: 9980; height: 56px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--bk-acc); color: var(--bk-acc-ink); font: 500 15px var(--bk-sans); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .6); cursor: pointer; }
/* страницы плагина (my, review, page) — нейтральные, наследуют типографику темы */
.bk-page { max-width: 980px; margin: 0 auto; padding: 32px 16px 80px; font-family: var(--bk-sans); color: var(--bk-ink); }
.bk-page__title { font: 500 clamp(36px, 5vw, 64px)/1 var(--bk-serif); margin: 0 0 24px; }
.bk-my__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 28px; }
.bk-card { padding: 22px; border-radius: var(--bk-r); border: 1px solid var(--bk-line); background: var(--bk-card); display: flex; flex-direction: column; gap: 10px; }
.bk-card--accent { background: var(--bk-acc); color: var(--bk-acc-ink); border: 0; }
.bk-card--accent .bk-kicker, .bk-card--accent .bk-muted { color: inherit; opacity: .85; }
.bk-big { font: 600 52px/1 var(--bk-sans); letter-spacing: -.03em; }
.bk-bar { height: 3px; background: rgba(255, 255, 255, .25); } .bk-bar i { display: block; height: 100%; background: var(--bk-gold); }
.bk-code { font: 500 20px var(--bk-mono); letter-spacing: .14em; padding: 12px; border: 1px dashed var(--bk-line2); border-radius: 8px; text-align: center; }
.bk-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--bk-line); }
.bk-row__end { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bk-status { font: 500 11px var(--bk-mono); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--bk-line2); }
.bk-status--done { border-color: #2f8a55; color: #2f8a55; } .bk-status--cancelled { opacity: .55; text-decoration: line-through; } .bk-status--no_show { color: #b3322e; border-color: #b3322e; }
.bk-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 34px; margin: 10px 0 16px; }
.bk-stars input { display: none; } .bk-stars label { cursor: pointer; color: var(--bk-line2); transition: color .15s; }
.bk-stars input:checked ~ label, .bk-stars label:hover, .bk-stars label:hover ~ label { color: var(--bk-acc); }
.bk-review-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.bk-review-form textarea { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--bk-line2); background: var(--bk-card); font: 400 15px/1.5 var(--bk-sans); color: var(--bk-ink); }
@media (max-width: 560px) { .bk-f2 { grid-template-columns: 1fr; } .bk-foot .bk-btn { padding: 0 18px; } .bk-slots__g { grid-template-columns: 1fr; } .bk-slots__g > span { padding-top: 0; } }
@media (prefers-reduced-motion: reduce) { .bk-drawer, .bk-overlay, .bk-done__ic { transition: none; animation: none; } }