/* ════════════════════════════════════════════════════════════
   BluCruise Design System, flights.css
   Flight search experience. Every value from variables.css.
   Requires: variables, base, typography, layout, buttons, cards
════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────── */
.fl-hero{
  /* The header sits inside the hero as its first child, matching the
     homepage. The hero is therefore a column: header, then content. */
  position:relative; min-height:auto;
  display:flex; flex-direction:column;
  padding:0 0 var(--sp-6);
  background:linear-gradient(170deg,#0B1C33 0%,#132A47 42%,#1B2D4F 100%);
  overflow:hidden;
}
.fl-hero__bg{ position:absolute; inset:0; z-index:0; }
.fl-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; }
.fl-hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,15,28.62) 0%,rgba(6,15,28.34) 40%,rgba(6,15,28.90) 100%);
}
/* Horizon glow, reads as sky whether or not the photo loads */
.fl-hero__glow{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  width:min(1100px,150%); aspect-ratio:2/1; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(196,154,42.20) 0%,rgba(196,154,42.07) 42%,transparent 70%);
}
.fl-hero__inner{ position:relative; z-index:2; max-width:1180px; margin:0 auto; width:100%;
  padding:var(--sp-5) var(--sp-4) 0; }
.fl-hero__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-h); margin-bottom:16px;
}
.fl-hero__title{
  font-family:var(--font-s); font-size:clamp(36px,6.2vw,64px); font-weight:300;
  color:var(--white); letter-spacing:-.028em; line-height:1.02; margin:0 0 14px;
}
.fl-hero__title em{ font-style:italic; color:var(--gold-h); }
.fl-hero__sub{
  font-size:15.5px; line-height:1.66; color:rgba(255,255,255.85);
  max-width:580px; margin:0 0 var(--sp-5);
}

/* ── SEARCH PANEL ─────────────────────────────────────────── */
.fl-search{
  background:var(--white); border-radius:var(--rad-lg);
  box-shadow:0 24px 60px rgba(6,15,28.30);
  overflow:visible; max-width:1180px; margin:0 auto;
}
.fl-tabs{ display:flex; border-bottom:1px solid var(--br); padding:0 var(--sp-2); gap:2px; flex-wrap:wrap; }
.fl-tab{
  appearance:none; background:none; border:0; cursor:pointer;
  padding:16px 20px; font-family:var(--font-n); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tx3);
  border-bottom:2px solid transparent; transition:color var(--trans),border-color var(--trans);
}
.fl-tab:hover{ color:var(--navy); }
.fl-tab.is-active{ color:var(--navy); border-bottom-color:var(--gold); }

.fl-form{ padding:var(--sp-3); }
.fl-row{ display:grid; gap:12px; margin-bottom:12px; }
.fl-row--main{ grid-template-columns:1fr 1fr 1fr 1fr auto; align-items:end; }
.fl-row--seg{ grid-template-columns:1fr 1fr 1fr auto; align-items:end; }

.fl-field{ position:relative; display:flex; flex-direction:column; }
.fl-label{
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tx4); margin-bottom:6px;
}
.fl-input.fl-select{
  width:100%; font-family:var(--font-n); font-size:14.5px; color:var(--tx1);
  background:var(--white); border:1px solid var(--br); border-radius:var(--rad);
  padding:13px 14px; transition:border-color var(--trans),box-shadow var(--trans);
}
.fl-input:focus.fl-select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(196,154,42.14);
}
.fl-input::placeholder{ color:var(--tx4); }
.fl-swap{
  align-self:end; margin-bottom:6px;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--br); background:var(--white); color:var(--navy);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color var(--trans),transform var(--trans);
}
.fl-swap:hover{ border-color:var(--gold); transform:rotate(180deg); }

/* ── AUTOCOMPLETE ─────────────────────────────────────────── */
.fl-ac{
  position:absolute; top:100%; left:0; right:0; z-index:60;
  background:var(--white); border:1px solid var(--br); border-radius:var(--rad);
  box-shadow:0 14px 36px rgba(6,15,28.16);
  max-height:296px; overflow-y:auto; margin-top:4px; display:none;
}
.fl-ac.is-open{ display:block; }
.fl-ac__item{
  display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer;
  border-bottom:1px solid var(--hair,#EFEBE1);
}
.fl-ac__item:last-child{ border-bottom:0; }
.fl-ac__item:hover.fl-ac__item.is-cursor{ background:var(--crmd); }
.fl-ac__iata{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--navy);
  background:var(--crmd); border-radius:3px; padding:4px 7px; flex:0 0 auto; min-width:40px; text-align:center;
}
.fl-ac__city{ font-size:14px; color:var(--tx1); font-weight:500; line-height:1.3; }
.fl-ac__name{ font-size:11.5px; color:var(--tx4); line-height:1.3; }
.fl-ac__port{
  margin-left:auto; flex:0 0 auto; font-size:9px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:#6E5716; background:rgba(196,154,42.18); border-radius:100px; padding:3px 8px;
}
.fl-ac__empty{ padding:16px; font-size:13px; color:var(--tx4); text-align:center; }

/* ── PASSENGERS / CABIN ───────────────────────────────────── */
.fl-pax{ position:relative; }
.fl-pax__btn{
  width:100%; text-align:left; font-family:var(--font-n); font-size:14.5px; color:var(--tx1);
  background:var(--white); border:1px solid var(--br); border-radius:var(--rad);
  padding:13px 14px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.fl-pax__btn:hover{ border-color:var(--gold); }
.fl-pax__panel{
  position:absolute; top:100%; right:0; z-index:60; width:280px;
  background:var(--white); border:1px solid var(--br); border-radius:var(--rad-md);
  box-shadow:0 14px 36px rgba(6,15,28.16); padding:var(--sp-2); margin-top:4px; display:none;
}
.fl-pax__panel.is-open{ display:block; }
.fl-pax__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 0; border-bottom:1px solid var(--hair,#EFEBE1);
}
.fl-pax__row:last-of-type{ border-bottom:0; }
.fl-pax__lbl{ font-size:13.5px; color:var(--tx1); font-weight:500; }
.fl-pax__hint{ font-size:11px; color:var(--tx4); margin-top:2px; }
.fl-step{ display:flex; align-items:center; gap:10px; }
.fl-step__b{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--br);
  background:var(--white); color:var(--navy); cursor:pointer; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.fl-step__b:hover:not(:disabled){ border-color:var(--gold); }
.fl-step__b:disabled{ opacity:.32; cursor:not-allowed; }
.fl-step__v{ min-width:20px; text-align:center; font-size:14px; font-weight:600; color:var(--navy); }

/* ── FILTERS ──────────────────────────────────────────────── */
.fl-filters{ border-top:1px solid var(--br); padding:var(--sp-2) var(--sp-3) var(--sp-3); }
.fl-filters__toggle{
  appearance:none; background:none; border:0; cursor:pointer; padding:12px 0;
  font-family:var(--font-n); font-size:12px; font-weight:600; color:var(--navy);
  display:flex; align-items:center; gap:8px;
}
.fl-filters__toggle i{ transition:transform var(--trans); }
.fl-filters__toggle.is-open i{ transform:rotate(180deg); }
.fl-filters__body{ display:none; padding-top:var(--sp-2); }
.fl-filters__body.is-open{ display:block; }
.fl-chks{ display:flex; flex-wrap:wrap; gap:10px; }
.fl-chk{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 15px; border:1px solid var(--br); border-radius:100px;
  font-size:13px; color:var(--tx2); background:var(--white);
  transition:border-color var(--trans),background var(--trans);
}
.fl-chk:hover{ border-color:var(--gold); }
.fl-chk input{ accent-color:var(--gold); width:15px; height:15px; }
.fl-chk.is-on{ border-color:var(--gold); background:rgba(196,154,42.08); color:var(--navy); font-weight:500; }
.fl-chk--off{ opacity:.42; cursor:not-allowed; }

.fl-submit{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:var(--sp-2); }
.fl-errors{ margin-top:12px; }
.fl-error{
  font-size:12.5px; color:#8C2F1C; background:rgba(232,80,58.08);
  border-left:2px solid var(--coral); border-radius:0 4px 4px 0;
  padding:9px 13px; margin-bottom:6px;
}
.fl-note{
  font-size:12.5px; color:var(--tx2); line-height:1.6;
  padding:11px 15px; background:rgba(0,0,0.03);
  border-left:2px solid var(--br); border-radius:0 4px 4px 0; margin-top:var(--sp-2);
}

/* ── SEGMENTS ─────────────────────────────────────────────── */
.fl-seg{ position:relative; padding-bottom:12px; }
.fl-seg__n{
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px;
}
.fl-seg__del{
  width:38px; height:38px; border-radius:var(--rad); border:1px solid var(--br);
  background:var(--white); color:var(--tx3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; align-self:end; margin-bottom:1px;
}
.fl-seg__del:hover{ border-color:var(--coral); color:var(--coral); }

/* ── SECTIONS ─────────────────────────────────────────────── */
.fl-sec{ padding:var(--sp-6) var(--sp-4); }
.fl-sec--cream{ background:var(--crmd); }
.fl-sec--navy{ background:var(--navy); }
.fl-sec__inner{ max-width:1180px; margin:0 auto; }
.fl-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.fl-eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); }
.fl-h2{
  font-family:var(--font-s); font-size:clamp(27px,3.7vw,42px); font-weight:300;
  color:var(--navy); letter-spacing:-.022em; line-height:1.1; margin:0 0 12px;
}
.fl-h2 em{ font-style:italic; color:var(--gold); }
.fl-lead{ font-size:14.5px; line-height:1.7; color:var(--tx2); max-width:640px; margin:0 0 var(--sp-4); }

/* Dark section, white or gold only (Board rule) */
.fl-sec--navy .fl-eyebrow{ color:var(--gold-h); }
.fl-sec--navy .fl-eyebrow::before{ background:var(--gold-h); }
.fl-sec--navy .fl-h2{ color:var(--white); }
.fl-sec--navy .fl-h2 em{ color:var(--gold-h); }
.fl-sec--navy .fl-lead{ color:rgba(255,255,255.84); }

/* ── PORT CHIPS ───────────────────────────────────────────── */
.fl-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.fl-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px; border:1px solid var(--br); border-radius:100px;
  background:var(--white); color:var(--navy);
  font-size:13.5px; font-weight:500; text-decoration:none; cursor:pointer;
  transition:border-color var(--trans),transform var(--trans),box-shadow var(--trans);
}
.fl-chip:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow); }
.fl-chip img{ width:20px; height:14px; border-radius:2px; flex:0 0 auto; }
.fl-chip__iata{ font-size:10.5px; font-weight:700; color:var(--tx4); letter-spacing:.05em; }

/* ── CRUISE CROSS-SELL ────────────────────────────────────── */
.fl-cruise{
  background:var(--white); border:1px solid var(--gold);
  border-radius:var(--rad-md); padding:var(--sp-3); margin-top:var(--sp-2); display:none;
}
.fl-cruise.is-on{ display:block; }
.fl-cruise__hd{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.fl-cruise__hd i{ color:var(--gold); font-size:19px; }
.fl-cruise__t{ font-family:var(--font-s); font-size:20px; font-weight:400; color:var(--navy); }
.fl-cruise__p{ font-size:13.5px; line-height:1.6; color:var(--tx2); margin:0 0 var(--sp-2); }
.fl-cruise__links{ display:flex; flex-wrap:wrap; gap:9px; }

/* ── STEPS + TIPS ─────────────────────────────────────────── */
.fl-grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(266px,1fr)); gap:var(--sp-3); }
.fl-card{ background:var(--white); border:1px solid var(--br); border-radius:var(--rad-md); padding:var(--sp-3); }
.fl-card__n{
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid rgba(196,154,42.5); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; margin-bottom:14px;
}
.fl-card__h{ font-family:var(--font-s); font-size:20px; font-weight:400; color:var(--navy); margin:0 0 8px; }
.fl-card__p{ font-size:13.5px; line-height:1.65; color:var(--tx2); margin:0; }

.fl-tip{ background:rgba(255,255,255.06); border:1px solid rgba(255,255,255.13); border-radius:var(--rad-md); padding:var(--sp-3); }
.fl-tip__ico{ color:var(--gold-h); font-size:20px; margin-bottom:12px; display:block; }
.fl-tip__h{ font-family:var(--font-s); font-size:19px; font-weight:400; color:var(--white); margin:0 0 8px; }
.fl-tip__p{ font-size:13.5px; line-height:1.65; color:rgba(255,255,255.80); margin:0; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1024px){
  .fl-row--main{ grid-template-columns:1fr 1fr; }
  .fl-row--seg{ grid-template-columns:1fr 1fr; }
  .fl-swap{ display:none; }
}
@media (max-width:768px){
  .fl-hero{ padding:0 0 var(--sp-5); }
  .fl-hero__inner{ padding:var(--sp-4) var(--sp-3) 0; }
  .fl-sec{ padding:var(--sp-5) var(--sp-3); }
  .fl-form{ padding:var(--sp-2); }
  .fl-row--main.fl-row--seg{ grid-template-columns:1fr; }
  .fl-tab{ padding:14px 13px; font-size:11px; }
  .fl-pax__panel{ right:auto; left:0; width:100%; }
  .fl-submit .bc-btn{ width:100%; }
  .fl-search{ border-radius:var(--rad-md); }
}
@media (max-width:480px){
  .fl-tabs{ padding:0 6px; }
  .fl-tab{ padding:13px 10px; letter-spacing:.05em; }
}