/* Homepage travel search (index.html section.hx-search-only, #search; behaviour in search-box.js, travel.js, app.js).
2026-11-04 redesign (Moataz): one compact horizontal bar on computers, a clean vertical stack on phones, a two-column
grid on tablets, only the active tab's form, and the approved navy / gold / white palette. Loaded last, so it wins over
the earlier layers (styles.css, search-box.css, home.css, home-coastal.css). Layout only: no ids, names or behaviour
change. Logical properties throughout, so Arabic mirrors. The panels the fields open (calendar, travellers, the
destination suggestions) keep their own styles; nothing here sets overflow on the fields, so they are never clipped. */
body[data-route="home"] .hero.hx.hx-search-only {
--hs-navy: #071827; --hs-deep: #0B2239; --hs-card: #102C46; --hs-blue: #007BFF; --hs-royal: #0056D6;
--hs-gold: #E8B65C; --hs-gold-l: #F4D28B; --hs-white: #FFFFFF; --hs-grey: #B8C7D5;
--hs-line: rgba(184, 199, 213, .18); --hs-field-line: #DDE5EE; --hs-label: rgba(16, 44, 70, .9);
margin: 0; padding: 28px 0 32px;
background: linear-gradient(180deg, var(--hs-navy) 0%, var(--hs-deep) 100%);
border-top: 1px solid var(--hs-line);
}
body[data-route="home"] .hero.hx.hx-search-only > .wrap {
max-width: 1440px; margin-inline: auto; padding-inline: clamp(16px, 3.4vw, 48px); box-sizing: border-box;
}
body[data-route="home"] .hero.hx.hx-search-only .sb-slot { position: relative; width: 100%; max-width: none; margin: 0; top: 0; }
/* ---- the card ---- */
body[data-route="home"] .hero.hx.hx-search-only .hx-search.sb {
--sb-navy: var(--hs-deep); --sb-navy-2: var(--hs-card); --sb-blue: var(--hs-royal); --sb-tint: #EAF2FD; --sb-range: #E3EFFD;
--sb-ink: var(--hs-navy); --sb-text: var(--hs-navy); --sb-muted: var(--hs-label); --sb-line: #E3E9F0; --sb-box-line: var(--hs-field-line);
background: var(--hs-card); border: 1px solid var(--hs-line); border-radius: 18px;
box-shadow: 0 18px 48px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .04) inset;
-webkit-backdrop-filter: none; backdrop-filter: none; color: var(--hs-white);
}
/* ---- the tabs: six equal columns, icon and name on one line, a gold underline on the active one ---- */
body[data-route="home"] .hero.hx.hx-search-only .hx-search.sb .sb-nav { background: transparent; border-bottom: 1px solid var(--hs-line); border-radius: 18px 18px 0 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 6px 12px 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab {
flex-direction: row; justify-content: center; align-items: center; gap: 10px; min-height: 58px; padding: 6px 10px 8px;
border-radius: 10px 10px 0 0; background: transparent; color: var(--hs-grey); font-size: 15px; font-weight: 600; text-shadow: none;
}
body[data-route="home"] .hero.hx.hx-search-only .sb-tab + .sb-tab::before { display: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab:hover { background: rgba(255, 255, 255, .05); color: var(--hs-white); }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-icon { width: 20px; height: 20px; color: currentColor; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-text { align-items: flex-start; gap: 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-label { font-size: 15px; line-height: 1.25; color: inherit; text-shadow: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-sub { display: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab.is-soon .sb-tab-label,
body[data-route="home"] .hero.hx.hx-search-only .sb-tab.is-soon .sb-tab-icon { color: inherit; text-shadow: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab.is-soon .sb-tab-sub {
display: block; margin-top: 1px; color: var(--hs-gold-l); font-size: 13px; line-height: 1.2; font-weight: 600;
letter-spacing: .02em; text-transform: none; text-shadow: none;
}
body[data-route="home"] .hero.hx.hx-search-only .sb-tab[aria-selected="true"] { background: rgba(255, 255, 255, .06); color: var(--hs-white); font-weight: 700; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab[aria-selected="true"] .sb-tab-icon { color: var(--hs-gold); }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab[aria-selected="true"]::after { inset-inline: 14%; bottom: -1px; height: 3px; border-radius: 2px; background: var(--hs-gold); }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: -3px; }
/* ---- the panel: only the active tab's form shows (search-box.js sets [hidden] on the others) ---- */
body[data-route="home"] .hero.hx.hx-search-only .sb-panels { margin: 0; padding: 18px 20px 20px; border: 0; border-radius: 0 0 18px 18px; background: transparent; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form { gap: 12px; }
/* A live service (Hotels, Flights) needs no heading: the tab already names it. Coming-soon services keep their note. */
body[data-route="home"] .hero.hx.hx-search-only .sb-form:not(.sb-form-soon) > .sb-head { display: none; }
/* white fields */
body[data-route="home"] .hero.hx.hx-search-only .sb-seg { background: var(--hs-white); border-color: var(--hs-field-line); }
body[data-route="home"] .hero.hx.hx-search-only .sb-label { color: var(--hs-label); font-size: 13px; font-weight: 600; }
body[data-route="home"] .hero.hx.hx-search-only .sb-value,
body[data-route="home"] .hero.hx.hx-search-only .sb-input,
body[data-route="home"] .hero.hx.hx-search-only .sb-select { color: var(--hs-navy); font-size: 16px; font-weight: 600; }
body[data-route="home"] .hero.hx.hx-search-only .sb-input::placeholder { color: #44556A; font-weight: 500; }
body[data-route="home"] .hero.hx.hx-search-only .sb-seg .sb-ico,
body[data-route="home"] .hero.hx.hx-search-only .sb-seg .sb-chev { color: var(--hs-card); }
/* the field shows the focus ring (below), so the text box inside it draws none of its own */
body[data-route="home"] .hero.hx.hx-search-only .sb-seg .sb-input:focus,
body[data-route="home"] .hero.hx.hx-search-only .sb-seg .sb-input:focus-visible,
body[data-route="home"] .hero.hx.hx-search-only .sb-seg .sb-select:focus-visible { outline: 0; box-shadow: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-seg:focus-within:not(.sb-pop-wrap) { border-color: var(--hs-royal); box-shadow: 0 0 0 2px var(--hs-royal); }
/* the Search button: Royal Blue (white text passes WCAG AA on it, his rule of 2026-11-04) */
body[data-route="home"] .hero.hx.hx-search-only .sb-search {
height: 60px; min-height: 48px; min-width: 148px; padding: 0 26px; border-radius: 12px; background: var(--hs-royal); color: var(--hs-white);
font-size: 17px; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 86, 214, .35);
}
body[data-route="home"] .hero.hx.hx-search-only .sb-search:hover { background: #0049B8; }
body[data-route="home"] .hero.hx.hx-search-only .sb-search .sb-ico { width: 20px; height: 20px; color: var(--hs-white); }
body[data-route="home"] .hero.hx.hx-search-only .sb-search:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: 2px; }
/* messages on the navy card */
body[data-route="home"] .hero.hx.hx-search-only .sb-form-msg { color: #FFC2B8; }
/* ---- Flights: trip type, cabin and Direct on one line above the bar ---- */
body[data-route="home"] .hero.hx.hx-search-only .sb-opts { gap: 12px 18px; min-height: 40px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-trip { padding: 3px; border: 1px solid var(--hs-line); border-radius: 10px; background: rgba(255, 255, 255, .05); }
body[data-route="home"] .hero.hx.hx-search-only .sb-trip-choice span { height: 34px; padding: 0 16px; border: 0; border-radius: 8px; color: var(--hs-grey); font-size: 14.5px; font-weight: 600; }
body[data-route="home"] .hero.hx.hx-search-only .sb-trip-choice input:checked + span { background: var(--hs-white); color: var(--hs-navy); border: 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-trip-choice input:focus-visible + span { outline: 2px solid var(--hs-gold); outline-offset: 2px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-pill-select { height: 40px; border-color: var(--hs-field-line); color: var(--hs-navy); font-weight: 600; }
body[data-route="home"] .hero.hx.hx-search-only .sb-check,
body[data-route="home"] .hero.hx.hx-search-only .sb-inline-select { color: var(--hs-white); font-weight: 500; }
body[data-route="home"] .hero.hx.hx-search-only .sb-check input { accent-color: var(--hs-gold); }
/* ---- the coming-soon services (Flight + Hotel, Car Rentals): one compact line, no empty form ---- */
body[data-route="home"] .hero.hx.hx-search-only .sb-head { gap: 10px 12px; min-height: 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-head-title { color: var(--hs-white); font-size: 17px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-badge { background: rgba(232, 182, 92, .16); color: var(--hs-gold-l); border: 1px solid rgba(232, 182, 92, .4); }
body[data-route="home"] .hero.hx.hx-search-only .sb-note-amber { padding: 8px 14px; background: rgba(255, 255, 255, .05); border-color: var(--hs-line); color: var(--hs-grey); }
body[data-route="home"] .hero.hx.hx-search-only .sb-note .sb-ico { color: var(--hs-gold); }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-soon .sb-soon-msg { padding: 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-soon .sb-soon-msg .sb-link-btn { min-height: 44px; padding: 0 22px; border-radius: 12px; background: var(--hs-royal); color: var(--hs-white); }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-soon .sb-soon-msg .sb-link-btn:hover { background: #0049B8; }
/* ---- Properties: the hand-over to the property search ---- */
body[data-route="home"] .hero.hx.hx-search-only .sb-panel-properties { display: flex; flex-direction: column; gap: 10px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-panel-properties[hidden] { display: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-panel-properties .sb-row { min-height: 0; gap: 4px 22px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-panel-properties .sb-row a { min-height: 40px; display: inline-flex; align-items: center; color: var(--hs-gold-l); font-weight: 600; text-shadow: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-panel-properties .sb-row a:hover { color: var(--hs-white); }
/* =====================================================================================================================
Computers (1024px and up): one white bar, the fields joined by thin dividers, Search inside its end.
===================================================================================================================== */
@media (min-width: 1024px) {
body[data-route="home"] .hero.hx.hx-search-only .sb-bar {
height: auto; min-height: 72px; gap: 0; padding: 6px; align-items: stretch;
background: var(--hs-white); border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg {
height: 60px; border: 0; border-radius: 12px; background: transparent; box-shadow: none;
}
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg:not(.sb-pop-wrap),
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg-btn { padding-inline: 18px; gap: 12px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg:hover { background: rgba(11, 34, 57, .04); }
/* the dividers: an inset line on the start edge of every field after the first */
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg:not(:first-child),
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-fl-end > .sb-seg { box-shadow: inset 1px 0 0 var(--hs-field-line); border-radius: 0 12px 12px 0; }
:root[dir="rtl"] body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg:not(:first-child),
:root[dir="rtl"] body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-fl-end > .sb-seg { box-shadow: inset -1px 0 0 var(--hs-field-line); border-radius: 12px 0 0 12px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg:focus-within:not(.sb-pop-wrap),
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-pop-wrap[open] { border-radius: 12px; box-shadow: inset 0 0 0 2px var(--hs-royal); background: #F5F8FC; }
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg.is-invalid { border-radius: 12px; box-shadow: inset 0 0 0 2px #B42318; }
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-search { height: 60px; margin-inline-start: 6px; align-self: center; }
/* widths: destination, dates, travellers */
body[data-route="home"] .hero.hx.hx-search-only .sb-form-stays .sb-seg-dest { flex: 1.25 1 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-stays .sb-seg-dates { flex: 1.1 1 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-stays .sb-seg-trav { flex: .85 1 0; }
/* the calendar and travellers panels, placed against the bar */
body[data-route="home"] .hero.hx.hx-search-only .sb-pop-trav { inset-inline-end: 160px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights .sb-pop-trav { inset-inline-end: 0; }
/* Flights: From, swap, To, dates | travellers, Search */
body[data-route="home"] .hero.hx.hx-search-only .sb-fl-single { gap: 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-fl-single .sb-seg-from,
body[data-route="home"] .hero.hx.hx-search-only .sb-fl-single .sb-seg-to { flex: 1 1 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-fl-single .sb-seg-to { padding-inline-start: 28px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-fl-single .sb-seg-dates { flex: 0 0 30%; }
body[data-route="home"] .hero.hx.hx-search-only .sb-swap { width: 34px; height: 34px; margin: 0 -17px; border-color: var(--hs-field-line); color: var(--hs-card); position: relative; z-index: 3; }
body[data-route="home"] .hero.hx.hx-search-only .sb-fl-end { gap: 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-fl-end .sb-seg-trav { flex: 0 0 180px; }
/* Multi-city: the flights as their own white boxes, travellers and Search beside them */
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights[data-trip="multi"] .sb-bar-flights { padding: 0; background: transparent; box-shadow: none; gap: 14px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights[data-trip="multi"] .sb-leg { border-color: var(--hs-field-line); border-radius: 12px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights[data-trip="multi"] .sb-leg .sb-seg { height: 58px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights[data-trip="multi"] .sb-add-leg { border-color: rgba(184, 199, 213, .5); color: var(--hs-gold-l); }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights[data-trip="multi"] .sb-fl-end { gap: 12px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights[data-trip="multi"] .sb-fl-end > .sb-seg-trav { height: 58px; background: var(--hs-white); border-radius: 12px; box-shadow: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights[data-trip="multi"] .sb-fl-end .sb-search { margin: 0; width: 100%; height: 58px; }
/* Properties: one field and Search */
body[data-route="home"] .hero.hx.hx-search-only .sb-props-bar .sb-seg-text-field { flex: 1 1 auto; }
}
/* narrower computers: a little tighter so six tabs and the fields still fit on one line */
@media (min-width: 1024px) and (max-width: 1279.98px) {
body[data-route="home"] .hero.hx.hx-search-only .sb-tabs { padding-inline: 8px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab { gap: 8px; padding-inline: 6px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-label { font-size: 14px; white-space: normal; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-icon { width: 18px; height: 18px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-value,
body[data-route="home"] .hero.hx.hx-search-only .sb-input,
body[data-route="home"] .hero.hx.hx-search-only .sb-select { font-size: 15px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg:not(.sb-pop-wrap),
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg-btn { padding-inline: 14px; gap: 10px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-search { min-width: 0; padding: 0 20px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-fl-end .sb-seg-trav { flex-basis: 150px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-pop-trav { inset-inline-end: 130px; }
}
/* =====================================================================================================================
Tablets and phones (under 1024px): separate white fields, Search the full width. The calendar and travellers open as
full-screen sheets (search-box.css), so nothing here is placed against the bar.
===================================================================================================================== */
@media (max-width: 1023.98px) {
body[data-route="home"] .hero.hx.hx-search-only { padding: 20px 0 24px; }
body[data-route="home"] .hero.hx.hx-search-only > .wrap { padding-inline: clamp(16px, 3.4vw, 32px); }
body[data-route="home"] .hero.hx.hx-search-only .hx-search.sb { border-radius: 16px; }
body[data-route="home"] .hero.hx.hx-search-only .hx-search.sb .sb-nav { border-radius: 16px 16px 0 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tabs { gap: 2px; padding: 6px 6px 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 4px 10px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-text { align-items: center; text-align: center; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-label { font-size: 13.5px; white-space: normal; }
/* 2026-11-06: "Coming soon" stays visible on tablets and phones too, so those tabs never look bookable. */
body[data-route="home"] .hero.hx.hx-search-only .sb-tab.is-soon .sb-tab-sub { display: block; margin-top: 2px; font-size: 11.5px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-panels { padding: 16px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-bar { gap: 10px; height: auto; padding: 0; background: transparent; box-shadow: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg { height: 58px; min-height: 56px; border: 1px solid var(--hs-field-line); border-radius: 12px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-search { width: 100%; height: 56px; min-width: 0; margin: 0; font-size: 17px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-swap { border-color: var(--hs-field-line); color: var(--hs-card); }
body[data-route="home"] .hero.hx.hx-search-only .sb-opts { gap: 10px 14px; }
}
/* tablets: two columns (destination across, then dates and travellers side by side, then Search) */
@media (min-width: 641px) and (max-width: 1023.98px) {
body[data-route="home"] .hero.hx.hx-search-only .sb-form-stays .sb-bar {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
}
body[data-route="home"] .hero.hx.hx-search-only .sb-form-stays .sb-bar > .sb-seg-dest,
body[data-route="home"] .hero.hx.hx-search-only .sb-form-stays .sb-bar > .sb-search { grid-column: 1 / -1; }
/* Flights (one way / round trip): From | To, then dates | travellers, then Search */
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights:not([data-trip="multi"]) .sb-bar-flights {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
}
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights:not([data-trip="multi"]) .sb-fl-single,
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights:not([data-trip="multi"]) .sb-fl-end { display: contents; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights:not([data-trip="multi"]) .sb-fl-end > .sb-search { grid-column: 1 / -1; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights:not([data-trip="multi"]) .sb-fl-single .sb-seg-from { padding-inline-end: 28px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights:not([data-trip="multi"]) .sb-fl-single .sb-seg-to { padding-inline-start: 28px; padding-inline-end: 14px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-flights:not([data-trip="multi"]) .sb-swap {
position: absolute; top: 11px; inset-inline-start: calc(50% - 18px); width: 36px; height: 36px; margin: 0;
}
/* Properties: the field and Search on one line */
body[data-route="home"] .hero.hx.hx-search-only .sb-props-bar { flex-direction: row; }
body[data-route="home"] .hero.hx.hx-search-only .sb-props-bar .sb-seg-text-field { flex: 1 1 auto; min-width: 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-props-bar .sb-search { width: auto; min-width: 150px; height: 58px; }
}
/* phones: tabs three a row as tiles, every field its own full-width row */
@media (max-width: 640px) {
body[data-route="home"] .hero.hx.hx-search-only { padding: 16px 0 20px; }
body[data-route="home"] .hero.hx.hx-search-only > .wrap { padding-inline: 16px; }
body[data-route="home"] .hero.hx.hx-search-only .hx-search.sb .sb-nav { border-bottom: 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 10px 0; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab {
grid-column: auto; min-height: 60px; padding: 8px 4px; border: 1px solid var(--hs-line); border-radius: 12px; background: rgba(255, 255, 255, .03);
}
body[data-route="home"] .hero.hx.hx-search-only .sb-tab[aria-selected="true"] { border-color: var(--hs-gold); background: rgba(232, 182, 92, .12); }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab[aria-selected="true"]::after { display: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-label { font-size: 13px; line-height: 1.2; }
body[data-route="home"] .hero.hx.hx-search-only .sb-panels { padding: 14px 12px 14px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-trip { width: 100%; }
body[data-route="home"] .hero.hx.hx-search-only .sb-trip-choice span { padding: 0 6px; font-size: 14px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-cabin { flex: 1 1 auto; }
body[data-route="home"] .hero.hx.hx-search-only .sb-cabin .sb-pill-select { width: 100%; }
body[data-route="home"] .hero.hx.hx-search-only .sb-swap { top: 47px; inset-inline-end: 12px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-head-title { display: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-form-soon .sb-soon-msg .sb-link-btn { width: 100%; justify-content: center; }
}
/* 2026-11-06 (homepage audit, approved): on phones the tabs are one row of compact pills that scrolls sideways, so the
whole search (destination, dates, travellers and Search) fits on the first screen under the AI Assistant. The row
fades at its far edge to show there are more tabs; a tab scrolls into view when it gets focus. */
@media (max-width: 640px) {
body[data-route="home"] .hero.hx.hx-search-only { padding: 12px 0 16px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tabs {
display: flex; flex-wrap: nowrap; gap: 8px; padding: 10px 10px 2px; overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
:root[dir="rtl"] body[data-route="home"] .hero.hx.hx-search-only .sb-tabs {
-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
}
body[data-route="home"] .hero.hx.hx-search-only .sb-tabs::-webkit-scrollbar { display: none; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab {
flex: 0 0 auto; flex-direction: row; gap: 7px; min-height: 44px; padding: 5px 13px; border-radius: 999px; scroll-snap-align: start;
}
body[data-route="home"] .hero.hx.hx-search-only .sb-tab:last-child { margin-inline-end: 22px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-icon { width: 17px; height: 17px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-text { align-items: flex-start; text-align: start; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab-label { font-size: 13.5px; white-space: nowrap; }
body[data-route="home"] .hero.hx.hx-search-only .sb-tab.is-soon .sb-tab-sub { margin-top: 0; font-size: 11px; white-space: nowrap; }
body[data-route="home"] .hero.hx.hx-search-only .sb-panels { padding: 12px 12px 12px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-bar { gap: 8px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-bar .sb-seg { height: 54px; min-height: 52px; }
body[data-route="home"] .hero.hx.hx-search-only .sb-search { height: 52px; }
}
@media (forced-colors: active) {
body[data-route="home"] .hero.hx.hx-search-only .sb-bar { border: 1px solid CanvasText; }
}