/* ==========================================================================
   Page: booking  (site/booking/create · done · manage)
   --------------------------------------------------------------------------
   .bk-file      the aqua folder: sheets (one per step) with colour tabs; a
                 finished step's sheet is "filed" (white, tab lit, value shown)
   .bk-form      the steps (service → branch + session type → appointment →
                 details): progress dots, choice cards, calendar with the
                 day's time chips below it, fields, summary, navigation
   .bk-done      success: the sealed envelope with the reference
   Phones: the folder becomes a compact strip of four tabs above the form.
   ========================================================================== */

.bk__grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 1rem + 3vw, 4rem); }

/* ── The file ────────────────────────────────────────────────────────────── */
.bk-file {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    overflow: hidden;
    padding: var(--space-8) var(--space-6) var(--space-12);
    border-radius: var(--r-xl);
    background: var(--aqua);
    color: var(--ink-deep);
    --pattern-band-h: 90px;
}
.bk-file > * { position: relative; z-index: 1; }
.bk-file .pattern-band { z-index: 0; }
.bk-file__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 300; }
.bk-file__note { margin: var(--space-2) 0 var(--space-6); font-size: var(--fs-sm); line-height: 1.8; }
.bk-file__lock { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-5); font-size: var(--fs-xs); line-height: 1.7; }
.bk-file__lock .icon { margin-top: 0.25em; }

.bk-sheets { display: grid; gap: var(--space-2); }
.bk-sheet {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-md);
    border-inline-start: 6px solid color-mix(in srgb, var(--tab) 35%, transparent);
    background: rgb(255 255 255 / 0.35);
    transform: translateX(0);
    transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.bk-sheet__num { color: rgb(42 39 35 / 0.6); font-size: 0.72rem; font-weight: 600; }
.bk-sheet__body { display: grid; flex: 1; min-width: 0; }
.bk-sheet__label { font-size: var(--fs-xs); color: rgb(42 39 35 / 0.75); }
.bk-sheet__value { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: rgb(42 39 35 / 0.55); }
.bk-sheet__icon { color: rgb(42 39 35 / 0.45); }
.bk-sheet.is-current { background: rgb(255 255 255 / 0.6); box-shadow: 0 0 0 2px #fff inset; }
.bk-sheet.is-filed { background: #fff; border-inline-start-color: var(--tab); box-shadow: 0 10px 20px -16px rgb(0 0 0 / 0.5); animation: bk-file-in var(--dur-slow) var(--ease-spring); }
.bk-sheet.is-filed .bk-sheet__value { color: var(--ink); }
.bk-sheet.is-filed .bk-sheet__icon { color: var(--ink); }
@keyframes bk-file-in { from { transform: translateY(-10px) scale(0.97); } }

/* ── Form shell ──────────────────────────────────────────────────────────── */
.bk-form { min-width: 0; }
.bk-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bk-alert { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--rose); border-radius: var(--r-md); background: color-mix(in srgb, var(--rose) 10%, #fff); font-size: var(--fs-sm); }
.bk-error { margin-top: var(--space-1); color: #A33A55; font-size: var(--fs-xs); }

.bk-progress { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.bk-progress li { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bk-progress li span { display: block; height: 100%; width: 0; background: var(--second-strong); transition: width var(--dur-slow) var(--ease-out); }
.bk-progress li.is-done span { width: 100%; }
.bk-progress li.is-current span { width: 50%; }

.bk-step { margin: 0; padding: 0; border: 0; min-width: 0; animation: bk-step-in var(--dur-slow) var(--ease-out); }
@keyframes bk-step-in { from { opacity: 0; transform: translateY(12px); } }
.bk-step__q { margin-bottom: var(--space-6); padding: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 300; }
.bk-step__q:focus { outline: none; }
.bk-step__hint { margin: calc(var(--space-4) * -1) 0 var(--space-5); color: var(--ink-faint); font-size: var(--fs-sm); }
.bk-empty { padding: var(--space-6); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-soft); text-align: center; }

/* ── Choice cards ────────────────────────────────────────────────────────── */
.bk-choices--branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.bk-choices--services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
/* step 1: services grouped by path */
.bk-finder { margin: calc(var(--space-2) * -1) 0 var(--space-6); }
.bk-group { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 var(--space-3); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; }
.bk-group:first-of-type { margin-top: 0; }
.bk-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bk-branch[hidden] { display: none; }
/* step 2: the session type under the branches */
.bk-field--mode { margin-top: var(--space-8); }
/* step 3: the chosen day's times, right under the calendar */
.bk-slots { max-width: 860px; margin-top: var(--space-6); }
.bk-slots__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); font-weight: 500; }
.bk-slots__title small { color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 400; }
/* step 4: the request at a glance */
.bk-summary { margin-top: var(--space-8); }
.bk-summary__title { margin-bottom: var(--space-3); font-weight: 600; }
.bk-summary + .bk-consent { margin-top: var(--space-5); }
.bk-branch, .bk-service {
    position: relative;
    display: flex;
    overflow: hidden;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--card);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.bk-branch input, .bk-service input { position: absolute; opacity: 0; pointer-events: none; }
.bk-branch:hover, .bk-service:hover { border-color: var(--ink); }
.bk-branch:has(input:checked), .bk-service:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
.bk-branch:has(input:focus-visible), .bk-service:has(input:focus-visible) { outline: 3px solid var(--second-strong); outline-offset: 2px; }

.bk-branch { flex-direction: column; }
.bk-branch__photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel); }
.bk-branch__photo img { width: 100%; height: 100%; object-fit: cover; }
.bk-branch__body { display: grid; gap: 2px; padding: var(--space-4); }
.bk-branch__city { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--fs-xl); }
.bk-branch__country { color: var(--ink-faint); font-size: var(--fs-xs); }
.bk-branch__price { margin-top: var(--space-1); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.bk-branch__price:empty { display: none; }
.bk-service__meta { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: 2px; color: var(--ink-soft); font-size: var(--fs-xs); }

.bk-service { align-items: center; gap: var(--space-4); padding: var(--space-3); }
.bk-service__thumb { flex-shrink: 0; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--accent); }
.bk-service__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bk-service__body { display: grid; gap: 2px; min-width: 0; padding-inline-end: var(--space-8); }
.bk-service__name { font-weight: 500; }
.bk-service__summary { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.7; }

.bk-check {
    position: absolute;
    top: var(--space-3);
    inset-inline-end: var(--space-3);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    background: var(--card);
    color: transparent;
    font-size: 0.9rem;
    transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.bk-service .bk-check { top: 50%; transform: translateY(-50%); }
:has(input:checked) > .bk-check { border-color: var(--ink); background: var(--ink); color: #fff; }
.bk-service:has(input:checked) > .bk-check::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); }

/* ── Calendar ────────────────────────────────────────────────────────────── */
.bk-calendar { position: relative; max-width: 860px; padding: var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: var(--card); }
.bk-cal__head { position: absolute; inset-inline: var(--space-4); top: var(--space-4); display: flex; justify-content: space-between; pointer-events: none; }
.bk-cal__head .bk-cal__nav { pointer-events: auto; }
.bk-cal__months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.bk-cal__name { margin-bottom: var(--space-4); font-size: var(--fs-lg); font-weight: 500; line-height: 40px; text-align: center; }
@media (max-width: 767.98px) {
    .bk-cal__months { grid-template-columns: 1fr; }
    .bk-cal__month + .bk-cal__month { display: none; }
    .bk-cal__head { inset-inline: var(--space-2); top: var(--space-2); }
}
.bk-cal__nav { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 1.3rem; line-height: 1; }
.bk-cal__nav:disabled { opacity: 0.3; cursor: default; }
.bk-cal__nav:not(:disabled):hover { border-color: var(--ink); }
.bk-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); text-align: center; }
.bk-cal__dow { padding-bottom: var(--space-2); color: var(--ink-faint); font-size: 0.72rem; }
.bk-day {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.bk-day:not(:disabled):not(.is-blank) { box-shadow: inset 0 0 0 1.5px var(--second); }
.bk-day:not(:disabled):hover { background: var(--second-tint-strong); }
.bk-day.is-off { color: var(--line-strong); cursor: default; }
.bk-day.is-picked { background: var(--ink); color: #fff; box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--second); }

/* ── Times ───────────────────────────────────────────────────────────────── */
.bk-times__group { margin: var(--space-4) 0 var(--space-3); color: var(--ink-faint); font-size: var(--fs-sm); }
.bk-times__group:first-child { margin-top: 0; }
.bk-times__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); }
.bk-time {
    min-height: 46px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--card);
    font-weight: 500;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bk-time:hover { border-color: var(--ink); }
.bk-time.is-picked { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ── Details ─────────────────────────────────────────────────────────────── */
.bk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.bk-field { display: grid; gap: var(--space-2); align-content: start; }
.bk-field--wide { grid-column: 1 / -1; }
.bk-field label, .bk-field__label { font-size: var(--fs-sm); font-weight: 500; }
.bk-field em { color: var(--ink-faint); font-style: normal; font-weight: 400; }
.bk-field small { display: flex; align-items: center; gap: var(--space-1); color: var(--ink-faint); font-size: var(--fs-xs); }
.bk-field input:not([type="radio"]):not([type="checkbox"]), .bk-field textarea, .bk-field select {
    width: 100%;
    min-height: 50px;
    padding: 0.7em 1em;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--card);
    font-size: var(--fs-base);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.bk-field textarea { resize: vertical; line-height: 1.8; }
.bk-field input:focus, .bk-field textarea:focus, .bk-field select:focus { outline: none; border-color: var(--second-strong); box-shadow: 0 0 0 3px var(--second-tint-strong); }
.bk-field [aria-invalid="true"] { border-color: #A33A55; }
.bk-field input[dir="ltr"] { text-align: right; }
[dir="ltr"] .bk-field input[dir="ltr"] { text-align: left; }

.bk-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bk-pill input { position: absolute; opacity: 0; }
.bk-pill span {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding: 0.5em 1.2em;
    border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bk-pill:hover span { border-color: var(--ink); }
.bk-pill input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.bk-pill input:focus-visible + span { outline: 3px solid var(--second-strong); outline-offset: 2px; }

/* Session type — two cards: in person at the branch / remote (D10) */
.bk-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.bk-mode {
    position: relative;
    display: block;
    padding-block: var(--space-4);
    padding-inline: var(--space-4) var(--space-10);   /* room for the check at the end */
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--card);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.bk-mode input { position: absolute; opacity: 0; pointer-events: none; }
.bk-mode:hover { border-color: var(--ink); }
.bk-mode:has(input:checked) { border-color: var(--second); box-shadow: 0 0 0 3px color-mix(in srgb, var(--second) 40%, transparent); }
.bk-mode:has(input:focus-visible) { outline: 3px solid var(--second-strong); outline-offset: 2px; }
.bk-mode:has(input:disabled) { opacity: 0.45; cursor: not-allowed; border-style: dashed; }
.bk-mode:has(input:disabled):hover { border-color: var(--line-strong); }
.bk-mode__body { display: grid; gap: 2px; }
.bk-mode__icon { margin-bottom: var(--space-1); color: var(--second-text); font-size: 1.35rem; }
.bk-mode__name { font-weight: 500; }
.bk-field .bk-mode__hint { display: block; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.7; }
.bk-mode .bk-check { top: var(--space-4); }

/* ── Review ──────────────────────────────────────────────────────────────── */
.bk-review { margin: 0 0 var(--space-6); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--card); }
.bk-review__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
.bk-review__row:last-child { border-bottom: 0; }
.bk-review dt { color: var(--ink-faint); font-size: var(--fs-sm); }
.bk-review dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.bk-review__edit { color: var(--second-text); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 0.3em; }
.bk-consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); line-height: 1.8; cursor: pointer; }
.bk-consent input { flex-shrink: 0; width: 20px; height: 20px; margin-top: 0.3em; accent-color: var(--ink); }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.bk-nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.bk-nav [data-next], .bk-nav [data-submit] { margin-inline-start: auto; }
.bk-nav .btn:disabled { opacity: 0.4; cursor: not-allowed; }
[dir="ltr"] .bk-nav__back { scale: -1 1; }

/* ── Success: the sealed envelope ────────────────────────────────────────── */
.bk-done { display: grid; justify-items: center; gap: var(--space-6); max-width: 640px; margin-inline: auto; text-align: center; }
.bk-done__title { font-size: var(--fs-3xl); }
.bk-done__text { color: var(--ink-soft); font-size: var(--fs-lg); }
.bk-envelope {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 520 / 300;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.5), 0 0 0 1px var(--line);
    animation: bk-env-in 0.8s var(--ease-out);
}
.bk-envelope svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-envelope path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bk-envelope__seal {
    position: absolute; top: 53%; left: 50%;
    display: grid; place-items: center;
    width: 68px; height: 68px;
    border-radius: 50%;
    background: var(--indigo);
    translate: -50% -50%;
    animation: bk-seal 0.7s var(--ease-spring) 0.5s both;
}
.bk-envelope__seal span { width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; }
.bk-envelope__ref { position: absolute; inset-inline: 0; bottom: 12%; display: grid; gap: 2px; }
.bk-envelope__ref small { color: var(--ink-faint); font-size: var(--fs-xs); }
.bk-envelope__ref strong { font-family: var(--font-latin); font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem); font-weight: 600; letter-spacing: 0.1em; }
@keyframes bk-env-in { from { opacity: 0; transform: translateY(20px) rotate(-2deg); } }
@keyframes bk-seal { from { scale: 1.8; opacity: 0; } }
.bk-done__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); width: 100%; }
.bk-done__facts div { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.bk-done__facts dt { color: var(--ink-faint); font-size: var(--fs-xs); }
.bk-done__facts dd { margin: 0; font-weight: 500; }
.bk-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.bk-done__note { color: var(--ink-faint); font-size: var(--fs-sm); }

/* ── Manage: the ticket (status-coloured edge, perforation) ──────────────── */
.bk-manage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); max-width: 760px; margin-inline: auto; }
.bk-flash {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--r-pill);
    background: var(--second-tint-strong);
    font-weight: 500;
    animation: bk-env-in 0.5s var(--ease-out);
}
.bk-ticket {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    border-top: 8px solid var(--accent);
    background: var(--card);
    box-shadow: 0 30px 60px -44px rgb(0 0 0 / 0.45);
    animation: bk-env-in 0.7s var(--ease-out);
}
.bk-ticket__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-8) var(--space-8) 0; }
.bk-ticket__ref { font-family: var(--font-latin); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 600; letter-spacing: 0.08em; }
.bk-status {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 0.45em 1.1em;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--accent) 40%, #fff);
    color: var(--ink-deep);
    font-size: var(--fs-sm); font-weight: 600;
}
.bk-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-deep); }
.bk-ticket__intro { padding: var(--space-3) var(--space-8) 0; color: var(--ink-soft); }
/* remote session: how it will happen */
.bk-ticket__note {
    display: flex; align-items: flex-start; gap: var(--space-2);
    margin: var(--space-4) var(--space-8) 0; padding: var(--space-3) var(--space-4);
    border-radius: var(--r-md); background: var(--second-tint);
    color: var(--ink); font-size: var(--fs-sm); line-height: 1.8;
}
.bk-ticket__note .icon { flex-shrink: 0; margin-top: 0.3em; color: var(--second-text); }
.bk-ticket__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); margin: 0; padding: var(--space-6) var(--space-8); }
.bk-ticket__facts dt { color: var(--ink-faint); font-size: var(--fs-xs); }
.bk-ticket__facts dd { margin: 0; font-size: var(--fs-lg); font-weight: 500; }
.bk-ticket__facts small { display: block; color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 400; }
.bk-ticket__facts.is-void dd { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-ticket__cut { position: relative; display: block; margin-inline: var(--space-8); border-top: 2px dashed var(--line-strong); }
.bk-ticket__cut::before, .bk-ticket__cut::after {
    content: ""; position: absolute; top: -13px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
}
.bk-ticket__cut::before { inset-inline-start: calc(-1 * var(--space-8) - 13px); }
.bk-ticket__cut::after  { inset-inline-end: calc(-1 * var(--space-8) - 13px); }
.bk-ticket__foot { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-6) var(--space-8) var(--space-8); }

/* ── Manage: reschedule / cancel panels ──────────────────────────────────── */
.bk-panel { padding: var(--space-6) var(--space-8); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.bk-panel--muted { display: flex; align-items: center; gap: var(--space-3); background: var(--panel); color: var(--ink-soft); }
.bk-panel__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xl); }
.bk-panel__note { margin: var(--space-2) 0 var(--space-5); color: var(--ink-soft); }
.bk-panel__label { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-5) 0 var(--space-3); font-weight: 500; }
.bk-panel__label small { color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 400; }
.bk-panel__actions { display: flex; justify-content: flex-end; margin-top: var(--space-6); }
.bk-panel__actions .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bk-error { margin-top: var(--space-2); color: var(--danger); font-size: var(--fs-sm); }

/* ── Manage: rating (D14) — five stars; the chosen one and those before it fill ── */
.bk-rate .bk-field { margin-top: var(--space-5); }
.bk-stars { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; border: 0; }
.bk-star { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bk-star input { position: absolute; opacity: 0; pointer-events: none; }
.bk-star .icon { width: 34px; height: 34px; color: var(--line-strong); fill: transparent; transition: color var(--dur-fast) var(--ease-out), fill var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring); }
.bk-star:has(input:focus-visible) { outline: 3px solid var(--second-strong); outline-offset: 0; }
.bk-star:active .icon { transform: scale(0.88); }
.bk-stars:has(input[value="1"]:checked) .bk-star:nth-of-type(-n+1) .icon,
.bk-stars:has(input[value="2"]:checked) .bk-star:nth-of-type(-n+2) .icon,
.bk-stars:has(input[value="3"]:checked) .bk-star:nth-of-type(-n+3) .icon,
.bk-stars:has(input[value="4"]:checked) .bk-star:nth-of-type(-n+4) .icon,
.bk-stars:has(input[value="5"]:checked) .bk-star:nth-of-type(-n+5) .icon { color: var(--rating); fill: var(--peach); }
@media (hover: hover) {
    .bk-stars:has(.bk-star:nth-of-type(1):hover) .bk-star:nth-of-type(-n+1) .icon,
    .bk-stars:has(.bk-star:nth-of-type(2):hover) .bk-star:nth-of-type(-n+2) .icon,
    .bk-stars:has(.bk-star:nth-of-type(3):hover) .bk-star:nth-of-type(-n+3) .icon,
    .bk-stars:has(.bk-star:nth-of-type(4):hover) .bk-star:nth-of-type(-n+4) .icon,
    .bk-stars:has(.bk-star:nth-of-type(5):hover) .bk-star:nth-of-type(-n+5) .icon { color: var(--rating); transform: scale(1.08); }
}
.bk-stars__word { margin-inline-start: var(--space-3); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 500; }
.bk-stars__word span { display: none; }
.bk-stars:has(input[value="1"]:checked) [data-word="1"],
.bk-stars:has(input[value="2"]:checked) [data-word="2"],
.bk-stars:has(input[value="3"]:checked) [data-word="3"],
.bk-stars:has(input[value="4"]:checked) [data-word="4"],
.bk-stars:has(input[value="5"]:checked) [data-word="5"] { display: inline; }
.bk-rated__stars { display: inline-flex; gap: 2px; }
.bk-rated__stars .icon { color: var(--line-strong); fill: transparent; }
.bk-rated__stars .icon.is-on { color: var(--rating); fill: var(--peach); }
.bk-days { display: flex; gap: var(--space-2); overflow-x: auto; padding: 4px 4px var(--space-3); scroll-snap-type: x mandatory; scrollbar-width: thin; }
.bk-daychip {
    flex: 0 0 68px;
    display: grid; justify-items: center; gap: 2px;
    padding: var(--space-3) 0;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--card);
    scroll-snap-align: start;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bk-daychip small { color: var(--ink-faint); font-size: 0.7rem; }
.bk-daychip strong { font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; }
.bk-daychip:hover { border-color: var(--ink); }
.bk-daychip.is-picked { border-color: var(--ink); background: var(--ink); color: #fff; }
.bk-daychip.is-picked small { color: rgb(255 255 255 / 0.75); }
.bk-daychip.is-current { box-shadow: inset 0 0 0 1.5px var(--second); }

.bk-cancel summary { cursor: pointer; list-style: none; color: var(--danger); font-size: var(--fs-lg); }
.bk-cancel summary::-webkit-details-marker { display: none; }
.bk-cancel summary::after { content: "+"; margin-inline-start: auto; font-size: var(--fs-xl); font-weight: 300; }
.bk-cancel[open] summary::after { content: "−"; }
.bk-cancel__form { margin-top: var(--space-2); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) { .bk-choices--branches { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-choices--services { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) {
    .bk__grid { grid-template-columns: 1fr; }
    .bk-file { position: static; padding: var(--space-5); --pattern-band-h-mobile: 60px; }
    .bk-file__note, .bk-file__lock { display: none; }
    .bk-file__title { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
    .bk-sheets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
    .bk-sheet { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2); border-inline-start: 0; border-top: 5px solid color-mix(in srgb, var(--tab) 35%, transparent); text-align: center; }
    .bk-sheet.is-filed { border-top-color: var(--tab); }
    .bk-sheet__num, .bk-sheet__icon { display: none; }
    .bk-sheet__label { font-size: 0.66rem; }
    .bk-sheet__value { font-size: 0.72rem; }
    .bk-progress { display: none; }
}
@media (max-width: 575.98px) {
    .bk-choices--branches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .bk-branch__body { padding: var(--space-3); }
    .bk-branch__city { font-size: var(--fs-lg); }
    .bk-fields { grid-template-columns: 1fr; }
    .bk-review__row { grid-template-columns: 1fr auto; }
    .bk-review dt { grid-column: 1 / -1; }
    .bk-calendar { padding: var(--space-3); }
    .bk-done__facts { grid-template-columns: 1fr; }
    .bk-nav .btn { flex: 1; }
    .bk-ticket__head, .bk-ticket__intro, .bk-ticket__facts, .bk-ticket__foot { padding-inline: var(--space-5); }
    .bk-ticket__head { flex-direction: column-reverse; padding-top: var(--space-6); }
    .bk-ticket__facts { grid-template-columns: 1fr; gap: var(--space-4); }
    .bk-ticket__cut { margin-inline: var(--space-5); }
    .bk-ticket__cut::before { inset-inline-start: calc(-1 * var(--space-5) - 13px); }
    .bk-ticket__cut::after  { inset-inline-end: calc(-1 * var(--space-5) - 13px); }
    .bk-ticket__foot .btn { flex: 1 1 100%; }
    .bk-panel { padding: var(--space-5); }
    .bk-panel__actions .btn { flex: 1; }
}

/* Booked from a package (D16) */
.bk-package { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--second-tint); font-size: var(--fs-sm); font-weight: 500; }
.bk-package .icon { color: var(--second-text); }