/* 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-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-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 { 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 { display: none; }
.sf-field.is-return.is-open { display: flex; }
.sf-search-btn { border-radius: 12px; padding: 0 1.6rem; min-height: 56px; font-size: .98rem; }
.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 { 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 .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) {
  /* 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-nav, .sf-header-actions .sf-link { display: none; }
  .sf-burger { display: inline-flex; margin-left: auto; padding: .45rem .6rem; }
  .sf-header-inner { gap: .75rem; }
  .sf-header.is-open .sf-nav { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; position: absolute; left: 0; right: 0; top: 64px; background: #fff; border-bottom: 1px solid var(--sf-line); padding: .6rem 1.5rem 1rem; box-shadow: var(--sf-shadow); }
  .sf-header.is-open .sf-nav a { padding: .55rem 0; width: 100%; }
  .sf-header.is-open .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: 1.4rem 0 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-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: -2.25rem; position: relative; z-index: 3; }
.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 1fr; gap: 1.5rem; align-items: start; padding: 1.5rem 0 3rem; }

.sf-filters { background: #fff; border: 1px solid var(--sf-line); border-radius: 1rem; padding: 1.25rem; position: sticky; top: 1rem; }
.sf-filters-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.sf-filters-head h2 { font-size: 1.35rem; margin: 0; }
.sf-clear { color: var(--sf-accent); font-size: .85rem; font-weight: 600; }
.sf-facet { padding: 1rem 0; border-top: 1px solid var(--sf-line); }
.sf-facet:first-of-type { border-top: 0; }
.sf-facet h3 { font-size: 1rem; margin: 0 0 .6rem; }
.sf-facet-sub { color: var(--sf-muted); font-size: .8rem; margin: -.4rem 0 .6rem; }
.sf-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sf-chip { border: 1px solid var(--sf-line); border-radius: .7rem; padding: .6rem .7rem; text-align: center; transition: border-color .15s, background .15s; }
.sf-chip b { display: block; font-size: 1rem; }
.sf-chip small { color: var(--sf-muted); font-size: .78rem; }
.sf-chip:hover { border-color: var(--sf-accent); }
.sf-chip.is-on { border-color: var(--sf-accent); background: rgb(245 50 91 / .06); }
.sf-chip.is-on b { color: var(--sf-accent); }

.sf-check { position: relative; display: flex; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .9rem; }
.sf-check-hit { position: absolute; inset: 0; }
.sf-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--sf-accent); pointer-events: none; }
.sf-check span { flex: 1; }
.sf-check em { color: var(--sf-muted); font-style: normal; font-size: .82rem; }
.sf-airlines { display: grid; gap: .1rem; max-height: 15rem; overflow: auto; }

.sf-results-col { display: grid; gap: 1rem; }
.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: 13rem 1fr auto 13rem; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; }
.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-leg { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.sf-t { text-align: center; }
.sf-t b { display: block; font-size: 1.35rem; line-height: 1.2; }
.sf-t span { color: var(--sf-muted); font-size: .82rem; }
.sf-next { display: block; color: #175cd3; font-size: .75rem; font-weight: 600; }
.sf-card-line { text-align: center; color: var(--sf-muted); font-size: .8rem; }
.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: .5rem; justify-items: end; }
.sf-from { color: var(--sf-muted); font-size: .8rem; }
.sf-from b { display: block; color: var(--sf-ink); font-size: 1.35rem; }
.sf-card-buy .sf-btn { width: 100%; justify-content: center; }
.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: .7rem 1.25rem; 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-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; }

/* ---------- 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; } }