/* ======== Бронювання зустрічі (попап) — дизайн-система BUREAU ======== */
.bk { position: fixed; inset: 0; z-index: 200; }
.bk[hidden] { display: none; }
.bk__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.94); }
.bk__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  background: #151515; color: var(--c-white);
  border: 1px solid var(--c-red);
}
.bk__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--c-line-inv); }
.bk__label { margin: 0 0 10px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-2-inv); }
.bk__title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -.02em; }
.bk__close { background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: var(--c-white); padding: 8px; min-width: 44px; min-height: 44px; }
.bk__close:hover { color: var(--c-red); }
.bk__meta { display: flex; flex-wrap: wrap; margin: 0; border-bottom: 1px solid var(--c-line-inv); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2-inv); }
.bk__meta > span { padding: 12px clamp(20px, 2.4vw, 32px); border-right: 1px solid var(--c-line-inv); }
.bk__meta > span:last-child { border-right: 0; color: var(--c-red); }
.bk .input, .bk .textarea, [data-bk-inline] .input, [data-bk-inline] .textarea { background: #111111; border: 1px solid #4D4D4D; color: var(--c-white); }
.bk .input::placeholder, [data-bk-inline] .input::placeholder { color: #999999; }
.bk .input:focus, .bk .textarea:focus, [data-bk-inline] .input:focus, [data-bk-inline] .textarea:focus { border-color: var(--c-white); outline: 2px solid var(--c-red); outline-offset: 2px; }
.bk .btn--secondary { color: var(--c-white); border-color: var(--c-white); }
.bk .btn--secondary:hover { background: var(--c-white); color: var(--c-black); }

.bk__body { display: grid; grid-template-columns: minmax(0, 1fr); }
.bk__cal { padding: clamp(20px, 2.4vw, 32px); }
.bk__cal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.bk__month { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.bk__nav { width: 44px; height: 44px; background: none; border: 1px solid var(--c-line-inv); color: var(--c-white); cursor: pointer; font-size: 18px; line-height: 1; }
.bk__nav:hover { border-color: var(--c-white); color: var(--c-red); }
.bk__week { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-2-inv); }
.bk__week > span { padding: 8px 0; text-align: center; }
.bk__days { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--c-line-inv); border-left: 1px solid var(--c-line-inv); }
.bk__day {
  min-height: 48px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-right: 1px solid var(--c-line-inv); border-bottom: 1px solid var(--c-line-inv);
  font-family: var(--f-mono); font-size: 13px; color: var(--c-white); cursor: pointer;
}
.bk__day:hover:not(:disabled) { background: var(--c-white); color: var(--c-black); }
.bk__day.is-active { background: var(--c-red); color: var(--c-white); }
.bk__day--off { color: var(--c-disabled-inv); cursor: default; }
.bk__day--pad { border-right: 1px solid var(--c-line-inv); border-bottom: 1px solid var(--c-line-inv); }
.bk__legend { display: flex; gap: 24px; margin: 16px 0 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2-inv); }
.bk__legend > span { display: flex; align-items: center; gap: 8px; }
.bk__legend i { width: 8px; height: 8px; display: block; }
.bk__legend-free { background: var(--c-white); }
.bk__legend-busy { background: var(--c-disabled-inv); }

.bk__side { padding: clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--c-line-inv); display: grid; gap: 16px; align-content: start; }
.bk__side-label { margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-2-inv); }
.bk__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 1px; background: var(--c-line-inv); border: 1px solid var(--c-line-inv); }
.bk__slot { min-height: 44px; background: #151515; border: 0; font-family: var(--f-mono); font-size: 13px; color: var(--c-white); cursor: pointer; }
.bk__slot:hover:not(:disabled) { background: var(--c-white); color: var(--c-black); }
.bk__slot.is-active { background: var(--c-red); color: var(--c-white); }
.bk__slot--off { color: var(--c-disabled-inv); cursor: default; text-decoration: line-through; }
.bk__form { display: grid; gap: 12px; }
.bk__pick { margin: 4px 0 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2-inv); }
.bk__pick.is-set { color: var(--c-red); }
.bk__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--c-text-2-inv); }
.bk__done { display: grid; gap: 14px; justify-items: start; }
.bk__done[hidden] { display: none; }
.bk__done-mark { margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-red); }
.bk__done-when { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; }

@media (min-width: 860px) {
  .bk__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .bk__side { border-top: 0; border-left: 1px solid var(--c-line-inv); }
}

/* ---------- Inline-версія (вбудована в секцію, без попапу) ---------- */
[data-bk-inline] { display: block; border: 1px solid var(--c-line-inv); background: #151515; }
[data-bk-inline] .hidden-fields-container { display: none !important; }
[data-bk-inline] .wpcf7-form > p:not(.bk__note) { display: contents; }
[data-bk-inline] .wpcf7-form br,
[data-bk-inline] .wpcf7-spinner,
[data-bk-inline] .wpcf7-response-output { display: none !important; }
/* Keep the empty node out of the reference layout, but never hide a real
 * CF7 validation or delivery result from the user. */
[data-bk-inline] .wpcf7-response-output:not(:empty) {
  display: block !important;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  color: var(--c-text-2, #8b8b8b);
  font-size: 14px;
  line-height: 1.45;
}
[data-bk-inline] .wpcf7-form-control-wrap { display: block; }
[data-bk-inline] .bk__meta { border-bottom: 1px solid var(--c-line-inv); }
[data-bk-inline] .bk__body { display: grid; grid-template-columns: minmax(0, 1fr); }
[data-bk-inline] .bk__side { border-top: 1px solid var(--c-line-inv); }
@media (min-width: 860px) {
  [data-bk-inline] .bk__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  [data-bk-inline] .bk__side { border-top: 0; border-left: 1px solid var(--c-line-inv); }
}

/* Shared page booking composition. The popup keeps the .bk rules above;
 * only inline surfaces receive this two-level layout. */
[data-bk-inline].bk-inline--with-copy {
  border: 1px solid var(--c-line-inv);
  background: #151515;
  color: var(--c-white);
}
/* Some service pages reuse the next-section grid class on the booking root.
 * The booking composition owns its own layout; letting .next__grid size the
 * root creates a narrow first grid track and collapses the calendar/forms. */
[data-bk-inline].bk-inline--with-copy.next__grid {
  display: block;
  grid-template-columns: minmax(0, 1fr) !important;
}
[data-bk-inline].bk-inline--with-copy .bk-inline-layout { display: grid; min-width: 0; }
[data-bk-inline].bk-inline--with-copy .bk-inline-copy {
  min-width: 0;
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid var(--c-line-inv);
}
[data-bk-inline].bk-inline--with-copy .bk-inline-copy__label {
  margin: 0 0 24px;
  color: var(--c-text-2-inv);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
[data-bk-inline].bk-inline--with-copy .bk-inline-copy__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
}
[data-bk-inline].bk-inline--with-copy .bk-inline-copy__title span { color: var(--c-red); }
[data-bk-inline].bk-inline--with-copy .bk-inline-copy__desc {
  max-width: 34ch;
  margin: 20px 0 0;
  color: var(--c-text-2-inv);
  font-size: 15px;
  line-height: 1.6;
}
[data-bk-inline].bk-inline--with-copy .bk-inline-copy__contacts {
  margin: 0;
  color: var(--c-text-2-inv);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .1em;
}
[data-bk-inline].bk-inline--with-copy .bk-inline-booking { min-width: 0; }
[data-bk-inline].bk-inline--with-copy .bk-inline-booking > .bk__meta { border-bottom: 1px solid var(--c-line-inv); }

@media (min-width: 1024px) {
  [data-bk-inline].bk-inline--with-copy .bk-inline-layout { grid-template-columns: 5fr 7fr; }
  [data-bk-inline].bk-inline--with-copy .bk-inline-copy { border-bottom: 0; border-right: 1px solid var(--c-line-inv); }
}

[data-bk-inline].bk-inline--with-copy .bk__body { min-width: 0; }
.cta-final__form { min-width: 0; }
.next__grid:has(.next__col--full) { grid-template-columns: minmax(0, 1fr) !important; }