/* Виджет онлайн-записи. Нейтральные стили на CSS-переменных —
   цвет под бренд сайта меняется одной переменной --bk-accent. */
.bk {
    --bk-accent: #5b6cff;
    --bk-accent-ink: #fff;
    --bk-bg: #fff;
    --bk-line: #e6e8ef;
    --bk-ink: #1b1f2a;
    --bk-muted: #6b7280;
    --bk-radius: 14px;
    max-width: 460px;
    margin: 0 auto;
    font-family: inherit;
    color: var(--bk-ink);
    background: var(--bk-bg);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    padding: 20px;
    box-sizing: border-box;
}
.bk * { box-sizing: border-box; }
.bk__title { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.bk__sub { font-size: 13px; color: var(--bk-muted); margin: 0 0 16px; }
.bk__label { font-size: 13px; font-weight: 600; margin: 16px 0 8px; }
.bk__label:first-of-type { margin-top: 0; }
.bk__chips { display: flex; flex-wrap: wrap; gap: 8px; animation: bkFade .28s ease both; }
/* Услуги — ровная сетка в 2 равные колонки */
.bk__chips[data-grp="service"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 400px) {
    .bk__chips[data-grp="service"] { grid-template-columns: 1fr; }
}
.bk__chip {
    border: 1px solid var(--bk-line);
    background: #f7f8fb;
    background: color-mix(in srgb, var(--bk-accent) 7%, #fff);
    color: var(--bk-ink);
    border-radius: 12px;
    padding: 11px 15px;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    user-select: none;
}
.bk__chip:hover {
    border-color: var(--bk-accent);
    background: color-mix(in srgb, var(--bk-accent) 14%, #fff);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}
.bk__chip:active { transform: translateY(0); }
.bk__chip.is-active {
    background: var(--bk-accent);
    border-color: var(--bk-accent);
    color: var(--bk-accent-ink);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--bk-accent) 35%, transparent);
}
.bk__chip small { display: block; font-size: 11px; opacity: .65; margin-top: 2px; }
.bk__chip.is-active small { opacity: .9; }
@keyframes bkFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.bk__hint { font-size: 13px; color: var(--bk-muted); padding: 4px 0; }

/* ===== Календарь ===== */
.bk__cal { border: 1px solid var(--bk-line); border-radius: 12px; padding: 10px; animation: bkFade .28s ease both; }
.bk__cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bk__cal-title { font-size: 14px; font-weight: 600; }
.bk__cal-nav {
    width: 32px; height: 32px; border: 1px solid var(--bk-line); background: #fff;
    border-radius: 8px; font-size: 18px; line-height: 1; color: var(--bk-ink);
    cursor: pointer; transition: .12s;
}
.bk__cal-nav:hover:not(:disabled) { border-color: var(--bk-accent); color: var(--bk-accent); }
.bk__cal-nav:disabled { opacity: .3; cursor: default; }
.bk__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk__cal-wd { margin-bottom: 4px; }
.bk__cal-wdc { text-align: center; font-size: 11px; color: var(--bk-muted); padding: 2px 0; }
.bk__cal-cell {
    aspect-ratio: 1 / 1; border: 0; background: none; border-radius: 8px;
    font-size: 14px; color: var(--bk-ink); font-family: inherit;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
button.bk__cal-cell {
    cursor: pointer;
    background: color-mix(in srgb, var(--bk-accent) 8%, #fff);
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
button.bk__cal-cell:hover {
    background: color-mix(in srgb, var(--bk-accent) 18%, #fff);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
}
.bk__cal-cell.is-off { color: var(--bk-line); }
.bk__cal-cell.is-empty { background: none; }
.bk__cal-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--bk-accent); }
.bk__cal-cell.is-active {
    background: var(--bk-accent) !important;
    color: var(--bk-accent-ink);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--bk-accent) 35%, transparent);
}
.bk__chip--cal { background: #fff; border-style: dashed; }
.bk__summary {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bk-accent) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--bk-accent) 25%, var(--bk-line));
    font-size: 14px;
    line-height: 1.5;
}
.bk__field { margin-top: 10px; }
.bk__field input {
    width: 100%;
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
}
.bk__field input:focus { border-color: var(--bk-accent); }
.bk__btn {
    width: 100%;
    margin-top: 16px;
    border: 0;
    border-radius: 10px;
    background: var(--bk-accent);
    color: var(--bk-accent-ink);
    font-size: 15px;
    font-weight: 600;
    padding: 14px;
    cursor: pointer;
    transition: .12s;
}
.bk__btn:disabled { opacity: .45; cursor: not-allowed; }
.bk__err { color: #c02626; font-size: 13px; margin-top: 10px; }
.bk__ok { text-align: center; padding: 10px 0; }
.bk__ok-mark {
    width: 56px; height: 56px; border-radius: 50%;
    background: #e9fbf0; color: #18a558;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin: 0 auto 14px;
}
.bk__ok-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.bk__ok-info { font-size: 14px; color: var(--bk-muted); line-height: 1.5; }
.bk__ok-info b { color: var(--bk-ink); }
.bk__again { margin-top: 16px; background: none; border: 0; color: var(--bk-accent); cursor: pointer; font-size: 14px; }