/* =====================================================================
   Transfers — shared by the B2B agent portal and the B2C website.
   Builds on hotels.css (tokens --h-*, the hs-* search controls, hr-cancel badges, hb-* summary).
   ===================================================================== */
.ts-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: .75rem; }
.ts-switch { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--h-soft); }
.ts-switch label { cursor: pointer; margin: 0; }
.ts-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ts-switch span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .95rem; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--h-muted); }
.ts-switch input:checked + span { background: #fff; color: var(--h-primary); box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.ts-switch input:focus-visible + span { outline: 2px solid var(--h-accent); outline-offset: 2px; }
.ts-return { margin: 0; font-weight: 600; color: var(--h-ink); }

.ts-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.ts-grid [hidden] { display: none !important; }
@media (min-width: 576px) {
    .ts-grid { grid-template-columns: 1fr 1fr; }
    .ts-terminal, .ts-city, .ts-hotel, .ts-grid .hs-submit { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
    .ts-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; }
    .ts-terminal, .ts-hotel { grid-column: span 2; }
    .ts-city { grid-column: span 2; }
    .ts-grid .hs-submit { grid-column: span 2; }
    .ts-grid .hs-submit .btn { height: 3.25rem; white-space: nowrap; }
}
/* The form sits on dark hero banners: set its own ink so labels, the switch and the dropdowns never inherit white text. */
.ts-form { color: var(--h-ink); }
.ts-form .hs-field > label { color: var(--h-muted); }
.ts-form .hs-control input::placeholder { color: #9aa4b5; font-weight: 500; }

/* ---------- autocomplete suggestions ---------- */
.ts-form .hs-suggest { color: var(--h-ink); border: 1px solid var(--h-line); padding: .4rem; min-width: min(420px, calc(100vw - 2rem)); }
.ts-form .hs-suggest li { gap: .75rem; padding: .6rem .7rem; color: var(--h-ink); border-radius: 10px; transition: background-color .12s ease; }
.ts-form .hs-suggest li + li { margin-top: 2px; }
.ts-form .hs-suggest li[aria-selected="true"], .ts-form .hs-suggest li:hover {
    background: color-mix(in srgb, var(--h-primary) 9%, #fff); }
.ts-form .hs-suggest li[aria-selected="true"] .ts-opt-name { color: var(--h-primary); }
.ts-opt-icon { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--h-primary) 12%, #fff); color: var(--h-primary); font-size: 1rem; }
.ts-opt-icon.is-hotel { background: #fff3e6; color: #a34f00; }
.ts-opt-icon.is-city { background: #e8f5ef; color: #0f6b43; }
.ts-opt-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ts-opt-name { font-weight: 600; font-size: .94rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-form .hs-suggest li .ts-opt-sub { display: block; color: var(--h-muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-opt-code { flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .5px; padding: .15rem .5rem; border-radius: 6px;
    background: var(--h-soft); color: var(--h-primary); border: 1px solid var(--h-line); }
.ts-opt-stars { flex: none; color: #f5a623; font-size: .78rem; letter-spacing: 1px; }
.ts-form .hs-suggest .hs-suggest-empty { color: var(--h-muted); font-size: .88rem; justify-content: center; padding: .8rem; }
.ts-form .hs-suggest .hs-suggest-empty:hover { background: transparent; }
.ts-form .hs-suggest .ts-busy { gap: .5rem; color: var(--h-primary); }
.ts-form .hs-suggest .ts-busy .spinner-border { color: var(--h-primary); }
.ts-form .hs-suggest mark { background: transparent; color: inherit; font-weight: 800; padding: 0; }

/* ---------- results ---------- */
.tr-page { display: grid; gap: 1rem; }
@media (min-width: 992px) { .tr-page { grid-template-columns: 1fr 300px; align-items: start; } }
.tr-leg { margin-bottom: 1.25rem; }
.tr-leg-head h2 { font-size: 1.1rem; font-weight: 800; margin: 0; }
.tr-leg-head p { color: var(--h-muted); margin: .15rem 0 .6rem; font-size: .9rem; }
.tr-options { display: grid; gap: .65rem; }
.tr-option { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: .75rem 1rem; padding: .85rem 1rem; background: #fff; border: 1.5px solid var(--h-line);
    border-radius: var(--h-radius); box-shadow: var(--h-shadow); cursor: pointer; margin: 0; }
.tr-option[hidden] { display: none; }
.tr-option input { position: absolute; opacity: 0; pointer-events: none; }
.tr-option:has(input:checked) { border-color: var(--h-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-primary) 14%, transparent); }
.tr-option:has(input:focus-visible) { outline: 2px solid var(--h-accent); outline-offset: 2px; }
.tr-media { width: 88px; height: 64px; border-radius: 10px; background: var(--h-soft); display: grid; place-items: center; overflow: hidden; color: var(--h-primary); font-size: 1.8rem; }
/* Supplier vehicle photos are cut-outs on white: show the whole vehicle, never cropped. */
.tr-media.has-img { background: #fff; border: 1px solid var(--h-line); }
.tr-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.tr-media .tr-fallback { display: none; }
.tr-media.is-broken img { display: none; }
.tr-media.is-broken .tr-fallback { display: block; }
.tr-media.is-broken { background: var(--h-soft); border: 0; }
.tr-info { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.tr-info strong { font-size: 1rem; }
.tr-facts { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .82rem; color: var(--h-muted); }
.tr-facts i { color: var(--h-primary); }
.tr-price { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .75rem; border-top: 1px dashed var(--h-line); padding-top: .55rem; }
.tr-price small { color: var(--h-muted); font-size: .75rem; }
.tr-price strong { font-size: 1.25rem; font-weight: 800; }
.tr-price .hr-sub { color: var(--h-primary); font-weight: 600; }
.tr-pick { display: none; color: var(--h-primary); font-weight: 700; font-size: .82rem; }
.tr-option:has(input:checked) .tr-pick { display: inline-flex; gap: .3rem; }
@media (min-width: 768px) {
    .tr-option { grid-template-columns: 120px 1fr 190px; align-items: center; }
    .tr-media { width: 120px; height: 80px; }
    .tr-price { grid-column: auto; flex-direction: column; align-items: flex-end; text-align: right; border-top: 0; border-left: 1px dashed var(--h-line); padding: 0 0 0 1rem; }
}
.tr-summary .btn { white-space: nowrap; }
.tr-summary [data-transfer-total] { font-size: 1.35rem; }

/* ---------- trip summary / voucher ---------- */
.tt-leg { border-top: 1px solid var(--h-line); padding-top: .75rem; margin-top: .25rem; }
.tt-leg:first-of-type { border-top: 0; }
.tt-leg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0 1.1rem .6rem; }
.tt-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--h-soft); color: var(--h-primary); font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; }
.tt-notes { margin: 0 1.1rem 1rem; }
.tt-notes .hs-comments { margin-top: .4rem; }
.product-badge.is-transfer { background: #e8f5ef; color: #0f6b43; }

@media print {
    .ts-form, [data-transfer-filters] { display: none !important; }
    .tt-notes .hs-comments { max-height: none; overflow: visible; }
}

/* phone bar: full width under the list, above the page footer */
.tr-mobile-bar { grid-column: 1 / -1; }
@media (max-width: 991.98px) { .tr-summary .btn { display: none; } }


/* Flight numbers are typed in capitals, but the hint keeps normal case ("e.g. AI101", not "E.G. AI101"). */
#OutboundNumber::placeholder, #ReturnNumber::placeholder { text-transform: none; }


/* Return date while "Return transfer" is off: visible but muted, like the flight form's one-way Return box. */
.ts-back.is-off .hs-control { background: var(--h-soft); border-style: dashed; }
.ts-back.is-off .hs-cal .cal-date { color: #8a93a6; font-weight: 500; }

/* ---------- results filter bar + sort bar: the flight results components (.filters, .slot, .sort-head), transfer columns ---------- */
@media (min-width: 992px) { .transfer-filters .filter-grid { grid-template-columns: 1.2fr 1fr 1.3fr 1fr; } }
.transfer-filters .slot-group { grid-template-columns: repeat(2, 1fr); }
.transfer-filters .airline-opt .bi { flex: none; }
.sort-head.transfer-sort { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 1.75rem; top: 72px; }
.tr-leg .no-match { margin-top: .5rem; }