/* Values below are taken from the Figma file (Concept C, KLM_v2 mode of Aero Global Foundation). */
@font-face { font-family: "Universal Sans Text"; font-weight: 400; src: url("fonts/UniversalSansText-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Universal Sans Text"; font-weight: 500; src: url("fonts/UniversalSansText-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Universal Sans Text"; font-weight: 700; src: url("fonts/UniversalSansText-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Universal Sans Display"; font-weight: 500; src: url("fonts/UniversalSansDisplay-Medium.woff2") format("woff2"); font-display: swap; }

:root {
  --text: #002746;            /* aero-color-text-default */
  --text-alt: #565250;        /* aero-color-text-alternative */
  --text-strong: #3e3b3a;
  --action: #0070c2;          /* surface-action-primary / border-active */
  --action-text: #005496;
  --surface: #fff;
  --page: #f5f1ed;            /* page background + tertiary action surface */
  --highlight: #eaf4fb;       /* surface-highlight */
  --info: #d0e7f6;            /* surface-system-informative / secondary action */
  --on-secondary: #001527;
  --border: #d4ccc6;
  --border-subtle: #ebe2db;
  --border-strong: #99948f;
  --border-day: #d4d8da;
  --success: #287d52;
  --error: #d42a1e;
  --fb: #0800b9;
  --fb-surface: #f7f7fd;
  --premium: #003d6d;
  --klm-blue: #00a1de;
  --r-card: 24px;
  --r: 12px;
  --text-font: "Universal Sans Text", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --display-font: "Universal Sans Display", "Universal Sans Text", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --panel-w: 408px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 190px; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 16px/24px var(--text-font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; }
[hidden] { display: none !important; }

/* Type styles */
.d36 { font: 500 36px/40px var(--display-font); }
.d28 { font: 500 28px/32px var(--display-font); }
.d24 { font: 500 24px/36px var(--display-font); }
.d22 { font: 500 22px/30px var(--display-font); }
.d20 { font: 500 20px/28px var(--display-font); }
.d18 { font: 500 18px/26px var(--display-font); }
.b20 { font: 700 20px/28px var(--text-font); }
.b18 { font: 700 18px/26px var(--text-font); }
.sm { font-size: 14px; line-height: 22px; }
.xs { font-size: 12px; line-height: 18px; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }
.alt { color: var(--text-alt); }

/* Icons: exported glyphs used as masks so they take the text colour */
.ic { display: inline-block; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic.s20 { width: 20px; height: 20px; }

/* Buttons (Global Button) */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px; border-radius: var(--r); font-weight: 500; white-space: nowrap; flex: none; }
.btn > span { padding: 0 8px; }
.btn.primary { background: var(--action); color: #fff; }
.btn.secondary { background: var(--info); color: var(--on-secondary); }
.btn.outline { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border); }
.btn.tertiary { background: var(--page); color: var(--action); }
.btn.link { color: var(--action); padding: 12px 0; }
.btn.small { padding: 8px; }
.btn:hover { filter: brightness(.96); }
.btn:focus-visible, .chip:focus-visible, .day:focus-visible, .step:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* Header + stepper */
.site-header { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 8px 8px rgb(0 0 0 / 8%); }
.header { border-bottom: 1px solid var(--border); padding: 0 16px; }
.header-inner { max-width: 1440px; margin: 0 auto; }
.top-nav { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px 0; height: 56px; }
.menu { display: flex; gap: 4px; }
.menu-action { display: flex; align-items: center; padding: 12px; border-radius: 4px; font-weight: 500; }
.menu-action span { padding: 0 4px; }
.header-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 8px 8px; height: 56px; }
.header-nav .menu-action { padding: 8px; justify-self: start; }
.step-name { font: 700 18px/26px var(--display-font); }
.stepper { display: grid; grid-template-columns: repeat(6, 1fr); padding-bottom: 12px; background: #fff; }
.step { display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--text-alt); }
.step .track { display: flex; align-items: center; width: 100%; height: 16px; }
.step .track::before, .step .track::after { content: ""; flex: 1; height: 1px; background: #797471; }
.step:first-child .track::before, .step:last-child .track::after { background: none; }
.step .dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #797471; background: #fff; flex: none; }
.step.done .track::before, .step.done .track::after, .step.current .track::before { height: 2px; background: var(--action); }
.step:first-child.done .track::before { background: none; }
.step.done .dot { border: 2px solid var(--action); background: var(--highlight); }
.step.current .dot { border: 2px solid #fff; background: var(--action); box-shadow: 0 0 0 2px var(--action); }
.step.done, .step.current { color: var(--text); }
.step.current .label { font-weight: 500; }
.step .label { padding: 0 8px; }
.step:disabled { cursor: default; }

/* Layout: assistant + existing page */
.layout { display: grid; grid-template-columns: var(--panel-w) minmax(0, 1200px); gap: 24px; justify-content: center; align-items: start; padding: 32px 48px 48px; }
.layout.closed { grid-template-columns: minmax(0, 1200px); }
.layout.closed .assistant { display: none; }

/* AI/Assistant panel */
.assistant { background: #fff; border-radius: var(--r); display: flex; flex-direction: column; position: sticky; top: 204px; max-height: calc(100vh - 228px); overflow: hidden; }
.assistant-head { display: flex; align-items: center; gap: 8px; padding: 24px 24px 0; }
.assistant-head h2 { flex: 1; font: 500 22px/30px var(--display-font); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--action); display: grid; place-items: center; flex: none; }
.label-pill { display: inline-flex; padding: 8px 20px; border-radius: 999px; background: var(--highlight); font-weight: 500; white-space: nowrap; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--page); color: var(--action-text); display: grid; place-items: center; flex: none; }
.assistant-body { display: flex; flex-direction: column; gap: 16px; padding: 24px; min-height: 0; }
.chat { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 60px; }
.msg-user { align-self: flex-end; max-width: 296px; background: var(--highlight); padding: 12px 16px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; }
.msg-ai { display: flex; gap: 8px; align-items: flex-start; }
.msg-ai .content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.msg-ai .name { font: 500 12px/18px var(--text-font); color: var(--text-alt); }
.msg-ai p { white-space: pre-wrap; }
.old { opacity: .6; }
.page-actions { display: flex; flex-direction: column; gap: 4px; }
.page-action { display: flex; gap: 8px; align-items: center; padding: 8px 12px 8px 8px; border-radius: var(--r); background: var(--highlight); font: 500 12px/18px var(--text-font); }
.page-action .check { width: 20px; height: 20px; border-radius: 10px; background: var(--action); display: grid; place-items: center; flex: none; }
.thread-divider { display: flex; align-items: center; gap: 8px; font: 500 12px/14px var(--text-font); color: #667080; }
.thread-divider::before, .thread-divider::after { content: ""; flex: 1; height: 1px; background: #ccd1d9; }
.typing { color: var(--text-alt); font-size: 14px; line-height: 22px; padding-left: 36px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 12px 20px; border-radius: 999px; background: #fff; border: 1.5px solid var(--border-strong); font-weight: 500; white-space: nowrap; }
.chip:hover { background: var(--highlight); }
.disclaimer { display: flex; gap: 6px; align-items: center; font: 400 12px/18px var(--text-font); color: var(--text-alt); }
.composer { padding-top: 12px; }
.composer-input { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 16px; background: var(--page); border: 1px solid var(--border); border-radius: 999px; }
.composer-input:focus-within { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.composer-input input { flex: 1; min-width: 0; border: 0; background: none; outline: none; }
.composer-input input::placeholder { color: var(--text-alt); opacity: 1; }
.voice { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.send { width: 40px; height: 40px; border-radius: 50%; background: var(--action); display: grid; place-items: center; flex: none; }
.send:disabled { opacity: .5; }

/* Existing booking page (container: adapts to its own width) */
.page { container-type: inline-size; display: flex; flex-direction: column; gap: 24px; min-width: 0; position: relative; }
.page.padtop { padding-top: 8px; }
.card { background: #fff; border-radius: var(--r-card); padding: 16px; position: relative; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.gap4 { gap: 4px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; } .gap24 { gap: 24px; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.divider { height: 2px; background: var(--border-subtle); align-self: stretch; }

/* Flight list top */
.trip-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.trip-title { display: flex; align-items: center; gap: 16px; flex: 1; }
.banner-co2 { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r); background: var(--info); font-size: 14px; line-height: 22px; }
.datepicker { display: flex; align-items: center; gap: 4px; }
.day { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 8px; height: 70px; background: #fff; border: 1px solid var(--border-day); border-radius: 8px; box-shadow: 0 2px 3px rgb(0 0 0 / 8%); white-space: nowrap; }
.day b { font-weight: 500; }
.day span { font-size: 14px; line-height: 22px; }
.day.selected { background: var(--highlight); border: 2px solid var(--action); color: var(--action); }
.day.selected b { font-weight: 700; }
.day.selected span { font-weight: 500; }
.filters { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 8px 0; margin-top: -8px; }
.filters .lbl { font: 500 12px/18px var(--text-font); color: var(--text-alt); }
.section-title { display: flex; align-items: center; gap: 8px; font: 500 18px/26px var(--display-font); }
.flights-group { display: flex; flex-direction: column; gap: 16px; }
.flights { display: flex; flex-direction: column; gap: 8px; }

/* Desktop flight card */
.flight { background: #fff; border-radius: var(--r); position: relative; }
.flight.hl-flight { box-shadow: 0 0 0 2px var(--action); }
.flight-main { display: flex; justify-content: space-between; align-items: center; padding-right: 16px; min-height: 172px; }
.flight-infos { width: 550px; max-width: 100%; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.flight-top { display: flex; justify-content: space-between; align-items: center; min-height: 18px; }
.airlines { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: var(--text-alt); }
.tags { display: flex; gap: 8px; }
.tag { display: flex; align-items: center; gap: 4px; font: 500 12px/18px var(--text-font); }
.timeline { display: flex; align-items: center; gap: 4px; }
.timeline .pt b { display: block; font: 500 18px/26px var(--display-font); }
.timeline .pt span { color: var(--text-alt); }
.timeline .pt.dest { text-align: right; }
.timeline .line { flex: 1; padding: 8px 16px; }
.timeline .line::before { content: ""; display: block; border-top: 1px solid var(--border); }
.timeline .dur { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; line-height: 22px; }
.timeline .dur b { font: 700 12px/18px var(--text-font); }
.timeline .dur a { color: var(--action); font-weight: 500; text-decoration: underline; }
.cabins { display: flex; gap: 16px; align-items: center; }
.cabin span { display: block; }
.cabin .row, .cabin .btn { display: flex; }
.cabin .ic { display: inline-block; }
.cabin { width: 200px; height: 114px; display: flex; flex-direction: column; border-radius: var(--r); text-align: left; position: relative; }
.cabin .cabin-title { padding: 4px 8px; font-weight: 500; border: 1.5px solid var(--border-subtle); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--highlight); }
.cabin.premium .cabin-title { background: var(--premium); color: #fff; }
.cabin.business .cabin-title { background: var(--text); color: #fff; }
.cabin .cabin-price { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; border: 1.5px solid var(--border-subtle); border-top: 0; border-radius: 0 0 12px 12px; background: #fff; }
.cabin .cabin-price .row { justify-content: space-between; font-weight: 500; }
.cabin .cabin-price .row .ic { color: var(--action); }
.cabin .lowest { background: #b7f1ba; color: var(--success); border-radius: 12px; padding: 2px 8px; }
.cabin .lowest small { display: block; font: 500 14px/22px var(--text-font); }
.cabin .lowest .ic { color: var(--success); }
.cabin.open .cabin-price { border-bottom: 0; border-radius: 0; color: #14438b; justify-content: center; padding-bottom: 0; }
.cabin.open .cabin-price b { font-weight: 500; }
.cabin.open .extender { position: absolute; left: 0; right: 0; top: 100%; height: 56px; padding: 8px; background: #fff; border: 1.5px solid var(--border-subtle); border-top: 0; z-index: 1; margin-top: -1.5px; }
.cabin.open .extender .btn { width: 100%; }

/* Branded fares */
.fares-wrap { position: relative; margin-top: 22px; background: #fff; border: 1px solid var(--border-subtle); border-radius: 0 0 12px 12px; padding: 16px; }
.fares { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 3px; margin: -3px; }
.fares::-webkit-scrollbar { display: none; }
.fare { display: flex; flex-direction: column; border-radius: var(--r); scroll-snap-align: start; position: relative; min-height: 597px; }
.fare .promo { padding: 4px 8px; background: var(--info); border: 1.5px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; font: 500 14px/22px var(--text-font); }
.fare-head { padding: 8px 16px; background: var(--highlight); font-weight: 700; border-radius: 12px 12px 0 0; }
.fare .promo + .fare-head { border-radius: 0; }
.fare-body { flex: 1; display: flex; flex-direction: column; padding: 0 16px 16px; border: 1px solid var(--border-subtle); border-top: 0; border-radius: 0 0 12px 12px; background: #fff; }
.fare-attrs { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 16px 0; font-size: 14px; line-height: 22px; }
.attr { display: flex; gap: 4px; align-items: flex-start; }
.attr .ic { color: var(--success); }
.attr.no .ic { color: var(--error); }
.attr.no span { color: var(--text-strong); }
.attr.fb span { background: var(--fb-surface); color: var(--fb); flex: 1; }
.seat-box { background: var(--highlight); border-radius: var(--r); padding: 8px; }
.seat-box .row { justify-content: space-between; }
.checkbox { width: 20px; height: 20px; margin: 2px; border: 1px solid #858791; background: #fff; flex: none; }
.checkbox.r4 { border: 1.5px solid var(--border-strong); border-radius: 4px; }
.fare-cond { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; font-size: 14px; line-height: 22px; }
.fare-cond .divider { margin-top: -16px; }
.fare .btn { margin-top: 16px; width: 100%; }
.fare.hl-fare { box-shadow: 0 0 0 3px var(--action); }
.fare.hl-fare .fare-head { background: var(--action); color: #fff; }
.carousel-btn { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 20px; background: #fff; border: 1px solid #d1d9e3; box-shadow: 0 2px 8px rgb(0 0 0 / 16%); display: grid; place-items: center; color: #003073; z-index: 2; }
.carousel-btn.next { right: -4px; }
.carousel-btn.prev { left: -4px; }
.carousel-btn[hidden] { display: none; }

/* Holiday banner */
.holiday { display: flex; background: #fff; border-radius: 8px; box-shadow: 0 3px 8px rgb(0 0 0 / 16%), 0 1px 4px rgb(0 0 0 / 10%); overflow: hidden; color: #051039; }
.holiday .logo { flex: 1; display: flex; align-items: center; padding: 8px 48px 8px 32px; }
.holiday .content { flex: 1; display: flex; align-items: center; gap: 32px; padding: 12px 24px 12px 0; }
.btn.af-tertiary { border: 1px solid #051039; border-radius: 4px; padding: 10px 24px; color: #051039; }

/* Summary */
.title-row { display: flex; align-items: center; gap: 16px; }
.trip-card { display: flex; gap: 24px; align-items: stretch; min-height: 280px; }
.trip-card .info { width: 441px; flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.trip-card .photo { flex: 1; min-width: 0; border-radius: 16px; background: center / cover no-repeat; display: flex; align-items: flex-end; justify-content: flex-end; padding: 16px; min-height: 280px; }
.itin { display: flex; align-items: center; }
.itin .pt b { display: block; font: 500 18px/26px var(--display-font); }
.itin .pt.dest { text-align: right; }
.itin .mid { padding: 0 16px; text-align: center; }
.itin .mid small { display: block; font-size: 12px; line-height: 18px; }
.itin .ln { flex: 1; border-top: 1px solid var(--border); margin: 0 0; }
.itin .pt { padding-right: 16px; } .itin .pt.dest { padding: 0 0 0 16px; }
.upsell { display: flex; }
.upsell .img { width: 320px; height: 320px; border-radius: 32px; background: center / cover no-repeat; flex: none; }
.upsell .content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 24px 0 24px 24px; }
.upsell .eyebrow { color: var(--action); font-weight: 500; }
.upsell .attrs { display: flex; gap: 32px; }
.upsell .attrs > div { flex: 1; display: flex; gap: 8px; }
.upsell .attrs b { display: block; font: 700 14px/22px var(--text-font); padding-top: 2px; }
.upsell .attrs small { font-size: 12px; line-height: 18px; display: block; }
.cta { display: flex; align-items: center; gap: 8px; font-weight: 500; color: #051039; }
.cta .price { font: 700 18px/26px var(--text-font); color: var(--action); }
.toggle { width: 40px; height: 24px; border-radius: 999px; background: #797471; position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle[aria-checked="true"] { background: var(--action); }
.toggle[aria-checked="true"]::after { left: 18px; }
.checks { display: flex; gap: 8px; flex-wrap: wrap; }
.checks > span { display: flex; gap: 4px; align-items: center; }
.checks .ic, .list-check .ic { color: var(--success); }
.price-right { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* Passengers */
.fb-login { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.list-check { display: flex; flex-direction: column; gap: 12px; }
.list-check li { display: flex; gap: 4px; }
.panel { background: #fff; border-radius: var(--r-card); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 16px; font: 500 18px/26px var(--display-font); width: 100%; text-align: left; }
.panel-head .grow { text-align: left; }
.panel-body { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; }
.notification { display: flex; gap: 4px; padding: 12px; border-radius: 16px; background: var(--info); }
.fields { display: flex; gap: 16px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 8px; position: relative; }
.field .control { height: 56px; width: 100%; padding: 0 12px; background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--r); outline: none; appearance: none; -webkit-appearance: none; }
.field .control:focus { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.field .control::placeholder { color: var(--text-strong); opacity: 1; }
.field.select::after { content: ""; position: absolute; right: 12px; bottom: 16px; width: 24px; height: 24px; background: var(--text); -webkit-mask: url("assets/icon-dropdown-arrow-down.svg") center / contain no-repeat; mask: url("assets/icon-dropdown-arrow-down.svg") center / contain no-repeat; pointer-events: none; }
.field.select .control { padding-right: 40px; }
.w160 { width: 160px; } .w264 { width: 264px; } .w89 { width: 96px; } .w120 { width: 120px; } .w340 { width: 340px; } .w379 { flex: 1; min-width: 200px; }
.toggle-row { display: flex; gap: 8px; align-items: center; }
.fb-join { display: flex; padding: 0; overflow: hidden; }
.fb-join .side { width: 394px; flex: none; background: #ebeaff url("assets/bg-flyingblue.png") center / cover no-repeat; padding: 24px; }
.fb-join .side p { font-size: 18px; line-height: 26px; padding-top: 32px; }
.fb-join .form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px; }

/* Options */
.ec-hero { display: flex; max-width: 912px; border-radius: 16px; background: #f6f7f8; overflow: hidden; margin-bottom: 16px; }
.ec-hero .txt { flex: 1; padding: 24px 0 24px 24px; display: flex; flex-direction: column; justify-content: center; color: #182f42; }
.ec-hero .txt h3 { padding-bottom: 16px; }
.ec-hero .txt b { font-weight: 800; }
.ec-hero img { width: 444px; max-width: 50%; height: auto; align-self: center; }
.matcard { display: flex; align-items: stretch; background: #fff; border: 1.5px solid #d3d4d7; border-radius: var(--r-card); position: relative; text-align: left; width: 100%; color: #051039; }
.matcard .pic { width: 184px; flex: none; background: #e9e9eb; border-radius: 22px 0 0 22px; display: flex; align-items: center; min-height: 94px; }
.matcard .pic img { width: 184px; height: 94px; }
.matcard .body { flex: 1; min-width: 0; display: flex; padding: 16px; gap: 16px; }
.matcard h4 { font: 500 18px/26px var(--display-font); padding-bottom: 8px; }
.matcard p { color: #4e5160; }
.matcard p.cta-line { color: var(--action); font-weight: 700; padding-top: 8px; }
.matcard .bags { font: 400 16px/23px var(--text-font); color: #051039; padding-bottom: 8px; }
.matcard .bags b { display: block; }
.matcard .chev { color: #051039; align-self: flex-start; }

/* Payment */
.pay-trip { display: flex; gap: 16px; }
.pay-trip .photo { width: 257px; flex: none; border-radius: var(--r); background: url("assets/photo-payment.jpg") center / cover no-repeat; }
.pay-flight { border: 1.5px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.pay-flight .top { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px; }
.pay-flight .perks { background: var(--page); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pay-route { display: flex; flex-direction: column; gap: 10px; position: relative; padding-left: 20px; }
.pay-route::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; border-left: 1.5px solid var(--text); }
.pay-route span { position: relative; }
.pay-route span::before { content: ""; position: absolute; left: -20px; top: 7px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text); background: #fff; }
.pay-price { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; position: relative; }
.pay-methods { width: 100%; height: auto; }

/* AI highlight ring + tag */
.hl { outline: 2px solid var(--action); outline-offset: 4px; border-radius: 10px; }
.hl::before { content: attr(data-hl); position: absolute; top: -15px; left: 8px; z-index: 3; background: var(--action); color: #fff; font: 500 12px/14px var(--text-font); padding: 2px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; }

/* Closed state */
.launcher { position: fixed; right: 48px; bottom: 40px; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px 20px 10px 12px; background: #fff; border: 1.5px solid var(--action); border-radius: 28px; box-shadow: 0 4px 16px rgb(0 0 0 / 18%); font-weight: 500; color: #002154; }
.toast { position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 24px; padding: 14px 20px; background: #1c2638; color: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / 20%); max-width: calc(100vw - 32px); }
.toast button { color: #99d1ff; font-weight: 700; text-decoration: underline; }

/* Search (entry page, not part of the Concept C frames) */
.search-form { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }

/* The existing page adapts to the width left by the assistant */
@container (max-width: 1100px) {
  .fares { grid-auto-columns: calc((100% - 16px) / 2); }
  .flight-infos { width: auto; flex: 1; min-width: 300px; }
  .cabin { width: 160px; }
  .trip-card .info { width: 360px; }
  .upsell .img { width: 240px; height: auto; }
  .fb-join .side { width: 300px; }
  .ec-hero img { max-width: 40%; }
}
@container (max-width: 760px) {
  .fares { grid-auto-columns: 88%; }
  .flight-main { flex-direction: column; align-items: stretch; padding: 0 0 16px; }
  .cabins { padding: 28px 16px 0; overflow-x: auto; }
  .trip-head, .trip-card, .upsell, .fb-login, .fb-join, .pay-trip, .ec-hero, .holiday { flex-direction: column; align-items: stretch; }
  .trip-card .info, .fb-join .side, .upsell .img, .pay-trip .photo { width: auto; }
  .upsell .img, .pay-trip .photo { height: 200px; }
  .upsell .content { padding: 16px 0 0; }
  .upsell .attrs { flex-direction: column; gap: 12px; }
  .datepicker { overflow-x: auto; }
  .day { min-width: 110px; }
  .matcard .pic { width: 96px; overflow: hidden; }
  .d36 { font-size: 28px; line-height: 32px; }
  .holiday .logo, .holiday .content { padding: 16px; }
}

@media (max-width: 1560px) { :root { --panel-w: 360px; } .msg-user { max-width: 260px; } }
@media (max-width: 1280px) {
  .layout { grid-template-columns: minmax(0, 1200px); padding: 24px 24px 96px; }
  .assistant { position: fixed; z-index: 35; top: 0; left: 0; bottom: 0; width: min(408px, 100vw); max-height: none; border-radius: 0; box-shadow: 8px 0 32px rgb(0 0 0 / 25%); }
}
@media (max-width: 760px) {
  .layout { padding: 16px 16px 96px; }
  .top-nav { padding: 8px 0 0; } .top-nav > img { width: 160px; height: auto; }
  .menu-action span { display: none; }
  .step .label { font-size: 0; } .step.current .label { font-size: 12px; white-space: nowrap; }
  .assistant { top: auto; width: 100vw; height: 80vh; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgb(0 0 0 / 25%); }
  .launcher { right: 16px; bottom: 16px; }
}