/**
 * Booking V3 – steps "catalogue" and "configure" (F-CATALOGUE; design direction A "Clinic Editorial",
 * canvas gen.py screen_catalogue / screen_configure / calc_card / region_row).
 *
 * Loaded after components.css. Buttons, chips, badges, cards, list box and notices come from there;
 * this file only adds the catalogue layout: context line (.bsv3-catctx), calculator card
 * (.bsv3-calccard), catalogue rows (.bsv3-item on .bsv3-listbox__row), price tag (.bsv3-pricetag),
 * plan chips (.bsv3-plans), the "N weitere" toggle (.bsv3-more), the
 * add-on hint (.bsv3-cat-hint) and the configure frame (.bsv3-cfg) incl. the popup skin of the
 * customs calculator (.wa-calc--popup, whose own variables only exist on the page shortcode shell).
 * Selectors are at least ".bsv3 .bsv3-<class>" (0,2,0).
 */

/* ------------------------------------------------------------------ context line */

.bsv3 .bsv3-catctx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
}

.bsv3 .bsv3-catctx__crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--bs-fs-small);
    line-height: 1.4;
}

.bsv3 .bsv3-catctx__cat {
    flex-shrink: 0;
    color: var(--bs-muted-text);
    white-space: nowrap;
}

.bsv3 .bsv3-catctx__chev {
    display: inline-flex;
    color: var(--bs-muted-text);
}

.bsv3 .bsv3-catctx__svc {
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    color: var(--bs-lead);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bsv3 .bsv3-catctx__sep {
    flex-shrink: 0;
    width: 1px;
    height: 16px;
    background: var(--bs-line);
}

.bsv3 .bsv3-catctx__place {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: var(--bs-fs-small);
    line-height: 1.4;
    color: var(--bs-muted-text);
}

.bsv3 .bsv3-catctx__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

/* ------------------------------------------------------------------ calculator card */

.bsv3 .bsv3-calccard {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bsv3 .bsv3-calccard.is-selected {
    background: var(--bs-tint);
}

.bsv3 .bsv3-calccard__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--bs-tap);
    height: var(--bs-tap);
    border-radius: var(--bs-r-control);
    background: var(--bs-lead);
    color: #fff;
}

.bsv3 .bsv3-calccard__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bsv3 .bsv3-calccard__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bs-text);
}

.bsv3 .bsv3-calccard__text {
    font-size: var(--bs-fs-small);
    line-height: 1.5;
    color: var(--bs-muted-text);
}

.bsv3 .bsv3-calccard__summary {
    font-size: var(--bs-fs-small);
    font-weight: 600;
    line-height: 1.5;
    color: var(--bs-text);
}

.bsv3 .bsv3-calccard__cta {
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ sections */

.bsv3 .bsv3-cat-section__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.bsv3 .bsv3-more .bsv3-icon {
    transition: transform var(--bs-motion) var(--bs-ease);
}

.bsv3 .bsv3-more[aria-expanded="true"] .bsv3-icon {
    transform: rotate(180deg);
}

.bsv3 .bsv3-cat-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--bs-fs-small);
    line-height: 1.5;
    color: var(--bs-muted-text);
}

.bsv3 .bsv3-cat-hint .bsv3-icon {
    margin-top: 1px;
}

/* ------------------------------------------------------------------ catalogue rows */

.bsv3 .bsv3-listbox__row.bsv3-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.bsv3 .bsv3-item__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-width: 0;
}

.bsv3 .bsv3-item__main {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bsv3 .bsv3-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}

.bsv3 .bsv3-item__title {
    min-width: 0;
    font-size: var(--bs-fs-body);
    font-weight: 600;
    line-height: 1.35;
    color: var(--bs-text);
    overflow-wrap: anywhere;
}

.bsv3 .bsv3-item__badge .bsv3-icon {
    width: 12px;
    height: 12px;
}

.bsv3 .bsv3-item__text {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--bs-fs-small);
    line-height: 1.5;
    color: var(--bs-muted-text);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bsv3 .bsv3-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
}

.bsv3 .bsv3-item__aside {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.bsv3 .bsv3-item__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bsv3 .bsv3-item__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.bsv3 .bsv3-item__panel .bsv3-plans {
    flex: 1 1 auto;
    min-width: 0;
}

.bsv3 .bsv3-item__add {
    margin-left: auto;
}

/* plan chips on the tinted (expanded) row: white until chosen */
.bsv3 .bsv3-item__panel .bsv3-chip:not(:has(> input:checked)) {
    border-color: var(--bs-line);
    background: var(--bs-surface);
}

.bsv3 .bsv3-item__panel .bsv3-chip:not(:has(> input:checked)):hover {
    border-color: var(--bs-line-600);
}

/* ------------------------------------------------------------------ price tag */

.bsv3 .bsv3-pricetag {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.bsv3 .bsv3-pricetag__main {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bs-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bsv3 .bsv3-pricetag__from {
    font-size: var(--bs-fs-small);
    font-weight: 500;
    color: var(--bs-muted-text);
}

.bsv3 .bsv3-pricetag--lead .bsv3-pricetag__main {
    color: var(--bs-lead);
}

.bsv3 .bsv3-pricetag--lg .bsv3-pricetag__main {
    font-size: 20px;
}

.bsv3 :is(.bsv3-pricetag__list, .bsv3-pricetag__note) {
    font-size: var(--bs-fs-xs);
    line-height: 1.3;
    color: var(--bs-muted-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ configure */

.bsv3 .bsv3-cfg {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    container-type: inline-size;
    container-name: bsv3-cfg;
}

.bsv3 .bsv3-cfg__top {
    display: flex;
    margin-top: calc(var(--bs-gap) * -0.5);
}

.bsv3 .bsv3-cfg__back {
    margin-left: -8px;
}

.bsv3 .bsv3-cfg__notice:empty {
    display: none;
}

/* the customs calculator in the popup (calculator.css defines its variables only on .wa-calc-shell) */
.bsv3 .wa-calc.wa-calc--popup {
    --wa-lead: var(--bs-lead);
    --wa-lead-600: var(--bs-lead-600);
    --wa-secondary: var(--bs-secondary);
    --wa-tint: var(--bs-tint);
    --wa-line: var(--bs-line);
    --wa-text: var(--bs-text);
    --wa-muted: var(--bs-muted-text);
    --wa-success: var(--bs-success-text);
    --wa-warn: var(--bs-warn);
    --wa-warn-bg: var(--bs-warn-bg);
    --wa-r-card: var(--bs-r-card);
    --wa-r-ctrl: var(--bs-r-control);
    --wa-tap: var(--bs-tap);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bs-gap);
    color: var(--bs-text);
}

.bsv3 .wa-calc--popup .wa-calc__groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bsv3 .wa-calc--popup .wa-calc__legend {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0;
    font-size: var(--bs-fs-small);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bs-muted-text);
}

.bsv3 .wa-calc--popup .wa-calc__chip {
    position: relative;
    min-height: var(--bs-tap);
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--bs-tint);
    border-radius: var(--bs-r-pill);
    background: var(--bs-tint);
    color: var(--bs-text);
    font-size: var(--bs-fs-body);
    font-weight: 600;
    line-height: 1.2;
}

.bsv3 .wa-calc--popup .wa-calc__chip:hover {
    border-color: var(--bs-line-600);
}

.bsv3 .wa-calc--popup .wa-calc__chip.is-selected {
    border-color: var(--bs-lead);
    background: var(--bs-lead);
    color: #fff;
}

.bsv3 .wa-calc--popup .wa-calc__chip.is-disabled {
    border: 1px dashed var(--bs-line-600);
    background: transparent;
    color: var(--bs-muted-text);
}

.bsv3 .wa-calc--popup :is(.wa-calc__chip, .wa-calc__plan):focus-within {
    box-shadow: none;
}

.bsv3 .wa-calc--popup :is(.wa-calc__chip, .wa-calc__plan):has(input:focus-visible) {
    box-shadow: var(--bs-focus);
}

.bsv3 .wa-calc--popup .wa-calc__chip-meta {
    font-size: var(--bs-fs-small);
    font-weight: 500;
}

.bsv3 .wa-calc--popup .wa-calc__result {
    gap: 12px;
    padding: 20px;
    border-radius: var(--bs-r-card);
    background: var(--bs-tint);
}

.bsv3 .wa-calc--popup .wa-calc__plan {
    margin: 0;
    padding: 12px 14px;
    border: 2px solid var(--bs-line);
    border-radius: var(--bs-r-card);
    background: var(--bs-surface);
}

.bsv3 .wa-calc--popup .wa-calc__plan.is-selected {
    border-color: var(--bs-lead);
}

.bsv3 .wa-calc--popup .wa-calc__reset-btn {
    min-height: var(--bs-tap);
    font-size: var(--bs-fs-small);
    font-weight: 600;
    color: var(--bs-lead);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bsv3 .wa-calc--popup .wa-calc__notes ul {
    padding-left: 18px;
    list-style: disc;
}

.bsv3 .wa-calc--popup .wa-calc__notes li {
    margin: 0 0 4px;
}

@container bsv3-cfg (min-width: 760px) {
    .bsv3 .wa-calc.wa-calc--popup {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
    }

    .bsv3 .wa-calc--popup .wa-calc__result {
        position: sticky;
        top: 0;
    }

    .bsv3 .wa-calc--popup .wa-calc__notes {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 767px) {
    .bsv3 .bsv3-catctx__sep {
        display: none;
    }

    .bsv3 .bsv3-catctx__actions {
        width: 100%;
        margin-left: -8px;
    }

    .bsv3 .bsv3-calccard {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    .bsv3 .bsv3-calccard__body {
        flex: 1 1 0;
    }

    .bsv3 .bsv3-calccard__cta {
        width: 100%;
    }

    .bsv3 .bsv3-item__aside {
        gap: 10px;
    }

    .bsv3 .bsv3-item__panel {
        flex-direction: column;
        align-items: stretch;
    }

    .bsv3 .bsv3-item__add {
        width: 100%;
        margin-left: 0;
    }

    .bsv3 .wa-calc--popup .wa-calc__chip {
        padding: 0 12px;
        font-size: var(--bs-fs-small);
    }

    .bsv3 .wa-calc--popup .wa-calc__result {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bsv3 .bsv3-more .bsv3-icon {
        transition: none;
    }
}

/* Forced colours (Windows contrast themes) drop box-shadows and author fills: the calculator chips hide
   their checkbox, so focus becomes a system outline and the selected chip a system Highlight fill. */
@media (forced-colors: active) {
    .bsv3 .wa-calc--popup :is(.wa-calc__chip, .wa-calc__plan):has(input:focus-visible) {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    .bsv3 .wa-calc--popup .wa-calc__chip.is-selected {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
        color: HighlightText;
    }

    .bsv3 .wa-calc--popup .wa-calc__chip.is-selected::before {
        border-color: HighlightText;
    }

    .bsv3 .wa-calc--popup .wa-calc__chip.is-selected .wa-calc__chip-meta {
        color: HighlightText;
    }
}