/* Storefront template "Voyago": the first B2C template, built to the
   supplied design. Served as a plain stylesheet: the storefront is not a
   Filament panel and loads nothing else. Class prefix `sf-`. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Caveat:wght@500;600&display=swap');

:root {
  --sf-rose: #f5325b; --sf-rose-2: #ff5d7c; --sf-rose-soft: #ffe4ea; --sf-rose-tint: #fff1f4;
  --sf-navy: #1b1b4b; --sf-ink: #141a2b; --sf-text: #3c4257; --sf-muted: #6b7280; --sf-faint: #9aa3b2;
  --sf-line: #e9ecf2; --sf-bg: #f6f7fb; --sf-card: #fff;
  --sf-shadow: 0 10px 30px rgb(20 26 43 / .08); --sf-shadow-lg: 0 24px 60px rgb(20 26 43 / .14);
  --sf-radius: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.sf { margin: 0; overflow-x: hidden; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--sf-ink); background: #fff; -webkit-font-smoothing: antialiased; font-size: 15px; }
.sf a { color: inherit; text-decoration: none; }
.sf h1, .sf h2, .sf h3, .sf p, .sf ul { margin: 0; }
.sf ul { list-style: none; padding: 0; }
.sf img { max-width: 100%; display: block; }
.sf button, .sf input, .sf select { font: inherit; color: inherit; }
.sf-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.sf-script { font-family: Caveat, "Segoe Script", cursive; font-weight: 600; line-height: 1; }
.sf-hide { display: none !important; }

/* ---------- buttons ---------- */
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: 999px; padding: .62rem 1.35rem; font-size: .9rem; font-weight: 700; color: #fff; background: var(--sf-rose); cursor: pointer; white-space: nowrap; box-shadow: 0 8px 18px rgb(245 50 91 / .28); transition: transform .15s, filter .15s; }
.sf-btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.sf-btn.is-square { border-radius: 12px; }
.sf-btn.is-lg { padding: .95rem 1.8rem; font-size: 1rem; }
.sf-btn.is-ghost { background: #fff; color: var(--sf-ink); box-shadow: none; border: 1px solid var(--sf-line); }
/* `.sf button { color: inherit }` outranks a bare class: the rose buttons
   and the swap circle must say white with the same weight or they go dark. */
.sf .sf-btn, .sf button.sf-btn, .sf a.sf-btn, .sf .sf-swap { color: #fff; }
.sf .sf-btn.is-ghost { color: var(--sf-ink); }
.sf .sf-btn svg, .sf .sf-swap svg { color: #fff; stroke: #fff; }
.sf .sf-btn.is-ghost svg { color: var(--sf-ink); stroke: var(--sf-ink); }
.sf-btn svg { width: 18px; height: 18px; }
.sf-arrow { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--sf-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.sf-arrow svg { width: 13px; height: 13px; }
.sf-more { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; color: var(--sf-rose); }
.sf-more svg { width: 15px; height: 15px; }

/* ---------- header ---------- */
.sf-header { position: sticky; top: 0; z-index: 30; background: rgb(255 255 255 / .95); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(233 236 242 / .8); }
.sf-header-inner { display: flex; align-items: center; gap: 2.5rem; height: 64px; }
.sf-logo { display: inline-flex; align-items: center; gap: .55rem; }
.sf-logo img { height: 34px; width: auto; }
.sf-logo-mark { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--sf-rose); }
.sf-logo-mark svg { width: 34px; height: 34px; }
.sf-logo-text { display: flex; flex-direction: column; line-height: 1; }
.sf-logo-text b { font-size: 1.28rem; font-weight: 800; color: var(--sf-ink); letter-spacing: -.02em; }
.sf-logo-text small { font-size: .62rem; color: var(--sf-muted); margin-top: .18rem; letter-spacing: .01em; }
.sf-nav { display: flex; align-items: center; gap: 1.6rem; margin: 0 auto; font-size: .9rem; font-weight: 600; color: var(--sf-text); }
.sf-nav a { position: relative; padding: .3rem 0; }
.sf-nav a:hover { color: var(--sf-rose); }
.sf-nav a.is-active { color: var(--sf-rose); }
.sf-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.35rem; height: 2px; background: var(--sf-rose); border-radius: 2px; }
.sf-header-actions { display: flex; align-items: center; gap: 1.1rem; font-size: .88rem; font-weight: 600; color: var(--sf-text); }
.sf-header-actions .sf-link { display: inline-flex; align-items: center; gap: .4rem; }
.sf-header-actions .sf-link svg { width: 18px; height: 18px; }
.sf-header-actions .sf-link .chev { width: 12px; height: 12px; }
.sf-currency select { border: 1px solid var(--sf-line); border-radius: 999px; padding: .35rem 1.6rem .35rem .7rem; font-size: .82rem; font-weight: 700; color: var(--sf-text); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .5rem center / 12px; appearance: none; cursor: pointer; }
.sf-charged { display: block; width: 100%; font-size: .78rem; color: var(--sf-muted); margin-top: .35rem; }
.sf-burger { display: none; }
.sf-menu-only { display: none; }
.sf-header.is-open .sf-menu-only { display: block; }

/* ---------- flash notice under the header ---------- */
.sf-flash { margin-top: 1rem; position: relative; z-index: 6; }
.sf-flash .sf-notice { margin-bottom: 0; }

/* ---------- hero ---------- */
.sf-hero { position: relative; min-height: 400px; background: #dfe9f5 var(--sf-hero-img) center / cover no-repeat; }
.sf-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 246 248 / .96) 0%, rgb(255 246 248 / .86) 32%, rgb(255 255 255 / .25) 58%, rgb(255 255 255 / 0) 78%); }
.sf-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(180deg, rgb(255 255 255 / 0), rgb(255 255 255 / .55)); pointer-events: none; }
.sf-hero-inner { position: relative; z-index: 1; padding-top: 2.2rem; padding-bottom: 8.5rem; }
.sf-hero-copy { max-width: 520px; }
.sf-h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--sf-navy); max-width: 14ch; }
.sf-lede { margin-top: .8rem; font-size: .98rem; line-height: 1.5; color: #5b6478; max-width: 34ch; }
.sf-hero-script { position: absolute; right: 8%; top: 2.2rem; font-size: 2rem; color: var(--sf-navy); transform: rotate(-8deg); text-align: center; line-height: .95; z-index: 1; }
.sf-hero-script span { display: block; }

/* ---------- search widget ---------- */
.sf-search { position: relative; z-index: 5; margin-top: -7.5rem; }
.sf-search-card { background: var(--sf-card); border-radius: 20px; box-shadow: var(--sf-shadow-lg); padding: 1.1rem 1.25rem 1.25rem; }
.sf-tabs { display: flex; align-items: center; gap: .2rem; border-bottom: 1px solid var(--sf-line); margin: 0 -.25rem .9rem; overflow-x: auto; }
.sf-tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .85rem .75rem; font-size: .84rem; font-weight: 600; color: var(--sf-muted); white-space: nowrap; position: relative; }
.sf-tabs a svg { width: 17px; height: 17px; }
.sf-tabs a.is-active { color: var(--sf-rose); }
.sf-tabs a.is-active::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: -1px; height: 2px; background: var(--sf-rose); border-radius: 2px; }
.sf-pills { display: flex; gap: .45rem; margin-bottom: .8rem; }
.sf-pills label { position: relative; }
.sf-pills input { position: absolute; opacity: 0; inset: 0; }
.sf-pills span { display: inline-flex; align-items: center; padding: .42rem .95rem; border-radius: 999px; background: var(--sf-bg); color: var(--sf-text); font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.sf-pills input:checked + span { background: var(--sf-rose); color: #fff; box-shadow: 0 6px 14px rgb(245 50 91 / .28); }
.sf-row { display: grid; gap: .6rem; }
.sf-row.is-route { grid-template-columns: 1fr auto 1fr 1.05fr .95fr auto; align-items: stretch; }
.sf-row.is-pax { grid-template-columns: 1.55fr 1fr 1fr; margin-top: .6rem; }
.sf-field { position: relative; display: flex; align-items: center; gap: .6rem; background: var(--sf-bg); border-radius: 12px; padding: .55rem .85rem; min-height: 56px; border: 1.5px solid transparent; transition: border-color .15s, background .15s; }
.sf-field:focus-within { border-color: var(--sf-rose); background: #fff; }
.sf-field > svg { width: 18px; height: 18px; color: var(--sf-muted); flex: none; }
.sf-field-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sf-field-body label { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-faint); }
.sf-field-body input, .sf-field-body select { border: 0; background: transparent; padding: 0; margin-top: .12rem; font-size: .92rem; font-weight: 700; color: var(--sf-ink); width: 100%; outline: none; text-transform: uppercase; }
.sf-field-body select { text-transform: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.sf-field-body input::placeholder { color: #a7afbd; font-weight: 600; text-transform: uppercase; font-size: .84rem; }
.sf-field-body small { font-size: .62rem; color: var(--sf-faint); margin-top: .1rem; }
.sf-field.is-select { position: relative; }
.sf-field.is-select::after { content: ""; position: absolute; right: .95rem; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--sf-muted); border-bottom: 2px solid var(--sf-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sf-field.is-select .sf-field-body select { font-size: .92rem; padding-right: 1.4rem; }
.sf-swap { width: 40px; height: 40px; align-self: center; border-radius: 50%; border: 0; background: var(--sf-rose); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 14px rgb(245 50 91 / .3); }
.sf-swap svg { width: 16px; height: 16px; }
.sf-addreturn { display: inline-flex; align-items: center; gap: .5rem; border: 0; background: var(--sf-bg); border-radius: 12px; padding: 0 1rem; font-size: .88rem; font-weight: 600; color: var(--sf-text); cursor: pointer; white-space: nowrap; }
.sf-addreturn svg { width: 16px; height: 16px; color: var(--sf-muted); }
.sf-addreturn.is-open { display: none; }
.sf-field.is-return, .sf-field.is-return-cabin { display: none; }
.sf-field.is-return.is-open, .sf-field.is-return-cabin.is-open { display: flex; }
.sf-search-btn { border-radius: 12px; padding: 0 1.6rem; min-height: 56px; font-size: .98rem; color: #fff; font-weight: 800; }
.sf-search-btn svg { color: #fff; stroke-width: 2.2; }
.sf-search-btn svg { width: 18px; height: 18px; }
.sf-pax { display: flex; align-items: center; gap: 1.2rem; }
.sf-pax > svg { width: 18px; height: 18px; color: var(--sf-muted); flex: none; }
.sf-pax-head { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-faint); }
.sf-pax-items { display: flex; gap: 1.4rem; margin-top: .15rem; }
.sf-pax-item { display: flex; flex-direction: column; gap: .15rem; }
.sf-pax-item small { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-faint); }
.sf-stepper { display: inline-flex; align-items: center; gap: .3rem; }
.sf-stepper input { -moz-appearance: textfield; appearance: textfield; width: 2.2rem; text-align: center; border: 1px solid var(--sf-line); border-radius: 6px; background: #fff; font-weight: 700; font-size: .9rem; padding: .12rem 0; }
.sf-stepper input::-webkit-outer-spin-button, .sf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-stepper .sf-step { display: inline-flex; flex-direction: column; gap: 2px; }
.sf-stepper .sf-step button { width: 14px; height: 9px; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--sf-muted); display: inline-flex; align-items: center; justify-content: center; }
.sf-stepper .sf-step button::before { content: ""; width: 0; height: 0; border: 4px solid transparent; }
.sf-stepper .sf-step button.up::before { border-bottom-color: currentColor; margin-top: -4px; }
.sf-stepper .sf-step button.down::before { border-top-color: currentColor; margin-bottom: -4px; }

/* ---------- feature strip ---------- */
.sf-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 2rem 0 .5rem; }
.sf-strip-item { display: flex; align-items: center; gap: .85rem; padding: .35rem 1rem; border-right: 1px solid var(--sf-line); }
.sf-strip-item:last-child { border-right: 0; }
.sf-strip-item b { display: block; font-size: .9rem; font-weight: 700; color: var(--sf-ink); }
.sf-strip-item span { font-size: .78rem; color: var(--sf-muted); }
.sf-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sf-icon svg { width: 20px; height: 20px; }
.sf-icon.is-rose { background: var(--sf-rose-soft); color: var(--sf-rose); }
.sf-icon.is-green { background: #e3f7ee; color: #12a66a; }
.sf-icon.is-violet { background: #ece9ff; color: #6d5dfc; }
.sf-icon.is-orange { background: #fff0e4; color: #ff8a3d; }

/* ---------- sections ---------- */
.sf-section { padding: 2.1rem 0 .4rem; }
.sf-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.sf-h2 { font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; color: var(--sf-ink); }
.sf-sub { font-size: .84rem; color: var(--sf-muted); margin-top: .15rem; }

/* destination cards */
.sf-dests { display: grid; grid-template-columns: repeat(6, 1fr); gap: .85rem; }
.sf-dest { position: relative; display: block; aspect-ratio: 1 / .58; border-radius: 14px; overflow: hidden; background: #ccd4e0 center / cover no-repeat; box-shadow: var(--sf-shadow); }
.sf-dests.is-tall .sf-dest { aspect-ratio: 1 / .72; }
.sf-dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .62) 100%); }
.sf-dest-body { position: absolute; left: .8rem; right: .7rem; bottom: .7rem; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; color: #fff; }
.sf-dest-body b { display: block; font-size: .92rem; font-weight: 700; }
.sf-dest-body span { font-size: .72rem; opacity: .92; }
.sf-dest:hover { transform: translateY(-2px); transition: transform .2s; }

/* offer banners */
.sf-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.sf-offer { position: relative; display: block; min-height: 78px; border-radius: 14px; overflow: hidden; background: #dbe4f0 center / cover no-repeat; box-shadow: var(--sf-shadow); }
.sf-offer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .45), rgb(0 0 0 / .05) 70%); }
.sf-offer-body { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1rem; color: #fff; }
.sf-offer-body b { display: block; font-size: 1rem; font-weight: 700; }
.sf-offer-body span { font-size: .78rem; opacity: .95; }

/* why cards */
.sf-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
.sf-why-card { display: flex; gap: .85rem; align-items: flex-start; padding: 1.1rem 1rem; background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; box-shadow: 0 6px 18px rgb(20 26 43 / .05); }
.sf-why-card .sf-icon { width: 46px; height: 46px; }
.sf-why-card b { display: block; font-size: .92rem; font-weight: 700; color: var(--sf-ink); }
.sf-why-card p { font-size: .78rem; color: var(--sf-muted); line-height: 1.45; margin-top: .25rem; }

/* reviews */
.sf-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.sf-review { display: flex; gap: .9rem; padding: 1.1rem; background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; box-shadow: 0 6px 18px rgb(20 26 43 / .05); }
.sf-review img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--sf-rose-soft); }
.sf-review p { font-size: .8rem; color: var(--sf-text); line-height: 1.5; }
.sf-review-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: .7rem; }
.sf-review-foot b { display: block; font-size: .82rem; color: var(--sf-ink); }
.sf-review-foot span { font-size: .72rem; color: var(--sf-muted); }
.sf-stars { color: #f7b500; font-size: .85rem; letter-spacing: .05em; white-space: nowrap; }

/* app + newsletter */
.sf-duo { display: grid; grid-template-columns: 1.1fr 1fr; gap: .85rem; margin-top: 2.2rem; }
.sf-app { position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, #ffe9ee, #fff3f5 60%, #ffe4ea); padding: 1.4rem 1.4rem 1.2rem 1.4rem; display: grid; grid-template-columns: 210px 1fr; gap: 1.2rem; align-items: center; min-height: 240px; }
.sf-phones { position: relative; height: 210px; }
.sf-phone { position: absolute; width: 112px; height: 224px; border-radius: 22px; background: #111; padding: 7px; box-shadow: 0 18px 40px rgb(20 26 43 / .28); }
.sf-phone::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 38px; height: 6px; border-radius: 4px; background: #000; z-index: 2; }
.sf-phone-screen { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #fff var(--sf-phone-img) center / cover no-repeat; position: relative; }
.sf-phone-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / .92) 0, rgb(255 255 255 / .85) 42%, rgb(255 255 255 / 0) 75%); }
.sf-phone-screen b, .sf-phone-screen span { position: absolute; left: 10px; right: 10px; z-index: 1; }
.sf-phone-screen b { top: 26px; font-size: .62rem; color: var(--sf-ink); display: flex; align-items: center; gap: .25rem; }
.sf-phone-screen b svg { width: 12px; height: 12px; color: var(--sf-rose); }
.sf-phone-screen span { top: 48px; font-size: .78rem; font-weight: 800; line-height: 1.12; color: var(--sf-navy); }
.sf-phone.is-back { left: 0; top: 18px; transform: rotate(-8deg); }
.sf-phone.is-front { left: 78px; top: -6px; transform: rotate(6deg); }
.sf-app h3 { font-size: 1.15rem; font-weight: 800; color: var(--sf-ink); }
.sf-app p { font-size: .82rem; color: var(--sf-muted); margin-top: .3rem; max-width: 30ch; }
.sf-stores { display: flex; gap: .6rem; margin-top: .9rem; }
.sf-store { display: inline-flex; align-items: center; gap: .5rem; background: #111; color: #fff; border-radius: 9px; padding: .42rem .75rem; line-height: 1; }
.sf-store svg { width: 20px; height: 20px; }
.sf-store small { display: block; font-size: .52rem; opacity: .85; color: #fff; }
.sf-store b { display: block; font-size: .82rem; font-weight: 700; color: #fff; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-size: .68rem; font-weight: 600; color: var(--sf-text); }
.sf-chips li { display: inline-flex; align-items: center; gap: .35rem; }
.sf-chips svg { width: 14px; height: 14px; color: var(--sf-rose); }
.sf-news { position: relative; overflow: hidden; border-radius: 16px; background: #fff7f8 var(--sf-news-img) right center / 55% 100% no-repeat; padding: 1.4rem; display: flex; flex-direction: column; justify-content: center; border: 1px solid #ffe1e7; }
.sf-news::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff7f8 0, #fff7f8 48%, rgb(255 247 248 / .55) 68%, rgb(255 247 248 / 0) 100%); }
.sf-news > * { position: relative; z-index: 1; }
.sf-news-head { display: flex; align-items: center; gap: .8rem; }
.sf-news-head .sf-icon { width: 40px; height: 40px; border-radius: 12px; }
.sf-news h3 { font-size: 1.05rem; font-weight: 800; color: var(--sf-ink); }
.sf-news p { font-size: .8rem; color: var(--sf-muted); margin-top: .15rem; }
.sf-news form { display: flex; gap: .5rem; margin-top: 1rem; max-width: 330px; }
.sf-news input { flex: 1; min-width: 0; border: 1px solid var(--sf-line); border-radius: 10px; padding: .6rem .8rem; font-size: .85rem; background: #fff; outline: none; }
.sf-news input:focus { border-color: var(--sf-rose); }
.sf-news .sf-btn { border-radius: 10px; padding: .6rem 1.1rem; }
.sf-news-script { position: absolute; right: 1.2rem; bottom: 1rem; z-index: 1; font-size: 1.55rem; color: #fff; text-shadow: 0 2px 10px rgb(0 0 0 / .35); transform: rotate(-8deg); text-align: center; line-height: .95; }
.sf-news-script span { display: block; }

/* ---------- footer ---------- */
.sf-footer { margin-top: 2.2rem; background: var(--sf-bg); border-top: 1px solid var(--sf-line); padding: 2.2rem 0 1.4rem; }
.sf-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1.2fr 1fr; gap: 1.2rem; }
.sf-footer h4 { margin: 0 0 .7rem; font-size: .82rem; font-weight: 700; color: var(--sf-ink); }
.sf-footer li { font-size: .78rem; color: var(--sf-text); margin-bottom: .45rem; }
.sf-footer li a:hover { color: var(--sf-rose); }
.sf-footer li.is-contact { display: flex; align-items: center; gap: .45rem; }
.sf-footer li.is-contact svg { width: 14px; height: 14px; color: var(--sf-rose); flex: none; }
.sf-footer-brand p { font-size: .8rem; color: var(--sf-text); line-height: 1.5; margin-top: .9rem; max-width: 24ch; }
.sf-social { display: flex; gap: .7rem; margin-top: 1rem; }
.sf-social a { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--sf-line); display: inline-flex; align-items: center; justify-content: center; color: var(--sf-rose); }
.sf-social svg { width: 15px; height: 15px; }
.sf-footer-script { font-size: 1.7rem; color: var(--sf-navy); transform: rotate(-6deg); text-align: center; line-height: .95; align-self: center; }
.sf-footer-script span { display: block; }
.sf-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--sf-line); font-size: .72rem; color: var(--sf-muted); }
.sf-pay { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; max-width: 100%; }
.sf-pay span { font-size: .68rem; color: var(--sf-faint); margin-right: .2rem; }
.sf-pay svg { height: 20px; width: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .sf-dests { grid-template-columns: repeat(3, 1fr); }
  .sf-strip, .sf-why { grid-template-columns: repeat(2, 1fr); }
  .sf-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .sf-footer-script { grid-column: span 3; }
  .sf-row.is-route { grid-template-columns: 1fr auto 1fr; }
  .sf-row.is-route .sf-search-btn, .sf-row.is-route .sf-addreturn { grid-column: span 3; }
  .sf-duo, .sf-offers, .sf-reviews { grid-template-columns: 1fr; }
  .sf-hero-script { display: none; }
}
@media (max-width: 720px) {
  .sf-wrap { padding-inline: 1rem; }
  /* The photo keeps its place but the copy gets a solid ground: on a
     narrow screen the diagonal fade left the lede over the picture. */
  .sf-hero::before { background: linear-gradient(180deg, rgb(255 246 248 / .97) 0%, rgb(255 246 248 / .94) 55%, rgb(255 255 255 / .35) 100%); }
  .sf-hero-copy { max-width: none; }
  .sf-lede { max-width: none; }
  .sf-tabs { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sf-tabs::-webkit-scrollbar { display: none; }
  .sf-pay { gap: .6rem; }
  .sf-pay svg { height: 16px; }
  .sf-header-actions .sf-link { display: none; }
  /* No menu button on a phone: the links run in a scrollable row under the brand and the account. */
  .sf-header-inner { gap: .75rem; flex-wrap: wrap; height: auto; }
  .sf-nav { display: flex; order: 3; flex: 1 1 100%; gap: 1.1rem; overflow-x: auto; white-space: nowrap; padding: 0 0 .6rem; margin-top: -.2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sf-nav::-webkit-scrollbar { display: none; }
  .sf-nav a, .sf-nav .sf-menu-only { display: inline-flex; flex: none; padding: .25rem 0; }
  .sf-nav .sf-currency.sf-menu-only { display: none; }
  .sf-nav a.is-active::after { display: none; }
  .sf-strip, .sf-why, .sf-row.is-pax { grid-template-columns: 1fr; }
  .sf-dests { grid-template-columns: 1fr 1fr; }
  .sf-hero { min-height: 340px; }
  .sf-hero-inner { padding-bottom: 7rem; }
  .sf-h1 { font-size: 1.85rem; }
  .sf-row.is-route { grid-template-columns: 1fr; }
  .sf-row.is-route .sf-search-btn, .sf-row.is-route .sf-addreturn { grid-column: auto; }
  .sf-swap { transform: rotate(90deg); justify-self: center; }
  .sf-strip-item { border-right: 0; }
  .sf-app { grid-template-columns: 1fr; }
  .sf-phones { display: none; }
  .sf-footer-grid { grid-template-columns: 1fr 1fr; }
  .sf-footer-script { grid-column: span 2; }
  .sf-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- results pages ---------- */
.sf-results { background: var(--sf-bg); }
.sf-bar { background: #fff; border-bottom: 1px solid var(--sf-line); padding: .9rem 0; }
.sf-bar-form { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.sf-bar-form .sf-field { flex: 1 1 140px; min-height: 50px; padding: .4rem .75rem; }
.sf-bar-form .sf-search-btn { min-height: 50px; padding: 0 1.2rem; }
.sf-main { padding-block: 1.4rem 2rem; min-height: 50vh; }
.sf-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sf-notice { background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; padding: 1.2rem; color: var(--sf-text); margin-bottom: 1rem; }
.sf-news-ok { font-size: .82rem; font-weight: 700; color: #12a66a; margin-top: .6rem; }
.sf-fares { display: flex; flex-direction: column; gap: .75rem; }
.sf-fare { display: grid; grid-template-columns: 180px 1fr 190px; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--sf-line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 6px 18px rgb(20 26 43 / .04); }
.sf-fare-airline { display: flex; align-items: center; gap: .7rem; }
.sf-fare-airline img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--sf-line); padding: 3px; }
.sf-fare-code { width: 40px; height: 40px; border-radius: 8px; background: var(--sf-rose-soft); color: var(--sf-rose); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; }
.sf-fare-airline b { display: block; font-size: .88rem; }
.sf-fare-airline span { font-size: .72rem; color: var(--sf-muted); }
.sf-fare-legs { display: flex; flex-direction: column; gap: .6rem; }
.sf-leg { display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; gap: .8rem; }
.sf-leg-time b { display: block; font-size: 1.05rem; font-weight: 800; }
.sf-leg-time span { font-size: .78rem; font-weight: 700; color: var(--sf-text); }
.sf-leg-time small { display: block; font-size: .66rem; color: var(--sf-faint); }
.sf-leg-line { text-align: center; font-size: .7rem; color: var(--sf-muted); }
.sf-leg-line i { display: block; height: 2px; background: var(--sf-line); margin: .25rem 0; position: relative; }
.sf-leg-line i::after { content: ""; position: absolute; right: -2px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-rose); }
.sf-leg-line .is-direct { color: #12a66a; font-weight: 700; }
.sf-fare-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.sf-tag { font-size: .68rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: var(--sf-bg); color: var(--sf-text); }
.sf-tag.is-good { background: #e3f7ee; color: #0e8a57; }
.sf-tag.is-bad { background: #fff0f3; color: #d0294a; }
.sf-fare-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.sf-fare-price small { font-size: .68rem; color: var(--sf-faint); }
.sf-fare-price b { font-size: 1.35rem; font-weight: 800; color: var(--sf-ink); }
.sf-fare-price .sf-btn { margin-top: .35rem; padding: .55rem 1.4rem; }
.sf-hotels { display: flex; flex-direction: column; gap: .75rem; }
.sf-hotel { display: grid; grid-template-columns: 220px 1fr; background: #fff; border: 1px solid var(--sf-line); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgb(20 26 43 / .04); }
.sf-hotel-photo { background: #dbe4f0 center / cover no-repeat; min-height: 160px; }
.sf-hotel-body { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; }
.sf-hotel-body b { font-size: 1rem; display: block; }
.sf-facilities { font-size: .74rem; color: var(--sf-muted); margin-top: .4rem; }
.sf-hotel-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: .2rem; }
.sf-hotel-price small { font-size: .68rem; color: var(--sf-faint); }
.sf-hotel-price b { font-size: 1.25rem; }
.sf-hotel-price .sf-btn { margin-top: .35rem; padding: .55rem 1.2rem; }
@media (max-width: 860px) {
  .sf-fare { grid-template-columns: 1fr; }
  .sf-card-main { grid-template-columns: 1fr; }
  .sf-card-main .sf-seats, .sf-card-main .sf-card-buy { grid-column: auto; }
  .sf-card-buy { justify-items: stretch; text-align: left; }
  .sf-fare-price { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .sf-hotel { grid-template-columns: 1fr; }
  .sf-hotel-body { flex-direction: column; }
  .sf-hotel-price { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- checkout flow ---------- */
.sf-flow-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; align-items: start; }
.sf-card { background: #fff; border: 1px solid var(--sf-line); border-radius: 16px; padding: 1.3rem 1.4rem; box-shadow: 0 6px 18px rgb(20 26 43 / .04); }
.sf-side { position: sticky; top: 80px; }
.sf-h3 { font-size: 1rem; font-weight: 800; margin-bottom: .6rem; }
.sf-steps { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0; list-style: none; font-size: .8rem; font-weight: 600; color: var(--sf-faint); }
.sf-steps li { padding: .35rem .75rem; border-radius: 999px; background: #fff; border: 1px solid var(--sf-line); }
.sf-steps li.is-on { color: #fff; background: var(--sf-rose); border-color: var(--sf-rose); }
.sf-steps li.is-done { color: #12a66a; border-color: #bfead6; background: #e3f7ee; }
.sf-notice.is-info { border-color: #cfe3f7; background: #eef6ff; }
.sf-notice.is-error { border-color: #ffd1db; background: #fff1f4; color: #b3213f; }
.sf-notice.is-hold { border-color: #ffe0b2; background: #fff7e6; color: #8a4b00; }
.sf-form { display: flex; flex-direction: column; gap: .8rem; }
.sf-label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--sf-muted); }
.sf-label input, .sf-label select { border: 1px solid var(--sf-line); border-radius: 10px; padding: .6rem .75rem; font-size: .92rem; font-weight: 600; color: var(--sf-ink); background: #fff; outline: none; }
.sf-label input:focus, .sf-label select:focus { border-color: var(--sf-rose); }
.sf-label input:disabled { background: var(--sf-bg); color: var(--sf-muted); }
.sf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.sf-pax-box { border: 1px solid var(--sf-line); border-radius: 12px; padding: .9rem 1rem 1rem; margin: 0; }
.sf-pax-box legend { font-weight: 800; font-size: .9rem; padding: 0 .4rem; }
.sf-form-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
.sf-inline { margin-top: .6rem; }
.sf-link { background: none; border: 0; padding: 0; color: var(--sf-rose); font-weight: 700; cursor: pointer; font-size: .88rem; }
.sf-signed { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .85rem; color: var(--sf-muted); background: var(--sf-bg); border-radius: 10px; padding: .55rem .8rem; margin-bottom: 1rem; }
.sf-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; padding: .35rem 0; border-bottom: 1px dashed var(--sf-line); }
.sf-line.is-total { font-weight: 800; font-size: 1.05rem; border-bottom: 0; padding-top: .6rem; margin-bottom: .8rem; }
.sf-itin-slice { border: 1px solid var(--sf-line); border-radius: 12px; padding: .7rem .9rem; margin-bottom: .6rem; }
.sf-itin-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .84rem; margin-bottom: .4rem; }
.sf-itin-head span { color: var(--sf-muted); }
.sf-itin-seg { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; font-size: .84rem; padding: .3rem 0; }
.sf-itin-flight { font-weight: 700; min-width: 140px; }
.sf-itin-arrow { color: var(--sf-faint); }
.sf-itin-meta { color: var(--sf-muted); font-size: .76rem; margin-left: auto; }
.sf-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sf-table td { padding: .45rem .3rem; border-bottom: 1px solid var(--sf-line); vertical-align: top; }
.sf-methods { display: flex; flex-direction: column; gap: .5rem; }
.sf-method { display: flex; align-items: center; gap: .7rem; border: 1.5px solid var(--sf-line); border-radius: 12px; padding: .7rem .9rem; cursor: pointer; }
.sf-method:has(input:checked) { border-color: var(--sf-rose); background: var(--sf-rose-tint); }
.sf-method input { accent-color: var(--sf-rose); }
.sf-method small { display: block; font-size: .7rem; color: var(--sf-faint); font-weight: 500; }
.sf-booking-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; }
.sf-state { font-size: .78rem; font-weight: 700; padding: .35rem .7rem; border-radius: 999px; background: var(--sf-bg); color: var(--sf-text); white-space: nowrap; }
.sf-state.is-good { background: #e3f7ee; color: #0e8a57; }
.sf-state.is-wait { background: #eef6ff; color: #1d4ed8; }
.sf-state.is-hold { background: #fff7e6; color: #8a4b00; }
@media (max-width: 860px) {
  .sf-flow-grid { grid-template-columns: 1fr; }
  .sf-side { position: static; }
  .sf-grid-3 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Search results (template T1)

   A filter rail beside a column of fares, as the design has it. The rail
   drops under the results on a narrow screen rather than squeezing both.
--------------------------------------------------------------------------- */
.sf-search.is-bar { margin-top: 1rem; position: relative; z-index: 3; }  /* under the sticky header, never behind it */
.sf-results .sf-search-card { box-shadow: 0 18px 40px rgb(17 24 39 / .10); }

.sf-trust { padding: 1.5rem 0 .25rem; }
.sf-trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.sf-trust-item { display: flex; align-items: center; gap: .75rem; }
.sf-trust-ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: rgb(245 50 91 / .10); color: var(--sf-accent); flex: none; }
.sf-trust-ico svg { width: 1.25rem; height: 1.25rem; }
.sf-trust-ico.is-shield { background: rgb(18 183 106 / .12); color: #027a48; }
.sf-trust-ico.is-calendar { background: rgb(99 102 241 / .12); color: #4338ca; }
.sf-trust-ico.is-headset { background: rgb(249 115 22 / .12); color: #c2410c; }
.sf-trust-item b { display: block; font-size: .95rem; }
.sf-trust-item small { color: var(--sf-muted); font-size: .82rem; }

.sf-results-grid { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.5rem; align-items: start; padding-block: 1.5rem 3rem; }



.sf-results-col { display: grid; gap: 1rem; min-width: 0; }
.sf-sorts { display: flex; gap: .6rem; flex-wrap: wrap; }
.sf-sort { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--sf-line); border-radius: .7rem; padding: .6rem 1rem; font-weight: 600; font-size: .9rem; background: #fff; }
.sf-sort svg { width: 1.05rem; height: 1.05rem; }
.sf-sort.is-on { border-color: var(--sf-accent); color: var(--sf-accent); }
.sf-count { color: var(--sf-muted); font-size: .86rem; margin: 0; }
.sf-notice.is-warn { display: flex; align-items: center; gap: .6rem; background: #fffbeb; border-color: #fde68a; color: #92400e; }
.sf-notice.is-warn svg { width: 1.15rem; height: 1.15rem; flex: none; }

.sf-card { background: #fff; border: 1px solid var(--sf-line); border-radius: 1rem; overflow: hidden; }
.sf-card-main { display: grid; grid-template-columns: 12rem 1fr auto 11.5rem; gap: 1rem; align-items: center; padding: .8rem 1.1rem; }
/* The seats badge is not always there: the price column is pinned to the last
   track, or a card without it collapsed the price into the narrow one. */
.sf-card-main .sf-seats { grid-column: 3; }
.sf-card-main .sf-card-buy { grid-column: 4; }
.sf-card-air { display: flex; align-items: center; gap: .7rem; }
.sf-card-air img { width: 2rem; height: 2rem; object-fit: contain; }
.sf-card-code { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--sf-sunk); font-size: .75rem; font-weight: 700; }
.sf-card-air b { display: block; font-size: .95rem; }
.sf-card-air span { color: var(--sf-muted); font-size: .82rem; }
.sf-card-legs { display: grid; gap: .55rem; }
.sf-card-leg { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; position: relative; }
.sf-card-legs .sf-card-leg + .sf-card-leg { border-top: 1px dashed var(--sf-line); padding-top: .55rem; }
.sf-leg-tag { grid-column: 1 / -1; font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-rose); margin-bottom: -.3rem; }
.sf-t { text-align: center; }
.sf-t b { display: block; font-size: 1.2rem; line-height: 1.2; }
.sf-t span { display: block; color: var(--sf-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.sf-t small { display: block; color: var(--sf-muted); font-size: .72rem; margin-top: .1rem; white-space: nowrap; }
.sf-next { color: #175cd3 !important; font-weight: 600; }  /* arrives on another day */
.sf-card-line { text-align: center; color: var(--sf-muted); font-size: .78rem; min-width: 5.5rem; white-space: nowrap; }
.sf-card-line i { display: block; border-top: 1px dashed var(--sf-line); margin: .3rem 0; position: relative; }
.sf-card-line i svg { width: 1rem; height: 1rem; background: #fff; padding: 0 .15rem; position: relative; top: -.55rem; color: var(--sf-muted); }
.sf-card-line .is-direct { color: #027a48; font-weight: 600; }
.sf-seats { display: flex; align-items: center; gap: .3rem; color: var(--sf-accent); font-weight: 700; font-size: .78rem; }
.sf-seats svg { width: 1.1rem; height: 1.1rem; }
.sf-card-buy { text-align: right; display: grid; gap: .35rem; justify-items: end; }
.sf-from { color: var(--sf-muted); font-size: .8rem; }
.sf-from b { display: block; color: var(--sf-ink); font-size: 1.2rem; white-space: nowrap; }
.sf-card-buy .sf-btn { width: 100%; justify-content: center; padding: .48rem 1rem; font-size: .8rem; min-height: 0; }
.sf-card-meta { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; color: var(--sf-muted); font-size: .78rem; align-items: center; }
.sf-pill { background: #eff6ff; color: #175cd3; border-radius: 999px; padding: .15rem .55rem; font-weight: 600; }
.sf-card-foot { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; padding: .5rem 1.1rem; border-top: 1px solid var(--sf-line); background: #fcfcfd; color: var(--sf-muted); font-size: .82rem; }
.sf-card-foot svg { width: 1rem; height: 1rem; vertical-align: -2px; }
.sf-card-foot span { display: inline-flex; align-items: center; gap: .3rem; }
.sf-card-foot .is-good { color: #027a48; font-weight: 600; }
.sf-card-foot .is-bad { color: #b42318; font-weight: 600; }

@media (max-width: 1024px) {
    .sf-results-grid { grid-template-columns: 1fr; }
    .sf-filters { position: static; order: 2; }
    .sf-results-col { order: 1; }
    .sf-trust-row { grid-template-columns: 1fr 1fr; }
    .sf-card-main { grid-template-columns: 1fr 1fr; }
    .sf-card-main .sf-seats, .sf-card-main .sf-card-buy { grid-column: auto; }  /* two tracks here: no pin to a fourth */
    .sf-card-buy { justify-items: start; text-align: left; }
    .sf-card-buy .sf-btn { width: auto; }
    .sf-card-meta { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .sf-trust-row { grid-template-columns: 1fr; }
    .sf-card-main { grid-template-columns: 1fr; }
    .sf-card-leg { grid-template-columns: auto 1fr auto; }
    .sf-seats { justify-content: flex-start; }
}
.sf-more { display: flex; align-items: center; justify-content: center; gap: .5rem; background: #fff; border: 1px solid var(--sf-line); border-radius: 1rem; padding: .9rem; font-weight: 600; }
.sf-more:hover { border-color: var(--sf-accent); color: var(--sf-accent); }
.sf-more small { color: var(--sf-muted); font-weight: 400; }

/* Prices past their held time: the cards stay readable, nothing on them
   can be pressed, and the notice says what to do. */
.sf-results-col.is-expired .sf-card { opacity: .55; }
.sf-results-col.is-expired .sf-card a,
.sf-results-col.is-expired .sf-card button { pointer-events: none; }
.sf-expired { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.sf-expired .sf-btn { margin-left: auto; }
[x-cloak] { display: none !important; }

/* a button that has been clicked and is waiting on the airline */
.sf .sf-btn.is-busy { opacity: .85; pointer-events: none; }
.sf-btn-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .45); border-top-color: #fff; animation: sf-spin .8s linear infinite; display: inline-block; }

/* ---------- results skeleton: the page is up before the airlines answer ---------- */
@keyframes sf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sf-sk-line, .sf-sk-chip, .sf-sk-logo, .sf-sk-btn { display: block; border-radius: 6px; background: linear-gradient(90deg, #eceff4 25%, #f7f8fb 50%, #eceff4 75%); background-size: 200% 100%; animation: sf-shimmer 1.4s linear infinite; }
.sf-sk-line { height: 12px; margin: .35rem 0; }
.sf-sk-line.is-thin { height: 8px; }
.sf-sk-line.is-big { height: 22px; }
.sf-sk-chips { display: flex; gap: .5rem; margin-top: .6rem; }
.sf-sk-chip { width: 64px; height: 30px; border-radius: 999px; }
.sf-sk-chip.is-wide { width: 110px; height: 36px; }
.sf-sk-logo { width: 40px; height: 40px; border-radius: 8px; flex: none; }
.sf-sk-btn { width: 110px; height: 40px; border-radius: 10px; margin-top: .4rem; }
.sf-sk-card { pointer-events: none; }
.sf-searching { display: flex; align-items: center; gap: .85rem; background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1rem; }
.sf-searching b { display: block; font-size: .95rem; }
.sf-searching small { color: var(--sf-muted); font-size: .8rem; }
.sf-searching-dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--sf-rose-soft); border-top-color: var(--sf-rose); animation: sf-spin .8s linear infinite; flex: none; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
#sf-results[aria-busy="true"] .sf-results-col:not(.sf-sk) { opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sf-sk-line, .sf-sk-chip, .sf-sk-logo, .sf-sk-btn, .sf-searching-dot { animation: none; } }

/* ---------- suggestions under a field ---------- */
.sf-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: .35rem; list-style: none; background: #fff; border: 1px solid var(--sf-line); border-radius: 12px; box-shadow: var(--sf-shadow-lg); max-height: 320px; overflow-y: auto; min-width: 260px; }
.sf-suggest li { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 8px; cursor: pointer; }
.sf-suggest li:hover, .sf-suggest li.is-on { background: var(--sf-rose-tint); }
.sf-suggest .sf-suggest-code { flex: none; min-width: 2.8rem; text-align: center; font-size: .72rem; font-weight: 800; color: var(--sf-rose); background: var(--sf-rose-soft); border-radius: 6px; padding: .2rem .3rem; text-transform: none; }
.sf-suggest .sf-suggest-code.is-type { min-width: 3.6rem; font-size: .62rem; letter-spacing: .06em; }
.sf-suggest b { display: block; font-size: .88rem; color: var(--sf-ink); text-transform: none; }
.sf-suggest small { display: block; font-size: .72rem; color: var(--sf-muted); text-transform: none; }
.sf-suggest .is-empty { color: var(--sf-muted); font-size: .82rem; cursor: default; }
.sf-suggest .sf-suggest-head { cursor: default; padding: .35rem .6rem .2rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-faint); }
.sf-suggest .sf-suggest-head:hover { background: none; }
.sf-field-body input[data-suggest] { text-transform: none; }
.sf-field-body input[data-suggest].is-code { text-transform: uppercase; }

/* ---------- the calendar (flatpickr, themed) ---------- */
body.sf .flatpickr-calendar { font-family: inherit; border-radius: 16px; box-shadow: var(--sf-shadow-lg); border: 1px solid var(--sf-line); padding: .4rem; }
body.sf .flatpickr-calendar.arrowTop::before, body.sf .flatpickr-calendar.arrowTop::after, body.sf .flatpickr-calendar.arrowBottom::before, body.sf .flatpickr-calendar.arrowBottom::after { display: none; }
body.sf .flatpickr-months .flatpickr-month, body.sf .flatpickr-current-month { color: var(--sf-navy); font-weight: 800; }
body.sf .flatpickr-current-month .flatpickr-monthDropdown-months, body.sf .flatpickr-current-month input.cur-year { font-weight: 800; color: var(--sf-navy); }
body.sf .flatpickr-months .flatpickr-prev-month, body.sf .flatpickr-months .flatpickr-next-month { color: var(--sf-navy); fill: var(--sf-navy); }
body.sf .flatpickr-months .flatpickr-prev-month:hover svg, body.sf .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--sf-rose); }
body.sf span.flatpickr-weekday { color: var(--sf-faint); font-weight: 700; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
body.sf .flatpickr-day { border-radius: 10px; color: var(--sf-ink); font-weight: 600; }
body.sf .flatpickr-day.today { border-color: var(--sf-rose); }
body.sf .flatpickr-day:hover, body.sf .flatpickr-day.prevMonthDay:hover, body.sf .flatpickr-day.nextMonthDay:hover { background: var(--sf-rose-tint); border-color: var(--sf-rose-tint); }
body.sf .flatpickr-day.selected, body.sf .flatpickr-day.selected:hover, body.sf .flatpickr-day.startRange, body.sf .flatpickr-day.endRange { background: var(--sf-rose); border-color: var(--sf-rose); color: #fff; box-shadow: 0 6px 14px rgb(245 50 91 / .28); }
body.sf .flatpickr-day.flatpickr-disabled, body.sf .flatpickr-day.flatpickr-disabled:hover, body.sf .flatpickr-day.prevMonthDay, body.sf .flatpickr-day.nextMonthDay { color: #c3c9d4; }
body.sf .flatpickr-day.flatpickr-disabled { text-decoration: line-through; text-decoration-color: #e3e6ec; }
.sf-field-body input.flatpickr-input, .sf-field-body input.sf-date-alt { cursor: pointer; }
@media (max-width: 720px) { body.sf .flatpickr-calendar { width: calc(100vw - 2rem) !important; left: 1rem !important; right: 1rem !important; } body.sf .flatpickr-days, body.sf .dayContainer { width: 100% !important; min-width: 0 !important; max-width: none !important; } body.sf .flatpickr-day { max-width: none; } }

/* ---------- the store's own pages ---------- */
.sf-page { max-width: 760px; margin: 0 auto; line-height: 1.6; color: var(--sf-text); }
.sf-page h1 { margin-bottom: .35rem; color: var(--sf-ink); }
.sf-page h2 { font-size: 1.02rem; font-weight: 800; color: var(--sf-ink); margin: 1.4rem 0 .4rem; }
.sf-page p { margin: 0 0 .8rem; }
.sf-page ul { padding-left: 1.2rem; list-style: disc; margin: 0 0 .8rem; }
.sf-page li { margin-bottom: .35rem; }
.sf-page-meta { font-size: .78rem; color: var(--sf-faint); }
.sf-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: .5rem 0 1rem; }
.sf-table th, .sf-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--sf-line); vertical-align: top; }
.sf-table th { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-faint); }
.sf-table code { font-size: .82rem; background: var(--sf-bg); padding: .1rem .35rem; border-radius: 4px; }
.sf-sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; }
.sf-sitemap h2 { margin-top: 0; }
.sf-sitemap ul { list-style: none; padding: 0; }
.sf-sitemap a { color: var(--sf-rose); font-weight: 600; }

/* ---------- the fares of one flight, as cards under its card ---------- */
.sf-fares { border-top: 1px dashed var(--sf-line); margin-top: .9rem; padding-top: .9rem; }
.sf-fares[hidden] { display: none; }
.sf-fare-cards { position: relative; }
.sf-fare-track { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem .1rem .6rem; scrollbar-width: none; }
.sf-fare-track::-webkit-scrollbar { display: none; }
.sf-fare-card { position: relative; flex: 0 0 calc((100% - 1.8rem) / 3); min-width: 230px; scroll-snap-align: start; display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--sf-line); border-radius: 14px; background: #fff; }
.sf-fare-card.is-lead { border-color: rgb(245 50 91 / .45); background: linear-gradient(180deg, #fff 55%, var(--sf-rose-tint)); }
.sf-fare-card:last-child:not(.is-lead) { background: linear-gradient(180deg, #fff 55%, #fff7ea); }
.sf-fare-card h4 { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--sf-navy); }
.sf-fare-badge { position: absolute; top: -.6rem; right: .9rem; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #12a66a; border-radius: 999px; padding: .22rem .6rem; }
.sf-fare-badge.is-flex { background: #d97706; }
.sf-fare-price { display: flex; align-items: baseline; gap: .4rem; }
.sf-fare-price b { font-size: 1.32rem; font-weight: 800; color: var(--sf-ink); white-space: nowrap; }
.sf-fare-price small { color: var(--sf-muted); font-size: .76rem; }
.sf-fare-total { font-size: .74rem; color: var(--sf-muted); margin-top: -.3rem; }
.sf-fare-facts { margin: .2rem 0 0; padding-top: .6rem; border-top: 1px dashed var(--sf-line); flex: 1; font-size: .8rem; color: var(--sf-text); }
.sf-fare-facts dt { display: flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--sf-ink); font-size: .84rem; margin: .7rem 0 .3rem; }
.sf-fare-facts dt:first-child { margin-top: 0; }
.sf-fare-facts dt svg { width: 15px; height: 15px; color: var(--sf-rose); }
.sf-fare-facts dd { margin: 0 0 .2rem 1.35rem; }
.sf-fare-facts dd b { font-weight: 700; color: var(--sf-ink); }
.sf-fare-facts dd.is-good b { color: #0e8a57; }
.sf-fare-facts dd.is-bad b { color: #d0294a; }
.sf-fare-card .sf-btn { margin-top: .4rem; width: 100%; padding: .55rem 1rem; font-size: .84rem; }
.sf-fare-nav { position: absolute; top: 45%; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sf-line); background: #fff; color: var(--sf-ink); box-shadow: var(--sf-shadow); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sf-fare-nav[hidden] { display: none; }
.sf-fare-nav svg { width: 18px; height: 18px; }
.sf-fare-nav.is-prev { left: -14px; transform: rotate(90deg); }
.sf-fare-nav.is-next { right: -14px; transform: rotate(-90deg); }
.sf-fare-nav:disabled { opacity: .35; cursor: default; }
.sf-fares-empty, .sf-fares-loading { padding: .6rem .2rem; font-size: .84rem; color: var(--sf-muted); display: flex; align-items: center; gap: .6rem; }
@media (max-width: 860px) {
  .sf-fare-card { flex-basis: calc((100% - .9rem) / 2); }
}
@media (max-width: 720px) {
  .sf-fare-card { flex-basis: 82%; min-width: 0; }
  .sf-fare-nav { display: none !important; }
}
}

/* ---------- filters: the reference design ---------- */
.sf-filters { background: #fff; border: 1px solid var(--sf-line); border-radius: 1rem; padding: 1.1rem 1.15rem; position: sticky; top: 1rem; }
.sf-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .2rem; }
.sf-filters-head h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 0; }
.sf-filters-head h2 svg { width: 18px; height: 18px; color: var(--sf-rose); }
.sf-clear { color: var(--sf-rose); font-size: .8rem; font-weight: 700; }
.sf-facet { padding: .9rem 0; border-top: 1px solid var(--sf-line); }
.sf-facet:first-of-type { border-top: 0; }
.sf-facet h3 { font-size: .92rem; font-weight: 800; margin: 0 0 .55rem; color: var(--sf-ink); }
.sf-facet-sub { color: var(--sf-muted); font-size: .78rem; margin: -.35rem 0 .55rem; }
.sf-stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.sf-stop { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.sf-stop b { display: block; width: 100%; padding: .55rem .3rem; border: 1px solid var(--sf-line); border-radius: .6rem; font-size: .8rem; font-weight: 700; color: var(--sf-ink); transition: border-color .15s, background .15s, color .15s; }
.sf-stop small { font-size: .72rem; color: var(--sf-muted); }
.sf-stop:hover b { border-color: var(--sf-rose); }
.sf-stop.is-on b { border-color: var(--sf-rose); background: var(--sf-rose-tint); color: var(--sf-rose); }
.sf-bands { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sf-band { display: flex; align-items: center; gap: .45rem; padding: .5rem .6rem; border: 1px solid var(--sf-line); border-radius: .6rem; font-size: .78rem; font-weight: 600; color: var(--sf-text); transition: border-color .15s, background .15s; }
.sf-band svg { width: 17px; height: 17px; color: var(--sf-muted); flex: none; }
.sf-band:hover { border-color: var(--sf-rose); }
.sf-band.is-on { border-color: var(--sf-rose); background: var(--sf-rose-tint); color: var(--sf-rose); }
.sf-band.is-on svg { color: var(--sf-rose); }
/* A filter row (its own class: `.sf-row` is the search card's grid row, and
   sharing the name turned the search rows into flex rows that never wrapped). */
.sf-frow { display: flex; align-items: center; gap: .55rem; padding: .38rem 0; font-size: .86rem; color: var(--sf-ink); cursor: pointer; }
.sf-frow .sf-row-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-frow .sf-row-name em, .sf-frow em { color: var(--sf-muted); font-style: normal; font-size: .78rem; }
.sf-frow .sf-row-price { color: var(--sf-text); font-size: .8rem; font-variant-numeric: tabular-nums; }
.sf-frow input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--sf-rose); flex: none; margin: 0; cursor: pointer; }
.sf-frow img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; flex: none; }
.sf-airline-code { width: 22px; height: 22px; border-radius: 4px; background: var(--sf-rose-soft); color: var(--sf-rose); font-size: .55rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sf-airlines { display: grid; }
a.sf-frow { text-decoration: none; color: inherit; border-radius: .5rem; }
.sf-frow.is-on { background: var(--sf-rose-tint); box-shadow: 0 0 0 1px var(--sf-rose) inset; }
.sf-frow.is-on .sf-airline-code { background: var(--sf-rose); color: #fff; }
.sf-more-link { border: 0; background: none; padding: .35rem 0 0; color: var(--sf-rose); font-weight: 700; font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sf-range { width: 100%; accent-color: var(--sf-rose); margin: .35rem 0 .2rem; cursor: pointer; }
.sf-range-labels { display: flex; justify-content: space-between; font-size: .76rem; color: var(--sf-muted); }
.sf-range-labels [data-range-value] { color: var(--sf-ink); font-weight: 700; }

/* ---------- a return trip chosen leg by leg ---------- */
.sf-combo { padding: 0; }
.sf-combo-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; }
.sf-combo-airlines { display: flex; align-items: center; gap: 1.2rem; }
.sf-combo-airlines .sf-card-air + .sf-card-air { border-left: 2px solid var(--sf-rose-soft); padding-left: 1.2rem; }
.sf-combo-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-top: 1px solid var(--sf-line); background: #fcfcfd; }
.sf-combo-foot .sf-from { font-size: .84rem; }
.sf-combo-foot .sf-from b { display: inline; font-size: 1.25rem; margin-left: .2rem; }
.sf-combo-foot-actions { display: flex; gap: .5rem; }
.sf-combo-foot-actions .sf-btn { padding: .55rem 1.3rem; font-size: .86rem; }
.sf-combo-foot-actions .sf-btn[hidden] { display: none; }
.sf-combo-foot-actions .sf-btn.is-off { opacity: .4; pointer-events: none; }
.sf-combo-legs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sf-line); }
.sf-combo-leg + .sf-combo-leg { border-left: 1px solid var(--sf-line); }
.sf-combo-opt[hidden] { display: none; }
.sf-combo-more { display: block; width: 100%; border: 0; border-top: 1px solid var(--sf-line); background: #fff; color: #175cd3; font: inherit; font-weight: 700; font-size: .9rem; text-align: left; padding: .75rem 1.1rem; cursor: pointer; }
.sf-combo-more:hover { background: #f7f9fc; }
.sf-combo-leg-head { display: flex; gap: .6rem; align-items: baseline; padding: .55rem 1.1rem; background: #eef6ff; font-size: .82rem; color: var(--sf-text); }
.sf-combo-leg-head b { color: var(--sf-ink); }
.sf-combo-leg-head span::before { content: "|"; color: #c3d3e6; margin-right: .6rem; }
.sf-cabin-tag { margin-left: auto; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #175cd3; background: #fff; border-radius: 999px; padding: .15rem .55rem; }
.sf-cabin-tag::before { content: none !important; }
.sf-combo-opt { display: grid; grid-template-columns: auto auto 1fr auto; gap: .5rem .9rem; align-items: center; padding: .75rem 1.1rem; border-top: 1px solid var(--sf-line); cursor: pointer; transition: background .15s; }
.sf-combo-opt:first-of-type { border-top: 0; }
.sf-combo-opt:hover { background: #fafbfd; }
.sf-combo-opt:has(input:checked) { background: var(--sf-rose-tint); }
.sf-combo-opt input { width: 1.05rem; height: 1.05rem; accent-color: var(--sf-rose); margin: 0; }
.sf-combo-opt .sf-t { text-align: left; }
.sf-combo-opt .sf-t:last-of-type { text-align: right; }
.sf-combo-opt .sf-t b { font-size: 1.1rem; }
.sf-combo-opt .sf-card-line { min-width: 6.5rem; }
.sf-combo-opt-meta { grid-column: 2 / -1; display: flex; gap: .9rem; font-size: .7rem; color: var(--sf-faint); }
.sf-combo-opt-meta em { font-style: normal; }
.sf-combo-opt.is-unavailable { opacity: .42; }
.sf-combo-opt.is-unavailable:hover { opacity: .65; }
.sf-combo .sf-fares { margin: 0; padding: .9rem 1.1rem; border-top: 1px solid var(--sf-line); }
@media (max-width: 860px) {
  .sf-combo-legs { grid-template-columns: 1fr; }
  .sf-combo-leg + .sf-combo-leg { border-left: 0; border-top: 2px solid var(--sf-line); }
  .sf-combo-head { flex-direction: column; align-items: stretch; }
}

/* ---- Fare drawer: "View fares" slides the flight's fare families in from the right ---- */
html.sf-drawer-open { overflow: hidden; }
.sf-drawer { position: fixed; inset: 0; z-index: 80; }
.sf-drawer[hidden] { display: none; }
.sf-drawer-backdrop { position: absolute; inset: 0; background: rgb(20 26 43 / .45); opacity: 0; transition: opacity .2s; }
.sf-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(1120px, 94vw); background: #fff; box-shadow: var(--sf-shadow-lg); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; outline: 0; }
.sf-drawer.is-open .sf-drawer-backdrop { opacity: 1; }
.sf-drawer.is-open .sf-drawer-panel { transform: none; }
.sf-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 2rem; border-bottom: 1px solid var(--sf-line); }
.sf-drawer-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--sf-ink); }
.sf-drawer-back { border: 0; background: none; color: #175cd3; font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; padding: .3rem .2rem; }
.sf-drawer-back svg { width: 16px; height: 16px; transform: rotate(90deg); }
.sf-drawer-back:hover { text-decoration: underline; }
.sf-drawer-body { flex: 1; overflow-y: auto; padding: 1.4rem 2rem 2rem; }
.sf-fd-legs { display: flex; gap: .9rem; flex-wrap: wrap; }
.sf-fd-leg { border: 1px solid var(--sf-line); background: var(--sf-bg); border-radius: 12px; padding: .7rem 1rem; text-align: left; cursor: pointer; display: grid; gap: .2rem; min-width: 230px; font: inherit; }
.sf-fd-leg b { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 800; color: var(--sf-ink); }
.sf-fd-leg b svg { width: 18px; height: 18px; }
.sf-fd-leg span { font-size: .84rem; color: var(--sf-text); }
.sf-fd-leg span i { font-style: normal; color: var(--sf-faint); margin: 0 .3rem; }
.sf-fd-leg.is-on { border-color: #4aa3e8; background: #eef6ff; box-shadow: 0 0 0 1px #4aa3e8 inset; }
.sf-fd-cabins { display: flex; gap: .6rem; margin: 1rem 0 0; border-bottom: 2px solid #dbe9f6; padding-left: 1rem; overflow-x: auto; }
.sf-fd-cabins[hidden] { display: none; }
.sf-fd-cabin { border: 1px solid transparent; border-bottom: 0; background: none; border-radius: 14px 14px 0 0; padding: .7rem 1.6rem .6rem; text-align: center; cursor: pointer; display: grid; gap: .1rem; margin-bottom: -2px; color: var(--sf-muted); font: inherit; white-space: nowrap; }
.sf-fd-cabin b { font-size: 1.1rem; font-weight: 800; color: var(--sf-ink); }
.sf-fd-cabin span { font-size: .86rem; }
.sf-fd-cabin.is-on { border-color: #4aa3e8; background: #fff; box-shadow: 0 2px 0 #fff; }
.sf-fd .sf-fare-cards { margin-top: 1.6rem; padding: .4rem .4rem 0; }
.sf-fd.is-inline .sf-fare-cards { margin-top: 0; padding: .5rem .1rem 0; }
.sf-fd .sf-fare-card[hidden] { display: none; }
.sf-fare-card.is-current { border-color: #4aa3e8; background: linear-gradient(180deg, #fff 55%, #eef6ff); }
.sf-fare-card.is-current .sf-btn:not(.is-ghost) { background: var(--sf-rose); }
.sf-fare-badge.is-popular { background: #0ea5e9; }
.sf-fd-leg-facts { display: contents; }
.sf-fd-leg-facts[hidden] { display: none; }
.sf-fare-facts dt em { font-style: normal; font-weight: 600; color: var(--sf-muted); font-size: .72rem; margin-left: .15rem; }
/* Stand-ins while the fares are fetched, the same shape as the cards. */
.sf-bone { display: block; height: 12px; border-radius: 8px; background: linear-gradient(90deg, #eef0f5 25%, #f7f8fb 50%, #eef0f5 75%); background-size: 400% 100%; animation: sf-shimmer 1.3s ease-in-out infinite; }
.sf-bone.name { height: 18px; width: 55%; } .sf-bone.price { height: 26px; width: 70%; } .sf-bone.line.short { width: 60%; } .sf-bone.btn { height: 38px; margin-top: auto; border-radius: 12px; }
.sf-fd-legs.is-skeleton .sf-bone { width: 240px; height: 58px; border-radius: 12px; }
.sf-fare-card.is-skeleton { min-height: 340px; }
@keyframes sf-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sf-bone { animation: none; } .sf-drawer-panel, .sf-drawer-backdrop { transition: none; } }
@media (max-width: 720px) {
  .sf-drawer-panel { width: 100%; }
  .sf-drawer-head { padding: .9rem 1rem; }
  .sf-drawer-body { padding: 1rem; }
  .sf-fd-leg { min-width: 0; flex: 1; }
  .sf-fd .sf-fare-card { flex-basis: 86%; }
}

/* ---- Fare calendar: the lowest fare per day either side of the dates searched ---- */
.sf-cal { display: grid; gap: .6rem; margin-bottom: 1rem; }
.sf-cal-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.sf-cal-bar > span { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 700; color: var(--sf-ink); }
.sf-cal-bar > span svg { width: 15px; height: 15px; color: var(--sf-rose); }
.sf-cal-toggle { border: 0; background: none; color: var(--sf-rose); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; padding: .2rem 0; }
.sf-cal-body { display: grid; gap: .8rem; }
.sf-cal-body[hidden] { display: none; }
.sf-cal[hidden], .sf-cal-slot[hidden] { display: none; }
.sf-cal-dir { background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; padding: .7rem .9rem .8rem; min-width: 0; }
.sf-cal-track { position: relative; display: flex; align-items: center; gap: .4rem; min-width: 0; }
.sf-cal-track .sf-cal-days { flex: 1; min-width: 0; scroll-snap-type: x mandatory; }
.sf-cal-day { scroll-snap-align: start; }
.sf-cal-nav { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sf-line); background: #fff; color: var(--sf-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sf-shadow); }
.sf-cal-nav svg { width: 16px; height: 16px; }
.sf-cal-nav.is-prev svg { transform: rotate(90deg); }
.sf-cal-nav.is-next svg { transform: rotate(-90deg); }
.sf-cal-nav:disabled { opacity: .35; cursor: default; }
.sf-cal-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .55rem; }
.sf-cal-head b { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--sf-ink); }
.sf-cal-head b svg { width: 15px; height: 15px; }
.sf-cal-head span { font-size: .76rem; color: var(--sf-muted); }
.sf-cal-days { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .1rem; }
.sf-cal-days::-webkit-scrollbar { display: none; }
.sf-cal-day { flex: 0 0 auto; min-width: 72px; display: grid; gap: .05rem; text-align: center; padding: .45rem .5rem; border: 1px solid var(--sf-line); border-radius: 10px; text-decoration: none; color: var(--sf-text); background: var(--sf-bg); transition: border-color .15s, background .15s; }
.sf-cal-day small { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sf-muted); }
.sf-cal-day b { font-size: .82rem; color: var(--sf-ink); }
.sf-cal-day em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--sf-navy); white-space: nowrap; }
.sf-cal-day.is-cheapest em { color: #0e8a57; }
.sf-cal-day.is-empty em { color: var(--sf-faint); font-weight: 500; }
.sf-cal-day:hover { border-color: var(--sf-rose); background: #fff; }
.sf-cal-day.is-on { border-color: var(--sf-rose); background: var(--sf-rose-tint); box-shadow: 0 0 0 1px var(--sf-rose) inset; }
@media (max-width: 720px) { .sf-cal-dir { padding: .6rem .6rem .7rem; } .sf-cal-day { min-width: 64px; } }


/* ---------------------------------------------------------------------------
   The phone layout (template T1), as the design draws it: the header is the
   logo and three icons; the search card carries its tabs, From and To side
   by side with the swap, the dates in a row, travellers / cabin / fare type
   in a row and a full-width Search Flights; the trust row is two by two;
   "Flight results" heads the list with a Filter button that opens the
   filters as a drawer; each fare is the airline and the price side by
   side, the times under the airline with the city names, and a footer.
   --------------------------------------------------------------------------- */
.sf-phone-only { display: none !important; }
.sf-hero.is-results { display: none; }
.sf-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--sf-ink); }
.sf-icon-btn svg { width: 22px; height: 22px; }
.sf-results-mhead { display: none; }
.sf-filters-close, .sf-filters-backdrop { display: none; }
.sf-t .sf-city { display: none; }
.sf-pax-ico { display: none; }
.sf-currency.sf-menu-only label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .9rem; font-weight: 600; padding: .55rem 0; }

@media (max-width: 720px) {
  .sf-phone-only { display: inline-flex !important; }
  .sf-tabs.sf-phone-only { display: flex !important; }
  .sf-desk-only { display: none !important; }
  .sf-header-inner { min-height: 60px; gap: .4rem; }
  .sf-header-actions { gap: .15rem; margin-left: auto; }
  .sf-header-actions .sf-signup, .sf-header-actions .sf-currency { display: none; }
  .sf-logo-text b { font-size: 1.15rem; }

  /* the hero on the results page, above the search */
  .sf-hero.is-results { display: block; min-height: 0; }
  .sf-hero.is-results .sf-hero-inner { padding: 1.6rem 0 6.5rem; }
  .sf-hero.is-results .sf-h1 { font-size: 1.85rem; }
  .sf-hero.is-results .sf-hero-script { display: block; right: 1rem; top: 1rem; font-size: 1.4rem; }
  .sf-results .sf-search.is-bar { margin-top: -5.5rem; }
  .sf-search-card { padding: .9rem .9rem 1rem; border-radius: 18px; }
  .sf-tabs { margin-bottom: .8rem; }
  .sf-tabs a { padding: .55rem .6rem .7rem; font-size: .82rem; }
  .sf-pills { flex-wrap: wrap; }

  html, body { overflow-x: hidden; }   /* the drawers wait off screen to the right */
  /* The search card's rows become one grid, so the fields fall in the
     design's order: From / swap / To; Departure / Add Return; Travellers /
     Cabin / Fare type; then the full-width Search Flights. Five tracks: two
     for each side of the swap, the swap's own in the middle. */
  form[data-form="flights"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto repeat(3, minmax(0, 1fr)); gap: .5rem .45rem; }
  form[data-form="flights"] .sf-pills { grid-column: 1 / -1; margin-bottom: .3rem; }
  form[data-form="flights"] .sf-row.is-route { display: contents; }
  form[data-form="flights"] .sf-row.is-pax { grid-column: 1 / -1; order: 50; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.08fr); gap: .4rem; margin: 0; }
  .sf-row.is-route .sf-swap { transform: none; grid-column: 4; }
  .sf-row.is-route .sf-field { min-height: 62px; padding: .5rem .65rem; min-width: 0; }
  .sf-row.is-route .sf-field-body small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sf-row.is-route .sf-field:nth-of-type(1) { grid-column: 1 / 4; }        /* from */
  .sf-row.is-route .sf-field:nth-of-type(2) { grid-column: 5 / 8; }        /* to */
  .sf-row.is-route .sf-field:nth-of-type(3) { grid-column: 1 / 4; }        /* departure */
  .sf-row.is-route .sf-addreturn, .sf-row.is-route .sf-field.is-return { grid-column: 4 / 8; }
  .sf-row.is-route .sf-addreturn { min-height: 62px; justify-content: center; }
  .sf-row.is-route .sf-search-btn { grid-column: 1 / -1; order: 99; min-height: 58px; font-size: 1.05rem; border-radius: 14px; margin-top: .3rem; }
  .sf-row.is-pax .sf-field { padding: .45rem .5rem; min-height: 60px; min-width: 0; }
  .sf-pax-ico { display: inline-flex; color: var(--sf-muted); }
  .sf-pax-ico svg { width: 12px; height: 12px; }
  .sf-pax-item { flex-direction: row; align-items: center; gap: .05rem; }
  .sf-row.is-pax .sf-field > svg { display: none; }
  .sf-row.is-pax .sf-field.is-return-cabin.is-open { grid-column: 1 / -1; }
  .sf-row.is-pax .sf-field > div { min-width: 0; }
  .sf-pax-head { font-size: .6rem; }
  .sf-pax-items { gap: .35rem; margin-top: .2rem; }
  .sf-pax-item small { display: none; }
  .sf-pax-item + .sf-pax-item { border-left: 1px solid var(--sf-line); padding-left: .35rem; }
  /* the counts alone, as the design draws them; a tap edits the number */
  .sf-stepper { gap: 0; }
  .sf-stepper input { width: 1.1rem; padding: .1rem 0; font-size: .98rem; border: 0; background: transparent; text-align: left; }
  .sf-stepper .sf-step { display: none; }
  .sf-pax-item + .sf-pax-item { border-left: 1px solid var(--sf-line); padding-left: .25rem; margin-left: 0; }
  .sf-field.is-select .sf-field-body label { font-size: .56rem; letter-spacing: .05em; }
  .sf-field.is-select .sf-field-body select { font-size: .8rem; padding-right: .75rem; }
  .sf-field.is-select::after { right: .4rem; width: 6px; height: 6px; }
  .sf-pax-head { letter-spacing: .05em; }

  /* the trust row, two by two */
  .sf-trust { padding: .8rem 0; }
  .sf-trust-row { grid-template-columns: 1fr 1fr; gap: .6rem .5rem; }
  .sf-trust-item { gap: .5rem; }
  .sf-trust-ico { width: 2.4rem; height: 2.4rem; }
  .sf-trust-item b { font-size: .86rem; display: block; }
  .sf-trust-item small { font-size: .72rem; line-height: 1.2; }

  /* "Flight results" and the Filter button; the filters as a drawer */
  .sf-results-grid { padding-top: .8rem; gap: 0; }
  .sf-results-mhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .2rem; }
  .sf-results-mhead h2 { margin: 0; font-size: 1.55rem; font-weight: 800; color: var(--sf-ink); }
  .sf-filter-btn { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--sf-line); background: #fff; border-radius: 12px; padding: .65rem 1.1rem; font: inherit; font-weight: 700; color: var(--sf-ink); cursor: pointer; }
  .sf-filter-btn svg { width: 18px; height: 18px; }
  .sf-filters { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 92vw); z-index: 90; border-radius: 0; overflow-y: auto; transform: translateX(100%); transition: transform .22s ease; order: 0; margin: 0; background: #fff; box-shadow: var(--sf-shadow-lg); padding: 1rem 1.1rem 2rem; }
  .sf-filters.is-open { transform: none; }
  .sf-filters-backdrop { display: block; position: fixed; inset: 0; z-index: 85; background: rgb(20 26 43 / .45); }
  .sf-filters-backdrop[hidden] { display: none; }
  .sf-filters-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--sf-line); border-radius: 50%; background: #fff; cursor: pointer; color: var(--sf-ink); }
  .sf-filters-close svg { width: 16px; height: 16px; transform: rotate(45deg); }
  .sf-sorts { gap: .45rem; }
  .sf-sort { padding: .55rem .8rem; font-size: .84rem; }
  .sf-count { font-size: .82rem; }

  /* a fare on a phone: airline and price side by side, the times under the airline */
  /* the price column may take at most two fifths: the times need the rest */
  .sf-card-main { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); grid-template-areas: "air buy" "legs buy" "seats buy"; gap: .5rem .6rem; padding: .9rem .9rem .7rem; align-items: start; }
  .sf-card-main .sf-card-air { grid-area: air; }
  .sf-card-main .sf-card-legs { grid-area: legs; }
  .sf-card-main .sf-seats { grid-area: seats; }
  .sf-card-main .sf-card-buy { grid-area: buy; justify-items: end; text-align: right; align-self: start; }
  .sf-card-air img, .sf-card-code { width: 48px; height: 48px; border: 1px solid var(--sf-line); border-radius: 10px; padding: 5px; background: #fff; }
  .sf-card-air b { font-size: .9rem; }
  .sf-card-air span { font-size: .8rem; }
  .sf-card-leg { grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem; }
  .sf-card-leg .sf-t { text-align: left; }
  .sf-card-leg .sf-t:last-child { text-align: right; }
  .sf-card-leg .sf-t span, .sf-card-leg .sf-t small { display: none; }
  .sf-card-leg .sf-t small.sf-next { display: block; font-size: 0; }
  .sf-card-leg .sf-t small.sf-next::after { content: "Next Day"; font-size: .72rem; font-weight: 700; }
  .sf-card-leg .sf-t .sf-city { display: block; font-style: normal; font-size: .74rem; color: var(--sf-muted); }
  .sf-card-leg .sf-t b { font-size: 1.05rem; white-space: nowrap; }
  .sf-card-line { min-width: 3.6rem; font-size: .68rem; }
  .sf-from { font-size: .74rem; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 .2rem; }
  .sf-from b { display: inline; font-size: 1.05rem; margin-left: 0; white-space: nowrap; }
  .sf-card-buy .sf-btn { width: auto; padding: .55rem .9rem; font-size: .84rem; border-radius: 10px; }
  .sf-card-meta { justify-content: flex-end; font-size: .72rem; flex-wrap: wrap; }
  .sf-card-foot { padding: .5rem .9rem; gap: .6rem; font-size: .78rem; }
  .sf-card-foot .sf-card-craft { display: none; }
}


/* ---- The phone's "View fare" page, and the folded search box on the results page ---- */
.sf-back { display: none; }
.sf-search-summary { display: none; }
@media (max-width: 720px) {
  .sf-back { display: inline-flex !important; width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--sf-ink); margin-right: -.2rem; }
  .sf-back svg { width: 24px; height: 24px; transform: rotate(180deg); }
  /* the results page with the search folded: the summary line stands in for the hero and the card */
  html.sf-search-folded .sf-hero.is-results, html.sf-search-folded .sf-results .sf-search.is-bar { display: none; }
  .sf-search-summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .8rem; background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; padding: .7rem .9rem; }
  .sf-search-summary[hidden] { display: none; }
  .sf-search-summary-text b { display: flex; align-items: center; gap: .35rem; font-size: 1rem; color: var(--sf-ink); }
  .sf-search-summary-text b svg { width: 16px; height: 16px; }
  .sf-search-summary-text span { display: block; font-size: .78rem; color: var(--sf-muted); margin-top: .1rem; }
  .sf-search-summary .sf-btn { padding: .55rem .85rem; font-size: .82rem; white-space: nowrap; }
  .sf-search-summary .sf-btn svg { width: 15px; height: 15px; }
}

.sf-fare-page { background: var(--sf-bg); }
.sf-hero.is-fare { min-height: 0; }
.sf-hero.is-fare .sf-hero-inner { padding: 1.4rem 0 3.6rem; }
.sf-hero.is-fare .sf-h1 { font-size: 1.9rem; }
.sf-hero.is-fare .sf-lede { font-size: .95rem; margin: .2rem 0 0; }
.sf-hero.is-fare .sf-hero-script { display: block; right: 1rem; top: 1rem; font-size: 1.35rem; }
.sf-fp { position: relative; z-index: 2; margin-top: -2.6rem; padding-bottom: 6.5rem; display: grid; gap: .9rem; }
.sf-fp .sf-card { padding: 1rem 1.1rem; }
.sf-fp-air { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; margin-bottom: .8rem; }
.sf-fp-air img, .sf-fp-air .sf-card-code { width: 54px; height: 54px; border: 1px solid var(--sf-line); border-radius: 12px; padding: 6px; object-fit: contain; background: #fff; }
.sf-fp-air b { display: block; font-size: 1rem; color: var(--sf-ink); }
.sf-fp-air span { color: var(--sf-muted); font-size: .82rem; }
.sf-fp-air .sf-pill { align-self: start; font-size: .78rem; padding: .35rem .75rem; }
.sf-fp-leg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: start; }
.sf-fp-leg + .sf-fp-leg { border-top: 1px dashed var(--sf-line); margin-top: .7rem; padding-top: .7rem; }
.sf-fp-leg .sf-leg-tag { grid-column: 1 / -1; }
.sf-fp-t b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--sf-ink); line-height: 1.15; }
.sf-fp-t span { display: block; font-size: .8rem; color: var(--sf-muted); margin-top: .15rem; }
.sf-fp-t.is-end { text-align: right; }
.sf-fp-t .sf-next { display: block; font-size: .82rem; font-weight: 700; margin-top: .1rem; }
.sf-fp-line { text-align: center; color: var(--sf-muted); font-size: .8rem; padding-top: .55rem; }
.sf-fp-line i { display: block; border-top: 1px dashed var(--sf-line); position: relative; margin: 0 .2rem .6rem; }
.sf-fp-line i svg { width: 18px; height: 18px; background: #fff; padding: 0 .2rem; position: relative; top: -.6rem; color: var(--sf-text); }
.sf-fp-line span { display: block; }
.sf-fp-line .is-direct { color: #027a48; font-weight: 600; }
.sf-fp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .3rem; }
.sf-fp-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--sf-ink); white-space: nowrap; }
.sf-fp-compare { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: none; color: var(--sf-ink); font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.sf-fp-compare svg { width: 18px; height: 18px; }
.sf-fp-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; overflow: hidden; font-size: .78rem; }
.sf-fp-table th, .sf-fp-table td { padding: .5rem .55rem; border-bottom: 1px solid var(--sf-line); text-align: left; vertical-align: top; }
.sf-fp-table thead th { font-size: .74rem; color: var(--sf-muted); }
.sf-fp-table tbody th { color: var(--sf-muted); font-weight: 600; white-space: nowrap; }
.sf-fp-table td.is-no { color: #d0294a; }
.sf-fp-table td.is-yes { color: #0e8a57; }
.sf-fp-steps { list-style: none; display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 .8rem; padding: 0; }
.sf-fp-step { display: flex; align-items: center; gap: .5rem; color: var(--sf-muted); }
.sf-fp-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #f1f5f9; border: 1px solid var(--sf-line); font-weight: 800; font-size: .8rem; }
.sf-fp-step b { display: block; color: var(--sf-ink); font-size: .9rem; }
.sf-fp-step em { font-style: normal; font-size: .78rem; color: #12a66a; font-weight: 700; }
.sf-fp-step.is-on .sf-fp-step-n { background: #eef2ff; border-color: var(--sf-accent, #e11d48); color: var(--sf-accent, #e11d48); }
.sf-fp-step.is-done .sf-fp-step-n { background: #12a66a; border-color: #12a66a; color: #fff; }
.sf-fp-route { margin: 0 0 .6rem; font-size: .9rem; color: var(--sf-muted); }
.sf-fp-route b { color: var(--sf-ink); }

/* Round-trip drawer step picker (desktop store). */
.sf-fd-stepbar { list-style: none; display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0; }
.sf-fd-stepitem { display: flex; align-items: flex-start; gap: .6rem; color: var(--sf-muted); }
.sf-fd-stepn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: #f1f5f9; border: 1px solid var(--sf-line); font-weight: 800; font-size: .82rem; flex: none; }
.sf-fd-stepitem b { display: block; color: var(--sf-ink); font-size: .95rem; }
.sf-fd-stepitem em { display: block; font-style: normal; font-size: .78rem; color: var(--sf-muted); }
.sf-fd-stepchosen { color: #12a66a !important; font-weight: 700; }
.sf-fd-stepitem.is-on .sf-fd-stepn { background: #eef2ff; border-color: var(--sf-accent, #e11d48); color: var(--sf-accent, #e11d48); }
.sf-fd-stepitem.is-done .sf-fd-stepn { background: #12a66a; border-color: #12a66a; color: #fff; }
.sf-fd-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .8rem; margin-top: 1rem; padding: .9rem 0 0; border-top: 1px solid var(--sf-line); background: #fff; }
.sf-fp-fares { display: grid; gap: .8rem; }
.sf-fp-fare { position: relative; display: block; background: #fff; border: 1.5px solid var(--sf-line); border-radius: 16px; padding: 1rem 1.1rem 1rem; cursor: pointer; }
.sf-fp-fare input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-fp-fare.is-on { border-color: var(--sf-rose); background: var(--sf-rose-tint); }
.sf-fp-fare.has-badge { padding-top: 1.75rem; }
.sf-fp-badge { position: absolute; top: -.05rem; right: -.05rem; background: var(--sf-rose); color: #fff; font-size: .74rem; font-weight: 700; padding: .3rem .8rem; border-radius: 0 16px 0 12px; }
.sf-fp-fare-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; align-items: start; }
.sf-fp-fare-top > div > b { display: block; font-size: 1.25rem; font-weight: 800; color: var(--sf-ink); line-height: 1.2; }
.sf-fp-fare-top > div > small { display: block; font-size: .84rem; color: var(--sf-muted); margin-top: .15rem; }
.sf-fp-price { text-align: right; }
.sf-fp-price b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--sf-ink); white-space: nowrap; }
.sf-fp-price small { font-size: .8rem; color: var(--sf-muted); }
.sf-fp-radio { width: 24px; height: 24px; border: 2px solid #98a2b3; border-radius: 50%; display: inline-block; margin-top: .2rem; position: relative; }
.sf-fp-fare.is-on .sf-fp-radio { border-color: var(--sf-rose); }
.sf-fp-fare.is-on .sf-fp-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--sf-rose); }
.sf-fp-items { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.sf-fp-items li { display: flex; align-items: flex-start; gap: .35rem; font-size: .74rem; color: var(--sf-text); flex: 1 1 28%; min-width: 0; }
.sf-fp-items li i { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--sf-text); }
.sf-fp-items li i svg { width: 16px; height: 16px; }
.sf-fp-items li b { display: block; font-weight: 700; color: var(--sf-ink); }
.sf-fp-items li.is-yes i { color: #fff; background: #12a66a; border-radius: 50%; }
.sf-fp-items li.is-yes i svg { width: 11px; height: 11px; stroke-width: 3; }
.sf-fp-items li.is-no i { color: #d0294a; }
.sf-fp-items li.is-no i svg { transform: rotate(45deg); stroke-width: 2.4; }
.sf-fp-items li.is-seat i { color: var(--sf-text); }
.sf-fp-included h3, .sf-fp-summary h3 { margin: 0 0 .8rem; font-size: 1.1rem; font-weight: 800; color: var(--sf-ink); }
.sf-fp-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
.sf-fp-tile { text-align: center; font-size: .66rem; color: var(--sf-text); line-height: 1.2; }
.sf-fp-tile i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; margin: 0 auto .35rem; background: #f3f4f8; }
.sf-fp-tile i svg { width: 22px; height: 22px; }
.sf-fp-tile.is-rose i { background: #ffe4ea; color: #f5325b; }
.sf-fp-tile.is-violet i { background: #efe4ff; color: #7c3aed; }
.sf-fp-tile.is-blue i { background: #e4efff; color: #175cd3; }
.sf-fp-tile.is-green i { background: #dcfae6; color: #17b26a; }
.sf-fp-tile.is-sky i { background: #e0f2fe; color: #0284c7; }
.sf-fp-tile.is-orange i { background: #ffe8d9; color: #ea6b17; }
.sf-fp-fold { background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; }
.sf-fp-fold summary { list-style: none; display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem; font-weight: 800; color: var(--sf-ink); cursor: pointer; }
.sf-fp-fold summary::-webkit-details-marker { display: none; }
.sf-fp-fold summary > svg { width: 22px; height: 22px; color: var(--sf-ink); }
.sf-fp-fold summary i { margin-left: auto; display: inline-flex; color: var(--sf-muted); transition: transform .2s; }
.sf-fp-fold summary i svg { width: 18px; height: 18px; }
.sf-fp-fold[open] summary i { transform: rotate(180deg); }
.sf-fp-fold-body { padding: 0 1.1rem 1rem; font-size: .86rem; color: var(--sf-text); }
.sf-fp-summary .sf-line { font-size: .92rem; border-bottom: 0; padding: .3rem 0; }
.sf-fp-summary .sf-line svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--sf-muted); }
.sf-fp-summary .sf-line.is-total { border-top: 1px solid var(--sf-line); margin-top: .5rem; padding-top: .7rem; font-size: 1.15rem; margin-bottom: 0; }
.sf-fp-summary .sf-line.is-total small { display: block; font-size: .78rem; font-weight: 500; color: var(--sf-muted); }
.sf-fp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: #fff; border-top: 1px solid var(--sf-line); box-shadow: 0 -10px 30px rgb(20 26 43 / .08); }
.sf-fp-bar b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--sf-ink); }
.sf-fp-bar small { color: var(--sf-muted); font-size: .8rem; }
.sf-fp-bar .sf-btn { flex: 1; max-width: 460px; justify-content: center; font-size: 1.05rem; padding: .9rem 1rem; border-radius: 14px; }
.sf-fp-bar .sf-btn svg { width: 18px; height: 18px; }
@media (min-width: 721px) {
  .sf-fp { max-width: 720px; margin-left: auto; margin-right: auto; margin-top: -2.6rem; }
  .sf-fp-bar { padding-left: max(1rem, calc(50% - 360px)); padding-right: max(1rem, calc(50% - 360px)); }
}
@media (max-width: 720px) {
  .sf-fp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem .4rem; }
  .sf-fp-items li { flex-basis: 45%; }
}

/* ---------- extra services: cancel for any reason, check-in, eSIM, insurance, a tree ---------- */
.sf-svc-page { grid-template-columns: minmax(0, 1fr) 380px; }
.sf-svc-list { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.sf-svc { padding: 0; overflow: hidden; }
.sf-svc-head { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; }
.sf-svc-head::-webkit-details-marker { display: none; }
.sf-svc-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sf-rose-tint); color: var(--sf-rose); }
.sf-svc-ico svg { width: 22px; height: 22px; }
.sf-svc-ico.is-blue { background: #eef6ff; color: #1d4ed8; }
.sf-svc-ico.is-green { background: #e3f7ee; color: #0e8a57; }
.sf-svc-ico.is-teal { background: #e0f5f3; color: #0f8f85; }
.sf-svc-ico.is-violet { background: #efeafe; color: #6d3fd9; }
.sf-svc-switch { position: relative; width: 50px; height: 28px; flex: 0 0 auto; margin-right: .3rem; cursor: pointer; }
.sf-svc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-svc-switch i { position: absolute; inset: 0; border-radius: 999px; background: #cfd4de; transition: background .15s; }
.sf-svc-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s; }
.sf-svc-switch input:checked + i { background: var(--sf-rose); }
.sf-svc-switch input:checked + i::after { transform: translateX(22px); }
.sf-svc-switch input:focus-visible + i { outline: 2px solid var(--sf-rose); outline-offset: 2px; }
.sf-svc-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .8rem; }
.sf-svc-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d9dde6; }
.sf-svc-dots i.is-on { background: var(--sf-rose); }
.sf-svc-titles { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.sf-svc-titles b { font-size: 1.08rem; font-weight: 800; color: var(--sf-ink); letter-spacing: -.01em; }
.sf-svc-titles small { font-size: .82rem; color: var(--sf-muted); }
.sf-svc-chev { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--sf-line); display: inline-flex; align-items: center; justify-content: center; color: var(--sf-ink); transition: transform .2s; }
.sf-svc-chev svg { width: 16px; height: 16px; }
.sf-svc[open] > .sf-svc-head .sf-svc-chev { transform: rotate(180deg); }
.sf-svc-qty { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; color: var(--sf-text); margin-right: .4rem; }
.sf-svc-qty-label { margin-right: .3rem; }
.sf-svc-step { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sf-svc-step svg { width: 15px; height: 15px; }
.sf-svc-step.is-plus { background: var(--sf-rose-tint); border-color: #ffd1db; color: var(--sf-rose); }
.sf-svc-qty input { width: 46px; text-align: center; border: 1px solid var(--sf-line); border-radius: 8px; padding: .4rem .2rem; font-weight: 700; font-size: .92rem; color: var(--sf-ink); background: #fff; appearance: textfield; -moz-appearance: textfield; }
.sf-svc-qty input::-webkit-outer-spin-button, .sf-svc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-svc-body { padding: 0 1.1rem 1.1rem; }
.sf-svc-note { display: flex; gap: .6rem; align-items: flex-start; background: #eef6ff; border-radius: 10px; padding: .8rem .9rem; font-size: .84rem; color: var(--sf-text); margin-bottom: .9rem; }
.sf-svc-note svg { width: 18px; height: 18px; flex: 0 0 auto; color: #1d4ed8; margin-top: .05rem; }
.sf-svc-note p { margin: 0; }
.sf-svc-note a { color: var(--sf-rose); font-weight: 700; text-decoration: none; }
.sf-svc-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.sf-svc-opt { position: relative; display: flex; flex-direction: column; gap: .5rem; border: 1.5px solid var(--sf-line); border-radius: 12px; padding: 1rem .9rem .8rem; cursor: pointer; background: #fff; min-width: 0; }
.sf-svc-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-svc-opt:has(input:checked) { border-color: var(--sf-rose); background: var(--sf-rose-tint); }
.sf-svc-opt:has(input:focus-visible) { outline: 2px solid var(--sf-rose); outline-offset: 2px; }
.sf-svc-flag { position: absolute; top: -.7rem; left: .8rem; background: var(--sf-rose); color: #fff; font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: 6px; }
.sf-svc-opt-body { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.sf-svc-opt-body b { font-size: .92rem; font-weight: 800; color: var(--sf-ink); line-height: 1.25; }
.sf-svc-opt-body small { font-size: .78rem; color: var(--sf-muted); line-height: 1.35; }
.sf-svc-price { display: flex; align-items: baseline; gap: .3rem; margin-top: .3rem; }
.sf-svc-price b { font-size: 1.02rem; font-weight: 800; color: var(--sf-ink); }
.sf-svc-price small { font-size: .74rem; color: var(--sf-muted); flex: 1; }
.sf-svc-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cfd4de; align-self: center; position: relative; flex: 0 0 auto; }
.sf-svc-opt:has(input:checked) .sf-svc-dot { border-color: var(--sf-rose); background: var(--sf-rose); }
.sf-svc-opt:has(input:checked) .sf-svc-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.sf-svc-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; margin-left: auto; float: right; font-size: .86rem; font-weight: 700; color: var(--sf-rose); text-decoration: none; }
.sf-svc-more svg { width: 16px; height: 16px; }
.sf-svc-side { display: flex; flex-direction: column; gap: .8rem; position: sticky; top: 80px; }
.sf-svc-timer { display: flex; align-items: center; gap: .8rem; background: var(--sf-rose-tint); border-color: #ffd1db; }
.sf-svc-timer .sf-svc-ico { background: #fff; }
.sf-svc-timer-text { flex: 1; font-size: .86rem; color: var(--sf-text); display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.sf-svc-timer-text b { margin-left: auto; font-size: 1.05rem; color: var(--sf-rose); font-variant-numeric: tabular-nums; }
.sf-svc-bar { flex-basis: 100%; height: 4px; border-radius: 4px; background: #ffd1db; overflow: hidden; }
.sf-svc-bar i { display: block; height: 100%; background: var(--sf-rose); border-radius: 4px; transition: width 1s linear; }
.sf-svc-side-head { display: flex; justify-content: space-between; align-items: baseline; }
.sf-svc-side-head a { color: var(--sf-rose); font-weight: 700; font-size: .86rem; text-decoration: none; }
.sf-svc-slice + .sf-svc-slice { border-top: 1px solid var(--sf-line); margin-top: .8rem; padding-top: .8rem; }
.sf-svc-slice-when { font-size: .84rem; color: var(--sf-muted); margin-bottom: .6rem; }
.sf-svc-slice-when b { color: var(--sf-ink); margin-right: .6rem; }
.sf-svc-route { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: .6rem; align-items: center; }
.sf-svc-logo { width: 32px; height: 32px; border-radius: 50%; background: var(--sf-rose); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sf-svc-logo svg { width: 16px; height: 16px; }
.sf-svc-end { display: flex; flex-direction: column; line-height: 1.25; }
.sf-svc-end b { font-size: 1.02rem; font-weight: 800; color: var(--sf-ink); }
.sf-svc-end small { font-size: .74rem; color: var(--sf-muted); }
.sf-svc-end.is-to { text-align: right; }
.sf-svc-mid { display: flex; flex-direction: column; align-items: center; font-size: .72rem; color: var(--sf-muted); min-width: 70px; }
.sf-svc-mid em { font-style: normal; color: #0e8a57; font-weight: 700; }
.sf-svc-mid i { display: block; width: 100%; height: 2px; background: var(--sf-line); margin: .25rem 0; }
.sf-svc-slice-foot { display: flex; justify-content: space-between; gap: .6rem; font-size: .8rem; color: var(--sf-muted); margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--sf-line); }
.sf-svc-slice-foot svg { width: 14px; height: 14px; vertical-align: -2px; }
.sf-svc-summary .sf-line { border-bottom: 1px solid var(--sf-line); font-size: .86rem; }
.sf-svc-summary .sf-line span:first-child { color: var(--sf-muted); }
.sf-svc-summary .sf-line span:last-child { font-weight: 700; color: var(--sf-ink); font-variant-numeric: tabular-nums; }
.sf-svc-addons { margin-top: .6rem; }
.sf-svc-addons > b { display: block; font-size: .9rem; font-weight: 800; color: var(--sf-ink); padding: .4rem 0 .2rem; }
.sf-svc-summary .sf-line.is-total { background: var(--sf-bg); border-radius: 10px; padding: .8rem .9rem; margin: .8rem 0; align-items: center; }
.sf-svc-summary .sf-line.is-total span:first-child { color: var(--sf-ink); }
.sf-svc-summary .sf-line.is-total small { font-weight: 500; color: var(--sf-muted); font-size: .76rem; }
.sf-svc-continue { width: 100%; }
.sf-svc-secure { display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .8rem; color: var(--sf-text); margin: .8rem 0 .2rem; }
.sf-svc-secure svg { width: 16px; height: 16px; color: var(--sf-navy); }
.sf-svc-back { display: block; text-align: center; font-size: .82rem; color: var(--sf-muted); margin-top: .5rem; }
@media (max-width: 1000px) { .sf-svc-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sf-svc-page { grid-template-columns: 1fr; } .sf-svc-side { position: static; } }
/* Phone: the option cards in a row that scrolls sideways, the note under
   them, Continue pinned to the bottom of the screen. */
@media (max-width: 720px) {
  .sf-svc-page { padding-bottom: 5.5rem; }
  .sf-svc-head { padding: .9rem .9rem; gap: .7rem; flex-wrap: wrap; }
  .sf-svc-titles { flex: 1 1 0; min-width: 0; }
  .sf-svc-head .sf-svc-switch { order: 3; }
  .sf-svc-chev { order: 4; }
  .sf-svc-ico { width: 40px; height: 40px; }
  .sf-svc-titles b { font-size: 1rem; }
  .sf-svc-titles small { font-size: .78rem; }
  .sf-svc-chev { width: 30px; height: 30px; }
  .sf-svc-body { padding: 0 .9rem .9rem; display: flex; flex-direction: column; }
  .sf-svc-note { order: 5; margin: .9rem 0 0; background: var(--sf-bg); font-size: .8rem; }
  .sf-svc-more { order: 6; }
  .sf-svc-opts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem; padding: .6rem .1rem .2rem; margin: 0 -.1rem; scrollbar-width: none; }
  .sf-svc-opts::-webkit-scrollbar { display: none; }
  .sf-svc-opt { flex: 0 0 min(46%, 170px); scroll-snap-align: start; padding: .8rem .7rem .7rem; }
  .sf-svc-opt-body b { font-size: .86rem; }
  .sf-svc-opt-body small { font-size: .74rem; }
  .sf-svc-price { gap: .2rem; }
  .sf-svc-price b { font-size: .95rem; white-space: nowrap; }
  .sf-svc-price small { font-size: .66rem; white-space: nowrap; }
  .sf-svc-dot { width: 16px; height: 16px; }
  .sf-svc-flag { top: -.6rem; left: .6rem; font-size: .66rem; }
  .sf-svc-qty { order: 5; flex-basis: 100%; margin: .2rem 0 0; }
  .sf-svc-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 18px rgb(20 26 43 / .08); }
  .sf-svc-continue { box-shadow: none; }
}

/* ---------- seats & bags: a meal and a bag per passenger, the seat picked on the aircraft ---------- */
.sf-sb-page { grid-template-columns: minmax(0, 1fr) 380px; }
.sf-sb-main { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.sf-sb-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; }
.sf-sb-head .sf-sub { margin-top: .1rem; }
.sf-sb-form { display: flex; flex-direction: column; gap: .8rem; }
.sf-sb-pax { padding: 0; overflow: hidden; }
.sf-sb-pax-head { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; }
.sf-sb-pax-head::-webkit-details-marker { display: none; }
.sf-sb-pax[open] > .sf-sb-pax-head .sf-svc-chev { transform: rotate(180deg); }
.sf-sb-body { padding: 0 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .9rem; }
.sf-sb-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico label" "ico select" "ico hint"; gap: .3rem .9rem; align-items: center; }
.sf-sb-row .sf-svc-ico { grid-area: ico; }
.sf-sb-label { grid-area: label; font-weight: 800; font-size: .96rem; color: var(--sf-ink); }
.sf-sb-select { grid-area: select; position: relative; display: block; }
.sf-sb-select select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--sf-line); border-radius: 12px; padding: .75rem 2.6rem .75rem .9rem; font: inherit; font-size: .95rem; font-weight: 600; color: var(--sf-ink); background: #fff; }
.sf-sb-select select:focus { outline: none; border-color: var(--sf-rose); }
.sf-sb-select > svg { position: absolute; right: .9rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; color: var(--sf-ink); }
.sf-sb-hint { grid-area: hint; font-size: .8rem; color: var(--sf-muted); }
@media (min-width: 721px) {
  .sf-sb-row { grid-template-columns: auto 15rem minmax(0, 1fr); grid-template-areas: "ico label select" "ico hint hint"; }
  .sf-sb-hint { grid-column: 3; }
}
.sf-sb-seatbox { border: 1px solid var(--sf-line); border-radius: 14px; padding: 1rem; background: var(--sf-bg); }
.sf-sb-seathead { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.sf-sb-seathead .sf-svc-titles small em { font-style: normal; font-weight: 700; color: var(--sf-rose); }
.sf-sb-route { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.sf-sb-route b { font-size: 1rem; color: var(--sf-ink); }
.sf-sb-route small { font-size: .78rem; color: var(--sf-muted); }
.sf-sb-legend { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; align-items: center; margin: 1rem 0 .8rem; }
.sf-sb-key { display: inline-flex; align-items: center; gap: .55rem; }
.sf-sb-key i { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.sf-sb-key i.is-free { background: #2bbf7a; }
.sf-sb-key i.is-paid { background: #f7a24a; }
.sf-sb-key i.is-on { background: var(--sf-rose); }
.sf-sb-key i.is-off { background: #cfd4de; }
.sf-sb-key b, .sf-sb-chip b, .sf-sb-comfort b { display: block; font-size: .84rem; color: var(--sf-ink); }
.sf-sb-key small, .sf-sb-chip small, .sf-sb-comfort small { display: block; font-size: .72rem; color: var(--sf-muted); }
.sf-sb-comfort { margin-left: auto; display: inline-flex; align-items: center; gap: .6rem; background: var(--sf-rose-tint); border-radius: 12px; padding: .6rem .9rem; max-width: 22rem; }
.sf-sb-comfort svg { width: 22px; height: 22px; color: var(--sf-rose); flex: none; }
.sf-sb-comfort b { color: var(--sf-rose); }
.sf-plane-wrap { overflow-x: auto; padding: 1.4rem .2rem .4rem; scrollbar-width: thin; }
.sf-plane { display: flex; align-items: stretch; width: max-content; min-width: 100%; position: relative; }
.sf-plane-nose, .sf-plane-tail { flex: none; width: 90px; background: linear-gradient(90deg, #e3e6ee, #eef0f5); position: relative; }
.sf-plane-nose { border-radius: 100% 0 0 100% / 50% 0 0 50%; }
.sf-plane-tail { border-radius: 0 100% 100% 0 / 0 50% 50% 0; background: linear-gradient(90deg, #eef0f5, #e3e6ee); width: 110px; }
.sf-plane-nose::after { content: ""; position: absolute; left: 26px; top: 18%; bottom: 18%; width: 22px; border-radius: 50%; border: 3px solid #cfd4de; border-right-color: transparent; }
.sf-plane-cabin { background: #eef0f5; padding: .6rem 1rem; flex: 1 0 auto; }
.sf-plane-grid { display: grid; grid-template-columns: 1.4rem repeat(var(--rows), 40px) 1.4rem; grid-auto-rows: 40px; gap: 4px; align-items: center; justify-items: center; }
.sf-plane-no, .sf-plane-letter { font-size: .72rem; font-weight: 800; color: var(--sf-muted); }
.sf-plane-aisle { height: 16px; }
.sf-seat { position: relative; width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .12s; }
.sf-seat svg { width: 20px; height: 20px; }
.sf-seat input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-seat.is-free { background: #d5f4e4; color: #12a66a; }
.sf-seat.is-paid { background: #ffe5c7; color: #e9821f; }
.sf-seat.is-off { background: #e1e4ea; color: #9aa3b2; cursor: not-allowed; }
.sf-seat.is-gap { visibility: hidden; }
.sf-seat.is-free:hover, .sf-seat.is-paid:hover { transform: translateY(-2px); }
.sf-seat:has(input:checked) { background: var(--sf-rose); color: #fff; box-shadow: 0 6px 14px rgb(245 50 91 / .35); }
.sf-seat:has(input:focus-visible) { outline: 2px solid var(--sf-rose); outline-offset: 2px; }
.sf-seat:has(input:checked)::after { content: attr(data-label); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #fff; color: var(--sf-rose); font-size: .74rem; font-weight: 800; padding: .3rem .6rem; border-radius: 8px; border: 1px solid #ffd1db; box-shadow: 0 6px 16px rgb(20 26 43 / .12); z-index: 3; }
.sf-seat:has(input:checked)::before { content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: #fff; border-right: 1px solid #ffd1db; border-bottom: 1px solid #ffd1db; z-index: 4; }
.sf-plane-ends { display: flex; justify-content: space-between; font-size: .84rem; font-weight: 700; color: var(--sf-muted); padding: .6rem .2rem 0; }
.sf-sb-foot { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin-top: .8rem; }
.sf-sb-chip { display: inline-flex; align-items: center; gap: .55rem; }
.sf-sb-chip i { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--sf-line); display: inline-flex; align-items: center; justify-content: center; color: var(--sf-navy); flex: none; }
.sf-sb-chip i svg { width: 18px; height: 18px; }
.sf-sb-note { margin-left: auto; display: inline-flex; align-items: flex-start; gap: .5rem; background: #eef6ff; border-radius: 12px; padding: .7rem .9rem; font-size: .8rem; color: var(--sf-text); max-width: 26rem; }
.sf-sb-note svg { width: 18px; height: 18px; color: #1d4ed8; flex: none; }
.sf-sb-note .sf-link { font-size: .8rem; }
.sf-sb-side { position: sticky; top: 80px; }
.sf-sb-trip-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.sf-sb-trip-head b { font-size: 1.15rem; }
.sf-sb-slice { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--sf-line); border-radius: 12px; padding: .8rem .9rem; margin-bottom: .7rem; }
.sf-sb-logo { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--sf-line); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: var(--sf-muted); overflow: hidden; background: #fff; }
.sf-sb-logo img { width: 34px; height: 34px; object-fit: contain; }
.sf-sb-slice-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1; font-size: .84rem; color: var(--sf-text); }
.sf-sb-slice-top { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.sf-sb-slice-top b { font-size: 1rem; color: var(--sf-ink); }
.sf-sb-slice-top small { font-size: .76rem; color: var(--sf-muted); }
.sf-sb-slice-line b { color: var(--sf-ink); }
.sf-sb-slice-meta { text-align: right; color: var(--sf-muted); font-size: .76rem; }
.sf-sb-trip .sf-line.is-total { margin-top: .4rem; }
.sf-sb-promo { display: flex; gap: .7rem; align-items: flex-start; background: var(--sf-rose-tint); border-radius: 12px; padding: .9rem 1rem; margin-top: 1rem; }
.sf-sb-promo svg { width: 24px; height: 24px; color: var(--sf-rose); flex: none; }
.sf-sb-promo b { display: block; color: var(--sf-rose); font-size: .95rem; }
.sf-sb-promo small { display: block; font-size: .8rem; color: var(--sf-text); margin-top: .15rem; }
@media (max-width: 860px) { .sf-sb-page { grid-template-columns: 1fr; } .sf-sb-side { position: static; } }
@media (max-width: 720px) {
  .sf-sb-head { padding: .9rem; }
  .sf-sb-pax-head { padding: .9rem; }
  .sf-sb-body { padding: 0 .9rem .9rem; }
  .sf-sb-seatbox { padding: .8rem; }
  .sf-sb-legend { gap: .6rem .9rem; }
  .sf-sb-comfort { margin-left: 0; }
  .sf-sb-seathead .sf-svc-titles { flex: 1 1 0; }
  .sf-sb-route { flex-basis: 100%; margin-left: 0; flex-direction: row; align-items: baseline; gap: .5rem; text-align: left; padding-left: 3.4rem; }
  .sf-sb-note { margin-left: 0; }
  .sf-plane-nose, .sf-plane-tail { width: 56px; }
  .sf-plane-grid { grid-template-columns: 1.2rem repeat(var(--rows), 36px) 1.2rem; grid-auto-rows: 36px; }
  .sf-seat { width: 32px; height: 32px; }
  .sf-sb-slice-meta { text-align: left; }
}

/* ---------- review: the flights, the people, the extras, then the money ---------- */
.sf-rv-page { grid-template-columns: minmax(0, 1fr) 380px; }
.sf-rv-main { padding: 1.3rem 1.4rem 1.4rem; }
.sf-rv-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.sf-rv-head .sf-sub { margin-top: .1rem; }
.sf-rv-head.is-tight { margin-bottom: .8rem; }
.sf-rv-head.is-tight .sf-h3 { margin: 0; font-size: 1.15rem; }
.sf-rv-sec { display: flex; align-items: center; gap: .7rem; margin: 1.4rem 0 .7rem; }
.sf-rv-sec h2 { font-size: 1.02rem; font-weight: 800; margin: 0; color: var(--sf-ink); }
.sf-rv-sec-ico { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sf-rose-tint); color: var(--sf-rose); flex: none; }
.sf-rv-sec-ico.is-blue { background: #eef6ff; color: #1d4ed8; }
.sf-rv-sec-ico svg { width: 17px; height: 17px; }
.sf-rv-change { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--sf-line); border-radius: 10px; padding: .5rem .85rem; font-size: .82rem; font-weight: 700; color: var(--sf-ink); text-decoration: none; background: #fff; }
.sf-rv-change svg { width: 15px; height: 15px; }
.sf-rv-change:hover { border-color: var(--sf-rose); color: var(--sf-rose); }
.sf-rv-flight { display: grid; grid-template-columns: auto minmax(0, 1.2fr) auto minmax(0, 1fr); gap: .9rem; align-items: center; border: 1px solid var(--sf-line); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .6rem; font-size: .84rem; color: var(--sf-muted); }
.sf-rv-flight-route { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sf-rv-flight-route b { font-size: 1rem; color: var(--sf-ink); }
.sf-rv-flight-times { display: inline-flex; align-items: center; gap: .9rem; }
.sf-rv-flight-times > span { display: flex; flex-direction: column; }
.sf-rv-flight-times b { font-size: 1rem; color: var(--sf-ink); }
.sf-rv-flight-times svg { width: 18px; height: 18px; color: var(--sf-faint); }
.sf-rv-flight-meta { display: flex; flex-direction: column; text-align: right; gap: .15rem; }
.sf-rv-table { border: 1px solid var(--sf-line); border-radius: 12px; overflow: hidden; }
.sf-rv-pax, .sf-rv-line { display: grid; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; font-size: .88rem; color: var(--sf-text); }
.sf-rv-pax + .sf-rv-pax, .sf-rv-line + .sf-rv-line { border-top: 1px solid var(--sf-line); }
.sf-rv-pax { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.sf-rv-pax b { color: var(--sf-ink); text-transform: uppercase; }
.sf-rv-line { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.sf-rv-line .sf-svc-ico { width: 36px; height: 36px; }
.sf-rv-line .sf-svc-ico svg { width: 17px; height: 17px; }
.sf-rv-line > b { color: var(--sf-ink); }
.sf-rv-line > span { font-size: .84rem; color: var(--sf-muted); }
.sf-rv-price { text-align: right; white-space: nowrap; color: var(--sf-ink); }
.sf-rv-contact { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .88rem; color: var(--sf-text); margin: .7rem 0 0 .2rem; }
.sf-rv-contact span { display: inline-flex; align-items: center; gap: .45rem; }
.sf-rv-contact svg { width: 16px; height: 16px; color: var(--sf-muted); }
.sf-rv-actions { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--sf-line); }
.sf-rv-note { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--sf-muted); margin-top: .8rem; }
.sf-rv-note svg { width: 16px; height: 16px; }
.sf-rv-side { position: sticky; top: 80px; }
.sf-rv-side .sf-line { border-bottom: 1px dashed var(--sf-line); font-size: .9rem; }
.sf-rv-side .sf-line span:last-child { font-weight: 700; color: var(--sf-ink); white-space: nowrap; }
.sf-rv-side .sf-line.sf-rv-total { background: var(--sf-rose-tint); border-radius: 12px; padding: .9rem 1rem; margin: .9rem 0 0; font-size: 1.15rem; }
.sf-rv-side .sf-line.sf-rv-total span:last-child { color: var(--sf-rose); }
.sf-rv-secure { display: flex; gap: .7rem; align-items: flex-start; background: var(--sf-rose-tint); border-radius: 12px; padding: .9rem 1rem; margin-top: 1rem; }
.sf-rv-secure svg { width: 22px; height: 22px; color: var(--sf-rose); flex: none; }
.sf-rv-secure b { display: block; color: var(--sf-rose); font-size: .92rem; }
.sf-rv-secure small { display: block; font-size: .8rem; color: var(--sf-text); margin-top: .15rem; }
@media (max-width: 860px) { .sf-rv-page { grid-template-columns: 1fr; } .sf-rv-side { position: static; } }
@media (max-width: 720px) {
  .sf-rv-main { padding: 1rem .9rem 1.1rem; }
  .sf-rv-flight { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo route" "times times" "meta meta"; gap: .5rem .8rem; }
  .sf-rv-flight .sf-sb-logo { grid-area: logo; }
  .sf-rv-flight-route { grid-area: route; }
  .sf-rv-flight-times { grid-area: times; }
  .sf-rv-flight-meta { grid-area: meta; text-align: left; flex-direction: row; flex-wrap: wrap; gap: .2rem .8rem; }
  .sf-rv-pax { grid-template-columns: 1fr 1fr; }
  .sf-rv-pax b { grid-column: 1 / -1; }
  .sf-rv-line { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico label price" "ico detail detail"; gap: .3rem .7rem; }
  .sf-rv-line .sf-svc-ico { grid-area: ico; }
  .sf-rv-line > b:not(.sf-rv-price) { grid-area: label; }
  .sf-rv-line > span { grid-area: detail; }
  .sf-rv-line .sf-rv-price { grid-area: price; }
  .sf-rv-sec { flex-wrap: wrap; }
  .sf-rv-change { margin-left: auto; padding: .4rem .7rem; font-size: .78rem; }
  .sf-rv-actions .sf-btn { width: 100%; }
  .sf-rv-actions form { width: 100%; }
}

/* ---------- "Continue with Google" under a sign-in form ---------- */
.sf-or { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 .8rem; font-size: .78rem; color: var(--sf-faint); text-transform: uppercase; letter-spacing: .08em; }
.sf-or::before, .sf-or::after { content: ""; flex: 1; border-top: 1px solid var(--sf-line); }
.sf-google { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; border: 1px solid var(--sf-line); border-radius: 12px; padding: .7rem 1rem; font-weight: 700; font-size: .92rem; color: var(--sf-ink); background: #fff; text-decoration: none; }
.sf-google:hover { border-color: #cfd4de; background: var(--sf-bg); }
.sf-google svg { width: 20px; height: 20px; }

/* ---------- sign in: the two-panel card, a page on a phone and a pop-up on a desk ---------- */
.sf-auth-page { display: flex; justify-content: center; padding: .5rem 0 1.5rem; }
.sf-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); width: min(1080px, 100%); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgb(20 26 43 / .14); min-height: 640px; }
.sf-auth-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2.2rem 2rem 1.6rem; color: var(--sf-ink); background: linear-gradient(180deg, #fff6f8 0%, #eef3fb 100%); overflow: hidden; }
.sf-auth-side::before { content: ""; position: absolute; inset: 0; background: var(--sf-auth-photo, none) center 65% / cover no-repeat; opacity: .95; -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0) 50%, #000 74%); mask-image: linear-gradient(180deg, rgb(0 0 0 / 0) 50%, #000 74%); }
.sf-auth-side-top { position: relative; z-index: 1; }
.sf-auth-brand { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.5rem; font-weight: 800; color: var(--sf-ink); text-decoration: none; }
.sf-auth-brand img { height: 40px; }
.sf-auth-brand .sf-logo-mark { width: 30px; height: 30px; }
.sf-auth-brand .sf-logo-mark svg { width: 28px; height: 28px; }
.sf-auth-tagline { display: block; font-size: .76rem; color: var(--sf-muted); margin: .1rem 0 1.6rem; }
.sf-auth-title { font-size: 2.3rem; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .7rem; text-wrap: balance; }
.sf-auth-title span { color: var(--sf-rose); }
.sf-auth-lede { font-size: .98rem; color: var(--sf-text); margin: 0 0 1.4rem; max-width: 30ch; }
.sf-auth-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.sf-auth-benefits li { display: flex; align-items: center; gap: .8rem; }
.sf-auth-benefits .sf-svc-ico { width: 44px; height: 44px; background: #fff; box-shadow: 0 4px 12px rgb(20 26 43 / .06); }
.sf-auth-benefits b { display: block; font-size: .95rem; }
.sf-auth-benefits small { display: block; font-size: .8rem; color: var(--sf-muted); }
.sf-auth-quote { position: relative; z-index: 1; margin: 2rem 0 0; background: rgb(255 255 255 / .82); backdrop-filter: blur(8px); border-radius: 16px; padding: 1rem 1.2rem 1rem 2.6rem; font-size: .9rem; color: var(--sf-ink); }
.sf-auth-quote-mark { position: absolute; left: .9rem; top: .4rem; font-size: 2.4rem; line-height: 1; color: #cfd4de; font-family: Georgia, serif; }
.sf-auth-quote p { margin: 0 0 .3rem; font-weight: 600; }
.sf-auth-quote cite { font-style: normal; font-size: .8rem; color: var(--sf-muted); }
.sf-auth-main { padding: 1.6rem 3rem 2.2rem; display: flex; flex-direction: column; }
.sf-auth-top { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-bottom: 2.4rem; font-size: .88rem; font-weight: 600; }
.sf-auth-top a { display: inline-flex; align-items: center; gap: .4rem; color: var(--sf-text); text-decoration: none; }
.sf-auth-top svg { width: 18px; height: 18px; }
.sf-auth-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sf-line); background: #fff; color: var(--sf-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sf-auth-close svg { width: 18px; height: 18px; }
.sf-auth-h { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem; color: var(--sf-ink); }
.sf-auth-sub { color: var(--sf-text); margin: 0 0 1.4rem; font-size: .98rem; }
.sf-auth-notice { margin-bottom: 1rem; padding: .8rem 1rem; font-size: .88rem; }
.sf-google.is-lg { padding: .95rem 1rem; font-size: 1rem; }
.sf-auth-main .sf-or { margin: 1.1rem 0 1rem; }
.sf-auth-form { display: flex; flex-direction: column; gap: .9rem; }
.sf-auth-field { display: flex; flex-direction: column; gap: .4rem; font-size: .92rem; font-weight: 700; color: var(--sf-ink); }
.sf-auth-field > span:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.sf-auth-field > span:first-child a { font-size: .86rem; color: var(--sf-rose); text-decoration: none; }
.sf-auth-input { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--sf-line); border-radius: 12px; padding: 0 .9rem; background: #fff; }
.sf-auth-input:focus-within { border-color: var(--sf-rose); box-shadow: 0 0 0 3px var(--sf-rose-soft); }
.sf-auth-input > svg { width: 20px; height: 20px; color: var(--sf-faint); flex: none; }
.sf-auth-input input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .9rem 0; font: inherit; font-weight: 500; color: var(--sf-ink); outline: none; }
.sf-auth-input input::placeholder { color: var(--sf-faint); font-weight: 500; }
.sf-auth-eye { border: 0; background: none; color: var(--sf-muted); cursor: pointer; display: inline-flex; padding: .2rem; }
.sf-auth-eye svg { width: 20px; height: 20px; }
.sf-auth-check { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--sf-text); cursor: pointer; }
.sf-auth-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-auth-check i { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #cfd4de; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sf-auth-check input:checked + i { background: var(--sf-rose); border-color: var(--sf-rose); }
.sf-auth-check input:checked + i::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.sf-auth-check input:focus-visible + i { outline: 2px solid var(--sf-rose); outline-offset: 2px; }
.sf-auth-form .sf-btn { width: 100%; margin-top: .3rem; padding: 1rem; font-size: 1.05rem; }
.sf-auth-fine { font-size: .8rem; color: var(--sf-muted); text-align: center; }
.sf-auth-alt { text-align: center; font-size: .92rem; color: var(--sf-text); margin: 1.2rem 0 0; }
.sf-auth-alt a, .sf-auth-alt .sf-link { color: var(--sf-rose); font-weight: 700; text-decoration: none; font-size: inherit; }
.sf-auth-alt.is-quiet { margin-top: .5rem; font-size: .82rem; }
.sf-auth-alt.is-quiet a { color: var(--sf-muted); font-weight: 600; }
.sf-auth-trust { margin-top: auto; padding-top: 1.8rem; }
.sf-auth-trust { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--sf-bg); border-radius: 14px; padding: 1rem .6rem; margin-top: 2rem; }
.sf-auth-trust span { display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: .8rem; color: var(--sf-text); text-align: center; }
.sf-auth-trust span + span { border-left: 1px solid var(--sf-line); }
.sf-auth-trust svg { width: 24px; height: 24px; color: #1d4ed8; }
.sf-auth-trust .is-green svg { color: #12a66a; }
.sf-auth-trust b { font-weight: 700; }
/* the pop-up */
.sf-auth-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.sf-auth-backdrop { position: absolute; inset: 0; background: rgb(20 26 43 / .55); backdrop-filter: blur(3px); }
.sf-auth-dialog { position: relative; width: min(1080px, 100%); max-height: calc(100vh - 3rem); overflow: auto; border-radius: 22px; }
.sf-auth-dialog .sf-auth { min-height: 0; }
body.sf-auth-open { overflow: hidden; }
/* the account menu under the avatar */
.sf-me { position: relative; }
.sf-me-btn { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--sf-line); background: #fff; border-radius: 999px; padding: .25rem .7rem .25rem .25rem; font: inherit; font-weight: 700; font-size: .88rem; color: var(--sf-ink); cursor: pointer; }
.sf-me-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sf-rose); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.sf-me-btn .chev { width: 12px; height: 12px; }
.sf-me-menu { display: none; position: absolute; right: 0; top: calc(100% + .5rem); width: 240px; background: #fff; border: 1px solid var(--sf-line); border-radius: 14px; box-shadow: 0 18px 40px rgb(20 26 43 / .14); padding: .5rem; z-index: 40; }
.sf-me.is-open .sf-me-menu { display: block; }
.sf-me-head { padding: .6rem .8rem .7rem; border-bottom: 1px solid var(--sf-line); margin-bottom: .4rem; }
.sf-me-head b { display: block; font-size: .92rem; color: var(--sf-ink); }
.sf-me-head small { display: block; font-size: .76rem; color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; }
.sf-me-menu a, .sf-me-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .8rem; border: 0; background: none; border-radius: 10px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--sf-text); text-decoration: none; cursor: pointer; text-align: left; }
.sf-me-menu a:hover, .sf-me-menu button:hover { background: var(--sf-bg); color: var(--sf-ink); }
.sf-me-menu svg { width: 18px; height: 18px; color: var(--sf-muted); }
.sf-me-menu form { margin: .3rem 0 0; padding-top: .3rem; border-top: 1px solid var(--sf-line); }
.sf-me-menu form button { color: #b3213f; }
.sf-me-menu form button svg { color: #b3213f; }
@media (max-width: 860px) {
  .sf-auth { grid-template-columns: 1fr; box-shadow: none; border-radius: 16px; min-height: 0; }
  .sf-auth-side { order: 2; padding: 1.6rem 1.2rem 1.4rem; min-height: 520px; }
  .sf-auth-side::before { -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0) 58%, #000 78%); mask-image: linear-gradient(180deg, rgb(0 0 0 / 0) 58%, #000 78%); }
  .sf-auth-main { padding: 1.2rem 1.2rem 1.6rem; }
  .sf-auth-top { margin-bottom: 1.4rem; }
  .sf-auth-h { font-size: 1.6rem; }
  .sf-auth-title { font-size: 1.9rem; }
  .sf-auth-page { padding: 0; }
  .sf-me-btn { padding: .15rem; border: 0; }
}

/* ---------- the account: menu on the left, the page's cards on the right ---------- */
.sf-acc { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.sf-acc-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 80px; }
.sf-acc-card { padding: 1rem; }
.sf-acc-who { display: flex; align-items: center; gap: .9rem; padding: .4rem .4rem 1rem; }
.sf-acc-avatar { width: 62px; height: 62px; border-radius: 50%; background: #e7edf9; color: #6f86b8; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sf-acc-avatar svg { width: 34px; height: 34px; }
.sf-acc-who b { display: block; font-size: 1.1rem; color: var(--sf-ink); }
.sf-acc-who small { display: block; font-size: .84rem; color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; }
.sf-acc-menu { display: flex; flex-direction: column; gap: .4rem; }
.sf-acc-item { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--sf-line); border-radius: 12px; padding: .7rem .8rem; text-decoration: none; color: var(--sf-ink); background: #fff; }
.sf-acc-item:hover { border-color: #cfd4de; }
.sf-acc-item.is-on { background: var(--sf-rose-tint); border-color: #ffd1db; }
.sf-acc-item.is-on b { color: var(--sf-rose); }
.sf-acc-item.is-on > svg { color: var(--sf-rose); }
.sf-acc-item.is-soon { cursor: default; opacity: .8; }
.sf-acc-item em { font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-faint); border: 1px solid var(--sf-line); border-radius: 999px; padding: .15rem .45rem; }
.sf-acc-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #eef3fb; color: #2f6fed; flex: none; }
.sf-acc-ico.is-rose { background: var(--sf-rose-tint); color: var(--sf-rose); }
.sf-acc-ico.is-amber { background: #fff4d6; color: #e9a400; }
.sf-acc-ico svg { width: 20px; height: 20px; }
.sf-acc-text { flex: 1; min-width: 0; }
.sf-acc-text b { display: block; font-size: .94rem; font-weight: 700; }
.sf-acc-text small { display: block; font-size: .74rem; color: var(--sf-muted); }
.sf-acc-item > svg { width: 16px; height: 16px; color: var(--sf-faint); flex: none; }
.sf-acc-promo { position: relative; min-height: 150px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #eef3fb 100%); }
.sf-acc-script { position: absolute; left: 1.2rem; top: 1.1rem; font-family: "Brush Script MT", "Segoe Script", "Comic Sans MS", cursive; font-size: 1.15rem; line-height: 1.2; color: var(--sf-navy); transform: rotate(-6deg); }
.sf-acc-script::after { content: ""; position: absolute; left: 0; right: 20%; bottom: -.45rem; height: 3px; background: var(--sf-rose); border-radius: 3px; transform: rotate(-2deg); }
.sf-acc-promo > svg { position: absolute; right: 1rem; bottom: .6rem; width: 120px; height: 120px; color: #b9c6e6; transform: rotate(-12deg); }
.sf-acc-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sf-pf-card { padding: 1.3rem 1.4rem 1.4rem; }
.sf-pf-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.sf-pf-head h1, .sf-pf-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: var(--sf-ink); }
.sf-pf-head small { display: block; font-size: .88rem; color: var(--sf-muted); }
.sf-pf-ico { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sf-rose-tint); color: var(--sf-rose); flex: none; }
.sf-pf-ico.is-blue { background: #eef3fb; color: #2f6fed; }
.sf-pf-ico svg { width: 24px; height: 24px; }
.sf-pf-box { border: 1px solid var(--sf-line); border-radius: 14px; padding: 1rem 1.2rem; background: #fafbfe; }
.sf-pf-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sf-pf-row.is-name .sf-pf-val b { font-size: 1.25rem; }
.sf-pf-val { min-width: 0; flex: 1; }
.sf-pf-val b { display: block; font-size: 1rem; color: var(--sf-ink); overflow-wrap: anywhere; }
.sf-pf-val small { display: block; font-size: .84rem; color: var(--sf-muted); }
.sf-pf-update { flex: none; background: var(--sf-rose-tint); color: var(--sf-rose); font-size: .86rem; font-weight: 700; padding: .5rem 1rem; border-radius: 10px; text-decoration: none; }
.sf-pf-update:hover { background: #ffd1db; }
.sf-pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; }
.sf-pf-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; border: 1px solid var(--sf-line); border-radius: 14px; padding: .9rem 1rem; background: #fafbfe; }
.sf-pf-tile-ico { width: 44px; height: 44px; border-radius: 50%; background: #e7edf9; color: #2f6fed; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sf-pf-tile-ico svg { width: 20px; height: 20px; }
.sf-pf-tile .sf-pf-val small { order: -1; }
.sf-pf-form { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; padding-top: .9rem; border-top: 1px dashed var(--sf-line); }
.sf-pf-form.is-danger { border-top: 0; padding: 1rem; border: 1px solid #ffd1db; border-radius: 12px; background: #fff; max-width: 420px; }
.sf-pf-form-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.sf-pf-delete { padding: .4rem .4rem 1rem; }
.sf-pf-delete-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--sf-rose); font-weight: 700; text-decoration: none; }
.sf-pf-delete-link svg { width: 18px; height: 18px; }
.sf-pf-delete small { display: block; font-size: .8rem; color: var(--sf-muted); margin: .25rem 0 0 1.6rem; }
@media (max-width: 960px) { .sf-acc { grid-template-columns: 1fr; } .sf-acc-side { position: static; order: 2; } .sf-pf-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .sf-pf-card { padding: 1rem .9rem; } .sf-acc-card { padding: .8rem; } }

/* ---------- my bookings: the four figures, the tabs and filters, one row per trip ---------- */
.sf-bk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.sf-bk-stat { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--sf-line); border-radius: 14px; padding: .9rem 1rem; text-decoration: none; color: var(--sf-ink); background: #fafbfe; }
.sf-bk-stat:hover { border-color: #cfd4de; }
.sf-bk-stat > span:nth-child(2) { flex: 1; }
.sf-bk-stat b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.sf-bk-stat > span:nth-child(2) { min-width: 0; }
.sf-bk-stat small { display: block; font-size: .8rem; color: var(--sf-muted); }
.sf-bk-stat > svg { width: 16px; height: 16px; color: var(--sf-faint); }
.sf-bk-stat-ico { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: #e7edf9; color: #2f6fed; }
.sf-bk-stat-ico.is-green { background: #e3f7ee; color: #12a66a; }
.sf-bk-stat-ico.is-rose { background: var(--sf-rose-tint); color: var(--sf-rose); }
.sf-bk-stat-ico svg { width: 22px; height: 22px; }
.sf-bk-list { padding-top: .4rem; }
.sf-bk-tabs { display: flex; gap: .2rem; overflow-x: auto; border-bottom: 1px solid var(--sf-line); margin: 0 0 1rem; scrollbar-width: none; }
.sf-bk-tabs::-webkit-scrollbar { display: none; }
.sf-bk-tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .9rem 1rem; font-size: .9rem; font-weight: 600; color: var(--sf-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sf-bk-tabs a svg { width: 17px; height: 17px; }
.sf-bk-tabs a.is-on { color: var(--sf-rose); border-bottom-color: var(--sf-rose); }
.sf-bk-filters { display: grid; grid-template-columns: 160px 160px 200px minmax(0, 1fr) auto; gap: .7rem; align-items: end; margin-bottom: 1rem; }
.sf-bk-filter { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--sf-muted); }
.sf-bk-filter .sf-sb-select select { padding: .65rem 2.2rem .65rem .8rem; font-size: .9rem; border-radius: 10px; }
.sf-bk-filter .sf-sb-select select.has-ico { padding-left: 2.3rem; }
.sf-bk-filter .sf-sb-select > svg:first-child:not(:last-child) { right: auto; left: .8rem; color: var(--sf-muted); }
.sf-bk-search { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--sf-line); border-radius: 10px; padding: 0 .8rem; background: #fff; }
.sf-bk-search svg { width: 18px; height: 18px; color: var(--sf-faint); flex: none; }
.sf-bk-search input { flex: 1; min-width: 0; border: 0; background: none; padding: .7rem 0; font: inherit; font-size: .9rem; outline: none; }
.sf-bk-filters .sf-btn { padding: .72rem 1.4rem; }
.sf-bk-empty { color: var(--sf-muted); padding: 1.5rem 0; text-align: center; }
.sf-bk-rows { display: flex; flex-direction: column; gap: .7rem; }
.sf-bk-row { display: grid; grid-template-columns: 76px auto minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .9fr) auto; gap: .8rem; align-items: center; border: 1px solid var(--sf-line); border-radius: 14px; padding: .8rem .9rem; }
.sf-bk-photo { width: 76px; height: 76px; border-radius: 10px; background: linear-gradient(135deg, #dfe7f7, #c7d3ee) center / cover no-repeat; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #4b62a3; }
.sf-bk-kind { display: inline-flex; align-items: center; gap: .35rem; background: #e7edf9; color: #2f6fed; font-size: .8rem; font-weight: 700; padding: .4rem .7rem; border-radius: 10px; white-space: nowrap; }
.sf-bk-kind svg { width: 16px; height: 16px; }
.sf-bk-cell { display: flex; flex-direction: column; gap: .15rem; min-width: 0; font-size: .84rem; color: var(--sf-text); }
.sf-bk-cell small { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--sf-muted); }
.sf-bk-cell small svg { width: 14px; height: 14px; }
.sf-bk-cell b { font-size: .95rem; color: var(--sf-ink); }
.sf-bk-cell em { font-style: normal; font-size: .76rem; color: var(--sf-muted); }
.sf-bk-cell.is-ref b { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; color: #2f6fed; }
.sf-bk-cell.is-ref b em { color: var(--sf-ink); }
.sf-bk-copy { border: 0; background: none; padding: 0; color: var(--sf-faint); cursor: pointer; display: inline-flex; }
.sf-bk-copy svg { width: 14px; height: 14px; }
.sf-bk-copy.is-done { color: #12a66a; }
.sf-bk-route { display: flex; align-items: center; gap: .5rem; margin-top: .1rem; }
.sf-bk-route > span { display: flex; flex-direction: column; line-height: 1.15; }
.sf-bk-route b { font-size: 1rem; color: var(--sf-ink); }
.sf-bk-route small { font-size: .72rem; color: var(--sf-muted); }
.sf-bk-route > svg { width: 18px; height: 18px; color: var(--sf-faint); }
.sf-bk-cell.is-air { flex-direction: row; align-items: center; gap: .6rem; }
.sf-bk-cell.is-air img { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--sf-line); border-radius: 8px; padding: 3px; background: #fff; }
.sf-bk-air-code { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--sf-line); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: .72rem; font-weight: 800; color: var(--sf-muted); }
.sf-bk-cell.is-air b { font-size: .88rem; display: block; }
.sf-bk-cell.is-air small { display: block; }
.sf-bk-status { display: inline-flex; align-items: center; gap: .35rem; font-style: normal; font-size: .82rem; font-weight: 700; padding: .35rem .7rem; border-radius: 8px; background: var(--sf-bg); color: var(--sf-text); width: max-content; }
.sf-bk-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sf-bk-status.is-upcoming { background: #e3f7ee; color: #0e8a57; }
.sf-bk-status.is-completed { background: #e3f7ee; color: #0e8a57; }
.sf-bk-status.is-cancelled { background: #fff1f4; color: #b3213f; }
.sf-bk-status.is-held { background: #fff7e6; color: #8a4b00; }
.sf-bk-amount { font-size: 1rem !important; font-weight: 800; }
.sf-bk-actions { display: flex; flex-direction: column; gap: .45rem; }
.sf-bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 10px; padding: .5rem .9rem; font-size: .84rem; font-weight: 700; text-decoration: none; background: #e7edf9; color: #2f6fed; white-space: nowrap; }
.sf-bk-btn.is-primary { background: var(--sf-rose-tint); color: var(--sf-rose); }
.sf-bk-btn svg { width: 15px; height: 15px; }
.sf-bk-help { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; }
.sf-bk-help > span:nth-child(2) { flex: 1; }
.sf-bk-help b { display: block; font-size: .98rem; color: var(--sf-ink); }
.sf-bk-help small { display: block; font-size: .82rem; color: var(--sf-muted); }
/* The account pages run wider than the rest of the store: the list needs the room. */
.sf-main:has(> .sf-acc) { max-width: 1480px; }
.sf-acc-main { container-type: inline-size; }
/* A row is laid out by the width of its column: one line when there is room, two lines when not, a card on a phone. */
@container (max-width: 1040px) {
  .sf-bk-row { grid-template-columns: 64px auto minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "photo kind ref air date actions" "photo kind pax status amount actions"; align-items: start; }
  .sf-bk-photo { grid-area: photo; width: 64px; height: 64px; }
  .sf-bk-kind { grid-area: kind; }
  .sf-bk-cell.is-ref { grid-area: ref; }
  .sf-bk-cell.is-air { grid-area: air; }
  .sf-bk-actions { grid-area: actions; }
}
@container (max-width: 860px) { .sf-bk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-bk-filters { grid-template-columns: 1fr 1fr; } .sf-bk-search { grid-column: 1 / -1; } .sf-bk-filters .sf-btn { grid-column: 1 / -1; } }
@container (max-width: 620px) {
  .sf-bk-row { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "photo ref" "kind air" "date pax" "status amount" "actions actions"; }
  .sf-bk-actions { flex-direction: row; flex-wrap: wrap; }
  .sf-bk-actions .sf-bk-btn { flex: 1; }
  .sf-bk-help { flex-wrap: wrap; }
}

/* Supplier name/filter — shown only for the internal test account. */
.sf-tag.is-supplier { display: inline-block; margin-top: .2rem; font-size: .68rem; font-weight: 700; color: #6d28d9; background: #f3e8ff; border-radius: 999px; padding: .1rem .5rem; letter-spacing: .02em; }
.sf-facet-flag { font-style: normal; font-size: .62rem; font-weight: 800; text-transform: uppercase; color: #92400e; background: #fef3c7; border-radius: 999px; padding: .08rem .4rem; margin-left: .35rem; vertical-align: middle; }

/* ---------- round airline marks (results, filters, review, bookings) ---------- */
.sf-card-air img, .sf-card-code,
.sf-frow img, .sf-airline-code,
.sf-sb-logo img, .sf-fp-air img,
.sf-bk-cell.is-air img,
.sf-combo .sf-card-air img, .sf-combo .sf-card-code { border-radius: 50%; }
.sf-card-air img, .sf-frow img, .sf-sb-logo img, .sf-fp-air img, .sf-bk-cell.is-air img {
  background: #fff; object-fit: contain; padding: 2px; border: 1px solid var(--sf-line);
}
@media (max-width: 640px) { .sf-card-air img, .sf-card-code { border-radius: 50%; } }

/* Storefront template "Travelo": built to the supplied design — warm orange
   on white, a sunset hero, the search card over it, promo banners, popular
   destinations, hot deals by product, a mobile-app band and a subscribe
   footer. Served after voyago.css, so every page Travelo inherits (results,
   checkout, account) wears this palette and this header and footer. */

:root {
  --sf-rose: #f47a20; --sf-rose-2: #ff9a3c; --sf-rose-soft: #ffe7d3; --sf-rose-tint: #fff5ec;
  --sf-navy: #1d2940; --sf-ink: #19202f; --sf-text: #3f4658;
  --sf-shadow: 0 10px 30px rgb(29 41 64 / .07); --sf-shadow-lg: 0 24px 60px rgb(29 41 64 / .13);
  --tv-orange: #f47a20; --tv-orange-2: #ff9a3c; --tv-deep: #e5620c; --tv-sky: #eef5fb; --tv-sand: #fff3e8;
}
.sf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons, pills, picks everywhere ---------- */
.sf-btn { background: var(--tv-orange); box-shadow: 0 8px 18px rgb(244 122 32 / .3); }
.sf-btn:hover { filter: brightness(1.04); }
.sf-pills input:checked + span { box-shadow: 0 6px 14px rgb(244 122 32 / .28); }
.sf-seat:has(input:checked) { box-shadow: 0 6px 14px rgb(244 122 32 / .35); }
.sf-fare-card.is-lead { border-color: rgb(244 122 32 / .45); }
.sf-trust-ico { background: rgb(244 122 32 / .1); }
.sf-fp-tile.is-rose i { background: var(--sf-rose-soft); color: var(--tv-orange); }
body.sf .flatpickr-day.selected, body.sf .flatpickr-day.selected:hover, body.sf .flatpickr-day.startRange, body.sf .flatpickr-day.endRange { background: var(--tv-orange); border-color: var(--tv-orange); }
.sf-auth-side { background: linear-gradient(180deg, #fff5ec, #ffe7d3); }
.sf-notice.is-error { background: #fff3ec; }

/* ---------- header: logo, the links, currency, Sign In outlined, Sign Up filled ---------- */
.sf-header { background: #fff; border-bottom: 1px solid #eef0f4; }
.sf-header-inner { height: 70px; }
.sf-logo-mark { color: var(--tv-orange); }
.sf-logo-text b { font-size: 1.45rem; letter-spacing: -.03em; }
.sf-nav { gap: 2rem; font-weight: 500; color: var(--sf-ink); }
.sf-nav a.is-active::after { bottom: -1.45rem; height: 3px; }
.sf-header-actions > .sf-link[href$="#support"] { display: none; }
.sf-header-actions .sf-link[data-auth="signin"] { border: 1px solid #e3e6ec; border-radius: 999px; padding: .5rem 1rem; color: var(--sf-ink); }
.sf-header-actions .sf-link[data-auth="signin"]:hover { border-color: var(--tv-orange); color: var(--tv-orange); }
.sf-signup { padding: .62rem 1.3rem; }
.sf-currency select { border-color: transparent; font-weight: 600; }

/* ---------- hero: the sunset, words on a dark wash from the left ---------- */
/* 30% lower than first built (390px → 273px on a desk), the search card tucked in less to match. */
.tv-hero { min-height: 273px; background-color: #3a2a24; background-position: center 60%; }
.tv-hero::before { background: linear-gradient(90deg, rgb(24 16 12 / .78) 0%, rgb(24 16 12 / .55) 34%, rgb(24 16 12 / .12) 62%, rgb(0 0 0 / 0) 80%); }
.tv-hero::after { display: none; }
.tv-hero .sf-hero-inner { padding-top: 1.5rem; padding-bottom: 5rem; }
.tv-hero .sf-hero-copy { max-width: 600px; }
.tv-eyebrow { margin: 0 0 .7rem; font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.tv-hero .sf-h1 { color: #fff; max-width: 16ch; font-size: clamp(2.1rem, 3.8vw, 2.95rem); }
.tv-accent { color: var(--tv-orange-2); }
.tv-hero .sf-lede { color: rgb(255 255 255 / .92); max-width: 40ch; font-size: 1rem; }
.tv-hero .sf-hero-script { color: #fff; right: 16%; top: 1.4rem; font-size: 2.2rem; text-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.tv .tv-hero + .sf-search { margin-top: -4.2rem; }
.tv-script-plane { position: absolute; right: -1.8rem; top: .6rem; width: 22px; height: 22px; color: #fff; transform: rotate(18deg); }

/* ---------- the search card: filled tabs, radio circles, bordered fields ---------- */
.sf-search { margin-top: -6.4rem; }
.sf-search-card { border-radius: 18px; padding: 1.25rem 1.4rem 1.4rem; box-shadow: 0 20px 50px rgb(29 41 64 / .14); }
.sf-tabs { border-bottom: 0; gap: .6rem; margin: 0 0 1rem; }
.sf-tabs a { padding: .72rem 1.5rem; border-radius: 10px; background: #f4f5f8; color: var(--sf-ink); font-weight: 600; font-size: .88rem; }
.sf-tabs a svg { width: 19px; height: 19px; }
.sf-tabs a.is-active { background: var(--tv-orange); color: #fff; box-shadow: 0 8px 18px rgb(244 122 32 / .28); }
.sf-tabs a.is-active::after { display: none; }
.sf-pills { gap: 1.6rem; margin-bottom: 1rem; }
.sf-pills label:nth-child(2) { order: -1; }
.sf-pills span, .sf-pills input:checked + span { background: none; padding: 0 0 0 1.55rem; color: var(--sf-ink); font-weight: 500; box-shadow: none; position: relative; }
.sf-pills span::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 1.5px solid #c9ced8; border-radius: 50%; background: #fff; }
.sf-pills input:checked + span::before { border-color: var(--tv-orange); box-shadow: inset 0 0 0 3.5px #fff; background: var(--tv-orange); }
.sf-pills input:focus-visible + span::before { outline: 2px solid var(--tv-orange); outline-offset: 2px; }
.sf-field { border: 1px solid #e6e8ee; background: #fff; border-radius: 10px; }
.sf-field svg { color: var(--sf-ink); }
.sf-swap { background: #fff; color: var(--sf-ink); border: 1px solid #e6e8ee; box-shadow: 0 4px 10px rgb(29 41 64 / .08); }
.sf .sf-swap, .sf .sf-swap svg { color: var(--sf-ink); stroke: var(--sf-ink); }
.sf-search-btn { background: var(--tv-orange); border-radius: 10px; font-size: .98rem; }
.sf-addreturn { border: 1px solid #e6e8ee; border-radius: 10px; background: #fff; }

/* ---------- the promise strip ---------- */
.tv-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.9rem; }
.tv-strip-item { display: flex; align-items: center; gap: .85rem; }
.tv-strip-item b { display: block; font-size: .9rem; color: var(--sf-ink); }
.tv-strip-item span:not(.tv-strip-ico) { display: block; font-size: .8rem; color: var(--sf-muted); margin-top: .15rem; }
.tv-strip-ico { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffe9d6, #ffd8b8); color: var(--tv-deep); }
.tv-strip-ico svg { width: 24px; height: 24px; }

/* ---------- the two banners ---------- */
.tv-banners { display: grid; grid-template-columns: 1.85fr 1fr; gap: 1rem; margin-top: 2rem; }
.tv-banner { position: relative; min-height: 162px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; padding: 1.4rem 1.6rem; color: #fff; }
.tv-banner.is-main { background: #1d2940 var(--tv-img) center / cover no-repeat; }
.tv-banner.is-main::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(23 31 51 / .94) 0%, rgb(23 31 51 / .78) 32%, rgb(23 31 51 / .1) 62%, rgb(0 0 0 / 0) 100%); }
.tv-banner.is-side { background: linear-gradient(120deg, #f47a20 0%, #ff9a3c 60%, #ffb468 100%); }
.tv-banner.is-side::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 46%; background: var(--tv-img) center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.tv-banner-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.tv-banner-eyebrow { font-size: 1.15rem; }
.tv-banner-big { font-size: clamp(2.2rem, 3.6vw, 2.8rem); font-weight: 800; line-height: 1; color: var(--tv-orange-2); letter-spacing: -.02em; }
.tv-banner-text { font-size: 1.05rem; opacity: .95; }
.tv-banner-title { font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.tv-banner.is-side .tv-banner-text { font-size: .86rem; margin-top: .3rem; }
.tv-banner-btn { margin-top: .8rem; background: #fff; color: var(--tv-orange); font-weight: 700; font-size: .9rem; padding: .6rem 1.35rem; border-radius: 8px; box-shadow: 0 6px 14px rgb(0 0 0 / .12); }
.tv-banner:hover .tv-banner-btn { color: var(--tv-deep); }

/* ---------- sections, popular destinations ---------- */
.sf-wrap.tv-section { padding: 0 1.5rem; margin-top: 2.2rem; }
/* Voyago's ".sf a { color: inherit }" outranks a single class: these win it back. */
.sf .tv-dest, .sf .tv-banner { color: #fff; }
.sf .tv-more { color: var(--tv-orange); }
.tv-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tv-h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--sf-ink); letter-spacing: -.01em; }
.tv-more { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; color: var(--tv-orange); }
.tv-more svg { width: 16px; height: 16px; }
.tv-dests { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.tv-dest { position: relative; aspect-ratio: 3 / 3.4; border-radius: 12px; overflow: hidden; background: #dfe6ee var(--tv-img) center / cover no-repeat; color: #fff; transition: transform .2s; }
.tv-dest:hover { transform: translateY(-3px); }
.tv-dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / .72) 100%); }
.tv-dest-body { position: absolute; left: .9rem; right: .9rem; bottom: .9rem; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; }
.tv-dest-body b { display: block; font-size: 1.05rem; }
.tv-dest-body small { display: block; font-size: .78rem; opacity: .92; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-dest-body > span:first-child { min-width: 0; }
.tv-arrow { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--sf-ink); display: grid; place-items: center; }
.tv-arrow svg { width: 16px; height: 16px; }
.tv-arrow.is-filled { background: var(--tv-orange); color: #fff; }

/* ---------- hot deals ---------- */
.tv-deals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tv-deal { position: relative; min-height: 106px; border-radius: 12px; overflow: hidden; display: flex; align-items: stretch; box-shadow: 0 6px 18px rgb(29 41 64 / .06); transition: transform .2s; }
.tv-deal:hover { transform: translateY(-2px); }
.tv-deal.is-sky { background: linear-gradient(120deg, #f4f8fc, #e3eef8); }
.tv-deal.is-sand { background: linear-gradient(120deg, #fff8f1, #ffe9d6); }
.tv-deal-copy { position: relative; z-index: 1; flex: 1; padding: .95rem 0 .95rem 1.05rem; display: flex; flex-direction: column; }
.tv-deal-copy b { font-size: 1.02rem; color: var(--sf-ink); }
.tv-deal-copy small { font-size: .78rem; color: var(--sf-text); margin-top: .1rem; }
.tv-deal-badge { margin-top: auto; padding-top: .7rem; font-size: .9rem; color: var(--tv-orange); }
.tv-deal-badge em { font-style: normal; font-weight: 800; }
.tv-deal-art { width: 40%; flex: none; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.tv-deal-art.is-icon { -webkit-mask-image: none; mask-image: none; display: grid; place-items: center; }
.tv-deal-art.is-icon svg { width: 58px; height: 58px; padding: .8rem; border-radius: 14px; background: linear-gradient(135deg, #ffd39e, #ffa94d); color: #fff; box-shadow: 0 10px 20px rgb(244 122 32 / .3); }
.tv-deal .tv-arrow { position: absolute; right: .8rem; bottom: .8rem; z-index: 2; width: 26px; height: 26px; }

/* ---------- the app band ---------- */
.tv-app-wrap { margin-top: 2.4rem; }
.tv-app { position: relative; display: grid; grid-template-columns: 1.2fr 1fr .9fr; align-items: center; gap: 1.5rem; padding: 1.8rem 2.2rem; border-radius: 22px; background: linear-gradient(115deg, #f36d15 0%, #f7892d 45%, #ffa24a 100%); color: #fff; overflow: hidden; min-height: 200px; }
.tv-app-copy h2 { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.tv-app-copy p { margin: .7rem 0 0; font-size: .95rem; opacity: .95; max-width: 42ch; }
.tv-stores { margin-top: 1.1rem; }
.tv-stores .sf-store { background: #0d0d0f; color: #fff; }
.tv-phones { position: relative; height: 190px; align-self: stretch; }
.tv-phone { position: absolute; width: 118px; height: 230px; border-radius: 22px; background: #111; padding: 6px; box-shadow: 0 18px 40px rgb(0 0 0 / .3); }
.tv-phone.is-back { left: 8%; top: -6px; transform: rotate(-10deg); }
.tv-phone.is-front { left: 44%; top: 10px; transform: rotate(8deg); }
.tv-phone-screen { height: 100%; border-radius: 17px; background: #fff; color: var(--sf-ink); padding: .6rem .5rem; overflow: hidden; }
.tv-phone-brand { display: flex; align-items: center; gap: .25rem; font-size: .62rem; color: var(--tv-orange); }
.tv-phone-brand svg { width: 12px; height: 12px; }
.tv-phone-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .7rem; }
.tv-phone-tiles span { display: grid; justify-items: center; gap: .2rem; padding: .45rem .2rem; border-radius: 9px; background: #fff5ec; }
.tv-phone-tiles svg { width: 16px; height: 16px; color: var(--tv-orange); }
.tv-phone-tiles small { font-size: .5rem; }
.tv-phone-screen.is-photo { background: #ccc var(--tv-img) center / cover no-repeat; display: flex; align-items: flex-end; }
.tv-phone-screen.is-photo b { color: #fff; font-size: .75rem; padding: .3rem; text-shadow: 0 1px 4px rgb(0 0 0 / .5); }
.tv-app-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.tv-app-features li { display: flex; align-items: center; gap: .8rem; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.tv-app-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--tv-orange); display: grid; place-items: center; }
.tv-app-ico svg { width: 22px; height: 22px; }

/* ---------- footer: brand, three columns, the subscribe card ---------- */
.tv-footer { background: #fff; border-top: 0; margin-top: 2.4rem; }
.tv-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.7fr; gap: 1.8rem; padding: 2.2rem 0 1.4rem; }
.tv-footer .sf-footer-brand p { font-size: .86rem; color: var(--sf-text); margin: .8rem 0 1rem; max-width: 30ch; }
.tv-footer-col h4, .tv-subscribe h4 { margin: 0 0 .8rem; font-size: .92rem; font-weight: 700; color: var(--sf-ink); }
.tv-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tv-footer-col a { font-size: .86rem; color: var(--sf-text); }
.tv-footer-col a:hover { color: var(--tv-orange); }
.tv-social { display: flex; gap: .7rem; }
.tv-social a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.tv-social a svg { width: 18px; height: 18px; }
.tv-social .is-facebook { color: #1877f2; } .tv-social .is-instagram { color: #e1306c; } .tv-social .is-youtube { color: #ff0000; } .tv-social .is-linkedin { color: #0a66c2; }
.tv-subscribe { align-self: start; padding: 1.1rem 1.2rem; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgb(29 41 64 / .08); border: 1px solid #f0f1f5; }
.tv-subscribe form { display: flex; gap: .5rem; }
.tv-subscribe input { flex: 1; min-width: 0; border: 1px solid #e6e8ee; border-radius: 999px; padding: .62rem .95rem; font: inherit; font-size: .84rem; }
.tv-subscribe input:focus { outline: 2px solid rgb(244 122 32 / .35); border-color: var(--tv-orange); }
.tv-subscribe .sf-btn { padding: .6rem 1.1rem; }
.tv-contact { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .82rem; color: var(--sf-text); }
.tv-contact li { display: flex; align-items: center; gap: .45rem; }
.tv-contact svg { width: 15px; height: 15px; color: var(--tv-orange); }
.tv-footer .sf-footer-bottom { border-top: 1px solid #eef0f4; padding: 1rem 0 1.4rem; font-size: .8rem; color: var(--sf-muted); }

/* ---------- tablets ---------- */
@media (max-width: 980px) {
  .tv-dests { grid-template-columns: repeat(3, 1fr); }
  .tv-deals { grid-template-columns: repeat(2, 1fr); }
  .tv-app { grid-template-columns: 1fr 1fr; }
  .tv-app-features { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .tv-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .tv-footer-grid .sf-footer-brand, .tv-subscribe { grid-column: span 3; }
}

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .tv-hero { min-height: 0; }
  .tv-hero::before { background: linear-gradient(180deg, rgb(24 16 12 / .72) 0%, rgb(24 16 12 / .55) 60%, rgb(24 16 12 / .3) 100%); }
  .tv-hero .sf-hero-inner { padding-top: 1rem; padding-bottom: 2.2rem; }
  .tv .tv-hero + .sf-search { margin-top: -1.4rem; }
  .tv-hero .sf-hero-script { display: none; }
  .sf-search { margin-top: -4.8rem; }
  .sf-tabs { overflow-x: auto; }
  .sf-tabs a { padding: .6rem 1rem; }
  .tv-strip { grid-template-columns: 1fr 1fr; gap: 1rem .8rem; }
  .tv-banners { grid-template-columns: 1fr; }
  .tv-dests { grid-template-columns: repeat(2, 1fr); }
  .tv-dests .tv-dest:last-child { grid-column: span 2; aspect-ratio: 2 / 1; }
  .tv-deals { grid-template-columns: 1fr; }
  .tv-app { grid-template-columns: 1fr; padding: 1.5rem 1.3rem; }
  .tv-phones { display: none; }
  .tv-app-features { grid-template-columns: 1fr; }
  .tv-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .tv-footer-grid .sf-footer-brand, .tv-subscribe { grid-column: span 2; }
  .tv-dest-body small { white-space: normal; }
  .tv-footer { margin-top: 1.2rem; }
}
@media (max-width: 480px) {
  .tv-strip { grid-template-columns: 1fr; }
  .tv-subscribe form { flex-direction: column; }
}

/* =====================================================================
   Flight results, to the supplied design: a photo band with the search
   card over its foot, "Filter Results" down the left, the count, the sort
   row and one card per flight, then the promotion band.
   ===================================================================== */

/* ---------- the photo band ---------- */
.tv-rhero { position: relative; background: #2b3a4f var(--tv-img) center 38% / cover no-repeat; color: #fff; }
.tv-rhero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(18 20 30 / .7) 0%, rgb(18 20 30 / .42) 38%, rgb(18 20 30 / .08) 70%, rgb(0 0 0 / 0) 100%); }
.tv-rhero-inner { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-top: 1.9rem; padding-bottom: 5.4rem; }
.tv-rhero-copy h1 { margin: 0; font-size: clamp(1.75rem, 3.1vw, 2.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.tv-rhero-copy p { margin: .45rem 0 0; font-size: 1rem; color: rgb(255 255 255 / .93); max-width: 52ch; }
.tv-rhero-script { position: relative; margin: .2rem 9% 0 0; font-size: 1.95rem; color: #fff; transform: rotate(-8deg); text-align: center; text-shadow: 0 2px 10px rgb(0 0 0 / .28); }
.tv-rhero-script span { display: block; }
.tv-rhero-script span + span { padding-left: 1.4rem; }

/* ---------- the search card over the band: tabs, then one row ---------- */
.tv-rsearch.sf-search { margin-top: -4.2rem; }
.tv-rsearch .sf-search-card { padding: 1.1rem 1.25rem 1.25rem; }
.tv-rsearch-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tv-rsearch .sf-tabs { margin: 0; }
.tv-rsearch .sf-tabs a { padding: .66rem 1.45rem; }
.tv-trip { display: flex; gap: 1.3rem; font-size: .88rem; }
.tv-trip label { position: relative; cursor: pointer; }
.tv-trip input { position: absolute; opacity: 0; pointer-events: none; }
.tv-trip span { display: inline-block; padding-left: 1.5rem; color: var(--sf-ink); font-weight: 500; position: relative; }
.tv-trip span::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 1.5px solid #c9ced8; border-radius: 50%; background: #fff; }
.tv-trip input:checked + span::before { border-color: var(--tv-orange); background: var(--tv-orange); box-shadow: inset 0 0 0 3.5px #fff; }
.tv-trip input:focus-visible + span::before { outline: 2px solid var(--tv-orange); outline-offset: 2px; }
.tv-rsearch-row { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.45fr) auto; gap: .6rem; align-items: stretch; }
.tv-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.tv-pair .sf-swap { position: relative; z-index: 2; width: 34px; height: 34px; margin: 0 -.9rem; }
.tv-rsearch .sf-field { min-height: 58px; padding: .5rem .85rem; border-radius: 10px; background: #fff; }
.tv-rsearch .sf-field > svg { width: 20px; height: 20px; color: var(--sf-ink); }
.tv-rsearch .sf-field-body label, .tv-pax-label { font-size: .72rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #7a8294; }
.tv-rsearch .sf-field-body input { text-transform: none; font-size: .95rem; font-weight: 600; margin-top: .05rem; }
.tv-rsearch .sf-field-body small { font-size: .68rem; color: #8b93a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-rsearch .sf-addreturn { min-height: 58px; justify-content: center; }
.tv-rsearch .sf-search-btn { min-height: 58px; padding: 0 1.45rem; gap: .5rem; }
.tv-rsearch .sf-field-body input.sf-date-alt { font-size: .9rem; }

/* "Travelers & Class" and its panel */
.tv-pax { cursor: pointer; }
.tv-pax-toggle { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 0; font: inherit; color: var(--sf-ink); cursor: pointer; text-align: left; }
.tv-pax-toggle b { font-size: .95rem; font-weight: 600; margin-top: .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tv-pax-toggle:focus-visible { outline: 2px solid var(--tv-orange); outline-offset: 4px; border-radius: 4px; }
.tv-pax > svg.tv-pax-chev { width: 16px; height: 16px; transition: transform .15s; }
.tv-pax.is-open > svg.tv-pax-chev { transform: rotate(180deg); }
.tv-pax.is-open { border-color: var(--tv-orange); }
.tv-pax-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 320px; max-width: calc(100vw - 2rem); background: #fff; border: 1px solid #eceef3; border-radius: 14px; box-shadow: 0 20px 50px rgb(29 41 64 / .18); padding: .9rem 1rem 1rem; display: grid; gap: .55rem; cursor: default; }
.tv-pax-panel[hidden] { display: none; }
.tv-pax-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid #f1f2f6; }
.tv-pax-row b { display: block; font-size: .9rem; color: var(--sf-ink); }
.tv-pax-row small { display: block; font-size: .74rem; color: var(--sf-muted); }
.tv-stepper { display: inline-flex; align-items: center; gap: .45rem; }
.tv-stepper button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #dfe3ea; background: #fff; color: var(--sf-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tv-stepper button:hover { border-color: var(--tv-orange); color: var(--tv-orange); }
.tv-stepper button svg { width: 14px; height: 14px; }
.tv-stepper input { width: 2rem; border: 0; background: none; text-align: center; font: inherit; font-weight: 700; font-size: .95rem; color: var(--sf-ink); -moz-appearance: textfield; }
.tv-stepper input::-webkit-inner-spin-button, .tv-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tv-pax-select { display: grid; gap: .2rem; font-size: .74rem; color: var(--sf-muted); }
.tv-pax-select.sf-field { min-height: 0; padding: 0; border: 0; background: none; display: none; }
.tv-pax-select.sf-field.is-open { display: grid; }
.tv-pax-select select { font: inherit; font-size: .9rem; font-weight: 600; color: var(--sf-ink); border: 1px solid #e3e6ec; border-radius: 8px; padding: .5rem .6rem; background: #fff; }
.tv-pax-done { justify-content: center; margin-top: .3rem; min-height: 0; padding: .6rem 1rem; border-radius: 8px; }

/* ---------- the results grid and the filter panel ---------- */
.tv-results-page .sf-results-grid { grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.5rem; padding-block: 1.6rem 2rem; }
/* A notice alone in the grid (fares could not be loaded) takes the whole width. */
.tv-results-page .sf-results-grid > .sf-results-col:only-child { grid-column: 1 / -1; }
.tv-results-page .tv-filters { order: 0; position: static; padding: 1rem 1rem .4rem; border: 1px solid #eceef3; border-radius: 14px; box-shadow: 0 4px 14px rgb(29 41 64 / .04); }
.tv-filters-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-bottom: .75rem; border-bottom: 1px solid #eef0f4; }
.tv-filters-head h2 { margin: 0; font-size: 1.08rem; font-weight: 800; color: var(--sf-ink); }
.sf .tv-clear { margin-left: auto; color: var(--tv-orange); font-size: .84rem; font-weight: 600; }
.tv-facet { border-bottom: 1px solid #eef0f4; padding: .75rem 0 .65rem; }
.tv-facet:last-child { border-bottom: 0; }
.tv-facet summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; list-style: none; cursor: pointer; font-size: .9rem; font-weight: 700; color: var(--sf-ink); margin-bottom: .35rem; }
.tv-facet summary::-webkit-details-marker { display: none; }
.tv-facet summary svg { width: 16px; height: 16px; color: var(--sf-ink); transform: rotate(180deg); transition: transform .15s; }
.tv-facet:not([open]) summary { margin-bottom: 0; }
.tv-facet:not([open]) summary svg { transform: none; }
.tv-facet summary .sf-facet-flag { margin-right: auto; }
.tv-check { display: flex; align-items: center; gap: .6rem; padding: .27rem 0; font-size: .85rem; color: var(--sf-text); cursor: pointer; }
.tv-check[hidden] { display: none; }
.tv-check span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-check em { margin-left: auto; font-style: normal; font-size: .8rem; color: #8b93a3; font-variant-numeric: tabular-nums; }
.tv-check img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.tv-check input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 17px; height: 17px; margin: 0; border: 1.5px solid #c6ccd6; border-radius: 4px; background: #fff; cursor: pointer; display: grid; place-items: center; }
.tv-check input[type="checkbox"]:checked { background: var(--tv-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--tv-orange); }
.tv-check input[type="checkbox"]:disabled { cursor: default; }
.tv-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--tv-orange); outline-offset: 2px; }
.tv-check:hover input[type="checkbox"]:not(:checked) { border-color: var(--tv-orange); }
.sf .tv-check.is-link.is-on { color: var(--tv-orange); font-weight: 600; }
.tv-code { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 .2rem; border-radius: 4px; background: #f1f3f7; font-size: .62rem; font-weight: 800; color: var(--sf-ink); }
.tv-find { display: flex; align-items: center; gap: .45rem; border: 1px solid #e3e6ec; border-radius: 8px; padding: .42rem .6rem; margin: .1rem 0 .45rem; }
.tv-find:focus-within { border-color: var(--tv-orange); }
.tv-find svg { width: 15px; height: 15px; color: #8b93a3; flex: none; }
.tv-find input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: .82rem; background: none; color: var(--sf-ink); }
.tv-none { margin: .2rem 0; font-size: .8rem; color: var(--sf-muted); }
.tv-show-more { display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; border: 0; background: none; padding: 0; font: inherit; font-size: .82rem; font-weight: 600; color: var(--tv-orange); cursor: pointer; }
.tv-show-more svg { width: 14px; height: 14px; }
.tv-show-more[hidden] { display: none; }

/* the two-handled price range */
.tv-price output { display: block; font-size: .85rem; color: var(--sf-text); font-variant-numeric: tabular-nums; }
.tv-range-track { position: relative; height: 24px; margin: .45rem 9px .2rem; }
.tv-range-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: #e6e9ef; }
.tv-range-fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--tv-orange); }
.tv-range { position: absolute; left: -9px; right: -9px; top: 0; width: calc(100% + 18px); height: 24px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.tv-range::-webkit-slider-runnable-track { background: none; height: 24px; }
.tv-range::-moz-range-track { background: none; height: 24px; }
.tv-range::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: #fff; border: 2.5px solid var(--tv-orange); box-shadow: 0 2px 6px rgb(29 41 64 / .2); cursor: grab; }
.tv-range::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2.5px solid var(--tv-orange); box-shadow: 0 2px 6px rgb(29 41 64 / .2); cursor: grab; }
.tv-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--tv-orange); outline-offset: 2px; }

/* ---------- the column's head, the sort row ---------- */
/* One column that never grows past the page: without the minmax a wide
   thing inside a card (the fares an airline sends when "View Fares" is
   pressed) widened the column, the card and every fare card with it. */
.tv-results-col { gap: .9rem; grid-template-columns: minmax(0, 1fr); }
.tv-results-col > * { min-width: 0; }
.tv-rhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tv-found { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--sf-ink); letter-spacing: -.01em; }
.tv-route { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0; margin: .3rem 0 0; font-size: .85rem; color: var(--sf-muted); }
.tv-route span { display: inline-flex; align-items: center; gap: .35rem; }
.tv-route span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #b9bfca; margin: 0 .7rem; }
.tv-route svg { width: 14px; height: 14px; }
.tv-filter-btn { display: none; align-items: center; gap: .45rem; flex: none; border: 1px solid #e3e6ec; background: #fff; border-radius: 10px; padding: .6rem 1rem; font: inherit; font-size: .88rem; font-weight: 700; color: var(--sf-ink); cursor: pointer; }
.tv-filter-btn svg { width: 17px; height: 17px; color: var(--tv-orange); }
.tv-sorts { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.tv-sort-by { font-size: .88rem; font-weight: 600; color: var(--sf-ink); margin-right: .25rem; }
.tv-sort { display: inline-flex; align-items: center; gap: .35rem; padding: .56rem 1.25rem; border: 1px solid #e3e6ec; border-radius: 999px; background: #fff; font-size: .86rem; font-weight: 600; color: var(--sf-ink); cursor: pointer; list-style: none; white-space: nowrap; }
.sf .tv-sort { color: var(--sf-ink); }
.tv-sort:hover { border-color: var(--tv-orange); }
.sf .tv-sort.is-on { background: var(--tv-orange); border-color: var(--tv-orange); color: #fff; box-shadow: 0 6px 14px rgb(244 122 32 / .28); }
.tv-sort svg { width: 15px; height: 15px; }
.tv-sort-menu { position: relative; }
.tv-sort-menu summary::-webkit-details-marker { display: none; }
.tv-sort-menu[open] summary svg { transform: rotate(180deg); }
.tv-sort-list { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; display: grid; padding: .35rem; background: #fff; border: 1px solid #eceef3; border-radius: 12px; box-shadow: 0 16px 36px rgb(29 41 64 / .14); }
.tv-sort-list a { padding: .5rem .7rem; border-radius: 8px; font-size: .86rem; }
.sf .tv-sort-list a:hover, .sf .tv-sort-list a.is-on { background: var(--sf-rose-tint); color: var(--tv-orange); }
.tv-count { margin: -.2rem 0 0; font-size: .78rem; color: #8b93a3; }

/* ---------- a flight card ---------- */
.tv-card { position: relative; min-width: 0; overflow: hidden; background: #fff; border: 1px solid #eceef3; border-radius: 14px; box-shadow: 0 4px 14px rgb(29 41 64 / .04); }
.tv-card.is-recommended { border: 1.5px solid #f6a765; background: linear-gradient(180deg, #fff6ee 0%, #fff 55%); box-shadow: 0 12px 28px rgb(244 122 32 / .12); }
.tv-card-ribbon { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: .65rem 1rem 0 .65rem; }
.tv-ribbon { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem 1.6rem .42rem .85rem; background: var(--tv-orange); color: #fff; font-size: .86rem; font-weight: 700; border-radius: 6px 0 0 6px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.tv-ribbon svg { width: 15px; height: 15px; }
.tv-ribbon-note { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .75rem; border-radius: 999px; background: #fff0e2; color: #c2560c; font-size: .78rem; font-weight: 600; }
.tv-ribbon-note svg { width: 13px; height: 13px; color: var(--tv-orange); }
.tv-card-body { display: grid; grid-template-columns: minmax(0, 1fr) 11.5rem; gap: 1.25rem; padding: 1rem 1.15rem; }
.tv-card-top { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.tv-air { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.tv-air > div { min-width: 0; }
.tv-air-logo { flex: none; width: 50px; height: 50px; border-radius: 10px; border: 1px solid #eef0f4; background: #fff; display: grid; place-items: center; overflow: hidden; font-size: .8rem; font-weight: 800; color: var(--sf-ink); }
.tv-air-logo img { width: 38px; height: 38px; object-fit: contain; }
.tv-air b { display: block; font-size: 1rem; color: var(--sf-ink); }
.tv-air small { display: block; margin-top: .1rem; font-size: .8rem; color: var(--sf-muted); }
.tv-legs { display: grid; gap: .6rem; }
.tv-leg { display: grid; grid-template-columns: minmax(4.6rem, auto) minmax(6rem, 1fr) minmax(4.6rem, auto); align-items: center; gap: .9rem; }
.tv-leg + .tv-leg { border-top: 1px dashed #e6e9ef; padding-top: .6rem; }
.tv-leg-tag { grid-column: 1 / -1; margin-bottom: -.35rem; font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tv-orange); }
.tv-end b { display: block; font-size: 1.22rem; font-weight: 800; line-height: 1.15; color: var(--sf-ink); white-space: nowrap; }
.tv-end b sup { margin-left: .3rem; font-size: .68rem; font-weight: 700; color: var(--tv-orange); vertical-align: .45em; }
.tv-end span { display: block; margin-top: .12rem; font-size: .8rem; font-weight: 700; color: var(--sf-ink); }
.tv-end small { display: block; font-size: .78rem; color: var(--sf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-line { text-align: center; font-size: .78rem; color: var(--sf-muted); min-width: 0; }
.tv-line small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-line i { display: flex; align-items: center; gap: .3rem; margin: .2rem 0; }
.tv-line i::before, .tv-line i::after { content: ""; flex: 1; height: 0; border-top: 1.5px solid #dde1e8; }
.tv-line i::before { box-shadow: -3px 0 0 -0.5px #c9ced8; }
.tv-line i svg { width: 16px; height: 16px; color: var(--tv-orange); transform: rotate(45deg); flex: none; }
.tv-feats { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem 1.35rem; margin: .9rem 0 0; padding: 0; font-size: .82rem; color: var(--sf-text); }
.tv-feats li { display: inline-flex; align-items: center; gap: .4rem; }
.tv-feats li svg { width: 16px; height: 16px; color: #8b93a3; flex: none; }
.tv-feats .is-good svg { color: #16a34a; }
.tv-feats .is-bad svg { color: #dc2626; }
.tv-feats .is-warn { color: #c2410c; font-weight: 600; }
.tv-feats .is-warn svg { color: #ea580c; }
.tv-feats .is-brand { color: var(--sf-ink); font-weight: 600; }
.tv-feats .is-brand svg { color: var(--tv-orange); }
.tv-card-links { display: flex; flex-wrap: wrap; gap: .4rem 1.7rem; margin-top: .65rem; }
.tv-card-links button { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; font: inherit; font-size: .84rem; font-weight: 600; color: var(--tv-orange); cursor: pointer; }
.tv-card-links button svg { width: 14px; height: 14px; transition: transform .15s; }
.tv-card-links button[aria-expanded="true"] svg { transform: rotate(180deg); }
.tv-card-links button:focus-visible { outline: 2px solid var(--tv-orange); outline-offset: 3px; border-radius: 3px; }
.tv-card-price { display: flex; flex-direction: column; justify-content: center; gap: .3rem; min-width: 0; }
.tv-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border-radius: 6px; font-size: .75rem; font-weight: 600; }
.tv-chip svg { width: 14px; height: 14px; }
.tv-chip.is-green { background: #e8f7ee; color: #15803d; }
.tv-chip.is-blue { background: #e8f1fd; color: #1d5fc4; }
.tv-amount { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3rem; color: var(--tv-orange); line-height: 1.1; }
.tv-amount b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tv-amount small { font-size: .8rem; font-weight: 700; }
.tv-from { flex-basis: 100%; font-size: .74rem; font-weight: 500; color: var(--sf-muted); }
.tv-price-note { font-size: .78rem; color: var(--sf-muted); }
.sf .tv-view { width: 100%; justify-content: center; margin-top: .35rem; padding: .72rem 1rem; border-radius: 8px; font-size: .95rem; min-height: 0; }
.tv-fares-count { text-align: center; font-size: .74rem; color: var(--sf-muted); }
.tv-results-col.is-expired .tv-card { opacity: .55; }
.tv-results-col.is-expired .tv-card a, .tv-results-col.is-expired .tv-card button { pointer-events: none; }

/* "Flight details" and "Fare rules", opened under the card */
.tv-panel { padding: .95rem 1.15rem 1.05rem; border-top: 1px solid #eef0f4; background: #fbfbfd; border-radius: 0 0 14px 14px; }
.tv-panel[hidden] { display: none; }
.tv-itin + .tv-itin { margin-top: 1rem; }
.tv-itin-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .5rem; font-size: .86rem; }
.tv-itin-head b { display: inline-flex; align-items: center; gap: .35rem; color: var(--sf-ink); }
.tv-itin-head b svg { width: 14px; height: 14px; }
.tv-itin-head span { color: var(--sf-muted); }
.tv-itin-seg { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem minmax(0, 1fr) minmax(0, 1.25fr); gap: .9rem; align-items: center; padding: .7rem .85rem; background: #fff; border: 1px solid #eceef3; border-radius: 10px; }
.tv-itin-end b { display: block; font-size: 1rem; color: var(--sf-ink); }
.tv-itin-end span { display: block; font-size: .78rem; font-weight: 700; color: var(--sf-ink); }
.tv-itin-end small { display: block; font-size: .74rem; color: var(--sf-muted); }
.tv-itin-mid { text-align: center; font-size: .74rem; color: var(--sf-muted); }
.tv-itin-mid i { display: block; }
.tv-itin-mid svg { width: 15px; height: 15px; color: var(--tv-orange); transform: rotate(45deg); }
.tv-itin-meta { display: grid; gap: .1rem; font-size: .78rem; color: var(--sf-text); }
.tv-itin-meta b { font-size: .82rem; color: var(--sf-ink); }
.tv-itin-stop { display: flex; align-items: center; gap: .4rem; margin: .45rem .3rem; font-size: .78rem; font-weight: 600; color: #b45309; }
.tv-itin-stop svg { width: 14px; height: 14px; }
.tv-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin: 0; }
.tv-rules > div { padding: .55rem .75rem; background: #fff; border: 1px solid #eceef3; border-radius: 10px; }
.tv-rules dt { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sf-muted); }
.tv-rules dd { margin: .15rem 0 0; font-size: .86rem; font-weight: 600; color: var(--sf-ink); }
.tv-rules dd.is-good { color: #15803d; }
.tv-rules dd.is-bad { color: #b91c1c; }
.tv-rules-note { margin: .7rem 0 0; font-size: .76rem; color: var(--sf-muted); max-width: 75ch; }
.tv-card .sf-fares { min-width: 0; margin: 0; padding: .9rem 1.15rem 1rem; border-top: 1px solid #eef0f4; }
.tv-card .sf-fares .sf-fd, .tv-card .sf-fares .sf-fare-cards { min-width: 0; max-width: 100%; }
.sf .tv-more-results { border-radius: 12px; border-color: #eceef3; }

/* the leg-by-leg return card (Voyago's), in Travelo's colours */
.tv-results-col .sf-card { border-color: #eceef3; border-radius: 14px; box-shadow: 0 4px 14px rgb(29 41 64 / .04); }
.tv-results-col .sf-combo .sf-t b { font-weight: 800; }
.tv-results-col .sf-combo-opt:has(input:checked) { border-color: var(--tv-orange); background: #fff7f0; }

/* ---------- the promotion under the results ---------- */
.tv-rpromo { display: grid; grid-template-columns: 1fr 1fr; min-height: 150px; margin-top: .3rem; border-radius: 16px; overflow: hidden; color: #fff; background: linear-gradient(115deg, #f36d15 0%, #f7892d 50%, #ffa24a 100%); }
.tv-rpromo-deal { position: relative; display: flex; align-items: center; padding: 1.2rem 1.4rem; background: #f36d15 var(--tv-img) right center / cover no-repeat; }
.tv-rpromo-deal::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f36d15 0%, rgb(243 109 21 / .9) 40%, rgb(243 109 21 / .12) 78%, rgb(243 109 21 / 0) 100%); }
.sf .tv-rpromo-deal { color: #fff; }
.tv-rpromo-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.tv-rpromo-line { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.tv-rpromo-line b { font-size: 2.05rem; font-weight: 800; letter-spacing: -.02em; }
.tv-rpromo-text { font-size: 1rem; margin-top: .15rem; }
.tv-rpromo .tv-banner-btn { margin-top: .75rem; }
.tv-rpromo-app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem 0; overflow: hidden; }
.tv-rpromo-app-copy { padding-bottom: 1.1rem; }
.tv-rpromo-app h3 { margin: 0; font-size: 1.22rem; font-weight: 800; line-height: 1.2; }
.tv-rpromo-app p { margin: .3rem 0 0; font-size: .84rem; color: rgb(255 255 255 / .95); max-width: 34ch; }
.tv-rpromo .sf-stores { margin-top: .8rem; flex-wrap: wrap; }
.tv-rpromo-phone { align-self: end; width: 96px; height: 150px; margin: 0 2.6rem -1.6rem 0; padding: 5px; border-radius: 18px; background: #121212; box-shadow: 0 16px 34px rgb(0 0 0 / .3); transform: rotate(8deg); }
.tv-rpromo-plane { position: absolute; top: .7rem; right: .9rem; }
.tv-rpromo-plane svg { width: 30px; height: 30px; color: #fff; transform: rotate(45deg); }

/* ---------- skeleton rows in Travelo's shape ---------- */
.tv-facet.is-skeleton { display: grid; gap: .5rem; }
.tv-sk-row { display: flex; align-items: center; gap: .6rem; }
.tv-sk-row .sf-sk-chip { width: 17px; height: 17px; border-radius: 4px; margin: 0; flex: none; }
.tv-sk-row .sf-sk-line { flex: 1; margin: 0; }

/* ---------- smaller desks ---------- */
@media (max-width: 1180px) {
  .tv-rsearch-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tv-rsearch-row .tv-pair { grid-column: 1 / -1; }
  .tv-rsearch-row .sf-search-btn { grid-column: 1 / -1; justify-content: center; }
  .tv-card-top { grid-template-columns: 1fr; gap: .8rem; }
}

/* ---------- tablets: the filters become a drawer ---------- */
@media (max-width: 980px) {
  .tv-results-page .sf-results-grid { grid-template-columns: 1fr; gap: 1rem; }
  .tv-results-page .tv-filters { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(360px, 92vw); margin: 0; border-radius: 0; border: 0; overflow-y: auto; transform: translateX(100%); transition: transform .22s ease; box-shadow: var(--sf-shadow-lg); padding: 1rem 1.1rem 2rem; }
  .tv-results-page .tv-filters.is-open { transform: none; }
  .tv-results-page .tv-filters.sf-sk { display: none; }
  .tv-results-page .sf-filters-backdrop { display: block; position: fixed; inset: 0; z-index: 85; background: rgb(20 26 43 / .45); }
  .tv-results-page .sf-filters-backdrop[hidden] { display: none; }
  .tv-results-page .sf-filters-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #e3e6ec; border-radius: 50%; background: #fff; cursor: pointer; color: var(--sf-ink); }
  .tv-results-page .sf-filters-close svg { width: 16px; height: 16px; transform: rotate(45deg); }
  .tv-results-page .sf-results-mhead { display: none; }
  .tv-filter-btn { display: inline-flex; }
  .tv-rpromo { grid-template-columns: 1fr; }
  .tv-rhero-script { display: none; }
}

/* ---------- phones ---------- */
@media (max-width: 720px) {
  .tv-rhero-inner { padding-top: 1.4rem; padding-bottom: 4.8rem; }
  .tv-rhero-copy h1 { font-size: 1.6rem; }
  .tv-rhero-copy p { font-size: .9rem; }
  html.sf-search-folded .tv-rhero { display: none; }
  .tv-rsearch.sf-search { margin-top: -3.6rem; }
  .tv-rsearch-top { margin-bottom: .8rem; }
  .tv-rsearch .sf-tabs a { padding: .55rem .95rem; }
  .tv-rsearch-row { grid-template-columns: 1fr; }
  .tv-rsearch-row .tv-pair, .tv-rsearch-row .sf-search-btn { grid-column: auto; }
  .tv-pax-panel { left: 0; right: auto; width: 100%; }
  .tv-rhead { align-items: center; }
  .tv-found { font-size: 1.15rem; }
  .tv-sort-by { display: none; }
  .tv-sorts { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
  .tv-sort { padding: .5rem 1rem; }
  .tv-sort-list { left: auto; right: 0; }
  .tv-card-body { grid-template-columns: 1fr; gap: .8rem; padding: .9rem; }
  .tv-card-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .15rem .8rem; padding-top: .8rem; border-top: 1px dashed #e6e9ef; }
  .tv-card-price .tv-chip { grid-column: 1 / -1; justify-self: start; }
  .tv-route { display: block; line-height: 1.5; }
  .tv-route span { display: inline; }
  .tv-route span + span::before { content: "·"; display: inline; width: auto; height: auto; margin: 0 .35rem; background: none; }
  .tv-route svg { vertical-align: -2px; }
  .tv-card-price .tv-amount, .tv-card-price .tv-price-note { grid-column: 1; }
  .sf .tv-card-price .tv-view { grid-column: 2; grid-row: span 2; width: auto; margin: 0; padding: .7rem 1.2rem; }
  .tv-card-price .tv-fares-count { grid-column: 1 / -1; text-align: left; }
  .tv-leg { gap: .6rem; grid-template-columns: auto minmax(4.5rem, 1fr) auto; }
  .tv-end b { font-size: 1.08rem; }
  .tv-feats { gap: .4rem 1rem; font-size: .8rem; }
  .tv-itin-seg { grid-template-columns: minmax(0, 1fr) 3.6rem minmax(0, 1fr); }
  .tv-itin-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .1rem .8rem; }
  .tv-ribbon-note { font-size: .72rem; }
  .tv-rpromo-deal { min-height: 140px; }
  .tv-rpromo-phone { display: none; }
  .tv-rpromo-app { grid-template-columns: 1fr; padding-bottom: 0; }
}