/**
 * Booking dialog (template-parts/booking-dialog.php).
 *
 * Material 3 mapped to brand tokens (see .claude/skills/material-ux):
 * compact (<840px) = full-screen dialog with collapsible summary,
 * expanded (≥840px) = two-pane dialog with the summary on the right.
 */

.kr-bk {
    --bk-primary: var(--color-primary, #3246FF);
    --bk-primary-dark: var(--color-primary-dark, #2135cc);
    --bk-selected: rgba(50, 70, 255, 0.12);
    --bk-selected-soft: rgba(50, 70, 255, 0.04);
    --bk-outline: var(--color-gray-400, #9ca3af);
    --bk-outline-soft: var(--color-gray-200, #e5e7eb);
    --bk-muted: var(--color-gray-600, #4b5563);
    --bk-surface: var(--color-gray-50, #f9fafb);
    --bk-error: #b3261e;
    --bk-ease: cubic-bezier(0.2, 0, 0, 1);

    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: var(--color-black, #171717);
    font-family: var(--font-family-primary);
}

.kr-bk::backdrop { background: rgba(17, 24, 39, 0.5); }
html.kr-bk-open { overflow: hidden; }

.kr-bk__frame { display: flex; flex-direction: column; height: 100%; }

/* Top bar + progress ---------------------------------------------------- */
.kr-bk__top { display: flex; align-items: center; gap: 4px; padding: 8px 12px 0 4px; }
.kr-bk__title { flex: 1 1 auto; font-size: 1rem; font-weight: 500; }
.kr-bk__counter { font-size: 0.75rem; color: var(--bk-muted); }
.kr-bk__progress { height: 4px; margin: 4px 16px 0; border-radius: 999px; background: var(--bk-outline-soft); }
.kr-bk__progress span { display: block; height: 100%; border-radius: inherit; background: var(--bk-primary); transition: width 400ms cubic-bezier(0.05, 0.7, 0.1, 1); }

.kr-bk__icon-btn {
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 999px; background: transparent; color: var(--bk-muted); cursor: pointer;
}

/* Body: main + summary --------------------------------------------------- */
.kr-bk__body { flex: 1 1 auto; min-height: 0; display: flex; overflow: auto; }
.kr-bk__main { flex: 1 1 auto; min-width: 0; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.kr-bk__question { margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 600; outline: none; }
.kr-bk__step { display: flex; flex-direction: column; gap: 16px; }

.kr-bk__summary { display: none; }
.kr-bk__summary-toggle {
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
    border: 0; border-radius: 12px; background: var(--bk-surface); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
}
.kr-bk__summary-toggle > span:first-child { flex: 1 1 auto; }
.kr-bk__summary-more { color: var(--bk-primary); font-weight: 500; }
.kr-bk.is-summary-open .kr-bk__summary { display: block; padding: 16px; margin: 0 16px; border-radius: 12px; background: var(--bk-surface); }
.kr-bk.is-summary-open .kr-bk__body { flex-direction: column-reverse; justify-content: flex-end; }

.kr-bk__summary-type { font-size: 0.75rem; color: var(--bk-muted); }
.kr-bk__summary-head { display: flex; justify-content: space-between; gap: 12px; margin: 2px 0 12px; }
.kr-bk__rows { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.875rem; }
.kr-bk__rows div { display: flex; justify-content: space-between; gap: 12px; }
.kr-bk__rows dt { color: var(--bk-muted); }
.kr-bk__rows dd { margin: 0; text-align: right; }
.kr-bk__total { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bk-outline-soft); }

/* Bottom bar ------------------------------------------------------------ */
.kr-bk__bar {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bk-outline-soft);
}
.kr-bk__context { flex: 1 1 auto; text-align: center; font-size: 0.8125rem; color: var(--bk-muted); }
.kr-bk__btn {
    height: 48px; padding: 0 24px; border-radius: 999px; font: inherit; font-size: 0.875rem; font-weight: 500;
    cursor: pointer; transition: background-color 150ms var(--bk-ease), box-shadow 150ms var(--bk-ease);
}
.kr-bk__btn--outlined { border: 1px solid var(--bk-outline); background: #fff; color: var(--bk-primary); }
.kr-bk__btn--outlined:hover { background: rgba(50, 70, 255, 0.08); }
.kr-bk__btn--filled { margin-left: auto; border: 0; background: var(--bk-primary); color: #fff; }
.kr-bk__btn--filled:hover { background: var(--bk-primary-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.kr-bk__btn:disabled { opacity: 0.6; cursor: progress; }

.kr-bk__error { margin: 0 16px 8px; padding: 10px 14px; border-radius: 8px; background: #f9dedc; color: var(--bk-error); font-size: 0.875rem; }

/* Shared controls -------------------------------------------------------- */
.kr-bk button:focus-visible, .kr-bk a:focus-visible, .kr-bk__input:focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 2px; }

.kr-bk__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-bk__chip {
    display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--bk-outline);
    border-radius: 8px; background: #fff; color: var(--color-gray-700, #374151); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.kr-bk__chip[aria-pressed="true"] { padding-left: 10px; border-color: transparent; background: var(--bk-selected); color: var(--bk-primary-dark); }

.kr-bk__seg { display: flex; border: 1px solid var(--bk-outline); border-radius: 999px; overflow: hidden; }
.kr-bk__seg button {
    flex: 1 1 0; min-height: 40px; padding: 0 12px; border: 0; border-right: 1px solid var(--bk-outline);
    background: #fff; color: var(--color-gray-700, #374151); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.kr-bk__seg button:last-child { border-right: 0; }
.kr-bk__seg button[aria-pressed="true"] { background: var(--bk-selected); color: var(--bk-primary-dark); }

.kr-bk__radio {
    flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--color-gray-500, #6b7280); border-radius: 50%;
}
[aria-checked="true"] > .kr-bk__radio, [aria-pressed="true"] > .kr-bk__radio {
    border-color: var(--bk-primary); background: var(--bk-primary); box-shadow: inset 0 0 0 3px #fff;
}

/* Service cards ---------------------------------------------------------- */
.kr-bk__cards { display: flex; flex-direction: column; gap: 12px; }
.kr-bk__card { border: 1px solid var(--bk-outline-soft); border-radius: 12px; background: #fff; transition: border-color 150ms var(--bk-ease); }
.kr-bk__card.is-on { border: 2px solid var(--bk-primary); background: var(--bk-selected-soft); }
.kr-bk__card-head {
    width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; border-radius: 12px;
    background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.kr-bk__card-head:hover { background: rgba(50, 70, 255, 0.04); }
.kr-bk__card-text { flex: 1 1 auto; display: flex; flex-direction: column; }
.kr-bk__card-name { font-size: 1rem; font-weight: 500; }
.kr-bk__card-lead { font-size: 0.8125rem; color: var(--bk-muted); }
.kr-bk__card-price { font-size: 0.875rem; color: var(--bk-muted); white-space: nowrap; }
.kr-bk__card-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px 50px; }

.kr-bk__includes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; color: var(--color-gray-700, #374151); }
.kr-bk__includes li { display: flex; gap: 8px; }
.kr-bk__includes svg { flex: none; margin-top: 3px; color: var(--bk-primary); }

.kr-bk__note, .kr-bk__lead { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--bk-muted); }
.kr-bk__link { font-size: 0.875rem; font-weight: 500; color: var(--bk-primary); text-decoration: none; }
.kr-bk__link:hover { color: var(--bk-primary-dark); text-decoration: underline; }

/* Bikes in this booking (under "Milline ratas?") */
.kr-bk__bikes { margin: 0; padding: 0; list-style: none; border: 1px solid var(--bk-outline-soft); border-radius: 12px; }
.kr-bk__bikes li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.kr-bk__bikes li + li { border-top: 1px solid var(--bk-outline-soft); }
.kr-bk__bike-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.875rem; }
.kr-bk__bike-text span { color: var(--bk-muted); overflow-wrap: anywhere; }
.kr-bk__bike-price { font-size: 0.875rem; }
.kr-bk__bike-remove { padding: 4px; border: 0; background: none; font-family: inherit; font-size: 0.8125rem; color: var(--bk-muted); text-decoration: underline; cursor: pointer; }
.kr-bk__add-bike { align-self: flex-start; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }

/* Calendar + slots ------------------------------------------------------- */
.kr-bk__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kr-bk__month { grid-column: 1 / -1; margin-top: 4px; font-size: 0.875rem; font-weight: 500; }
.kr-bk__day {
    height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 1px solid var(--bk-outline-soft); border-radius: 12px; background: #fff; font: inherit; color: inherit; cursor: pointer;
}
.kr-bk__day span { font-size: 0.75rem; color: var(--bk-muted); }
.kr-bk__day strong { font-size: 1rem; font-weight: 500; }
.kr-bk__day:hover:not(:disabled) { background: rgba(50, 70, 255, 0.08); }
.kr-bk__day[aria-pressed="true"] { border-color: var(--bk-primary); background: var(--bk-primary); }
.kr-bk__day[aria-pressed="true"] span, .kr-bk__day[aria-pressed="true"] strong { color: #fff; }
.kr-bk__day:disabled { border-color: transparent; background: var(--color-gray-100, #f3f4f6); cursor: default; }
.kr-bk__day:disabled strong { color: var(--color-gray-500, #6b7280); text-decoration: line-through; font-weight: 400; }

.kr-bk__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kr-bk__slot {
    height: 48px; border: 1px solid var(--bk-outline); border-radius: 8px; background: #fff;
    font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.kr-bk__slot:hover { background: rgba(50, 70, 255, 0.08); }
.kr-bk__slot[aria-pressed="true"] { border: 2px solid var(--bk-primary); background: rgba(50, 70, 255, 0.08); color: var(--bk-primary-dark); }
.kr-bk__loading { margin: 0; color: var(--bk-muted); font-size: 0.875rem; }

/* Fields ---------------------------------------------------------------- */
.kr-bk__field { display: flex; flex-direction: column; gap: 6px; }
.kr-bk__label { font-size: 0.875rem; font-weight: 500; color: var(--color-gray-700, #374151); }
.kr-bk__optional { font-weight: 400; color: var(--bk-muted); }
.kr-bk__hint { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--bk-muted); }
.kr-bk__hint a { color: var(--bk-primary); }
.kr-bk__input {
    width: 100%; min-height: 56px; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--bk-outline);
    border-radius: 4px; background: #fff; font: inherit; font-size: 1rem; color: inherit;
}
textarea.kr-bk__input { min-height: 96px; resize: vertical; }
.kr-bk__input:focus { border: 2px solid var(--bk-primary); padding: 13px 15px; outline: none; }
.kr-bk__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Add-ons + wishes ------------------------------------------------------- */
.kr-bk__group { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.kr-bk__group legend { padding: 0; margin-bottom: 8px; font-size: 0.875rem; font-weight: 500; color: var(--color-gray-700, #374151); }
.kr-bk__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kr-bk__option {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--bk-outline-soft);
    border-radius: 12px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.kr-bk__option:hover { background: rgba(50, 70, 255, 0.04); }
.kr-bk__option[aria-pressed="true"] { border: 2px solid var(--bk-primary); padding: 9px 13px; background: var(--bk-selected-soft); }
.kr-bk__option-text { display: flex; flex-direction: column; min-width: 0; }
.kr-bk__option-name { flex: 1 1 auto; font-size: 0.875rem; font-weight: 500; }
.kr-bk__option-hint { font-size: 0.75rem; color: var(--bk-muted); }
.kr-bk__option-price { font-size: 0.875rem; color: var(--bk-muted); }
.kr-bk__box {
    flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; border: 2px solid var(--color-gray-500, #6b7280); border-radius: 4px; color: #fff;
}
[aria-pressed="true"] > .kr-bk__box { border-color: var(--bk-primary); background: var(--bk-primary); }

@media (max-width: 479px) {
    .kr-bk__pair { grid-template-columns: 1fr; }
}

/* Expanded: centered two-pane dialog ------------------------------------- */
@media (min-width: 840px) {
    .kr-bk {
        width: min(960px, calc(100% - 48px)); height: min(720px, calc(100% - 48px));
        margin: auto; border-radius: 28px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
    .kr-bk__top { padding: 12px 20px 0 12px; }
    .kr-bk__progress { margin: 8px 24px 0; }
    .kr-bk__main { padding: 24px 32px 32px; }
    .kr-bk__summary, .kr-bk.is-summary-open .kr-bk__summary {
        display: block; flex: 0 0 300px; align-self: flex-start; position: sticky; top: 0;
        margin: 24px 24px 24px 0; padding: 20px; border-radius: 16px; background: var(--bk-surface);
    }
    .kr-bk.is-summary-open .kr-bk__body { flex-direction: row; }
    .kr-bk__summary-toggle { display: none; }
    .kr-bk__bar { padding: 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .kr-bk *, .kr-bk { transition: none !important; }
}