/* ==========================================================================
   ELITE TRIP - choosing a Local Host.

   The Local Hosts page (headline, filters, the hosts, help choosing), the
   Host Level and recognition badges, the package picker, the availability
   line and the video introduction. One headline, one calm white filter
   bar, then the hosts on a sand band. Every value is an elite.css token;
   every motion is one of motion.css's.

   A badge NEVER relies on colour alone: each one carries its own word.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   LOCAL HOSTS: the opening
   --------------------------------------------------------------------------- */
.bd-hero {
    padding: clamp(44px, 7vw, 88px) 0 clamp(24px, 3vw, 36px);
    background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg) 62%, var(--c-bg-alt) 100%);
    text-align: center;
}
.bd-hero__copy { max-width: 860px; margin-inline: auto; }
.bd-hero .pg-kicker { justify-content: center; }
.bd-hero .pg-title {
    margin-bottom: 0;
    font-size: var(--t-display); line-height: 1.07; letter-spacing: -0.005em;
}
.bd-hero .pg-sub { max-width: 640px; margin: 18px auto 0; text-wrap: balance; }

/* Three house rules in one quiet line. */
.bd-promise {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
    margin: 22px 0 0; padding: 0; list-style: none;
    font-size: var(--t-small); color: var(--c-ink-2);
}
.bd-promise li { display: inline-flex; align-items: center; gap: 8px; }
.bd-promise .et-i { color: var(--c-bronze); }

/* The experience brought over from an experience card. */
.bd-context { max-width: 760px; margin: 28px auto 0; display: grid; gap: 10px; text-align: left; }
.bd-context .et-note { margin: 0; }

.bd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 22px; }
.bd-head .pg-sub { margin-bottom: 0; }
.bd-head-help { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------------------
   THE FILTER BAR
   Five quiet fields in one white bar, the same shape as the homepage's
   booking bar. Each field filters the moment it changes.
   --------------------------------------------------------------------------- */
.bd-panel { max-width: 1060px; margin: clamp(32px, 4.5vw, 48px) auto 0; }
.bd-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    align-items: stretch;
    padding: 8px;
    border-radius: var(--r-pill);
    background: var(--c-bg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(15, 26, 44, 0.10);
    text-align: left;
}
.bd-filter {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0;
    padding: 9px 20px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background-color 200ms var(--et-ease-glide);
}
/* The hairline between two fields, drawn inside so a hover fill hides it. */
.bd-filter + .bd-filter::before {
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
    width: 1px; background: var(--c-line);
}
.bd-filter:hover { background: var(--c-bg-alt); }
.bd-filter:hover::before, .bd-filter:hover + .bd-filter::before,
.bd-filter:focus-within::before, .bd-filter:focus-within + .bd-filter::before { opacity: 0; }
.bd-filter > span {
    font-size: var(--t-micro); font-weight: 600; letter-spacing: -0.01em; text-transform: none;
    color: var(--c-ink);
}
.bd-filter select, .bd-filter input {
    width: 100%; min-width: 0; min-height: 26px; padding: 0;
    border: 0; border-radius: 0;
    background-color: transparent; color: var(--c-muted);
    font: inherit; font-size: var(--t-small); font-weight: 400; letter-spacing: -0.01em;
    cursor: pointer;
}
.bd-filter select {
    -webkit-appearance: none; appearance: none; padding-right: 18px;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236e6a66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0 center; background-size: 10px 7px;
}
.bd-filter select:focus, .bd-filter input:focus { outline: none; }
.bd-filter:focus-within { background: var(--c-bg-alt); box-shadow: var(--ring); }
/* A field in use reads in ink, with a small gold dot by its name. */
.bd-filter select.is-set, .bd-filter input.is-set { color: var(--c-ink); font-weight: 600; }
.bd-filter:has(.is-set) > span::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
    border-radius: 50%; background: var(--c-gold); vertical-align: middle;
}
.bd-filter-reset {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 48px; margin-left: 4px; padding: 0 20px;
    border: 0; border-radius: var(--r-pill);
    background: var(--c-ink); color: var(--c-bg);
    font: inherit; font-size: var(--t-small); font-weight: 400; cursor: pointer;
    transition: background-color 200ms var(--et-ease-glide);
}
.bd-filter-reset:hover { background: #000; }
.bd-filter-reset:focus-visible { outline: none; box-shadow: var(--ring); }

/* Under the bar: free today, and the Host Level. */
.bd-quick {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px;
    margin-top: 22px;
}
.bd-quick-label { font-size: var(--t-small); font-weight: 600; color: var(--c-ink); }
.bd-quick .chip-select { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); }
.bd-quick .chip-select .et-i { color: var(--c-bronze); }
.bd-quick .chip-select.on .et-i, .bd-quick .chip-select[aria-pressed="true"] .et-i { color: var(--c-gold); }
.bd-divider { width: 1px; height: 26px; background: var(--c-line-2); }
.bd-link-btn {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 44px; padding: 4px 2px;
    border: 0; background: none; color: var(--c-link);
    font: inherit; font-size: var(--t-small); font-weight: 400; text-decoration: none; cursor: pointer;
}
.bd-link-btn::after { content: "\203A"; font-size: 1.25em; line-height: 1; transition: transform 200ms var(--et-ease-glide); }
.bd-link-btn[aria-expanded="true"]::after { transform: rotate(90deg); }
.bd-link-btn:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* ---------------------------------------------------------------------------
   THE HOSTS, on a sand band
   --------------------------------------------------------------------------- */
.bd-results { padding: clamp(24px, 3vw, 40px) 0 var(--sp-chapter); background: var(--c-bg-alt); }
.bd-results-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
    margin: 0 0 clamp(20px, 3vw, 32px);
}
.bd-count { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.12; letter-spacing: 0.004em; color: var(--c-ink); }

.bd-match {
    display: inline-flex; align-items: center; gap: 14px;
    min-height: 56px; padding: 10px 22px 10px 10px; border-radius: var(--r-pill);
    background: var(--c-bg); color: var(--c-ink); text-decoration: none;
    box-shadow: 0 0 0 1px transparent;
    transition: box-shadow 260ms var(--et-ease-glide);
}
/* No lift: a gold edge and a soft shadow. */
.bd-match:hover, .bd-match:focus-visible {
    color: var(--c-ink); text-decoration: none;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.55), 0 10px 30px -18px rgba(15, 26, 44, 0.35);
}
.bd-match-ico {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--c-espresso); color: #fff; font-size: 1.1rem;
}
.bd-match b { display: block; font-size: var(--t-small); font-weight: 600; }
.bd-match small { display: block; font-size: var(--t-micro); color: var(--c-muted); }
.bd-match > span:last-child::after { content: none; }

/* Cards on sand: flat until a pointer finds one, then a gold edge. They
   never lift and their photographs never zoom. */
.buddy-results-grid .bcard { box-shadow: none; transition: box-shadow 260ms var(--et-ease-glide); }
.buddy-results-grid .bcard:hover {
    transform: none;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.55), 0 10px 30px -18px rgba(15, 26, 44, 0.35);
}
.buddy-results-grid .bcard-photo { aspect-ratio: 4 / 4.4; }
.buddy-results-grid .lvl-row { margin-bottom: 6px; }
.buddy-results-grid .bcard-name .chip-green { font-weight: 600; }
.bcard-photo .no-photo .et-i { width: 2.6rem; height: 2.6rem; stroke-width: 1; }
.bcard-verify .et-i { color: var(--c-bronze); }
.bcard-rating .et-i { color: var(--c-gold); }
.bcard-meta .et-i { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--c-bronze); }
.bcard-next .et-i { flex: none; }
/* Price on the left, the gold action on the right. */
.bcard-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 16px; border-top: 1px solid var(--c-line);
}
.bcard-foot .bcard-price { margin: 0; padding: 0; border: 0; line-height: 1.25; }
.bcard-foot .bcard-price small { display: block; font-size: var(--t-micro); }
.bcard-foot .pg-btn { flex: 0 0 auto; width: auto; min-height: 40px; padding: 8px 18px; white-space: nowrap; }
.bcard-body > .bcard-meta:first-of-type { margin-top: 2px; }

.bcard-skel-line { height: 12px; border-radius: 6px; }
.bcard-skel-line--name { height: 18px; width: 58%; }
.bcard-skel-line--meta { width: 84%; }
.bcard-skel-line--price { width: 46%; margin-top: 10px; }

/* Compact cards (owner, 2026-10-02): about half the old size, five across
   on a wide screen, four on a tablet, two on a phone (the phone rule below).
   The photograph stays the subject; the words shrink to what decides a
   booking: name, level, languages, price and one action. */
.buddy-grid.buddy-results-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.buddy-results-grid .bcard { border-radius: var(--r-md); }
.buddy-results-grid .bcard-photo { aspect-ratio: 4 / 5; }
.buddy-results-grid .bcard-verify { top: 8px; left: 8px; padding: 3px 8px; font-size: var(--t-micro); }
.buddy-results-grid .bcard-body { gap: 4px; padding: 10px 12px 12px; }
.buddy-results-grid .lvl-row { margin-bottom: 2px; }
.buddy-results-grid .bcard-name { flex-wrap: wrap; gap: 2px 6px; font-size: 0.9375rem; line-height: 1.2; }
.buddy-results-grid .bcard-rating { font-size: var(--t-micro); }
.buddy-results-grid .bcard-meta, .buddy-results-grid .bcard-next { font-size: var(--t-micro); line-height: 1.35; }
.buddy-results-grid .bcard-meta .et-i { width: 12px; height: 12px; margin-top: 2px; }
.buddy-results-grid .bcard-meta--likes { display: none; }
.buddy-results-grid .bcard-foot { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
.buddy-results-grid .bcard-foot .bcard-price { font-size: 0.875rem; }
.buddy-results-grid .bcard-foot .pg-btn { width: 100%; min-height: 34px; padding: 5px 10px; font-size: var(--t-small); }
@media (max-width: 1180px) { .buddy-grid.buddy-results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .buddy-grid.buddy-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bd-empty {
    grid-column: 1 / -1; padding: clamp(36px, 6vw, 64px) 24px; text-align: center;
    border-radius: var(--r-md); background: var(--c-bg);
}
.bd-empty strong { display: block; margin-bottom: 8px; font-size: var(--t-title); font-weight: 600; color: var(--c-ink); }
.bd-empty p { max-width: 460px; margin: 0 auto 22px; font-size: var(--t-body); color: var(--c-muted); }
.bd-empty .pg-btn { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------------------
   STILL DECIDING: two tiles
   --------------------------------------------------------------------------- */
.bd-assist { padding-block: var(--sp-chapter); background: var(--c-bg); }
.bd-help {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
    margin-top: 0;
}
.bd-help a {
    display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    min-height: 240px; padding: clamp(28px, 3.4vw, 44px);
    border-radius: var(--r-xl); background: var(--c-bg-alt);
    box-shadow: 0 0 0 1px transparent;
    color: var(--c-ink); text-decoration: none;
    transition: box-shadow 260ms var(--et-ease-glide);
}
.bd-help a:hover, .bd-help a:focus-visible {
    color: var(--c-ink); text-decoration: none;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.55), 0 10px 30px -18px rgba(15, 26, 44, 0.35);
}
.bd-help a.bd-help--dark { background: var(--c-espresso); color: var(--c-on-dark); }
.bd-help a.bd-help--dark:hover { color: var(--c-on-dark); }
.bd-help .et-ico { width: 48px; height: 48px; font-size: 1.25rem; background: var(--c-bg); color: var(--c-ink); }
.bd-help .et-ico--coral { background: rgba(255, 255, 255, 0.1); color: var(--c-gold); }
.bd-help strong { display: block; font-size: var(--t-title); font-weight: 600; line-height: 1.1; letter-spacing: 0; }
.bd-help small { display: block; margin-top: 8px; font-size: var(--t-body); line-height: 1.47; color: var(--c-muted); }
.bd-help--dark small { color: var(--c-on-dark-2); }
.bd-help-go { margin-top: auto; font-size: var(--t-body); color: var(--c-link); }
.bd-help-go::after { content: " \203A"; font-size: 1.2em; }
.bd-help--dark .bd-help-go { color: var(--c-gold-light); }
.bd-help a:hover .bd-help-go { text-decoration: underline; text-underline-offset: 0.15em; }

/* The breadcrumb opens the footer: a sand strip on the footer's measure. */
.bd-crumbs { background: var(--c-bg-alt); }
.bd-crumbs__in.et-crumbs {
    max-width: calc(980px + var(--pad) * 2); margin: 0 auto;
    padding: 18px var(--pad) 0;
}

@media (max-width: 1068px) {
    .bd-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-lg); row-gap: 4px; }
    .bd-filter { border-radius: var(--r-sm); }
    .bd-filter:nth-child(4)::before { display: none; }
    .bd-filter-reset { grid-column: auto; margin: 0; border-radius: var(--r-sm); }
}
/* PHONE: nothing becomes one long column. The rules sit three to a row,
   the filters two to a row, the hosts two to a row, the help tiles side by
   side. */
@media (max-width: 734px) {
    .bd-hero { padding-top: 28px; text-align: left; }
    .bd-hero .pg-kicker { justify-content: flex-start; }
    .bd-hero .pg-sub { margin: 10px 0 0; font-size: var(--t-body); }
    .bd-promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
    .bd-promise li {
        flex-direction: column; align-items: flex-start; gap: 6px;
        padding: 10px; border-radius: var(--r-sm); background: var(--c-bg-alt);
        font-size: var(--t-micro); line-height: 1.3;
    }
    .bd-panel { margin-top: 20px; }
    .bd-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: var(--r-lg); }
    .bd-filter { min-height: 54px; padding: 7px 12px; border-radius: var(--r-sm); background: var(--c-bg-alt); }
    /* Language and interest, then budget across, then date and time. */
    .bd-filter:nth-child(3), .bd-filter-reset { grid-column: 1 / -1; }
    .bd-filter + .bd-filter::before { display: none; }
    .bd-filter > span { font-size: var(--t-micro); }
    .bd-filter select, .bd-filter input { font-size: 0.9375rem; }
    .bd-filter:focus-within { border-radius: var(--r-sm); }
    .bd-filter-reset { min-height: 44px; margin: 0; border-radius: var(--r-sm); }
    .bd-quick { justify-content: flex-start; gap: 8px 10px; margin-top: 14px; }
    .bd-divider, .bd-quick-label { display: none; }
    .bd-quick .chip-select { min-height: 40px; }
    .bd-link-btn { min-height: 40px; margin-left: auto; font-size: var(--t-micro); }
    .bd-results-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .bd-count { font-size: var(--t-title); }
    .bd-match { width: 100%; min-height: 0; padding: 8px 14px 8px 8px; border-radius: var(--r-md); }
    .bd-match-ico { width: 34px; height: 34px; }
    /* Two hosts to a row. */
    .buddy-grid.buddy-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .buddy-results-grid .bcard { border-radius: var(--r-md); }
    .buddy-results-grid .bcard-photo { aspect-ratio: 4 / 4.6; }
    .buddy-results-grid .bcard-verify { top: 8px; left: 8px; padding: 3px 8px; font-size: 0.6875rem; }
    .buddy-results-grid .bcard-body { gap: 4px; padding: 10px 12px 12px; }
    .buddy-results-grid .lvl-row { margin-bottom: 2px; }
    .buddy-results-grid .lvl-badge, .buddy-results-grid .ach-badge { padding: 2px 8px; font-size: 0.6875rem; }
    .buddy-results-grid .bcard-name { flex-wrap: wrap; gap: 2px 6px; font-size: 1rem; line-height: 1.2; }
    .buddy-results-grid .bcard-name .chip { padding: 1px 7px; font-size: 0.6875rem; }
    .buddy-results-grid .bcard-rating { font-size: var(--t-micro); }
    .buddy-results-grid .bcard-meta, .buddy-results-grid .bcard-next { font-size: var(--t-micro); line-height: 1.35; }
    .buddy-results-grid .bcard-meta .et-i { width: 12px; height: 12px; margin-top: 2px; }
    .buddy-results-grid .bcard-meta--likes { display: none; }
    .bcard-foot { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
    .bcard-foot .bcard-price { font-size: 0.9375rem; }
    .bcard-foot .pg-btn { width: 100%; min-height: 40px; padding: 6px 10px; font-size: var(--t-small); }
    .bd-empty { padding: 32px 18px; }
    .bd-assist { padding-block: 32px; }
    .bd-assist .et-head { margin-bottom: 16px; text-align: left; }
    .bd-help { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bd-help a { gap: 10px; min-height: 0; padding: 16px 14px; border-radius: var(--r-md); }
    .bd-help .et-ico { width: 36px; height: 36px; font-size: 1rem; }
    .bd-help strong { font-size: 1rem; line-height: 1.2; }
    .bd-help small { margin-top: 4px; font-size: var(--t-micro); line-height: 1.4; }
    .bd-help-go { font-size: var(--t-small); }
}

/* ---------------------------------------------------------------------------
   HOST LEVEL AND RECOGNITION BADGES
   --------------------------------------------------------------------------- */
.lvl-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--r-pill);
    font-size: var(--t-micro); font-weight: 600; line-height: 1.3; letter-spacing: 0; white-space: nowrap;
}
.lvl-badge .lvl-ico, .lvl-filter .lvl-ico { width: 1.15em; height: 1.15em; }
.lvl-rising  { background: var(--c-bg-alt); color: var(--c-ink-2); box-shadow: inset 0 0 0 1px var(--c-line); }
.lvl-rising .lvl-ico { color: var(--c-bronze); }
.lvl-premium { background: var(--c-espresso); color: var(--c-gold-light); }
.lvl-premium .lvl-ico { color: var(--c-gold); }
/* A little larger on a profile, beside the name. */
.lvl-badge-lg { padding: 6px 13px; font-size: var(--t-small); }

/* ONE of these at most, next to a level badge. */
.ach-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--c-warn-bg); color: var(--c-link);
    font-size: var(--t-micro); font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.lvl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }

/* Level filter: a segmented control. aria-pressed marks the chosen segment,
   which is raised as well as tinted. */
.lvl-filter {
    display: inline-flex; flex-wrap: wrap; gap: 2px;
    padding: 3px; border-radius: var(--r-pill);
    background: var(--c-bg-alt-2);
}
.lvl-filter button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px; padding: 6px 16px;
    border: 0; border-radius: var(--r-pill);
    background: transparent; color: var(--c-ink-2);
    font: inherit; font-size: var(--t-small); font-weight: 400; white-space: nowrap; cursor: pointer;
    transition: background-color 200ms var(--et-ease-glide), color 200ms var(--et-ease-glide), box-shadow 200ms var(--et-ease-glide);
}
.lvl-filter button:hover { color: var(--c-ink); }
.lvl-filter button[aria-pressed="true"] { background: var(--c-bg); color: var(--c-ink); font-weight: 600; box-shadow: 0 1px 4px rgba(15, 26, 44, 0.14); }
.lvl-filter button[aria-pressed="true"] .lvl-ico { color: var(--c-gold); }
.lvl-filter button:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 734px) {
    .lvl-filter { display: flex; flex-wrap: nowrap; width: 100%; order: 3; }
    .lvl-filter button { flex: 1 1 0; min-height: 40px; padding: 6px 8px; font-size: var(--t-micro); }
}

.lvl-explain {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px;
    max-width: 860px; margin: 22px auto 0; text-align: left;
}
.lvl-explain > div { padding: 22px 24px; border-radius: var(--r-md); background: var(--c-bg); box-shadow: 0 0 0 1px var(--c-line); }
.lvl-explain h2, .lvl-explain h3, .lvl-explain-title { margin: 12px 0 6px; font-size: 1.1875rem; font-weight: 600; color: var(--c-ink); }
.lvl-explain p { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--c-muted); }
@media (max-width: 734px) {
    .lvl-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
    .lvl-explain > div { padding: 12px; }
    .lvl-explain-title { margin: 8px 0 4px; font-size: var(--t-small); }
    .lvl-explain p { font-size: var(--t-micro); line-height: 1.4; }
}

/* ---------------------------------------------------------------------------
   VIDEO INTRODUCTION
   The photograph stays the picture: a 44px round control in its corner.
   --------------------------------------------------------------------------- */
.iv-play {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(15, 26, 44, 0.62); color: var(--c-gold); font-size: 1.1rem; cursor: pointer;
    -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
    transition: background-color 200ms var(--et-ease-glide), color 200ms var(--et-ease-glide);
}
.iv-play:hover, .iv-play:focus-visible { background: var(--c-gold); color: #fff; }
.iv-play:focus-visible { outline: 3px solid var(--c-bg); outline-offset: 2px; }
/* The name beside the control on hover or focus, on desktop only. */
.iv-play-label {
    position: absolute; right: 62px; bottom: 21px; z-index: 2;
    padding: 5px 11px; border-radius: var(--r-pill);
    background: rgba(15, 26, 44, 0.82); color: var(--c-on-dark);
    font-size: var(--t-micro); font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 200ms var(--et-ease-glide);
}
.iv-play:hover + .iv-play-label, .iv-play:focus-visible + .iv-play-label { opacity: 1; }
@media (hover: none) { .iv-play-label { display: none; } }

/* The worded version, beside the host's name on a profile. */
.iv-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 8px 20px 8px 8px;
    border: 0; border-radius: var(--r-pill);
    background: var(--c-bg-alt); color: var(--c-ink);
    font: inherit; font-weight: 400; font-size: var(--t-small); cursor: pointer;
    transition: background-color 200ms var(--et-ease-glide), color 200ms var(--et-ease-glide);
}
.iv-btn .iv-btn__ico {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; background: var(--c-espresso); color: #fff; font-size: 0.95rem;
}
.iv-btn:hover { background: var(--c-bg-alt-2); color: var(--c-ink); }
.iv-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.iv-modal[hidden] { display: none; }
.iv-modal {
    position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(15, 26, 44, 0.48);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    animation: et-fade-in 280ms linear backwards;
}
/* The dialog unfolds from its middle (motion.css, Unfold). */
.iv-dialog {
    position: relative; width: min(440px, 100%); max-height: 92vh; overflow-y: auto;
    padding: 26px 24px 22px; border-radius: var(--r-xl);
    background: var(--c-bg); box-shadow: var(--sh-4);
    animation: et-unfold 380ms var(--et-ease-rise) backwards;
}
.iv-dialog h2 { margin: 0 44px 4px 0; font-size: var(--t-title); font-weight: 600; color: var(--c-ink); }
.iv-dialog .iv-sub { margin: 0 0 16px; font-size: var(--t-small); color: var(--c-muted); }
.iv-dialog video { display: block; width: 100%; max-height: 62vh; border-radius: var(--r-md); background: #000; }
.iv-close {
    position: absolute; top: 14px; right: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--c-bg-alt); color: var(--c-ink); font-size: 1rem; cursor: pointer;
}
.iv-close:hover { background: var(--c-bg-alt-2); }
.iv-close:focus-visible { outline: none; box-shadow: var(--ring); }
.iv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* On a phone the dialog is a sheet at the bottom, where the thumb is, and
   it unfolds upward. */
@media (max-width: 620px) {
    .iv-modal { padding: 0; align-items: flex-end; }
    .iv-dialog {
        width: 100%; max-height: 88vh; padding: 22px 18px 24px; border-radius: var(--r-xl) var(--r-xl) 0 0;
        animation: et-unfold-up 420ms var(--et-ease-rise) backwards;
    }
    .iv-actions .pg-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   PACKAGE PICKER
   Option tiles: a quiet outline, a firm one once chosen, and a check so the
   choice never rests on the outline alone.
   --------------------------------------------------------------------------- */
.pkg-list { display: grid; gap: 10px; margin: 6px 0 4px; }
.pkg {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 64px; padding: 14px 16px 14px 18px;
    border: 1px solid var(--c-line-2); border-radius: var(--r-sm);
    background: var(--c-bg); color: var(--c-ink); text-align: left; cursor: pointer;
    font: inherit;
    transition: border-color 200ms var(--et-ease-glide), box-shadow 200ms var(--et-ease-glide), background-color 200ms var(--et-ease-glide);
}
.pkg:hover { border-color: rgba(37, 99, 235, 0.55); }
.pkg:focus-visible { outline: none; box-shadow: var(--ring); }
.pkg[aria-pressed="true"] { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
/* Never the outline alone: the chosen package also shows its check, which
   survives colour blindness and high-contrast modes. */
.pkg[aria-pressed="true"] .pkg-check { opacity: 1; }
.pkg-check { flex: none; display: inline-flex; opacity: 0; color: var(--c-gold); font-size: 1.15rem; transition: opacity 200ms var(--et-ease-glide); }
.pkg-main { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.pkg-hours { font-size: var(--t-body); font-weight: 600; color: var(--c-ink); }
.pkg-name  { font-size: var(--t-micro); color: var(--c-muted); }
.pkg-price { font-size: var(--t-body); font-weight: 600; color: var(--c-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pkg-badge {
    position: absolute; top: -10px; left: 14px;
    padding: 2px 10px; border-radius: var(--r-pill);
    background: var(--c-gold); color: #fff;
    font-size: var(--t-micro); font-weight: 600; letter-spacing: 0; text-transform: none;
}
@media (max-width: 734px) {
    /* Four lengths, two to a row. */
    .pkg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; margin-top: 12px; }
    .pkg { flex-wrap: wrap; align-items: flex-start; gap: 2px 6px; min-height: 0; padding: 14px 12px 10px; }
    .pkg-main { flex: 1 1 100%; }
    .pkg-hours { font-size: 0.9375rem; }
    .pkg-price { font-size: 0.9375rem; }
    .pkg-check { position: absolute; top: 10px; right: 10px; font-size: 1rem; }
    .pkg-badge { left: 10px; padding: 1px 8px; font-size: 0.6875rem; }
}

/* What the price covers: one tap away. */
.pkg-note { margin: 10px 0 0; font-size: var(--t-small); line-height: 1.5; color: var(--c-muted); }
.pkg-note > summary {
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
    color: var(--c-link); font-size: var(--t-small); font-weight: 400; cursor: pointer; list-style: none;
}
.pkg-note > summary::-webkit-details-marker { display: none; }
.pkg-note > summary::after { content: "\203A"; font-size: 1.25em; line-height: 1; transition: transform 200ms var(--et-ease-glide); }
.pkg-note[open] > summary::after { transform: rotate(90deg); }
.pkg-note > summary:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.pkg-note-body { margin-top: 2px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--c-bg-alt); }
.pkg-note[open] .pkg-note-body { animation: et-unfold-down 220ms var(--et-ease-settle) backwards; }
.pkg-inc, .pkg-exc { margin: 0; padding: 0; list-style: none; }
.pkg-inc li, .pkg-exc li { position: relative; padding-left: 22px; font-size: var(--t-small); line-height: 1.6; color: var(--c-ink); }
/* The Elite check, drawn from the icon set's mask, in gold. */
.pkg-inc li::before {
    content: ""; position: absolute; left: 0; top: 0.3em; width: 14px; height: 14px;
    background: var(--c-gold);
    -webkit-mask: var(--et-i-check) center / contain no-repeat; mask: var(--et-i-check) center / contain no-repeat;
}
.pkg-exc li::before { content: '\2013'; position: absolute; left: 2px; color: var(--c-muted); font-weight: 600; }
.pkg-exc-h { margin: 12px 0 2px; font-size: var(--t-micro); font-weight: 600; color: var(--c-muted); }
.pkg-conf { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: var(--t-micro); line-height: 1.5; color: var(--c-muted); }

/* ---------------------------------------------------------------------------
   AVAILABILITY
   avail-free states a fact and may look positive. avail-ask is the honest
   next step for a host without published hours, so it stays neutral.
   --------------------------------------------------------------------------- */
.avail-line { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--r-sm); font-size: var(--t-small); font-weight: 600; line-height: 1.45; }
.avail-line[hidden] { display: none; }
.avail-line .et-i { flex: none; margin-top: 2px; }
.avail-free { background: var(--c-success-bg); color: #155a38; }
.avail-free .et-i { color: var(--c-success); }
.avail-ask { background: var(--c-bg-alt); color: var(--c-ink); font-weight: 400; }
.avail-ask .et-i { color: var(--c-bronze); }

/* What this booking is: a quiet boundary, not a warning. */
.scope-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: var(--t-micro); line-height: 1.5; color: var(--c-muted); }
.scope-note .et-i { flex: none; margin-top: 2px; opacity: 0.75; }

/* Reduced motion: every surface appears in its finished state. */
@media (prefers-reduced-motion: reduce) {
    .iv-modal, .iv-dialog, .pkg-note[open] .pkg-note-body { animation: none; }
    .buddy-results-grid .bcard, .bd-match, .bd-help a, .pkg, .lvl-filter button { transition: none; }
}