/*
 * Booking surfaces — marketplace, service detail, checkout, bookings, casting.
 * Scoped to .bk so it never leaks into the feed or profile, and every surface
 * colour comes from a token that has a dark-theme swap at the bottom.
 */

.bk {
    --bk-panel: #ffffff;
    --bk-soft: #F4F7FA;
    --bk-soft-2: #EDF2F8;
    --bk-line: rgba(16, 47, 67, .13);
    --bk-line-soft: rgba(16, 47, 67, .07);
    --bk-ink: #102F43;
    --bk-muted: #5C7285;
    --bk-accent: #D81E5B;
    --bk-accent-ink: #B41455;
    --bk-accent-soft: rgba(216, 30, 91, .09);
    --bk-radius: 16px;
    --bk-shadow: 0 14px 34px -22px rgba(16, 47, 67, .45);

    color: var(--bk-ink);
}

.bk * {
    min-width: 0;
}

.bk a {
    color: inherit;
}

.bk-eyebrow {
    margin: 0 0 6px;
    color: var(--bk-muted);
    font: 700 10.5px/1.2 var(--mtv-font-ui);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bk-muted {
    color: var(--bk-muted);
    font-size: .88rem;
    line-height: 1.5;
}

.bk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 20px;
    margin: 0 0 18px;
}

.bk-head__copy {
    max-width: 62ch;
}

.bk-head h1 {
    margin: 0;
    color: var(--bk-ink);
    font: 400 clamp(1.6rem, 3vw, 2.25rem)/1.15 var(--mtv-font-display);
}

.bk-head p {
    margin: 7px 0 0;
    color: var(--bk-muted);
    font-size: .94rem;
    line-height: 1.55;
}

.bk-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Search + filters ---------- */

.bk-search {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.1fr) auto;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius);
    background: var(--bk-panel);
    box-shadow: var(--bk-shadow);
}

.bk-search input,
.bk-search select {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--bk-line);
    border-radius: 11px;
    background: var(--bk-soft);
    color: var(--bk-ink);
    font: 600 14px/1.2 var(--mtv-font-ui);
}

.bk-search input::placeholder {
    color: var(--bk-muted);
    font-weight: 500;
    opacity: .85;
}

.bk-search input:focus-visible,
.bk-search select:focus-visible {
    border-color: var(--bk-accent);
    outline: 2px solid var(--bk-accent-soft);
    outline-offset: 1px;
}

.bk-search .mtv-btn {
    min-height: 46px;
    padding: 0 22px;
    white-space: nowrap;
}

.bk-search__clear {
    align-self: center;
    color: var(--bk-muted);
    font: 700 12px/1.2 var(--mtv-font-ui);
    text-decoration: underline;
}

.bk-chips {
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
    padding: 2px 0 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.bk-chips::-webkit-scrollbar {
    display: none;
}

@media (max-width: 620px) {
    .bk-chips {
        padding-right: 30px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
    }
}

.bk-chips .mtv-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    line-height: 1.2;
    text-decoration: none;
}

.bk-chips .mtv-chip--active {
    border-color: transparent;
    background: var(--bk-ink);
    color: var(--bk-panel);
}

.bk-results {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 22px 0 14px;
}

.bk-results h2 {
    margin: 0;
    color: var(--bk-ink);
    font: 700 1.15rem/1.25 var(--mtv-font-ui);
}

.bk-results p {
    margin: 4px 0 0;
    color: var(--bk-muted);
    font-size: .85rem;
}

.bk-sort {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.bk-sort span {
    color: var(--bk-muted);
    font: 700 11px/1.2 var(--mtv-font-ui);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.bk-sort select {
    min-height: 40px;
    padding: 8px 30px 8px 11px;
    border: 1px solid var(--bk-line);
    border-radius: 11px;
    background: var(--bk-panel);
    color: var(--bk-ink);
    font: 600 13px/1.2 var(--mtv-font-ui);
}

/* ---------- Listing grid + card ---------- */

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

.bk-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius);
    background: var(--bk-panel);
    box-shadow: var(--bk-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.bk-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px -26px rgba(16, 47, 67, .55);
}

.bk-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, #F9E8EF, #E8EEF7);
}

.bk-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-card__initials {
    display: grid;
    height: 100%;
    place-items: center;
    color: #8C315C;
    font: 800 2.6rem/1 var(--mtv-font-ui);
}

.bk-card__shade {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 46%;
    background: linear-gradient(180deg, transparent, rgba(8, 20, 30, .74));
    pointer-events: none;
}

.bk-card__badge {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(9, 22, 33, .8);
    color: #fff;
    font: 700 9.5px/1 var(--mtv-font-ui);
    letter-spacing: .05em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.bk-card__badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #A9BCCD;
}

.bk-card__badge.is-open i {
    background: #2DD4A7;
}

.bk-card__badge.is-waiting i {
    background: #F5B544;
}

.bk-card__creator {
    position: absolute;
    z-index: 3;
    right: 54px;
    bottom: 10px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font: 700 12.5px/1.2 var(--mtv-font-ui);
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.bk-card__creator-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-card__creator:hover .bk-card__creator-name {
    color: #FFD2E1;
}

.bk-card__verified {
    display: grid;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    place-items: center;
    border-radius: 50%;
    background: var(--bk-accent);
    color: #fff;
    font: 800 10px/1 var(--mtv-font-ui);
}

.bk-card .mtv-service-card__favorite,
.bk-card__fav {
    position: absolute;
    z-index: 4;
    top: 10px;
    right: 10px;
    margin: 0;
}

.bk-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
}

.bk-card__cat {
    overflow: hidden;
    margin: 0;
    color: var(--bk-muted);
    font: 700 10px/1.2 var(--mtv-font-ui);
    letter-spacing: .09em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.bk-card__title {
    display: block;
    margin: 0;
    color: var(--bk-ink);
    font: 700 15px/1.3 var(--mtv-font-ui);
    text-decoration: none;
}

.bk-card__title:hover {
    color: var(--bk-accent-ink);
}

.bk-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--bk-line-soft);
}

.bk-card__price span {
    display: block;
    color: var(--bk-muted);
    font: 600 10px/1.2 var(--mtv-font-ui);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.bk-card__price strong {
    display: block;
    margin-top: 2px;
    color: var(--bk-accent-ink);
    font: 800 15px/1.2 var(--mtv-font-ui);
}

.bk-card__place {
    max-width: 46%;
    color: var(--bk-muted);
    font: 500 11px/1.35 var(--mtv-font-ui);
    text-align: right;
}

.bk-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.bk-card__actions .mtv-btn {
    width: 100%;
    padding: 10px 12px;
    justify-content: center;
    font-size: .88rem;
}

/* ---------- Service detail ---------- */

.bk-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr);
    align-content: start;
    align-items: start;
    gap: 20px;
}

.bk-detail__main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
}

.bk-detail__crumbs {
    margin: 0 0 14px;
    color: var(--bk-muted);
    font-size: .85rem;
}

.bk-detail__crumbs a {
    color: var(--bk-accent-ink);
    text-decoration: none;
}

.bk-detail__intro {
    overflow: hidden;
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius);
    background: var(--bk-panel);
    box-shadow: var(--bk-shadow);
}

.bk-detail__cover {
    display: block;
    width: 100%;
    max-height: 420px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.bk-detail__intro-body {
    padding: clamp(16px, 3vw, 26px);
}

.bk-detail__intro h1 {
    margin: 0;
    color: var(--bk-ink);
    font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.2 var(--mtv-font-display);
}

.bk-detail__details {
    padding: clamp(16px, 3vw, 26px);
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius);
    background: var(--bk-panel);
    box-shadow: var(--bk-shadow);
}

.bk-detail__body {
    color: var(--bk-ink);
    font-size: .96rem;
    line-height: 1.65;
    white-space: pre-line;
}

.bk-detail__details section {
    margin-top: 22px;
}

.bk-detail__details h2 {
    margin: 0 0 6px;
    color: var(--bk-ink);
    font: 700 1rem/1.3 var(--mtv-font-ui);
}

.bk-aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 88px;
}

.bk-aside__panel {
    padding: 18px;
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius);
    background: var(--bk-panel);
    box-shadow: var(--bk-shadow);
}

.bk-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bk-line-soft);
    margin-bottom: 14px;
}

.bk-price span {
    color: var(--bk-muted);
    font: 600 10.5px/1.2 var(--mtv-font-ui);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.bk-price strong {
    color: var(--bk-accent-ink);
    font: 800 clamp(1.4rem, 3vw, 1.75rem)/1.1 var(--mtv-font-ui);
    text-align: right;
}

.bk-facts {
    display: grid;
    gap: 8px;
    margin: 0;
}

.bk-fact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .86rem;
    line-height: 1.4;
}

.bk-fact dt {
    color: var(--bk-muted);
}

.bk-fact dd {
    margin: 0;
    color: var(--bk-ink);
    font-weight: 700;
    text-align: right;
}

.bk-packages {
    display: grid;
    gap: 8px;
    margin: 0 0 4px;
}

.bk-package {
    padding: 11px 12px;
    border: 1px solid var(--bk-line-soft);
    border-radius: 12px;
    background: var(--bk-soft);
}

.bk-package strong {
    display: block;
    color: var(--bk-ink);
    font: 700 .9rem/1.3 var(--mtv-font-ui);
}

.bk-package span {
    color: var(--bk-muted);
    font-size: .78rem;
}

.bk-form {
    display: grid;
    gap: 11px;
}

.bk-form h3 {
    margin: 0;
    color: var(--bk-ink);
    font: 700 1rem/1.3 var(--mtv-font-ui);
}

.bk-form .mtv-field span {
    color: var(--bk-muted);
    font-size: .78rem;
    font-weight: 600;
}

.bk-form .mtv-field input,
.bk-form .mtv-field select,
.bk-form .mtv-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    background: var(--bk-soft);
    color: var(--bk-ink);
    font: 500 14px/1.4 var(--mtv-font-ui);
}

.bk-form .mtv-field textarea {
    min-height: 92px;
    resize: vertical;
}

.bk-form .mtv-btn {
    width: 100%;
    justify-content: center;
}

.bk-note {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--bk-line-soft);
    border-radius: 12px;
    background: var(--bk-soft);
    color: var(--bk-muted);
    font-size: .84rem;
    line-height: 1.5;
}

.bk-note strong {
    display: block;
    margin-bottom: 3px;
    color: var(--bk-ink);
}

.bk-note--warn {
    border-color: rgba(180, 83, 9, .28);
    background: #FFF5E9;
    color: #694819;
}

.bk-note--warn strong {
    color: #694819;
}

.bk-provider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    text-decoration: none;
}

.bk-provider__meta strong {
    display: block;
    color: var(--bk-ink);
    font: 700 .95rem/1.3 var(--mtv-font-ui);
}

.bk-provider__meta span {
    color: var(--bk-muted);
    font-size: .8rem;
}

/* ---------- Checkout review ---------- */

.bk-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 22px;
}

.bk-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--bk-muted);
    font: 700 .8rem/1.2 var(--mtv-font-ui);
}

.bk-step__dot {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid var(--bk-line);
    border-radius: 50%;
    background: var(--bk-soft);
    color: var(--bk-muted);
    font-size: .75rem;
}

.bk-step.is-done {
    color: var(--bk-accent-ink);
}

.bk-step.is-done .bk-step__dot {
    border-color: transparent;
    background: var(--bk-accent-soft);
    color: var(--bk-accent-ink);
}

.bk-step.is-current {
    color: var(--bk-ink);
}

.bk-step.is-current .bk-step__dot {
    border-color: var(--bk-accent);
    background: var(--bk-accent);
    color: #fff;
}

.bk-step__line {
    width: 32px;
    height: 1px;
    background: var(--bk-line);
}

.bk-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(min(100%, 300px), .8fr);
    align-items: start;
    gap: 20px;
}

.bk-review {
    padding: clamp(16px, 3vw, 26px);
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius);
    background: var(--bk-panel);
    box-shadow: var(--bk-shadow);
}

.bk-review h2 {
    margin: 6px 0;
    color: var(--bk-ink);
    font: 700 1.3rem/1.3 var(--mtv-font-ui);
}

.bk-review__provider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    padding: 16px 0;
    border-top: 1px solid var(--bk-line-soft);
    border-bottom: 1px solid var(--bk-line-soft);
}

.bk-dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin: 0;
}

.bk-dl dt {
    color: var(--bk-muted);
    font: 600 10.5px/1.2 var(--mtv-font-ui);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.bk-dl dd {
    margin: 4px 0 0;
    color: var(--bk-ink);
    font-weight: 700;
    font-size: .9rem;
}

.bk-review__note {
    margin-top: 20px;
    padding: 14px;
    border-radius: 12px;
    background: var(--bk-soft);
}

.bk-review__note .bk-eyebrow {
    margin-bottom: 5px;
}

.bk-review__note p {
    margin: 0;
    color: var(--bk-ink);
    font-size: .9rem;
    line-height: 1.55;
    white-space: pre-line;
}

.bk-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 88px;
    padding: 20px;
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius);
    background: var(--bk-panel);
    box-shadow: var(--bk-shadow);
}

.bk-summary h2 {
    margin: 0;
    color: var(--bk-ink);
    font: 700 1.05rem/1.3 var(--mtv-font-ui);
}

.bk-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--bk-muted);
    font-size: .88rem;
}

.bk-summary__row strong {
    color: var(--bk-ink);
}

.bk-summary__row--total {
    padding-top: 12px;
    border-top: 1px solid var(--bk-line-soft);
    color: var(--bk-ink);
    font-size: 1rem;
    font-weight: 700;
}

.bk-summary__row--total strong {
    color: var(--bk-accent-ink);
    font-size: 1.12rem;
}

.bk-summary .mtv-btn {
    width: 100%;
    justify-content: center;
}

.bk-summary__back {
    color: var(--bk-muted);
    font-size: .82rem;
    text-align: center;
    text-decoration: underline;
}

/* ---------- Bookings list ---------- */

.bk-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin: 0 0 18px;
    border: 1px solid var(--bk-line-soft);
    border-radius: 999px;
    background: var(--bk-soft);
}

.bk-tab {
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--bk-muted);
    font: 700 12px/1.2 var(--mtv-font-ui);
    text-decoration: none;
}

.bk-tab.is-active {
    background: var(--bk-panel);
    color: var(--bk-ink);
    box-shadow: 0 1px 4px rgba(16, 47, 67, .16);
}

.bk-bookings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 16px;
}

.bk-booking {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius);
    background: var(--bk-panel);
    box-shadow: var(--bk-shadow);
}

.bk-booking__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bk-booking__role {
    color: var(--bk-muted);
    font: 700 10px/1.2 var(--mtv-font-ui);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.bk-booking h2 {
    margin: 0;
    font: 700 1.1rem/1.3 var(--mtv-font-ui);
}

.bk-booking h2 a {
    color: var(--bk-ink);
    text-decoration: none;
}

.bk-booking h2 a:hover {
    color: var(--bk-accent-ink);
}

.bk-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--bk-soft-2);
    color: var(--bk-muted);
    font: 700 10px/1.2 var(--mtv-font-ui);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bk-status--requested {
    background: rgba(0, 110, 175, .1);
    color: #0B6BA8;
}

.bk-status--awaiting_payment {
    background: rgba(180, 83, 9, .12);
    color: #9A5A0B;
}

.bk-status--accepted,
.bk-status--completion_pending {
    background: rgba(16, 122, 87, .12);
    color: #0F7A57;
}

.bk-status--completed {
    background: rgba(16, 122, 87, .16);
    color: #0B6045;
}

.bk-status--cancellation_review {
    background: rgba(124, 92, 220, .14);
    color: #5B45A8;
}

.bk-status--declined,
.bk-status--cancelled {
    background: rgba(185, 28, 28, .1);
    color: #B01D1D;
}

.bk-booking__meta {
    display: grid;
    gap: 3px;
    margin: 0;
    color: var(--bk-muted);
    font-size: .84rem;
    line-height: 1.45;
}

.bk-booking__meta strong {
    color: var(--bk-ink);
}

.bk-booking__brief {
    margin: 2px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bk-soft);
    color: var(--bk-ink);
    font-size: .85rem;
    line-height: 1.5;
    white-space: pre-line;
}

.bk-booking__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.bk-booking__actions form {
    margin: 0;
}

.bk-booking details {
    margin-top: 4px;
    color: var(--bk-muted);
    font-size: .8rem;
}

.bk-booking details summary {
    cursor: pointer;
    font-weight: 700;
}

.bk-booking .mtv-field {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
}

.bk-booking .mtv-field span {
    color: var(--bk-muted);
    font: 600 .78rem/1.3 var(--mtv-font-ui);
}

.bk-booking .mtv-field input,
.bk-booking .mtv-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    background: var(--bk-soft);
    color: var(--bk-ink);
    font: 500 14px/1.45 var(--mtv-font-ui);
}

.bk-booking .mtv-field textarea {
    resize: vertical;
}

.bk-booking .mtv-field input:focus-visible,
.bk-booking .mtv-field textarea:focus-visible {
    border-color: var(--bk-accent);
    outline: 2px solid var(--bk-accent-soft);
    outline-offset: 1px;
}

/* ---------- Casting board ---------- */

.bk-board {
    display: grid;
    gap: 14px;
}

.bk-call {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius);
    background: var(--bk-panel);
    box-shadow: var(--bk-shadow);
}

.bk-call__flyer {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: var(--bk-soft);
}

.bk-call__flyer img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-fit: cover;
}

.bk-call--noflyer {
    grid-template-columns: minmax(0, 1fr);
}

.bk-call__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bk-call__title {
    margin: 0;
    color: var(--bk-ink);
    font: 400 1.35rem/1.2 var(--mtv-font-display);
}

.bk-call__title a {
    color: inherit;
    text-decoration: none;
}

.bk-call__title a:hover {
    color: var(--bk-accent-ink);
}

.bk-call__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    color: var(--bk-muted);
    font-size: .83rem;
}

.bk-call__sep {
    color: var(--bk-muted);
}

.bk-call__pay {
    display: inline-block;
    align-self: flex-start;
    margin: 4px 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(185, 28, 28, .08);
    color: #B91C1C;
    font: 700 11.5px/1.2 var(--mtv-font-ui);
}

.bk-call__pay--paid {
    background: var(--bk-accent-soft);
    color: var(--bk-accent-ink);
}

.bk-call__blurb {
    max-width: 88ch;
    margin: 2px 0;
    color: var(--bk-ink);
    font-size: .9rem;
    line-height: 1.55;
}

.bk-call__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
    color: var(--bk-muted);
    font-size: .8rem;
}

.bk-call__foot a {
    color: var(--bk-accent-ink);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.bk-call__tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bk-soft-2);
    color: var(--bk-muted);
    font: 700 10px/1.2 var(--mtv-font-ui);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ---------- Booking hub ---------- */

.bk-hub__paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 28px;
}

.bk-hub__path {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--bk-line-soft);
    border-radius: var(--bk-radius);
    background: var(--bk-panel);
    box-shadow: var(--bk-shadow);
}

.bk-hub__path h2 {
    margin: 0;
    color: var(--bk-ink);
    font: 400 1.35rem/1.25 var(--mtv-font-display);
}

.bk-hub__path p {
    margin: 0;
    color: var(--bk-muted);
    font-size: .88rem;
    line-height: 1.55;
}

.bk-hub__path .mtv-btn {
    align-self: flex-start;
    margin-top: 8px;
}

.bk-hub__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.bk-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 26px 0 14px;
}

.bk-section-head h2 {
    margin: 0;
    color: var(--bk-ink);
    font: 700 1.15rem/1.25 var(--mtv-font-ui);
}

.bk-section-head a {
    color: var(--bk-accent-ink);
    font: 700 .8rem/1.2 var(--mtv-font-ui);
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- Empty + alerts ---------- */

.bk-empty {
    padding: 30px 20px;
    border: 1px dashed var(--bk-line);
    border-radius: var(--bk-radius);
    background: var(--bk-soft);
    text-align: center;
}

.bk-empty h3 {
    margin: 0 0 6px;
    color: var(--bk-ink);
    font: 700 1.05rem/1.3 var(--mtv-font-ui);
}

.bk-empty p {
    margin: 0 auto;
    max-width: 52ch;
    color: var(--bk-muted);
    font-size: .88rem;
    line-height: 1.55;
}

.bk-empty .mtv-btn {
    margin-top: 14px;
}

.bk-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 16px;
    padding: 13px 16px;
    border: 1px solid rgba(180, 83, 9, .3);
    border-radius: 12px;
    background: #FFF5E9;
    color: #694819;
    font-size: .86rem;
    line-height: 1.5;
}

.bk-alert strong {
    display: block;
}

.bk-alert a {
    color: #8A4B00;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Responsive ---------- */

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

@media (max-width: 960px) {
    .bk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bk-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-detail__main {
        display: contents;
    }

    .bk-detail__intro {
        order: 1;
    }

    .bk-aside {
        order: 2;
        position: static;
    }

    .bk-detail__details {
        order: 3;
    }

    .bk-checkout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-summary {
        position: static;
    }

    .bk-hub__paths {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .bk-search {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bk-search > input[type="search"]:first-child {
        grid-column: 1 / -1;
    }

    .bk-search .mtv-btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .bk-call {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
    }

    .bk-call__flyer img {
        max-height: 240px;
        object-fit: contain;
        background: var(--bk-soft);
    }
}

@media (max-width: 620px) {
    .bk-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .bk-card__media {
        aspect-ratio: 4 / 3;
    }

    .bk-card__title {
        font-size: 16px;
    }

    .bk-card__price strong {
        font-size: 16px;
    }

    .bk-call__sep {
        display: none;
    }

    .bk-search {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
    }

    .bk-results {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .bk-sort {
        width: 100%;
        justify-content: space-between;
    }

    .bk-sort select {
        flex: 1;
        max-width: 190px;
    }

    .bk-tabs {
        width: 100%;
        justify-content: center;
    }

    .bk-tab {
        flex: 1;
        text-align: center;
    }

    .bk-head__actions {
        width: 100%;
    }

    .bk-head__actions .mtv-btn {
        flex: 1;
        text-align: center;
    }

    .bk-review {
        padding: 16px;
    }

    .bk-dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .bk-bookings {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Dark theme ---------- */

:root[data-theme="dark"] .bk {
    --bk-panel: #131F2C;
    --bk-soft: rgba(255, 255, 255, .045);
    --bk-soft-2: rgba(255, 255, 255, .075);
    --bk-line: rgba(166, 196, 222, .18);
    --bk-line-soft: rgba(166, 196, 222, .1);
    --bk-ink: #E7F0F9;
    --bk-muted: rgba(206, 223, 238, .66);
    --bk-accent: #FF6C99;
    --bk-accent-ink: #FF9ABA;
    --bk-accent-soft: rgba(255, 108, 153, .14);
    --bk-shadow: 0 18px 44px -24px rgba(0, 0, 0, .8);
    color-scheme: dark;
}

:root[data-theme="dark"] .bk-card__media,
:root[data-theme="dark"] .bk-call__flyer {
    background: linear-gradient(135deg, #1B2536, #14202D);
}

:root[data-theme="dark"] .bk-card__initials {
    color: rgba(255, 156, 190, .85);
}

:root[data-theme="dark"] .bk-note--warn,
:root[data-theme="dark"] .bk-alert {
    border-color: rgba(245, 181, 68, .34);
    background: rgba(120, 80, 20, .2);
    color: #F2D9AC;
}

:root[data-theme="dark"] .bk-note--warn strong,
:root[data-theme="dark"] .bk-alert strong {
    color: #F6E3BE;
}

:root[data-theme="dark"] .bk-alert a {
    color: #FFD18A;
}

:root[data-theme="dark"] .bk-status--requested {
    background: rgba(64, 160, 220, .16);
    color: #9AD3F5;
}

:root[data-theme="dark"] .bk-status--awaiting_payment {
    background: rgba(245, 181, 68, .16);
    color: #F4CE8B;
}

:root[data-theme="dark"] .bk-status--accepted,
:root[data-theme="dark"] .bk-status--completion_pending,
:root[data-theme="dark"] .bk-status--completed {
    background: rgba(45, 212, 167, .16);
    color: #90E8CB;
}

:root[data-theme="dark"] .bk-status--cancellation_review {
    background: rgba(159, 131, 240, .18);
    color: #C9B8FB;
}

:root[data-theme="dark"] .bk-status--declined,
:root[data-theme="dark"] .bk-status--cancelled {
    background: rgba(248, 113, 113, .16);
    color: #FFB0B0;
}

:root[data-theme="dark"] .bk-call__pay {
    background: rgba(248, 113, 113, .14);
    color: #FFB0B0;
}

:root[data-theme="dark"] .bk-call__pay--paid {
    background: var(--bk-accent-soft);
    color: var(--bk-accent-ink);
}

:root[data-theme="dark"] .bk-search input,
:root[data-theme="dark"] .bk-search select,
:root[data-theme="dark"] .bk-sort select,
:root[data-theme="dark"] .bk-form .mtv-field input,
:root[data-theme="dark"] .bk-form .mtv-field select,
:root[data-theme="dark"] .bk-form .mtv-field textarea {
    background: var(--bk-soft);
    color: var(--bk-ink);
}

:root[data-theme="dark"] .bk-search input::placeholder,
:root[data-theme="dark"] .bk-form .mtv-field textarea::placeholder {
    color: var(--bk-muted);
}