/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:       #0770e3;
  --blue-dark:  #044fa0;
  --blue-light: #e8f0fd;
  --teal:       #00b2a9;
  --green:      #00a862;
  --gray-50:    #f8f9fb;
  --gray-100:   #f0f2f5;
  --gray-200:   #e2e6ed;
  --gray-400:   #8c96a5;
  --gray-600:   #4a5568;
  --gray-800:   #1a202c;
  --white:      #ffffff;
  --red:        #e83b3b;
  --ryanair:    #073590;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.14);
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  20px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
body { font-family: var(--font); background: var(--gray-50); color: var(--gray-800); min-height: 100vh; }

/* ===== NAVBAR ===== */
.navbar { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); }
.nav-inner { max-width: 1000px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; user-select: none; }
.footer-logo { cursor: pointer; user-select: none; }
.logo-icon { font-size: 22px; }
.logo-text { font-weight: 700; font-size: 18px; color: var(--blue); letter-spacing: -.3px; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { text-decoration: none; color: var(--gray-600); font-size: 14px; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--blue); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; box-sizing: border-box;   /* match the lang-switcher pill height */
  border: 1.5px solid var(--blue); color: var(--blue) !important;
  padding: 4px 16px; border-radius: 20px;
  transition: background .15s !important;
}
.btn-ghost:hover { background: var(--blue-light) !important; }
/* My Trips — navbar dropdown for recent + saved searches (localStorage). */
.my-trips-wrap { position: relative; display: inline-block; }
.btn-trips {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; box-sizing: border-box;
  background: var(--gray-100); border: 1.5px solid var(--gray-200);
  color: var(--gray-600); padding: 4px 13px; border-radius: 20px;
  font: 700 13px var(--font); font-family: var(--font); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-trips:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.btn-trips[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.my-trips-icon  { font-size: 14px; line-height: 1; }
.my-trips-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: white; font-size: 10px; font-weight: 800;
  border-radius: 10px; padding: 1px 6px; min-width: 18px; line-height: 1.2;
}
.my-trips-count:empty { display: none; }

/* position: fixed so we escape the navbar's backdrop-filter stacking
   context (iOS Safari clips absolute-positioned descendants of a
   backdrop-filtered ancestor). Anchored to the viewport's top-right
   instead of the button. */
.my-trips-dropdown {
  position: fixed; top: 64px; right: 12px;
  width: 360px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px); overflow-y: auto;
  background: white; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(15,23,42,.18);
  padding: 6px; z-index: 250; display: none;
  font-family: var(--font);
  -webkit-overflow-scrolling: touch;
}
.my-trips-dropdown.open { display: block; animation: slideIn .15s ease; }
@media (max-width: 640px) {
  .my-trips-dropdown { right: 8px; max-width: calc(100vw - 16px); }
}
/* Dim backdrop while the dropdown is open — makes it feel like a real
   menu instead of a floating panel hovering over the page. Click-outside
   handler in app.js closes the dropdown when the backdrop is tapped. */
.my-trips-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.32);
  z-index: 240; display: none; -webkit-tap-highlight-color: transparent;
}
.my-trips-backdrop.open { display: block; animation: slideIn .15s ease; }
/* iOS / Safari: ensure the button receives taps and has a clear feedback */
.btn-trips { -webkit-tap-highlight-color: rgba(7,112,227,.18); }

.my-trips-section        { margin-bottom: 4px; }
.my-trips-section + .my-trips-section { border-top: 1px solid var(--gray-100); padding-top: 4px; margin-top: 4px; }
.my-trips-section-title  { font-size: 11px; font-weight: 800; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px 6px; }
.my-trips-entry {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; text-align: left; transition: background .12s;
}
.my-trips-entry:hover, .my-trips-entry:focus { background: var(--blue-light); outline: none; }
.my-trips-entry-main  { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.my-trips-entry-title { font-size: 13px; font-weight: 700; color: var(--gray-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-trips-entry-meta  { font-size: 11px; color: var(--gray-600); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-trips-entry-age   { font-size: 10px; color: var(--gray-400); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; }
.my-trips-delete {
  background: none; border: none;
  color: var(--gray-400); font-size: 14px; font-weight: 700;
  padding: 4px 8px; border-radius: 6px; cursor: pointer; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.my-trips-delete:hover { background: var(--red); color: white; }

.my-trips-empty { padding: 28px 18px; text-align: center; color: var(--gray-400); font-size: 13px; line-height: 1.5; }
.my-trips-clear {
  width: calc(100% - 12px); margin: 4px 6px 2px; padding: 6px;
  background: none; border: none; color: var(--gray-400);
  font: 600 11px var(--font); cursor: pointer; border-radius: 6px;
}
.my-trips-clear:hover { color: var(--red); background: var(--gray-50); }

/* Save-trip button in the results header */
.results-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.btn-save-trip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 14px; min-height: 36px; box-sizing: border-box;
  background: white; border: 1.5px solid var(--gray-200); border-radius: 20px;
  color: var(--gray-700); font: 700 13px var(--font); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-save-trip:hover  { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.btn-save-trip.saved  { background: var(--green); color: white; border-color: var(--green); }
@media (max-width: 640px) {
  .btn-save-trip      { padding: 7px 10px; font-size: 12px; }
  .btn-edit-search    { padding: 7px 10px; font-size: 12px; }
}

/* Language switcher — two side-by-side pills with the active language
   filled in blue. Both languages are always visible so users can switch
   with a single tap. */
.lang-switcher { display: inline-flex; padding: 3px; gap: 2px;
  background: var(--gray-100); border: 1.5px solid var(--gray-200);
  border-radius: 20px; font-family: var(--font); line-height: 1.4; }
.lang-pill { background: transparent; border: none; color: var(--gray-600);
  font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 16px;
  cursor: pointer; transition: background .15s, color .15s; font-family: inherit; }
.lang-pill:hover { color: var(--blue); }
.lang-pill.active { background: white; color: var(--blue); box-shadow: 0 1px 4px rgba(15,23,42,.10); }

/* ===== HERO ===== */
.hero { position: relative; background: linear-gradient(135deg, #0770e3 0%, #044fa0 50%, #022d6e 100%); color: white; padding: 80px 24px 140px; text-align: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(0,178,169,.25) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(0,168,98,.15) 0%, transparent 50%); pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 80px; background: var(--gray-50); clip-path: ellipse(55% 100% at 50% 100%); }
.hero-content { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 16px; }
.hero h1 em { font-style: normal; color: #7ee8e4; }
.hero-sub { font-size: clamp(16px, 2vw, 20px); opacity: .85; max-width: 560px; margin: 0 auto; line-height: 1.6; }

/* ===== SEARCH PANEL ===== */
.search-panel-section { max-width: 860px; margin: -80px auto 0; padding: 0 24px 60px; position: relative; z-index: 10; }
.search-panel { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 36px 40px 32px; }
.panel-header { margin-bottom: 28px; }
.panel-header h2 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; margin-bottom: 4px; }
.panel-sub { color: var(--gray-400); font-size: 14px; }

/* ===== TRAVELER ROW ===== */
/* grid defined in PAX STEPPER section above */
@keyframes slideIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes rowRemove {
  0%   { opacity: 1; transform: translateX(0);   max-height: 120px; margin-bottom: 12px; }
  60%  { opacity: 0; transform: translateX(40px); max-height: 120px; }
  100% { opacity: 0; transform: translateX(40px); max-height: 0;    margin-bottom: 0;
         padding-top: 0; padding-bottom: 0; border-width: 0; }
}
@keyframes rowFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(7,112,227,0);    transform: scale(1); }
  40%      { box-shadow: 0 0 0 4px rgba(7,112,227,.18); transform: scale(1.01); }
}
.traveler-row.row-removing {
  pointer-events: none;
  overflow: hidden;
  animation: rowRemove .26s ease forwards;
}
.traveler-row.row-clearing {
  border-radius: var(--radius-sm);
  animation: rowFlash .55s ease;
}
.traveler-name-group { display: flex; align-items: center; gap: 8px; }
.traveler-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; flex-shrink: 0; }
.traveler-name-input { flex: 1; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 14px; font-family: var(--font); outline: none; transition: border-color .15s; color: var(--gray-800); min-width: 0; }
.traveler-name-input:focus { border-color: var(--blue); }
.airport-input-wrap { position: relative; display: flex; align-items: center; }
.field-icon { position: absolute; left: 12px; font-size: 15px; pointer-events: none; z-index: 1; }
.airport-input-wrap input, .date-input-wrap input { width: 100%; padding: 9px 12px 9px 36px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font); color: var(--gray-800); outline: none; transition: border-color .15s; background: white; }
.airport-input-wrap input:focus, .date-input-wrap input:focus { border-color: var(--blue); }
.airport-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: white; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 50; max-height: 260px; overflow-y: auto; display: none; }
.airport-dropdown.open { display: block; }
.airport-option { padding: 10px 14px; cursor: pointer; display: flex; align-items: flex-start; gap: 10px; transition: background .1s; }
.airport-option:hover { background: var(--blue-light); }
.airport-code { font-weight: 700; font-size: 13px; color: var(--blue); min-width: 36px; }
.airport-name-text { font-size: 13px; color: var(--gray-600); line-height: 1.4; }
.airport-city { font-weight: 600; color: var(--gray-800); }
.btn-remove { width: 34px; height: 34px; border: 1.5px solid var(--gray-200); background: white; border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--gray-400); display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.btn-remove:hover { border-color: var(--red); color: var(--red); background: #fff5f5; }
.btn-add-traveler { background: none; border: 2px dashed var(--gray-200); color: var(--blue); font-size: 14px; font-weight: 600; font-family: var(--font); padding: 10px 20px; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .15s; margin-bottom: 28px; }
.btn-add-traveler:hover { border-color: var(--blue); background: var(--blue-light); }
.btn-add-traveler .plus { font-size: 20px; line-height: 1; }

/* ===== DESTINATION ROW ===== */
/* Destination on its own row, dates side-by-side in a separate row below. */
.destination-row { margin-bottom: 18px; }
.dates-row       { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.field-group label { display: flex; align-items: center; min-height: 30px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-400); margin-bottom: 6px; }
.optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.date-input-wrap { position: relative; display: flex; align-items: center; }

/* ===== PLANNER CTA BANNER ===== */
/* Compatible-destinations finder — featured CTA, sits between destination
   and date rows so users see it before committing to a destination. */
.planner-cta-banner {
  display: flex; align-items: center; gap: 16px;
  width: 100%; margin-bottom: 22px; padding: 18px 22px;
  background: linear-gradient(135deg, #dbeafe 0%, #d1fae5 50%, #fef3c7 100%);
  background-size: 200% 200%;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--blue-dark);
  font-family: var(--font);
  text-align: left;
  box-shadow: 0 4px 18px rgba(7,112,227,.18);
  animation: ctaShimmer 6s ease-in-out infinite, ctaPulse 2.5s ease-in-out infinite;
  transition: transform .15s, box-shadow .15s;
}
.planner-cta-banner:hover  { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(7,112,227,.28); }
.planner-cta-banner:active { transform: translateY(0);    box-shadow: 0 3px 10px rgba(7,112,227,.18); }
.planner-cta-icon  { font-size: 30px; flex-shrink: 0; animation: ctaWiggle 4s ease-in-out infinite; }
.planner-cta-body  { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.planner-cta-text  { font-size: 15px; font-weight: 700; letter-spacing: .1px; line-height: 1.25; }
.planner-cta-hint  { font-size: 12px; font-weight: 500; color: var(--blue); opacity: .85; }
.planner-cta-arrow { font-size: 20px; flex-shrink: 0; animation: ctaBounce 1.4s ease-in-out infinite; }
@keyframes ctaShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes ctaWiggle  { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes ctaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(7,112,227,0); } 50% { box-shadow: 0 0 0 4px rgba(7,112,227,.08); } }
@keyframes ctaBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ===== DEST REACH BADGE (top of card, centered) ===== */
.dest-reach-top { text-align: center; margin-bottom: 2px; }

/* ===== SEARCH BUTTON ===== */
.search-actions { display: flex; justify-content: center; }
.btn-search { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); color: white; border: none; padding: 16px 40px; border-radius: 32px; font-size: 16px; font-weight: 700; font-family: var(--font); cursor: pointer; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 20px rgba(7,112,227,.35); transition: all .2s; letter-spacing: -.2px; }
.btn-search:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(7,112,227,.45); }
.btn-search:active { transform: translateY(0); }
.search-icon { font-size: 18px; }

/* ===== LOADING ===== */
.loading-overlay { position: fixed; inset: 0; background: rgba(10,20,40,.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 200; }
.loading-card { background: white; border-radius: var(--radius-lg); padding: 48px 56px; text-align: center; min-width: 340px; max-width: 440px; box-shadow: var(--shadow-lg); }
.loading-note { font-size: 12px; color: var(--gray-400); margin-top: 16px; line-height: 1.5; }
.spinner { width: 48px; height: 48px; border: 4px solid var(--gray-200); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 20px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 16px; font-weight: 600; margin-bottom: 20px; color: var(--gray-800); }
.loading-travelers { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.loading-traveler-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray-600); }
.loading-traveler-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-200); transition: background .3s; flex-shrink: 0; }
.loading-traveler-row.done .dot { background: var(--green); }
.loading-traveler-row.active .dot { background: var(--blue); animation: pulse .8s ease infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.4);opacity:.7;} }

/* ===== RESULTS ===== */
.results-section { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }
.results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.results-title-block h2 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.results-sub { color: var(--gray-400); font-size: 14px; margin-top: 4px; }
.btn-edit-search { background: white; border: 1.5px solid var(--gray-200); border-radius: 20px; padding: 8px 18px; font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; color: var(--gray-600); transition: all .15s; }
.btn-edit-search:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }

/* ===== TRAVELER CARDS ===== */
.traveler-cards { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }

.traveler-card { background: white; border: 1.5px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; animation: slideIn .25s ease; }

.tc-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--gray-100); flex-wrap: wrap; gap: 12px; }
.tc-identity { display: flex; align-items: center; gap: 14px; }
.tc-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: white; flex-shrink: 0; }
.tc-name { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.tc-route { font-size: 13px; color: var(--gray-400); display: flex; align-items: center; gap: 5px; }
.tc-route .iata { font-weight: 600; color: var(--gray-600); }
.tc-route .arrow { font-size: 11px; }
.tc-cheapest { font-size: 14px; color: var(--gray-600); }
.tc-cheapest strong { font-size: 20px; font-weight: 800; color: var(--green); }

/* ===== FLIGHT LIST ===== */
.tc-flights-section { padding: 0 24px; }
.tc-flights-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--gray-400); padding: 14px 0 8px; }
.ryanair-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ryanair); }

.tc-flight { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); flex-wrap: wrap; }
.tc-flight:last-child { border-bottom: none; }

.tc-fl-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.tc-fl-badge.direct { background: #e6f9f0; color: var(--green); }
.tc-fl-badge.stop   { background: #fff4e6; color: #c2610c; }

.tc-fl-time { font-size: 14px; font-weight: 700; white-space: nowrap; min-width: 110px; }
.tc-fl-dur  { font-size: 12px; color: var(--gray-400); min-width: 60px; }
.tc-fl-num  { font-size: 12px; color: var(--gray-400); min-width: 60px; }
.tc-fl-date { font-size: 12px; color: var(--gray-600); font-weight: 500; flex: 1; }
.tc-fl-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tc-fl-price { font-size: 16px; font-weight: 800; color: var(--gray-800); white-space: nowrap; }
.tc-fl-book { background: var(--ryanair); color: white; text-decoration: none; padding: 6px 14px; border-radius: 16px; font-size: 12px; font-weight: 700; white-space: nowrap; transition: background .15s; }
.tc-fl-book:hover { background: #0a46c4; }

.tc-no-flights { padding: 16px 0; font-size: 13px; color: var(--gray-400); font-style: italic; }

/* ===== ALL AIRLINES LINKS ===== */
.tc-more { display: flex; align-items: center; gap: 10px; padding: 16px 24px; background: var(--gray-50); border-top: 1px solid var(--gray-100); flex-wrap: wrap; }
.tc-more-label { font-size: 12px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.search-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; text-decoration: none; transition: all .15s; border: 1.5px solid transparent; white-space: nowrap; }
.search-link:hover { transform: translateY(-1px); }
.link-skyscanner { background: var(--blue); color: white; }
.link-skyscanner:hover { background: var(--blue-dark); }
.link-google { background: white; color: var(--gray-800); border-color: var(--gray-200); }
.link-google:hover { border-color: #4285f4; color: #4285f4; }
.link-kayak { background: white; color: var(--gray-800); border-color: var(--gray-200); }
.link-kayak:hover { border-color: #ff690f; color: #ff690f; }

/* ===== SHARE ===== */
.share-section { background: linear-gradient(135deg, #0770e3 0%, #044fa0 100%); border-radius: var(--radius); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: white; }
.share-header { display: flex; align-items: center; gap: 16px; }
.share-icon { font-size: 32px; }
.share-header h3 { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.share-header p { font-size: 13px; opacity: .75; }
.share-buttons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-share { padding: 11px 22px; border-radius: 24px; font-size: 14px; font-weight: 700; font-family: var(--font); cursor: pointer; border: none; transition: all .15s; }
.btn-whatsapp { background: #25d366; color: white; }
.btn-whatsapp:hover { background: #1dbd5a; transform: translateY(-1px); }
.btn-copy { background: rgba(255,255,255,.15); color: white; border: 1.5px solid rgba(255,255,255,.3); }
.btn-copy:hover { background: rgba(255,255,255,.25); }
.btn-copy.copied { background: rgba(255,255,255,.9); color: var(--blue); }

/* ===== SORT BAR ===== */
.sort-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.sort-label { font-size: 12px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .5px; margin-right: 4px; }
.sort-btn { padding: 8px 16px; border-radius: 20px; border: 1.5px solid var(--gray-200); background: white; color: var(--gray-600); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all .15s; }
.sort-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.sort-btn.active { background: var(--blue); border-color: var(--blue); color: white; box-shadow: 0 2px 8px rgba(7,112,227,.25); }

/* Direct-only toggle — green accent to distinguish from sort active state */
.sort-divider { width: 1px; height: 20px; background: var(--gray-200); flex-shrink: 0; margin: 0 2px; align-self: center; }
.direct-toggle { border-style: dashed; }
.direct-toggle:hover { border-color: #16a34a; color: #16a34a; background: #f0fdf4; border-style: dashed; }
.direct-toggle.active { background: #16a34a; border-color: #16a34a; border-style: solid; color: white; box-shadow: 0 2px 8px rgba(22,163,74,.25); }
.direct-toggle.active:hover { background: #15803d; border-color: #15803d; color: white; }

/* ===== COMBINATION GRID ===== */
.combo-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }

.combo-card { background: white; border: 1.5px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; animation: slideIn .25s ease both; transition: box-shadow .2s, border-color .2s, transform .1s; cursor: pointer; }
.combo-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue); }
.combo-card:active { transform: scale(.995); }
.combo-card.combo-best { border-color: var(--green); border-width: 2px; }
.combo-card.combo-selected { border-color: var(--blue); border-width: 2px; box-shadow: 0 0 0 3px var(--blue-light); }

.combo-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); gap: 12px; flex-wrap: wrap; }
.combo-best .combo-header { background: #edf9f3; }

.combo-totals { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.combo-total { font-size: 17px; font-weight: 800; color: var(--gray-800); letter-spacing: -.3px; }
.combo-best .combo-total { color: var(--green); }
.combo-avg { font-size: 12px; color: var(--gray-500,#6b7280); background: var(--gray-100); padding: 3px 9px; border-radius: 10px; font-weight: 500; }
.combo-stat { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-400); }
.combo-stat-icon { font-size: 11px; }

.combo-score-wrap { display: flex; align-items: baseline; gap: 2px; flex-shrink: 0; }
.combo-score { font-size: 26px; font-weight: 800; color: var(--blue); line-height: 1; }
.combo-best .combo-score { color: var(--green); }
.combo-score-label { font-size: 13px; color: var(--gray-400); font-weight: 400; }

.combo-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.combo-badge.best { background: #d4f5e5; color: #007a47; }
.combo-badge.top  { background: var(--blue-light); color: var(--blue); }

.combo-rows { padding: 0 20px; }
.combo-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--gray-100); flex-wrap: wrap; }
.combo-row:last-child { border-bottom: none; }

.combo-traveler { display: flex; align-items: center; gap: 8px; min-width: 110px; flex-shrink: 0; }
.combo-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; }
.combo-tname { font-size: 13px; font-weight: 600; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; }

.combo-flight { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.combo-route { font-size: 12px; font-weight: 700; color: var(--gray-600); white-space: nowrap; }
.combo-arrow { color: var(--gray-400); font-size: 10px; margin: 0 1px; }
.combo-times { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--gray-800); }
.combo-dur { font-size: 12px; color: var(--gray-400); white-space: nowrap; }
.combo-airline { font-size: 11px; color: var(--gray-400); white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }

.src-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
.src-badge.sky { background: #dbeafe; color: #1d4ed8; }
.src-badge.ry  { background: #e0e7ff; color: #3730a3; }

.combo-price-wrap { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.combo-price { font-size: 16px; font-weight: 800; color: var(--gray-800); white-space: nowrap; }
.combo-book { background: var(--blue); color: white; text-decoration: none; padding: 6px 14px; border-radius: 16px; font-size: 12px; font-weight: 700; white-space: nowrap; transition: background .15s; }
.combo-book:hover { background: var(--blue-dark); }

/* ===== NO RESULTS ===== */
.no-results { padding: 60px 24px; text-align: center; color: var(--gray-400); }
.no-results-icon { font-size: 40px; margin-bottom: 12px; }
.no-results p { font-size: 15px; margin-bottom: 6px; }
.no-results-sub { font-size: 13px; }
.no-results .btn-ghost { margin-top: 16px; color: var(--blue); border-color: var(--blue); }

/* ===== DEEP LINKS SECTION ===== */
.deep-links-section { margin-bottom: 32px; }
.dl-details { background: rgba(255,255,255,.55); border: 1px dashed var(--gray-200); border-radius: var(--radius-sm); padding: 4px 12px; }
.dl-details[open] { background: white; border-style: solid; padding: 12px 14px; }
.dl-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--gray-500); margin-bottom: 0; padding: 8px 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; }
.dl-title::-webkit-details-marker { display: none; }
.dl-title::before { content: '›'; font-size: 18px; line-height: 1; transition: transform .15s ease; color: var(--brand); }
.dl-details[open] > .dl-title { margin-bottom: 12px; color: var(--gray-700); }
.dl-details[open] > .dl-title::before { transform: rotate(90deg); }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dl-card { background: white; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); padding: 14px 16px; }
.dl-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dl-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
.dl-name { font-size: 13px; font-weight: 700; color: var(--gray-800); }
.dl-route { font-size: 12px; color: var(--gray-400); }
.dl-links { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===== PAX STEPPER ===== */
.traveler-row { display: grid; grid-template-columns: 200px 1fr auto 38px; gap: 12px; align-items: center; margin-bottom: 12px; animation: slideIn .2s ease; }
.pax-stepper { display: flex; align-items: center; gap: 4px; background: var(--gray-100); border-radius: 20px; padding: 4px 8px; white-space: nowrap; }
.pax-btn { width: 24px; height: 24px; border: none; background: white; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; color: var(--blue); display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: var(--shadow-sm); transition: background .1s; flex-shrink: 0; }
.pax-btn:hover { background: var(--blue-light); }
.pax-count { font-size: 14px; font-weight: 700; min-width: 20px; text-align: center; color: var(--gray-800); }
.pax-label { font-size: 11px; color: var(--gray-400); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }

/* ===== COMBO PRICE STACK ===== */
.combo-price-stack { display: flex; flex-direction: column; align-items: flex-end; }
.combo-price-sub { font-size: 10px; color: var(--gray-400); white-space: nowrap; }
.btn-search.pulse { animation: searchPulse .6s ease 2; }
@keyframes searchPulse { 0%,100%{box-shadow:0 4px 20px rgba(7,112,227,.35);} 50%{box-shadow:0 4px 40px rgba(7,112,227,.7), 0 0 0 6px rgba(7,112,227,.15);} }

/* ===== PLANNER SECTION ===== */
.planner-section { background: var(--gray-50); border-top: 1px solid var(--gray-200); padding: 64px 24px 72px; }
.planner-inner { max-width: 1100px; margin: 0 auto; }

.planner-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.planner-title-row { flex: 1; }
.planner-title { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 8px; }
.planner-hint { color: var(--gray-400); font-size: 14px; }
.planner-origins { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.planner-origin-tag { background: var(--blue-light); color: var(--blue); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; }
.planner-origin-city { font-weight: 400; opacity: .8; }
.planner-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.planner-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-600); cursor: pointer; }
.planner-toggle input { accent-color: var(--blue); cursor: pointer; }
.planner-reachable-count { font-size: 12px; color: var(--green); font-weight: 700; background: #e6f9f0; padding: 4px 10px; border-radius: 10px; }

/* Tag filter chips */
.planner-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.tag-chip { padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--gray-200); background: white; color: var(--gray-600); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all .15s; }
.tag-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.tag-chip.active { background: var(--gray-800); border-color: var(--gray-800); color: white; }

/* Region groups */
.planner-regions { display: flex; flex-direction: column; gap: 36px; }
.planner-region-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--gray-400); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.planner-region-header::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }

/* Destination cards grid */
.planner-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 12px; }

.dest-card { background: white; border: 1.5px solid var(--gray-200); border-radius: var(--radius); padding: 14px; cursor: default; transition: box-shadow .2s, border-color .2s; display: flex; flex-direction: column; gap: 8px; }
.dest-card:hover { box-shadow: var(--shadow-md); }
.dest-card.dest-reachable { border-color: #a7f3d0; }
.dest-card.dest-reachable:hover { border-color: var(--green); }

.dest-card-top { display: flex; align-items: flex-start; gap: 10px; }
.dest-emoji { font-size: 22px; flex-shrink: 0; line-height: 1.2; }
.dest-info { flex: 1; min-width: 0; }
.dest-city { font-size: 14px; font-weight: 700; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-country { font-size: 11px; color: var(--gray-400); margin-top: 1px; }
.dest-vibe { font-size: 11px; color: var(--blue); font-weight: 600; background: var(--blue-light); padding: 2px 8px; border-radius: 8px; width: fit-content; }
.dest-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dest-tag { font-size: 10px; color: var(--gray-500, #6b7280); background: var(--gray-100); padding: 2px 6px; border-radius: 6px; }
.dest-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--gray-100); }
.dest-pop { font-size: 9px; color: var(--gray-400); letter-spacing: 1px; }
.dest-reachable .dest-pop { color: var(--green); }
.dest-plan-btn { background: none; border: none; color: var(--blue); font-size: 12px; font-weight: 700; font-family: var(--font); cursor: pointer; padding: 0; transition: color .15s; }
.dest-plan-btn:hover { color: var(--blue-dark); }
.dest-reachable .dest-plan-btn { color: var(--green); }
.dest-reachable .dest-plan-btn:hover { color: #007a47; }

/* Reachability badges */
.reach-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; }
.reach-all  { background: #d4f5e5; color: #007a47; }
.reach-some { background: #fff4e6; color: #c2610c; }
.reach-loading { background: var(--gray-100); color: var(--gray-400); }

.planner-empty { padding: 40px; text-align: center; color: var(--gray-400); font-size: 14px; }

/* ===== HOW IT WORKS ===== */
.how-section { padding: 80px 24px; }
.how-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.how-inner h2 { font-size: 32px; font-weight: 700; margin-bottom: 48px; letter-spacing: -.5px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }
.step { padding: 28px 20px; background: white; border-radius: var(--radius); border: 1.5px solid var(--gray-200); transition: box-shadow .2s; }
.step:hover { box-shadow: var(--shadow-md); }
.step-icon { font-size: 34px; margin-bottom: 14px; }
.step h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 13px; color: var(--gray-600); line-height: 1.6; }

/* ===== FOOTER ===== */
.footer { background: var(--gray-800); color: white; padding: 32px 24px; }
.footer-inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer .logo-text { color: white; }
.footer-note { font-size: 13px; color: var(--gray-400); max-width: 500px; line-height: 1.5; }

/* ===== COLORS ===== */
.color-0 { background: #0770e3; }
.color-1 { background: #00b2a9; }
.color-2 { background: #f97316; }
.color-3 { background: #8b5cf6; }
.color-4 { background: #ec4899; }
.color-5 { background: #10b981; }

/* ===== TOUCH OPTIMISATIONS (all screen sizes) ===== */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }
button, a, input, select, [role="button"] {
  touch-action: manipulation;   /* removes 300 ms tap delay */
}
/* 44 px tap targets on touch devices only (doesn't bloat desktop layout) */
@media (pointer: coarse) {
  .btn-search, .btn-share, .btn-add-traveler,
  .sort-btn, .tag-chip, .btn-edit-search, .lang-switcher,
  .btn-ghost, .dest-plan-btn, .dest-info-btn, .flex-day,
  .btn-trips, .btn-save-trip, .lang-pill,
  .view-tab, .aft-tab, .fp-choose-cta, .fp-book, .fp-chosen-badge,
  .aft-show-more, .my-trips-entry, .my-trips-delete, .my-trips-clear,
  .combo-book {
    min-height: 44px;
  }
  .btn-remove        { min-height: 40px; }
  .pax-btn           { min-height: 40px; min-width: 40px; }
  /* Prevent iOS auto-zoom: inputs must be ≥ 16 px */
  input, select, textarea { font-size: 16px !important; }
}

/* Scroll-margin so when JS calls scrollIntoView() the sticky navbar
   doesn't cover the target section. */
.sort-bar, .view-tabs, .all-flights-section, .itinerary-section,
.share-bar, .results-header { scroll-margin-top: 72px; }

/* ===== RESPONSIVE — Tablet ===== */
@media (max-width: 860px) {
  .search-panel-section { max-width: 100%; }
  .results-section      { max-width: 100%; }
}

/* ===== RESPONSIVE — Mobile ===== */
@media (max-width: 640px) {

  /* ----- NAV ----- */
  .nav-inner  { padding: 0 16px; height: 54px; }
  .nav-links  { gap: 8px; }
  .nav-links a:not(.btn-ghost) { display: none; }
  /* Compact the My Trips button — keep just the icon + count so the logo
     and the language switcher still fit comfortably on narrow phones. */
  .btn-trips        { padding: 4px 10px; }
  .my-trips-text    { display: none; }
  /* Slightly smaller logo text on phones too, to leave more room. */
  .logo-text        { font-size: 16px; }
  .logo-text  { font-size: 16px; }
  .btn-ghost  { padding: 6px 14px; font-size: 13px; }

  /* ----- HERO ----- */
  .hero       { padding: 48px 16px 110px; }
  .hero h1    { font-size: 30px; letter-spacing: -.8px; line-height: 1.15; }
  .hero-sub   { font-size: 15px; }

  /* ----- SEARCH PANEL ----- */
  .search-panel-section { padding: 0 12px 0; margin-bottom: 32px; }
  .search-panel         { padding: 20px 16px 20px; border-radius: 16px; }
  .panel-header         { margin-bottom: 20px; }
  .panel-header h2      { font-size: 18px; letter-spacing: -.3px; }

  /* ----- TRAVELER ROWS  ----- */
  /* Each traveler becomes a stacked card instead of a 4-col grid */
  .traveler-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Override the desktop grid's align-items:center — in flex-column that
       prevents children from stretching to fill the card's content width,
       which makes the name + airport inputs visibly shrink and indent.
       Stretch keeps every row edge-to-edge inside the card. */
    align-items: stretch;
    margin-bottom: 14px;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 12px;
    position: relative;
    animation: slideIn .2s ease;
  }
  .traveler-name-group { display: flex; gap: 8px; padding-right: 36px; /* room for × btn */ }
  .traveler-name-group .traveler-name-input { flex: 1 1 0; min-width: 0; }
  .airport-input-wrap, .airport-input-wrap input { width: 100%; box-sizing: border-box; }
  .traveler-avatar     { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }
  .traveler-name-input { font-size: 15px; padding: 8px 12px; }
  .airport-input-wrap input { font-size: 15px; padding: 10px 12px 10px 36px; }
  .btn-remove {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    min-height: unset;
  }
  .pax-stepper { align-self: center; }

  /* ----- ADD TRAVELER BUTTON ----- */
  .btn-add-traveler { width: 100%; justify-content: center; margin-bottom: 20px; padding: 12px 20px; }

  /* ----- DESTINATION + DATES ROWS ----- */
  .destination-row { margin-bottom: 14px; }
  .dates-row       { grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
  .date-input-wrap input { padding: 10px 12px 10px 36px; }

  /* ----- CTA banner — tighter on mobile ----- */
  .planner-cta-banner { padding: 14px 16px; gap: 12px; margin-bottom: 18px; }
  .planner-cta-icon   { font-size: 26px; }
  .planner-cta-text   { font-size: 14px; }
  .planner-cta-hint   { font-size: 11px; }

  /* ----- SEARCH BUTTON — sticky at bottom while panel is visible ----- */
  .search-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 0 -16px -20px;
    padding: 10px 16px 18px;
    background: linear-gradient(to top, white 65%, transparent 100%);
  }
  .btn-search { width: 100%; justify-content: center; font-size: 16px; padding: 17px 24px; border-radius: 28px; }

  /* ----- LOADING CARD ----- */
  .loading-card { min-width: unset; width: calc(100vw - 48px); padding: 32px 20px; }

  /* ----- RESULTS HEADER ----- */
  .results-section      { padding: 0 12px 64px; }
  .results-header       { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
  .results-title-block h2 { font-size: 20px; }
  .btn-edit-search      { align-self: flex-start; }

  /* ----- SORT BAR — horizontally scrollable ----- */
  .sort-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-bottom: 16px;
  }
  .sort-bar::-webkit-scrollbar { display: none; }
  .sort-btn { flex-shrink: 0; white-space: nowrap; }
  .sort-divider { flex-shrink: 0; }

  /* ----- COMBO CARDS ----- */
  .combo-header  { padding: 12px 14px; gap: 8px; }
  .combo-rows    { padding: 0 14px; }
  .combo-row     { gap: 8px; padding: 10px 0; }
  .combo-traveler { min-width: 80px; }
  .combo-tname   { max-width: 60px; }
  .combo-price   { font-size: 15px; }
  .combo-book    { padding: 7px 12px; font-size: 12px; min-height: 36px; }
  .combo-total   { font-size: 15px; }
  .combo-score   { font-size: 22px; }

  /* ----- ITINERARY BANNER ----- */
  .itin-banner      { padding: 14px 16px; }
  .itin-banner-dest { font-size: 18px; }
  .itin-banner-sub  { font-size: 12px; }

  /* ----- ITINERARY CARDS ----- */
  .itin-cards        { padding: 10px; gap: 10px; }
  .itin-card-header  { padding: 12px 14px 10px; gap: 10px; }
  .itin-card-name    { font-size: 14px; }
  .itin-card-route   { font-size: 12px; }
  .itin-segment      { padding: 12px 14px; }

  /* Segment body: stack price under times on small screens */
  .itin-seg-body    { flex-wrap: wrap; gap: 10px; }
  .itin-seg-left    { flex: 1 1 0; min-width: 0; }
  .itin-seg-right   { flex: 0 0 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--gray-100); }
  .itin-seg-times   { font-size: 18px; }
  .itin-seg-price   { font-size: 20px; }
  .itin-seg-price-sub { font-size: 11px; }
  .itin-book-btn    { font-size: 13px; padding: 8px 16px; min-height: 38px; display: flex; align-items: center; }

  /* ----- FLEX GRID — bigger tap targets ----- */
  .flex-grid-wrap  { padding: 0 14px 12px; }
  .flex-day        { min-height: 60px; padding: 10px 4px; justify-content: center; }
  .flex-day-date   { font-size: 11px; }
  .flex-day-price  { font-size: 12px; }

  /* ----- TRIP TOTAL ----- */
  .itin-total        { padding: 10px 14px; }
  .itin-total-price  { font-size: 18px; }

  /* ----- DEEP LINKS ----- */
  .deep-links-section { margin-bottom: 24px; }
  .dl-grid { grid-template-columns: 1fr; }

  /* ----- SHARE SECTION ----- */
  .share-section  { padding: 20px 16px; flex-direction: column; align-items: stretch; gap: 16px; }
  .share-header   { gap: 12px; }
  .share-icon     { font-size: 24px; }
  .share-header h3 { font-size: 16px; }
  .share-buttons  { flex-direction: column; gap: 10px; }
  .btn-share      { width: 100%; padding: 14px; font-size: 15px; display: flex; align-items: center; justify-content: center; border-radius: 14px; }

  /* ----- DESTINATION PLANNER ----- */
  .planner-section  { padding: 40px 12px 48px; }
  .planner-title    { font-size: 22px; }
  .planner-tags     { gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .planner-tags::-webkit-scrollbar { display: none; }
  .tag-chip         { flex-shrink: 0; }
  .planner-cards    { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dest-card        { padding: 12px; }
  .dest-city        { font-size: 13px; }

  /* ----- HOW IT WORKS ----- */
  .how-section  { padding: 48px 16px; }
  .how-inner h2 { font-size: 24px; margin-bottom: 28px; }
  .steps        { grid-template-columns: 1fr 1fr; gap: 12px; }
  .step         { padding: 18px 12px; }
  .step-icon    { font-size: 28px; margin-bottom: 10px; }
  .step h3      { font-size: 13px; }
  .step p       { font-size: 12px; }

  /* ----- FOOTER ----- */
  .footer       { padding: 24px 16px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ----- DESTINATION MODAL — bottom sheet ----- */
  .dest-modal-overlay { align-items: flex-end; padding: 0; }
  .dest-modal         { border-radius: 20px 20px 0 0; max-height: 92vh; max-width: 100%; width: 100%; }
  .dest-modal-img-wrap { height: 180px; border-radius: 20px 20px 0 0; }
  .dest-modal-body     { padding: 16px 20px 32px; }
  .dest-modal-title    { font-size: 20px; }

  /* ----- TC (flight list detail) CARDS ----- */
  .tc-fl-date   { display: none; }
  .tc-header    { padding: 14px 16px 12px; }
  .tc-flights-section { padding: 0 16px; }
  .tc-more      { padding: 12px 16px; }

  /* ----- PAX STEPPER spacing ----- */
  .pax-stepper  { padding: 4px 10px; }
}

/* ===== RESPONSIVE — Extra small (≤ 360 px) ===== */
@media (max-width: 360px) {
  .hero h1       { font-size: 26px; }
  .itin-seg-times { font-size: 16px; }
  .itin-seg-price { font-size: 17px; }
  .flex-day-date  { font-size: 10px; }
  .flex-day-price { font-size: 11px; }
  .steps          { grid-template-columns: 1fr; }
  .planner-cards  { grid-template-columns: 1fr; }
}

/* ===== SHARE BAR ===== */
/* Compact horizontal strip at the top of the results — always visible. */
.share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  /* Subtle "you're done — now share it" pop: faint brand gradient + the
     same brand border as the chosen itinerary, so this band reads as a
     direct continuation of the combo above it. */
  background: linear-gradient(180deg, rgba(7,112,227,.06), rgba(255,255,255,.96));
  border: 1.5px solid rgba(7,112,227,.22);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-top: 16px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.share-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.share-bar-icon { font-size: 18px; }
.share-bar-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600);
}
.share-bar-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* WhatsApp gets a more prominent treatment */
.share-bar .btn-whatsapp {
  padding: 10px 20px;
  font-size: 14px;
}
.share-bar .btn-copy,
.share-bar .btn-img {
  background: white;
  color: var(--gray-600);
  border: 1.5px solid var(--gray-200);
  padding: 9px 16px;
  font-size: 13px;
}
.share-bar .btn-copy:hover,
.share-bar .btn-img:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}
.share-bar .btn-copy.copied {
  border-color: var(--green);
  color: var(--green);
  background: #e6f9f0;
}

/* ===== ALL-FLIGHTS PICKER SECTION ===== */
.all-flights-section {
  margin-bottom: 32px;
}

.aft-header-block {
  margin-bottom: 16px;
}
.aft-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--gray-800);
  margin-bottom: 4px;
}
.aft-hint {
  font-size: 13px;
  color: var(--gray-400);
}

/* One block per traveler */
.aft-traveler {
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  animation: slideIn .25s ease;
}
.aft-traveler:last-child { margin-bottom: 0; }

.aft-traveler-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.aft-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.aft-traveler-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 2px;
}
.aft-traveler-route {
  font-size: 12px;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 4px;
}
.aft-route-arr { font-size: 10px; color: var(--gray-400); }

/* Scrollable horizontal strip of cards */
.aft-flights {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
.aft-flights::-webkit-scrollbar       { height: 4px; }
.aft-flights::-webkit-scrollbar-track { background: transparent; }
.aft-flights::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 4px; }

/* ===== FLIGHT PICK CARD ===== */
.flight-pick-card {
  flex: 0 0 auto;
  width: 200px;
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}
.flight-pick-card:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 12px rgba(7,112,227,.14);
  transform: translateY(-1px);
}
.flight-pick-card:active {
  transform: translateY(0);
}

/* Selected / chosen state */
.flight-pick-card.selected {
  border-color: var(--green);
  border-width: 2px;
  background: #f0fdf8;
  box-shadow: 0 0 0 3px rgba(0,168,98,.12);
}
.flight-pick-card.selected:hover {
  border-color: var(--green);
  box-shadow: 0 2px 14px rgba(0,168,98,.2);
}

.fp-times {
  font-size: 15px;
  font-weight: 800;
  color: var(--gray-800);
  letter-spacing: -.3px;
  white-space: nowrap;
}
.fp-arrow {
  font-size: 11px;
  color: var(--gray-400);
  margin: 0 3px;
}
.fp-airline {
  font-size: 11px;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--gray-500, #6b7280);
  flex-wrap: wrap;
}
.fp-meta .direct-dot { color: var(--green); font-size: 8px; }
.fp-meta .stop-dot   { color: #c2610c; font-size: 8px; }

.fp-price-wrap {
  margin-top: 2px;
}
.fp-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--gray-800);
  line-height: 1.1;
}
.fp-price-sub {
  font-size: 10px;
  color: var(--gray-400);
}

.fp-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--gray-100);
  padding-top: 8px;
}
.fp-chosen-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  background: #e6f9f0;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.fp-choose-cta {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-light);
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.fp-book {
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: var(--ryanair);
  padding: 4px 10px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.fp-book:hover { background: #0a46c4; }

/* ===== SHARE BAR + FLIGHT PICKER — responsive ===== */
@media (max-width: 640px) {
  .share-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .share-bar-buttons {
    flex-direction: column;
    gap: 8px;
  }
  .share-bar .btn-share {
    width: 100%;
    justify-content: center;
    padding: 13px;
    font-size: 14px;
    border-radius: 14px;
  }

  .aft-traveler-header { padding: 12px 14px 10px; }
  .aft-flights         { padding: 12px 12px; gap: 8px; }
  .flight-pick-card    { width: 175px; padding: 10px 12px; }
  .fp-times            { font-size: 14px; }
  .fp-price            { font-size: 15px; }
}
}

/* ===== SAFE AREA (iPhone notch / home indicator) ===== */
@supports (padding: env(safe-area-inset-bottom)) {
  .navbar {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  @media (max-width: 640px) {
    .search-actions {
      padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }
    .footer {
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
  }
}

/* ===== DEST INFO BUTTON (replaces popularity dots) ===== */
.dest-info-btn {
  background: none;
  border: 1.5px solid var(--gray-200);
  color: var(--gray-400);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
  line-height: 1.5;
}
.dest-info-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }

/* ===== DESTINATION INFO MODAL ===== */
@keyframes modalFadeIn  { from { opacity:0; }                            to { opacity:1; }              }
@keyframes modalSlideUp { from { transform:translateY(24px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes loadingPulse { 0%,100% { opacity:.3; } 50% { opacity:1; } }

.dest-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(10,20,40,.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: modalFadeIn .2s ease;
}
.dest-modal {
  background: var(--white);
  border-radius: 20px;
  width: 100%; max-width: 480px; max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 28px 70px rgba(0,0,0,.35);
  position: relative;
  animation: modalSlideUp .25s ease;
}
.dest-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.45); color: white;
  font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.dest-modal-close:hover { background: rgba(0,0,0,.65); }

/* Image / emoji header */
.dest-modal-img-wrap { width: 100%; height: 210px; border-radius: 20px 20px 0 0; overflow: hidden; position: relative; }
.dest-modal-img      { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest-modal-emoji-bg {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  display: flex; align-items: center; justify-content: center;
}
.dest-modal-big-emoji { font-size: 80px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); }

/* Body */
.dest-modal-body { padding: 20px 24px 26px; }
.dest-modal-top  { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dest-modal-title { font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--gray-800); }
.dest-modal-sub   { font-size: 13px; color: var(--gray-400); margin-top: 3px; }
.dest-modal-vibe  { font-size: 12px; font-weight: 600; background: var(--blue-light); color: var(--blue); padding: 4px 10px; border-radius: 12px; white-space: nowrap; flex-shrink: 0; }
.dest-modal-desc  { font-size: 14px; color: var(--gray-600); line-height: 1.65; margin-bottom: 16px; min-height: 44px; }
.dest-modal-loading { display: inline-block; animation: loadingPulse 1.2s ease infinite; letter-spacing: 4px; font-size: 18px; color: var(--gray-400); }
.dest-modal-tags  { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.dest-modal-actions { display: flex; align-items: center; gap: 12px; }
.dest-modal-wiki {
  font-size: 13px; color: var(--blue); text-decoration: none;
  font-weight: 500; padding: 6px 0; transition: opacity .15s;
}
.dest-modal-wiki:hover { opacity: .75; }
.dest-modal-plan { margin-left: auto; }

/* ===== FLEXIBLE DATE TOGGLE ===== */
/* Inherits font / color / uppercase from .field-group label; only adds layout. */
label.date-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin-bottom: 6px; }
label.date-label-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
label.flex-toggle { display: flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gray-400); transition: color .15s; user-select: none; text-transform: none; letter-spacing: 0; margin-bottom: 0; }
.flex-toggle input { accent-color: var(--blue); width: 14px; height: 14px; cursor: pointer; }
.flex-toggle:has(input:checked) { color: var(--blue); }

/* ±days flexibility selector */
.flex-select {
  flex-shrink: 0; font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--gray-600); background: var(--gray-50);
  border: 1.5px solid var(--gray-200); border-radius: 8px;
  padding: 4px 8px; cursor: pointer; max-width: 140px; line-height: 1.2;
}
.flex-select:hover  { border-color: var(--blue); color: var(--blue); }
.flex-select:focus  { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }

/* ===== ITINERARY SECTION ===== */
.itinerary-section { margin-bottom: 32px; }
.itin-banner {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: white; border-radius: var(--radius) var(--radius) 0 0;
  padding: 18px 24px; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0;
}
.itin-banner-left { display: flex; align-items: center; gap: 10px; }
.itin-banner-icon { font-size: 22px; }
.itin-banner-title { font-size: 16px; font-weight: 700; }
.itin-banner-sub   { font-size: 13px; opacity: .8; margin-top: 2px; }
.itin-banner-dest  { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }

.itin-cards { background: var(--gray-100); border-radius: 0 0 var(--radius) var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 12px; }

.itin-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); animation: slideIn .25s ease both;
}

/* Card header */
.itin-card-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px 12px;
  border-bottom: 1px solid var(--gray-100);
}
.itin-card-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; flex-shrink: 0; }
.itin-card-name   { font-size: 15px; font-weight: 700; color: var(--gray-800); }
.itin-card-route  { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--gray-400); letter-spacing: .2px; }
.itin-route-arr   { color: var(--blue); }

/* Segments */
.itin-segment { padding: 14px 18px; border-bottom: 1px solid var(--gray-100); }
.itin-segment:last-of-type { border-bottom: none; }

.itin-seg-label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.itin-dir-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
}
.itin-dir-badge.out { background: #e8f5e9; color: #1b7e3e; }
.itin-dir-badge.ret { background: #fff3e0; color: #b45309; }
.itin-seg-date { font-size: 13px; font-weight: 600; color: var(--gray-600); }

.itin-seg-body { display: flex; align-items: center; gap: 12px; }
.itin-seg-left { flex: 1; min-width: 0; }
.itin-seg-airline { font-size: 13px; font-weight: 600; color: var(--gray-800); margin-bottom: 4px; }
.itin-seg-times {
  font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: var(--gray-800);
  display: flex; align-items: center; gap: 6px;
}
.itin-seg-times .seg-arr { color: var(--gray-600); }
.itin-seg-arrow { color: var(--gray-400); font-size: 16px; }
.itin-seg-meta { font-size: 12px; color: var(--gray-400); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.itin-seg-meta .direct-dot { color: var(--green); font-weight: 700; }
.itin-seg-meta .stop-dot   { color: var(--gray-400); }

.itin-seg-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.itin-seg-price { font-size: 22px; font-weight: 800; color: var(--blue-dark); letter-spacing: -.5px; }
.itin-seg-price-sub { font-size: 11px; color: var(--gray-400); }
.itin-book-btn {
  font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none;
  background: var(--blue-light); padding: 5px 12px; border-radius: 20px;
  transition: background .15s; white-space: nowrap;
}
.itin-book-btn:hover { background: #d0e4fb; }

/* No-flight fallback */
.itin-no-flight {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  font-size: 13px; color: var(--gray-500);
  background: linear-gradient(135deg, rgba(7,112,227,.05), rgba(124,58,237,.05));
  border: 1px dashed var(--gray-200);
  border-radius: 10px;
  margin-top: 8px;
}
.itin-no-flight-icon {
  font-size: 20px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: white; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  flex-shrink: 0;
  transform: rotate(-12deg);
}
.itin-no-flight-text { flex: 1; }
.itin-no-flight-cta { color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.itin-no-flight a { color: var(--blue); font-weight: 600; text-decoration: none; }

/* Flex grid */
.flex-grid-wrap { padding: 0 18px 14px; }
.flex-grid-label { font-size: 11px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.flex-grid { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.flex-grid::-webkit-scrollbar { height: 5px; }
.flex-grid::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }
.flex-day {
  flex: 1 0 52px; min-width: 52px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  background: white; cursor: pointer; padding: 8px 4px; text-align: center;
  transition: all .15s; font-family: var(--font); display: flex; flex-direction: column; gap: 3px;
}
.flex-day:hover:not(.flex-day-selected) { border-color: var(--blue); background: var(--blue-light); }
.flex-day-selected { border-color: var(--blue); background: var(--blue-light); }
.flex-day-cheapest:not(.flex-day-selected) { border-color: var(--green); }
.flex-day-date  { font-size: 11px; color: var(--gray-600); font-weight: 600; line-height: 1; }
.flex-day-price { font-size: 13px; font-weight: 800; color: var(--gray-800); line-height: 1; }
.flex-day-selected .flex-day-date  { color: var(--blue-dark); }
.flex-day-selected .flex-day-price { color: var(--blue); }
.flex-day-cheapest:not(.flex-day-selected) .flex-day-price { color: var(--green); }
.flex-loading .flex-day-price { color: var(--gray-400); font-weight: 400; }

/* Trip total row */
.itin-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--gray-50);
  border-top: 1.5px solid var(--gray-100);
}
.itin-total-label { font-size: 13px; font-weight: 600; color: var(--gray-600); }
.itin-total-price { font-size: 20px; font-weight: 800; color: var(--blue-dark); }

/* ===== IMAGE SHARE BUTTON ===== */
.btn-img {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  color: white; border: none;
}
.btn-img:hover { opacity: .88; transform: translateY(-1px); }

/* ===== TOAST ===== */
.ff-toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: #1f2937; color: white;
  padding: 12px 22px; border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  font: 600 14px/1.3 var(--font);
  opacity: 0; transition: opacity .2s, transform .2s;
  z-index: 3000; pointer-events: none;
  max-width: calc(100vw - 32px); text-align: center;
}
.ff-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ff-toast.error   { background: var(--red); }
@supports (padding: env(safe-area-inset-bottom)) {
  .ff-toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ===== SHARE BAR (top of results) ===== */
.share-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 22px; padding: 14px 18px;
  background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 100%);
  border: 1.5px solid var(--blue); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(7,112,227,.10);
}
.share-bar-left     { display: flex; align-items: center; gap: 10px; min-width: 0; }
.share-bar-icon     { font-size: 22px; flex-shrink: 0; }
.share-bar-text     { font-size: 15px; font-weight: 700; color: var(--blue-dark); }
.share-bar-buttons  { display: flex; gap: 8px; flex-wrap: wrap; }
.share-bar .btn-share { padding: 9px 16px; font-size: 13px; }

/* ===== RESULTS VIEW TABS ===== */
.view-tabs {
  display: flex; gap: 6px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  padding: 6px;
  margin: 8px 0 20px;
}
.view-tab {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--gray-600);
  font: 700 13px/1.2 var(--font);
  cursor: pointer;
  text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, color .15s, box-shadow .15s;
}
.view-tab:hover { color: var(--blue); background: rgba(7,112,227,.06); }
.view-tab.active {
  background: white; color: var(--blue);
  box-shadow: 0 2px 8px rgba(15,23,42,.08), 0 0 0 1.5px var(--blue);
}
@media (max-width: 640px) {
  .view-tabs        { gap: 4px; padding: 4px; border-radius: 12px; margin-bottom: 16px; }
  .view-tab         { padding: 10px 8px; font-size: 12px; }
}

/* ===== ALL-FLIGHTS PICKER ===== */
.all-flights-section  { margin-bottom: 32px; }
.aft-header-block     { margin-bottom: 14px; }
.aft-title            { font-size: 20px; font-weight: 800; color: var(--gray-800); margin: 0 0 4px; }
.aft-hint             { font-size: 13px; color: var(--gray-400); margin: 0; }

/* Tabs — one per traveler. Horizontal scroll on narrow viewports. */
.aft-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.aft-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: white; border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  cursor: pointer; font-family: var(--font);
  transition: border-color .15s, box-shadow .15s, background .15s;
  flex-shrink: 0;
}
.aft-tab:hover         { border-color: var(--blue); box-shadow: 0 2px 8px rgba(7,112,227,.10); }
.aft-tab.active        { border-color: var(--blue); border-width: 2px; background: var(--blue-light); }
.aft-tab-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.aft-tab-info  { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.aft-tab-name  { font-size: 13px; font-weight: 700; color: var(--gray-800); white-space: nowrap; }
.aft-tab-route { font-size: 11px; color: var(--gray-400); font-weight: 500; white-space: nowrap; }
.aft-tab-price { font-size: 14px; font-weight: 800; color: var(--blue); margin-left: 4px; }
.aft-tab.active .aft-tab-price { color: var(--blue-dark); }

/* Two-column direction grid for round trips (outbound + return). */
.aft-direction-grid              { display: grid; grid-template-columns: 1fr; gap: 16px; }
.aft-direction-grid.has-return   { grid-template-columns: 1fr 1fr; }
.aft-direction-block {
  background: white; border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  padding: 14px 16px;
  container-type: inline-size;   /* let cards inside react to column width */
}
/* When the column itself is narrow (e.g. round-trip 2-up on desktop), stack
   the flight card the same way mobile does so the airline/meta don't get
   clipped. */
@container (max-width: 480px) {
  .flight-pick-card {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'times price' 'info price' 'action action';
    gap: 8px 12px;
  }
  .flight-pick-card .fp-times      { grid-area: times; }
  .flight-pick-card .fp-info       { grid-area: info; }
  .flight-pick-card .fp-price-wrap { grid-area: price; align-self: start; }
  .flight-pick-card .fp-action     { grid-area: action; flex-direction: row; min-width: 0; }
  .flight-pick-card .fp-action > * { flex: 1; }
}
.aft-direction-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-100);
  font-size: 13px; font-weight: 700; color: var(--gray-800);
  text-transform: uppercase; letter-spacing: .5px;
}
.aft-dir-icon  { font-size: 16px; color: var(--blue); }
.aft-dir-route {
  font-size: 11px; color: var(--gray-400); font-weight: 500;
  margin-left: auto; text-transform: none; letter-spacing: 0;
}
.aft-flights   { display: flex; flex-direction: column; gap: 8px; }
.aft-empty     { padding: 16px; text-align: center; color: var(--gray-400); font-size: 13px; }
.aft-empty-direct {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 16px; text-align: center; color: var(--gray-600);
  background: linear-gradient(135deg, rgba(7,112,227,.06), rgba(124,58,237,.06));
  border: 1px dashed rgba(7,112,227,.32);
  border-radius: 12px; margin: 6px;
}
.aft-empty-direct .aft-empty-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: white; box-shadow: 0 2px 8px rgba(0,0,0,.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; transform: rotate(-12deg);
}
.aft-empty-direct .aft-empty-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.35; }
.aft-empty-direct .aft-empty-text strong { font-size: 14px; color: var(--gray-800); }
.aft-empty-direct .aft-empty-text span   { font-size: 12px; color: var(--gray-500); }
.aft-empty-cta {
  background: var(--brand); color: white; border: none;
  border-radius: 999px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 3px rgba(7,112,227,.25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.aft-empty-cta:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(7,112,227,.32); }

/* ===== FILTERS BAR (above itinerary, always visible) ===== */
.filters-bar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px;
  scroll-margin-top: 72px;
}
.direct-switch {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-size: 13px; font-weight: 600;
  color: var(--gray-700);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.direct-switch:hover { border-color: var(--brand); }
.direct-switch input { position: absolute; opacity: 0; pointer-events: none; }
.direct-switch-track {
  width: 36px; height: 20px;
  background: var(--gray-200); border-radius: 999px;
  position: relative; flex-shrink: 0;
  transition: background .15s ease;
}
.direct-switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.4,.2,.2,1);
}
.direct-switch input:checked ~ .direct-switch-track { background: var(--brand); }
.direct-switch input:checked ~ .direct-switch-track .direct-switch-knob { transform: translateX(16px); }
.direct-switch input:focus-visible ~ .direct-switch-track {
  box-shadow: 0 0 0 3px rgba(7,112,227,.25);
}
.direct-switch-label { display: inline-flex; align-items: center; gap: 6px; }
.direct-switch-icon { font-size: 14px; color: var(--brand); }
.direct-switch:has(input:checked) {
  background: rgba(7,112,227,.08);
  border-color: var(--brand);
  color: var(--brand);
}
.direct-switch:has(input:checked) .direct-switch-icon { color: var(--brand); }
.direct-switch-count {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-500);
}
.direct-switch-count[data-state="has"] {
  background: rgba(34,197,94,.12); color: #15803d;
}
.direct-switch-count[data-state="none"] {
  background: rgba(239,68,68,.12); color: #b91c1c;
}

/* ===== IMAGE PREVIEW OVERLAY (iOS fallback) ===== */
.img-preview-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11,18,32,.86);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.img-preview-card {
  background: white; border-radius: 16px;
  max-width: 96vw; max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.img-preview-tip {
  background: linear-gradient(135deg, #0770e3, #7c3aed);
  color: white; padding: 12px 16px;
  font-size: 13px; font-weight: 600; text-align: center;
}
.img-preview-card img {
  display: block; max-width: 100%; max-height: 75vh;
  object-fit: contain; background: #f8f9fb;
}
.img-preview-close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: white;
  border: none; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* "Mostrar más" / "Show more" expander at the bottom of a direction column */
.aft-show-more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 10px 14px;
  background: white; color: var(--blue);
  border: 1.5px dashed var(--blue); border-radius: var(--radius-sm);
  font: 700 13px/1.2 var(--font); cursor: pointer;
  transition: background .15s, border-style .15s;
}
.aft-show-more:hover  { background: var(--blue-light); border-style: solid; }
.aft-show-more-count  { background: var(--blue); color: white; padding: 2px 8px; border-radius: 10px; font-size: 11px; }

.flight-pick-card {
  display: grid;
  width: 100%;                   /* don't shrink to intrinsic min-content */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  background: white; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .1s;
}
.flight-pick-card:hover  { border-color: var(--blue); box-shadow: 0 2px 8px rgba(7,112,227,.10); }
.flight-pick-card:active { transform: scale(.995); }
.flight-pick-card.selected {
  border-color: var(--blue); border-width: 2px;
  background: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(7,112,227,.10);
}

.fp-times   { font-size: 16px; font-weight: 800; color: var(--gray-800); white-space: nowrap; }
.fp-arrow   { margin: 0 6px; color: var(--gray-400); font-weight: 500; }
.fp-info    { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fp-airline { font-size: 13px; font-weight: 600; color: var(--gray-600);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-meta    { font-size: 12px; color: var(--gray-400); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fp-meta .direct-dot { color: var(--green); }
.fp-meta .stop-dot   { color: #f59e0b; }

.fp-price-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fp-price      { font-size: 18px; font-weight: 800; color: var(--blue); }
.fp-price-sub  { font-size: 11px; color: var(--gray-400); }

.fp-action       { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 96px; }
.fp-chosen-badge { background: var(--blue); color: white; padding: 5px 10px; border-radius: 12px;
                   font-size: 11px; font-weight: 700; text-align: center; }
.fp-choose-cta   { color: var(--blue); padding: 5px 10px; font-size: 11px; font-weight: 700;
                   text-align: center; border: 1.5px dashed var(--blue); border-radius: 12px;
                   transition: background .15s; }
.flight-pick-card:hover .fp-choose-cta { background: var(--blue-light); }
.fp-book         { background: var(--blue); color: white; padding: 7px 12px; border-radius: 12px;
                   font-size: 12px; font-weight: 700; text-decoration: none; text-align: center;
                   transition: background .15s; }
.fp-book:hover   { background: var(--blue-dark); }

/* Mobile: stack and free up horizontal room. */
@media (max-width: 640px) {
  .share-bar           { padding: 12px 14px; }
  .share-bar-text      { font-size: 14px; }
  .share-bar-buttons   { width: 100%; }
  .share-bar .btn-share { flex: 1; padding: 9px 12px; }

  /* Promote the direct-only switch to a full-width row so the touch target
     is unambiguous and the count chip stays visible at the right edge. */
  .filters-bar         { margin-bottom: 12px; justify-content: stretch; }
  .direct-switch       { width: 100%; padding: 10px 14px; font-size: 14px; }
  .direct-switch-label { flex: 1; }

  .aft-title           { font-size: 17px; }
  .aft-direction-block { padding: 12px 14px; }
  /* Stack IDA + VUELTA in a single column on phones — otherwise the
     2-up grid crushes the cards and the price + airline get clipped. */
  .aft-direction-grid.has-return { grid-template-columns: 1fr; }
  .aft-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px; margin: 0 -4px 14px; padding-left: 4px; padding-right: 4px;
  }
  .aft-tabs::-webkit-scrollbar { display: none; }
  .aft-tab             { padding: 8px 12px; }
  .aft-tab-name        { font-size: 12px; }
  .aft-tab-route       { font-size: 10px; }
  .aft-tab-price       { font-size: 13px; }
  .flight-pick-card {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'times price' 'info price' 'action action';
    gap: 8px 12px;
  }
  .fp-times      { grid-area: times; }
  .fp-info       { grid-area: info; }
  .fp-price-wrap { grid-area: price; align-self: start; }
  .fp-action     { grid-area: action; flex-direction: row; min-width: 0; }
  .fp-action > * { flex: 1; }
}

/* ===== IMAGE CAPTURE MODE ===== */
.itinerary-section.capturing .itin-book-btn { display: none; }
.itinerary-section.capturing .flex-grid-wrap { display: none; }
.itinerary-section.img-capture-root {
  padding: 24px; background: var(--gray-50);
  font-family: var(--font); max-width: 680px;
}