/**
 * Booking V3 – shared components (direction A "Clinic Editorial").
 *
 * Buttons .bsv3-btn (--primary --secondary --outline --ghost --confirm, --lg --md --sm, --block,
 * .is-loading + .bsv3-btn__spinner), icon buttons .bsv3-iconbtn (--ghost --primary --success --sm),
 * chips .bsv3-chip (--sm, .is-selected / [aria-pressed] / [aria-checked] / :has(input:checked)),
 * segmented .bsv3-seg, badges .bsv3-badge (--ok --info --warn --error --count), cards .bsv3-card
 * (--tint --compact --flush --interactive, .is-selected), list box .bsv3-listbox + __row,
 * notices .bsv3-notice, toasts .bsv3-toast, skeleton .bsv3-skeleton / .bsv3-skel, empty state
 * .bsv3-empty, basket panel .bsv3-panel / .bsv3-bline / .bsv3-totals, form fields .bsv3-field /
 * .bsv3-input / .bsv3-check, confirm dialog .bsv3-confirm, text + layout helpers.
 *
 * Selectors are ".bsv3 .bsv3-<name>" (0,2,0): they beat the base reset by source order.
 */

/* ------------------------------------------------------------------ text helpers */

.bsv3 .bsv3-heading {
    font-size: var(--bs-fs-heading);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--bs-ls-heading);
    text-transform: uppercase;
    color: var(--bs-lead);
}

.bsv3 .bsv3-eyebrow {
    font-size: var(--bs-fs-xs);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--bs-ls-eyebrow);
    text-transform: uppercase;
    color: var(--bs-muted-text);
}

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

.bsv3 .bsv3-price {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
}

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

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

.bsv3 .bsv3-muted {
    color: var(--bs-muted-text);
}

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

.bsv3 .bsv3-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-lead);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}

.bsv3 .bsv3-link:hover {
    color: var(--bs-lead-600);
}

.bsv3 .bsv3-divider {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--bs-line);
}

/* ------------------------------------------------------------------ layout helpers */

.bsv3 .bsv3-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.bsv3 .bsv3-stack--xs { gap: 4px; }
.bsv3 .bsv3-stack--sm { gap: 8px; }
.bsv3 .bsv3-stack--lg { gap: 20px; }
.bsv3 .bsv3-stack--xl { gap: var(--bs-gap); }

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

.bsv3 .bsv3-row--wrap { flex-wrap: wrap; }
.bsv3 .bsv3-row--between { justify-content: space-between; }
.bsv3 .bsv3-row--start { align-items: flex-start; }
.bsv3 .bsv3-row--sm { gap: 8px; }

.bsv3 .bsv3-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.bsv3 .bsv3-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    min-height: 24px;
}

/* ------------------------------------------------------------------ buttons */

.bsv3 .bsv3-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: var(--bs-btn-h-md);
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--bs-r-control);
    background: var(--bs-tint);
    color: var(--bs-lead);
    font-family: var(--bs-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition:
        background-color var(--bs-motion-fast) var(--bs-ease),
        border-color var(--bs-motion-fast) var(--bs-ease),
        color var(--bs-motion-fast) var(--bs-ease),
        box-shadow var(--bs-motion-fast) var(--bs-ease),
        opacity var(--bs-motion-fast) var(--bs-ease);
}

.bsv3 .bsv3-btn:hover {
    text-decoration: none;
}

.bsv3 .bsv3-btn__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsv3 .bsv3-btn--primary {
    background: var(--bs-lead);
    color: #fff;
    box-shadow: var(--bs-shadow-btn);
}

.bsv3 .bsv3-btn--primary:hover {
    background: var(--bs-lead-600);
    color: #fff;
}

.bsv3 .bsv3-btn--confirm {
    background: var(--bs-confirm);
    color: #fff;
    box-shadow: var(--bs-shadow-btn);
}

.bsv3 .bsv3-btn--confirm:hover {
    background: var(--bs-confirm-600);
    color: #fff;
}

.bsv3 .bsv3-btn--secondary {
    background: var(--bs-tint);
    color: var(--bs-lead);
}

.bsv3 .bsv3-btn--secondary:hover {
    background: var(--bs-tint-600);
    color: var(--bs-lead-600);
}

.bsv3 .bsv3-btn--outline {
    background: transparent;
    border-color: var(--bs-line);
    color: var(--bs-lead);
}

.bsv3 .bsv3-btn--outline:hover {
    background: var(--bs-tint);
    border-color: var(--bs-line-600);
}

.bsv3 .bsv3-btn--ghost {
    padding: 0 8px;
    background: transparent;
    color: var(--bs-lead);
}

.bsv3 .bsv3-btn--ghost:hover {
    background: var(--bs-tint);
    color: var(--bs-lead-600);
}

.bsv3 .bsv3-btn--lg {
    height: var(--bs-btn-h-lg);
    padding: 0 28px;
    font-size: 16px;
}

.bsv3 .bsv3-btn--md {
    height: var(--bs-btn-h-md);
    font-size: 14px;
}

.bsv3 .bsv3-btn--sm {
    height: var(--bs-btn-h-sm);
    padding: 0 14px;
    font-size: 12px;
}

.bsv3 .bsv3-btn--ghost:is(.bsv3-btn--sm, .bsv3-btn--md, .bsv3-btn--lg) {
    padding: 0 8px;
}

/* 36px buttons keep a 44px tap target */
.bsv3 .bsv3-btn--sm::before {
    content: "";
    position: absolute;
    inset: -4px 0;
}

.bsv3 .bsv3-btn--block {
    width: 100%;
}

.bsv3 .bsv3-btn:is(:disabled, [aria-disabled="true"]) {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.45;
}

.bsv3 .bsv3-btn--primary:is(:disabled, [aria-disabled="true"]):hover {
    background: var(--bs-lead);
}

.bsv3 .bsv3-btn--confirm:is(:disabled, [aria-disabled="true"]):hover {
    background: var(--bs-confirm);
}

.bsv3 .bsv3-btn:is(.bsv3-btn--secondary, .bsv3-btn--ghost, .bsv3-btn--outline):is(:disabled, [aria-disabled="true"]):hover {
    background: transparent;
}

/* Keyboard focus: the variants above set box-shadow with the specificity of base.css :focus-visible (0,2,0)
   and the disabled rule removes it (0,3,0), so the ring is restated after both. */
.bsv3 .bsv3-btn:focus-visible {
    box-shadow: var(--bs-focus);
}

.bsv3 .bsv3-btn:is(.bsv3-btn--primary, .bsv3-btn--confirm):focus-visible {
    box-shadow: var(--bs-shadow-btn), var(--bs-focus);
}

/* Focusable aria-disabled buttons (catalogue CTA with an empty basket, locked add-ons): a solid ring that
   stays visible despite the reduced opacity. */
.bsv3 .bsv3-btn:is(:disabled, [aria-disabled="true"]):focus-visible,
.bsv3 .bsv3-iconbtn:is(:disabled, [aria-disabled="true"]):focus-visible {
    box-shadow: 0 0 0 3px var(--bs-lead);
    opacity: 0.75;
}

.bsv3 .bsv3-btn__spinner {
    display: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bsv3-spin 0.7s linear infinite;
}

.bsv3 .bsv3-btn.is-loading {
    cursor: progress;
}

.bsv3 .bsv3-btn.is-loading[aria-disabled="true"] {
    opacity: 0.85;
}

.bsv3 .bsv3-btn.is-loading .bsv3-btn__spinner {
    display: inline-block;
}

@keyframes bsv3-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------------------ icon buttons */

.bsv3 .bsv3-iconbtn {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bs-tap);
    height: var(--bs-tap);
    padding: 0;
    border: 0;
    border-radius: var(--bs-r-control);
    background: var(--bs-tint);
    color: var(--bs-lead);
    cursor: pointer;
    transition: background-color var(--bs-motion-fast) var(--bs-ease), color var(--bs-motion-fast) var(--bs-ease);
}

.bsv3 .bsv3-iconbtn:hover {
    background: var(--bs-tint-600);
    color: var(--bs-lead-600);
}

.bsv3 .bsv3-iconbtn--ghost {
    background: transparent;
}

.bsv3 .bsv3-iconbtn--ghost:hover {
    background: var(--bs-tint);
}

.bsv3 .bsv3-iconbtn--primary {
    background: var(--bs-lead);
    color: #fff;
}

.bsv3 .bsv3-iconbtn--primary:hover {
    background: var(--bs-lead-600);
    color: #fff;
}

.bsv3 .bsv3-iconbtn--success {
    background: var(--bs-success-bg);
    color: var(--bs-success-text);
}

.bsv3 .bsv3-iconbtn--sm {
    width: var(--bs-btn-h-sm);
    height: var(--bs-btn-h-sm);
}

.bsv3 .bsv3-iconbtn--sm::before {
    content: "";
    position: absolute;
    inset: -4px;
}

.bsv3 .bsv3-iconbtn:is(:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: 0.45;
}

/* ------------------------------------------------------------------ loading state (core/nav while the service list loads) */

.bsv3 .bsv3-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 240px;
    padding: 32px 16px;
    text-align: center;
    color: var(--bs-muted-text);
}

.bsv3 .bsv3-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 3px solid var(--bs-line);
    border-top-color: var(--bs-lead);
    border-radius: 50%;
    animation: bsv3-spin 0.8s linear infinite;
}

.bsv3 .bsv3-loading__text {
    font-size: var(--bs-fs-xs);
    font-weight: 700;
    letter-spacing: var(--bs-ls-eyebrow);
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .bsv3 .bsv3-spinner {
        animation: none;
        border-color: var(--bs-lead);
        opacity: 0.6;
    }
}

/* ------------------------------------------------------------------ chips */

.bsv3 .bsv3-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bsv3 .bsv3-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    height: var(--bs-btn-h-md);
    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;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--bs-motion-fast) var(--bs-ease),
        border-color var(--bs-motion-fast) var(--bs-ease),
        color var(--bs-motion-fast) var(--bs-ease);
}

.bsv3 .bsv3-chip:hover {
    border-color: var(--bs-line-600);
}

.bsv3 .bsv3-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.bsv3 .bsv3-chip__check {
    display: none;
}

.bsv3 .bsv3-chip > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}

.bsv3 .bsv3-chip:is(.is-selected, [aria-pressed="true"], [aria-checked="true"], :has(> input:checked)) {
    border-color: var(--bs-lead);
    background: var(--bs-lead);
    color: #fff;
}

.bsv3 .bsv3-chip:is(.is-selected, [aria-pressed="true"], [aria-checked="true"], :has(> input:checked)) .bsv3-chip__meta {
    color: inherit;
}

.bsv3 .bsv3-chip:is(.is-selected, [aria-pressed="true"], [aria-checked="true"], :has(> input:checked)) .bsv3-chip__check {
    display: inline-block;
}

.bsv3 .bsv3-chip:is(.is-disabled, :disabled, [aria-disabled="true"], :has(> input:disabled)) {
    border: 1px dashed var(--bs-line-600);
    background: transparent;
    color: var(--bs-muted-text);
    cursor: not-allowed;
    opacity: 0.8;
}

.bsv3 .bsv3-chip:has(> input:focus-visible) {
    box-shadow: var(--bs-focus);
}

.bsv3 .bsv3-chip--sm {
    height: var(--bs-btn-h-sm);
    font-size: var(--bs-fs-small);
}

.bsv3 .bsv3-chip--sm .bsv3-chip__meta {
    font-size: var(--bs-fs-xs);
}

.bsv3 .bsv3-chip--sm::after {
    content: "";
    position: absolute;
    inset: -4px 0;
}

/* segmented control */

.bsv3 .bsv3-seg {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    border-radius: var(--bs-r-pill);
    background: var(--bs-tint);
}

.bsv3 .bsv3-seg__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--bs-r-pill);
    color: var(--bs-lead);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--bs-motion-fast) var(--bs-ease), color var(--bs-motion-fast) var(--bs-ease);
}

.bsv3 .bsv3-seg__item:is(.is-selected, [aria-checked="true"], [aria-pressed="true"]) {
    background: var(--bs-lead);
    color: #fff;
}

/* ------------------------------------------------------------------ badges */

.bsv3 .bsv3-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--bs-r-pill);
    background: var(--bs-tint);
    color: var(--bs-lead);
    font-size: var(--bs-fs-xs);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bsv3 .bsv3-badge--ok {
    background: var(--bs-success-bg);
    color: var(--bs-success-text);
}

.bsv3 .bsv3-badge--warn {
    background: var(--bs-warn-bg);
    color: var(--bs-warn);
}

.bsv3 .bsv3-badge--error {
    background: var(--bs-error-bg);
    color: var(--bs-error);
}

.bsv3 .bsv3-badge--count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    justify-content: center;
    background: var(--bs-lead);         /* white text: --bs-secondary is only 2.9:1 */
    color: #fff;
}

/* ------------------------------------------------------------------ cards */

.bsv3 .bsv3-card {
    position: relative;
    display: block;
    min-width: 0;
    padding: var(--bs-card-pad);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-card);
    background: var(--bs-surface);
    color: var(--bs-text);
    text-align: left;
}

.bsv3 .bsv3-card:is(.bsv3-card--tint, .is-highlight) {
    border-color: var(--bs-tint);
    background: var(--bs-tint);
}

.bsv3 .bsv3-card--compact {
    padding: 16px;
}

.bsv3 .bsv3-card--flush {
    padding: 0;
    overflow: hidden;
}

.bsv3 .bsv3-card--interactive {
    width: 100%;
    cursor: pointer;
    transition: border-color var(--bs-motion-fast) var(--bs-ease), background-color var(--bs-motion-fast) var(--bs-ease);
}

.bsv3 .bsv3-card--interactive:hover {
    border-color: var(--bs-line-600);
}

.bsv3 .bsv3-card:is(.is-selected, [aria-pressed="true"], [aria-checked="true"]) {
    border-color: var(--bs-lead);
    background: var(--bs-tint);
    box-shadow: inset 0 0 0 1px var(--bs-lead);
}

.bsv3 .bsv3-card:is(.is-selected, [aria-pressed="true"], [aria-checked="true"]):focus-visible {
    box-shadow: inset 0 0 0 1px var(--bs-lead), var(--bs-focus);
}

.bsv3 .bsv3-card:is(.is-disabled, :disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: 0.6;
}

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

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

/* ------------------------------------------------------------------ list box */

.bsv3 .bsv3-listbox {
    overflow: hidden;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-card);
    background: var(--bs-surface);
}

.bsv3 .bsv3-listbox__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: var(--bs-tap);
    padding: var(--bs-row-pad);
    border: 0;
    border-bottom: 1px solid var(--bs-line);
    border-radius: 0;
    background: transparent;
    color: var(--bs-text);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}

.bsv3 .bsv3-listbox__row:last-child {
    border-bottom: 0;
}

.bsv3 :is(button, a, [role="button"]).bsv3-listbox__row {
    cursor: pointer;
    transition: background-color var(--bs-motion-fast) var(--bs-ease);
}

.bsv3 :is(button, a, [role="button"]).bsv3-listbox__row:hover {
    background: var(--bs-tint);
    color: var(--bs-text);
}

.bsv3 .bsv3-listbox__row:focus-visible {
    box-shadow: var(--bs-focus-inset);
}

.bsv3 .bsv3-listbox__row:is(.is-selected, .is-expanded, [aria-current="true"], [aria-pressed="true"]) {
    background: var(--bs-tint);
}

.bsv3 .bsv3-listbox__row.is-selected::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--bs-lead);
}

.bsv3 .bsv3-listbox__row:is(.is-disabled, :disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: 0.6;
}

.bsv3 .bsv3-listbox__thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--bs-r-control);
    background: var(--bs-tint);
    object-fit: cover;
}

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

.bsv3 .bsv3-listbox__title {
    font-size: var(--bs-fs-body);
    font-weight: 600;
    line-height: 1.35;
    color: var(--bs-text);
}

.bsv3 .bsv3-listbox__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-listbox__aside {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.bsv3 .bsv3-listbox__chevron {
    flex-shrink: 0;
    color: var(--bs-muted-text);
}

/* ------------------------------------------------------------------ notices */

.bsv3 .bsv3-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--bs-r-control);
    background: var(--bs-tint);
    color: var(--bs-text);
    font-size: 14px;
    line-height: 1.5;
}

.bsv3 .bsv3-notice__icon {
    display: inline-flex;
    margin-top: 1px;
    color: var(--bs-lead);
}

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

.bsv3 .bsv3-notice__title {
    font-weight: 700;
}

.bsv3 .bsv3-notice__action {
    align-self: center;
    margin: -6px -8px -6px 0;
}

.bsv3 .bsv3-notice--warn {
    background: var(--bs-warn-bg);
}

.bsv3 .bsv3-notice--warn :is(.bsv3-notice__icon, .bsv3-notice__title) {
    color: var(--bs-warn);
}

.bsv3 .bsv3-notice--error {
    background: var(--bs-error-bg);
}

.bsv3 .bsv3-notice--error :is(.bsv3-notice__icon, .bsv3-notice__title) {
    color: var(--bs-error);
}

.bsv3 .bsv3-notice--success {
    background: var(--bs-success-bg);
}

.bsv3 .bsv3-notice--success :is(.bsv3-notice__icon, .bsv3-notice__title) {
    color: var(--bs-success-text);
}

/* ------------------------------------------------------------------ toasts */

.bsv3 .bsv3-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 6px 6px 16px;
    border-radius: var(--bs-r-control);
    background: var(--bs-text);
    color: #fff;
    box-shadow: var(--bs-shadow-toast);
    font-size: 14px;
    line-height: 1.45;
    pointer-events: auto;
    animation: bsv3-toast-in var(--bs-motion) var(--bs-ease);
    transition: opacity var(--bs-motion-fast) var(--bs-ease), transform var(--bs-motion-fast) var(--bs-ease);
}

.bsv3 .bsv3-toast--error {
    background: var(--bs-error);
}

.bsv3 .bsv3-toast--success {
    background: var(--bs-success-text);
}

.bsv3 .bsv3-toast--warn {
    background: #6f4d00;
}

.bsv3 .bsv3-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px);
}

.bsv3 .bsv3-toast__icon {
    display: inline-flex;
    opacity: 0.9;
}

.bsv3 .bsv3-toast__text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 0;
    overflow-wrap: break-word;   /* never split a word just to keep the action button on the same row */
    word-break: normal;
    hyphens: auto;
}

.bsv3 .bsv3-toast__action {
    position: relative;
    flex-shrink: 0;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: #d3e3f2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.bsv3 .bsv3-toast__action::before {
    content: "";
    position: absolute;
    inset: -4px 0;
}

.bsv3 .bsv3-toast :is(.bsv3-toast__action, .bsv3-toast__close):hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.bsv3 .bsv3-toast .bsv3-toast__close {
    background: transparent;
    color: #fff;
}

@keyframes bsv3-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* ------------------------------------------------------------------ skeleton */

.bsv3 .bsv3-skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--bs-skeleton) 0%, var(--bs-skeleton-hi) 50%, var(--bs-skeleton) 100%);
    background-size: 200% 100%;
    animation: bsv3-shimmer 1.2s ease-in-out infinite;
}

@keyframes bsv3-shimmer {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -50% 0;
    }
}

.bsv3 .bsv3-skeleton__list {
    overflow: hidden;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-card);
}

.bsv3 .bsv3-skeleton__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: var(--bs-row-pad);
    border-bottom: 1px solid var(--bs-line);
}

.bsv3 .bsv3-skeleton__row:last-child {
    border-bottom: 0;
}

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

.bsv3 .bsv3-skel--thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--bs-r-control);
}

.bsv3 .bsv3-skel--title {
    width: 55%;
    height: 14px;
}

.bsv3 .bsv3-skel--line {
    width: 80%;
    height: 11px;
}

.bsv3 .bsv3-skel--short {
    width: 35%;
}

.bsv3 .bsv3-skel--price {
    flex-shrink: 0;
    width: 56px;
    height: 16px;
}

.bsv3 .bsv3-skeleton__row:nth-child(3n + 2) .bsv3-skel--title { width: 42%; }
.bsv3 .bsv3-skeleton__row:nth-child(3n) .bsv3-skel--title { width: 64%; }
.bsv3 .bsv3-skeleton__row:nth-child(2n) .bsv3-skel--line { width: 68%; }

.bsv3 .bsv3-skeleton__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.bsv3 .bsv3-skel--card {
    height: 132px;
    border-radius: var(--bs-r-card);
}

.bsv3 .bsv3-skeleton__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bsv3 .bsv3-skel--chip {
    width: 128px;
    height: var(--bs-btn-h-md);
    border-radius: var(--bs-r-pill);
}

.bsv3 .bsv3-skel--chip:nth-child(3n + 2) { width: 96px; }
.bsv3 .bsv3-skel--chip:nth-child(3n) { width: 152px; }

.bsv3 .bsv3-skeleton__slots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.bsv3 .bsv3-skel--slot {
    height: 48px;
    border-radius: var(--bs-r-control);
}

.bsv3 .bsv3-skeleton__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bsv3 .bsv3-skeleton__text .bsv3-skel--line:nth-child(3n) { width: 58%; }
.bsv3 .bsv3-skeleton__text .bsv3-skel--line:nth-child(3n + 2) { width: 92%; }

@media (max-width: 767px) {
    .bsv3 .bsv3-skeleton__slots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bsv3 .bsv3-skel--thumb {
        width: 56px;
        height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bsv3 .bsv3-skel {
        animation: none;
        background: var(--bs-skeleton);
    }

    .bsv3 .bsv3-btn__spinner {
        animation: none;
        border-right-color: currentColor;
        opacity: 0.6;
    }
}

/* ------------------------------------------------------------------ empty state */

.bsv3 .bsv3-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
    border: 1px dashed var(--bs-line-600);
    border-radius: var(--bs-r-card);
    text-align: center;
}

.bsv3 .bsv3-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--bs-tint);
    color: var(--bs-lead);
}

.bsv3 .bsv3-empty__title {
    font-size: var(--bs-fs-body);
    font-weight: 700;
    line-height: 1.35;
    color: var(--bs-text);
}

.bsv3 .bsv3-empty__text {
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bs-muted-text);
}

.bsv3 .bsv3-empty .bsv3-btn {
    margin-top: 6px;
}

/* ------------------------------------------------------------------ basket panel (ledger + drawer) */

.bsv3 .bsv3-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bsv3 .bsv3-panel__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bsv3 .bsv3-panel__title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bs-lead);
}

.bsv3 .bsv3-panel__head .bsv3-badge {
    margin-left: auto;
}

.bsv3 .bsv3-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bsv3 .bsv3-panel--ledger .bsv3-panel__head {
    padding: 20px 20px 12px;
}

.bsv3 .bsv3-panel--ledger .bsv3-panel__body {
    padding: 0 20px 16px;
}

/* The drawer body scrolls vertically only: a sideways scrollbar showed below the totals on phones.
   The inline padding/negative margin keeps the -8px ghost buttons ("Weitere Leistung hinzufügen") unclipped. */
.bsv3 .bsv3-panel--drawer .bsv3-panel__body {
    overflow-x: hidden;
    margin-inline: -8px;
    padding-inline: 8px;
}

.bsv3 .bsv3-panel--drawer {
    gap: 4px;
}

.bsv3 .bsv3-panel--drawer .bsv3-panel__title {
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bs-text);
}

.bsv3 .bsv3-panel__empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 4px;
}

.bsv3 .bsv3-panel__empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-text);
}

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

/* chosen slot on the schedule step (design A side_panel: tint card between the lines and the totals) */
.bsv3 .bsv3-panel__slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
}

.bsv3 .bsv3-panel__slot-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--bs-fs-body);
    font-weight: 600;
    line-height: 1.45;
    color: var(--bs-text);
}

.bsv3 .bsv3-panel__slot-line .bsv3-icon {
    flex-shrink: 0;
    color: var(--bs-lead);
}

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

.bsv3 .bsv3-panel__add {
    align-self: flex-start;
    margin-left: -8px;
}

.bsv3 .bsv3-basket {
    display: flex;
    flex-direction: column;
}

.bsv3 .bsv3-bline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bs-line);
}

.bsv3 .bsv3-panel--drawer .bsv3-bline {
    padding: 12px 0;
}

.bsv3 .bsv3-bline__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

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

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

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

.bsv3 .bsv3-bline__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.bsv3 .bsv3-bline__price {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.bsv3 .bsv3-bline__amount {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
}

.bsv3 :is(.bsv3-bline__list, .bsv3-bline__series) {
    font-size: var(--bs-fs-small);
    white-space: nowrap;
    color: var(--bs-muted-text);
    font-variant-numeric: tabular-nums;
}

.bsv3 .bsv3-bline__list s {
    text-decoration: line-through;
}

.bsv3 .bsv3-bline__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: -8px;
}

.bsv3 .bsv3-bline__actions .bsv3-bline__remove {
    margin-left: auto;
}

.bsv3 .bsv3-bline__addons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bsv3 .bsv3-bline--addon {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    border-bottom: 0;
}

.bsv3 .bsv3-panel--drawer .bsv3-bline--addon {
    padding: 0;
}

.bsv3 .bsv3-bline__elbow {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin: 0 4px 6px 6px;
    border-bottom: 1px solid var(--bs-line-600);
    border-left: 1px solid var(--bs-line-600);
}

.bsv3 .bsv3-bline--addon .bsv3-bline__label {
    font-size: 14px;
}

.bsv3 .bsv3-bline--addon .bsv3-bline__amount {
    font-size: var(--bs-fs-body);
}

.bsv3 .bsv3-bline--addon .bsv3-bline__remove {
    margin-top: -8px;
}

.bsv3 .bsv3-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bsv3 .bsv3-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--bs-fs-body);
    color: var(--bs-muted-text);
}

.bsv3 .bsv3-totals__value {
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
}

.bsv3 .bsv3-totals__row--sum {
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-text);
}

.bsv3 .bsv3-totals__sum {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--bs-lead);
    font-variant-numeric: tabular-nums;
    transition: opacity var(--bs-motion-fast) var(--bs-ease);
}

.bsv3 .bsv3-totals[aria-busy="true"] .bsv3-totals__sum {
    opacity: 0.55;
}

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

.bsv3 .bsv3-totals__hint--error {
    color: var(--bs-error);
}

.bsv3 .bsv3-panel--drawer .bsv3-totals__row {
    font-size: var(--bs-fs-small);
}

.bsv3 .bsv3-panel--drawer .bsv3-totals__row--sum {
    font-size: 14px;
}

.bsv3 .bsv3-panel--drawer .bsv3-totals__sum {
    font-size: 18px;
}

/* ------------------------------------------------------------------ form fields */

.bsv3 .bsv3-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bsv3 .bsv3-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.bsv3 .bsv3-form-grid > .bsv3-field--full {
    grid-column: 1 / -1;
}

.bsv3 .bsv3-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bsv3 .bsv3-field__label,
.bsv3 .bsv3-legend {
    font-size: var(--bs-fs-small);
    font-weight: 700;
    line-height: 1.4;
    color: var(--bs-text);
}

.bsv3 .bsv3-field__req {
    margin-left: 2px;
    color: var(--bs-error);
}

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

.bsv3 .bsv3-field__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--bs-fs-small);
    font-weight: 600;
    line-height: 1.45;
    color: var(--bs-error);
}

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

.bsv3 .bsv3-input {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--bs-line-strong);
    border-radius: var(--bs-r-control);
    background-color: var(--bs-surface);
    color: var(--bs-text);
    font-family: var(--bs-font);
    font-size: var(--bs-fs-input);
    font-weight: 500;
    line-height: 1.3;
    box-shadow: none;
    transition: border-color var(--bs-motion-fast) var(--bs-ease), box-shadow var(--bs-motion-fast) var(--bs-ease);
}

.bsv3 .bsv3-input:hover {
    border-color: var(--bs-muted);
}

.bsv3 .bsv3-input:focus {
    border-color: var(--bs-lead);
    box-shadow: var(--bs-focus);
    outline: none;
}

.bsv3 :is(textarea.bsv3-input, .bsv3-textarea) {
    height: auto;
    min-height: 112px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.bsv3 :is(select.bsv3-input, .bsv3-select) {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 7.5 10 13l5.5-5.5' stroke='%236b7a8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    cursor: pointer;
}

.bsv3 .bsv3-input:is([aria-invalid="true"], .is-invalid),
.bsv3 .bsv3-field.is-invalid .bsv3-input {
    border-color: var(--bs-error);
}

.bsv3 .bsv3-input:is([aria-invalid="true"], .is-invalid):focus,
.bsv3 .bsv3-field.is-invalid .bsv3-input:focus {
    box-shadow: 0 0 0 2px var(--bs-surface), 0 0 0 4px var(--bs-error); /* 6.5:1 on white, like --bs-focus */
}

.bsv3 .bsv3-input:is(:disabled, [readonly]) {
    background-color: var(--bs-tint);
    color: var(--bs-muted-text);
}

.bsv3 .bsv3-input:disabled {
    cursor: not-allowed;
}

.bsv3 .bsv3-input-group {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.bsv3 .bsv3-input-group > .bsv3-input:first-child:not(:only-child) {
    flex: 0 0 116px;
}

.bsv3 .bsv3-input-group > .bsv3-input:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.bsv3 .bsv3-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: var(--bs-tap);
    padding: 10px 0;
    color: var(--bs-text);
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.bsv3 .bsv3-check .bsv3-check__input {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 2px solid var(--bs-line-strong);
    border-radius: 6px;
    background: var(--bs-surface) center / 14px 14px no-repeat;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--bs-motion-fast) var(--bs-ease), border-color var(--bs-motion-fast) var(--bs-ease);
}

.bsv3 .bsv3-check .bsv3-check__input[type="radio"] {
    border-radius: 50%;
}

.bsv3 .bsv3-check .bsv3-check__input:checked {
    border-color: var(--bs-lead);
    background-color: var(--bs-lead);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l4 4 8-8.5' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bsv3 .bsv3-check .bsv3-check__input[type="radio"]:checked {
    background-image: radial-gradient(circle, #fff 0 4px, transparent 4.5px);
    background-size: 100% 100%;
}

.bsv3 .bsv3-check .bsv3-check__input:focus-visible {
    box-shadow: var(--bs-focus);
}

.bsv3 .bsv3-check .bsv3-check__input[aria-invalid="true"] {
    border-color: var(--bs-error);
}

.bsv3 .bsv3-check__label {
    min-width: 0;
}

.bsv3 .bsv3-check:is(.is-disabled, :has(> .bsv3-check__input:disabled)) {
    cursor: not-allowed;
    opacity: 0.6;
}

@media (max-width: 767px) {
    .bsv3 .bsv3-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------ avatar */

.bsv3 .bsv3-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bs-tint);
    color: var(--bs-lead);
    font-size: 11px;
    font-weight: 700;
}

.bsv3 .bsv3-avatar--filled {
    background: var(--bs-lead);
    color: #fff;
}

/* ------------------------------------------------------------------ confirm dialog */

.bsv3.bsv3-confirm {
    position: fixed;
    inset: 0;
    width: min(440px, calc(100vw - 32px));
    max-width: none;
    height: fit-content;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: var(--bs-r-sheet);
    background: var(--bs-surface);
    color: var(--bs-text);
    box-shadow: var(--bs-shadow-modal);
}

.bsv3.bsv3-confirm[open] {
    display: block;
    animation: bsv3-confirm-in var(--bs-motion) var(--bs-ease);
}

.bsv3.bsv3-confirm::backdrop {
    background: rgba(47, 58, 71, 0.55);
}

@keyframes bsv3-confirm-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

.bsv3 .bsv3-confirm__box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
}

.bsv3 .bsv3-confirm__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bs-lead);
}

.bsv3 .bsv3-confirm__text {
    font-size: var(--bs-fs-body);
    line-height: var(--bs-lh-body);
    color: var(--bs-muted-text);
}

.bsv3 .bsv3-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

@media (max-width: 479px) {
    .bsv3 .bsv3-confirm__box {
        padding: 24px 20px 20px;
    }

    .bsv3 .bsv3-confirm__actions {
        flex-direction: column-reverse;
    }

    .bsv3 .bsv3-confirm__actions .bsv3-btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ forced colours */

/* Windows contrast themes drop box-shadows, author fills and background images. Chips hide their input, so
   keyboard focus becomes a system outline on the chip and the selected chip a system Highlight fill; the
   custom consent checkbox falls back to the native control, whose checked state the system draws. */
@media (forced-colors: active) {
    .bsv3 .bsv3-chip:has(> input:focus-visible) {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    .bsv3 .bsv3-chip:is(.is-selected, [aria-pressed="true"], [aria-checked="true"], :has(> input:checked)) {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
        color: HighlightText;
    }

    .bsv3 .bsv3-check .bsv3-check__input,
    .bsv3 .bsv3-check .bsv3-check__input:checked {
        background-image: none;
        -webkit-appearance: auto;
        appearance: auto;
    }
}