/* =============================================================================
   deal-2026.css — design system for the cabin-class flight-deals pages
   (economy / premium-economy / business / first). Scoped under `.dlx`.
   v2 (2026-09-28): professional rebuild. AirTripMaker (dark offer strip,
   image destination cards, airline logos) + Airport Terminal Guide (eyebrow
   heads, tinted bands, feature grids, accordion). 8px spacing system, refined
   type scale, real airline logos + destination photography.
   ========================================================================== */
.dlx{
  --d-ink:#0b1220; --d-ink2:#3a4657; --d-muted:#6b7688;
  --d-line:#e7ebf1; --d-line2:#eef1f6; --d-surface:#ffffff; --d-tint:#f5f8fc; --d-tint2:#eef4fb;
  --d-brand:#0a68c4; --d-brand-d:#0a4f97; --d-brand-soft:#e9f2fb;
  --d-rose:#e11d48; --d-gold:#f0a52a; --d-gold-d:#a86a10;
  --d-navy:#0b1a2e;
  --d-r:14px; --d-r-lg:20px; --d-r-xl:28px;
  --d-sh:0 2px 8px rgba(16,32,64,.05); --d-sh-md:0 10px 30px rgba(16,32,64,.08),0 3px 8px rgba(16,32,64,.05);
  --d-sh-lg:0 24px 60px rgba(16,32,64,.14),0 8px 20px rgba(16,32,64,.07);
  --d-font:'Plus Jakarta Sans','Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--d-ink2); font-family:var(--d-font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.dlx *{ box-sizing:border-box; }
.dlx img{ max-width:100%; display:block; }

/* ---- layout rhythm (matches the site container: 1440 max, 32px gutter) ---- */
.dlx-wrap{ max-width:1440px; margin:0 auto; padding:0 32px; }
.dlx-wrap--narrow{ max-width:1180px; }
/* readable measure for long-form text inside the now-wide sections */
.dlx-lead,.dlx-prose{ max-width:900px; margin-left:auto; margin-right:auto; }
.dlx-sec{ padding:80px 0; background:var(--d-surface); }
.dlx-sec--tint{ background:var(--d-tint); }
.dlx-sec--pad-sm{ padding:56px 0; }
/* first section sits close under the breadcrumb (less top gap) */
.dlx > .dlx-sec:first-of-type, #deals{ padding-top:40px; }

/* ---- section heads ---- */
.dlx-head{ max-width:760px; margin:0 auto 48px; text-align:center; }
.dlx-head--left{ text-align:left; margin-left:0; }
.dlx-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--d-brand-d); background:var(--d-brand-soft); padding:7px 15px; border-radius:999px; margin-bottom:18px; }
.dlx-head h2{ font-family:var(--d-font); font-weight:800; letter-spacing:-.025em; color:var(--d-ink);
  font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.12; margin:0 0 14px; }
.dlx-head p{ color:var(--d-muted); font-size:1.06rem; line-height:1.65; margin:0; }
.dlx-note{ text-align:center; color:var(--d-muted); font-size:.85rem; font-style:italic; max-width:820px; margin:32px auto 0; line-height:1.6; }

/* ---- sticky section nav ---- */
.dlx-subnav{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--d-line); }
.dlx-subnav__in{ max-width:1200px; margin:0 auto; padding:0 24px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.dlx-subnav__in::-webkit-scrollbar{ display:none; }
.dlx-subnav a{ white-space:nowrap; padding:16px 16px; font-size:.9rem; font-weight:600; color:var(--d-muted);
  text-decoration:none; border-bottom:2.5px solid transparent; transition:all .18s; }
.dlx-subnav a:hover{ color:var(--d-ink); }
.dlx-subnav a.is-active{ color:var(--d-brand-d); border-bottom-color:var(--d-brand); }

/* ---- breadcrumb (sits under the offer-strip bar) ---- */
.dlx-crumb{ background:var(--d-surface); }
.dlx-crumb .dlx-wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:14px 24px; font-size:.88rem; }
.dlx-crumb a{ color:var(--d-brand-d); text-decoration:none; font-weight:600; }
.dlx-crumb a:hover{ text-decoration:underline; text-underline-offset:3px; }
.dlx-crumb__sep{ color:#b7c0cd; padding:0 2px; }
.dlx-crumb [aria-current="page"]{ color:var(--d-muted); font-weight:600; }

/* ---- class nav: full-width bar under the breadcrumb ---- */
.dlx-classnav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:12px 24px;
  background:var(--d-tint); border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line); }
.dlx-classnav a{ padding:9px 22px; border-radius:999px; font-weight:600; font-size:.92rem; color:var(--d-ink2);
  text-decoration:none; border:1.5px solid transparent; background:transparent; transition:all .2s; }
.dlx-classnav a:hover{ color:var(--d-brand-d); background:#fff; border-color:var(--d-line); }
.dlx-classnav a.is-active{ background:var(--d-navy); border-color:var(--d-navy); color:#fff; }

/* ---- trust bar ---- */
.dlx-trust{ background:var(--d-tint); border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line); }
.dlx-trust__in{ max-width:1100px; margin:0 auto; padding:20px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.dlx-trust__i{ display:flex; align-items:center; gap:12px; justify-content:center; }
.dlx-trust__i svg{ width:26px; height:26px; color:var(--d-brand); flex:none; }
.dlx-trust__i b{ display:block; color:var(--d-ink); font-size:.98rem; font-weight:800; line-height:1.1; }
.dlx-trust__i span{ font-size:.8rem; color:var(--d-muted); }

/* ---- buttons ---- */
.dlx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; font-size:.95rem;
  text-decoration:none; border-radius:12px; padding:13px 26px; transition:all .2s; cursor:pointer; border:1.6px solid transparent; }
.dlx-btn--ghost{ color:var(--d-brand-d); border-color:#cfe0f2; background:#fff; }
.dlx-btn--ghost:hover{ background:var(--d-brand); color:#fff; border-color:var(--d-brand); box-shadow:0 8px 20px rgba(10,104,196,.24); }
.dlx-btn--solid{ background:var(--d-gold); color:#3a2600; box-shadow:0 10px 26px rgba(240,165,42,.32); }
.dlx-btn--solid:hover{ background:#e0951a; transform:translateY(-1px); }
.dlx-btn--nav{ background:var(--d-navy); color:#fff; }
.dlx-btn--nav:hover{ background:#12324f; color:#fff; }

/* ---- AirTripMaker cabin-offer strip ---- */
.dlx-offers{ background:linear-gradient(115deg,#081524 0%,#0e2c47 55%,#0a3a5e 100%); padding:0; }
.dlx-offers__grid{ display:grid; grid-template-columns:repeat(4,1fr); max-width:1200px; margin:0 auto; }
.dlx-offer{ padding:26px 26px; display:flex; align-items:center; gap:18px; position:relative; }
.dlx-offer + .dlx-offer::before{ content:""; position:absolute; left:0; top:20px; bottom:20px; width:1px; background:rgba(255,255,255,.1); }
.dlx-offer__pct{ font-size:2.5rem; font-weight:800; line-height:1; letter-spacing:-.03em;
  background:linear-gradient(180deg,#ffd98a,#f0a52a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dlx-offer__t{ display:flex; flex-direction:column; }
.dlx-offer__t small{ font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.dlx-offer__t b{ font-size:1.02rem; font-weight:700; color:#fff; }
.dlx-offer__t span{ font-size:.78rem; color:rgba(255,255,255,.6); }

/* ---- destination deal cards (image-backed) ---- */
.dlx-destgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.dlx-dest{ background:var(--d-surface); border-radius:var(--d-r-lg); overflow:hidden; box-shadow:var(--d-sh-md);
  display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.dlx-dest:hover{ transform:translateY(-6px); box-shadow:var(--d-sh-lg); }
.dlx-dest__media{ display:block; position:relative; aspect-ratio:3/2; min-height:190px; background:#1e293b center/cover no-repeat; text-decoration:none; }
.dlx-dest__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,18,30,.05) 45%,rgba(8,18,30,.55) 100%); }
.dlx-dest__route{ position:absolute; top:16px; left:16px; z-index:2; font-size:.68rem; font-weight:800; letter-spacing:.08em;
  color:#0b1220; background:rgba(255,255,255,.92); padding:7px 12px; border-radius:999px; }
.dlx-dest__price{ position:absolute; top:14px; right:16px; z-index:2; text-align:center; color:#fff; background:var(--d-rose);
  padding:9px 15px; border-radius:14px; line-height:1; box-shadow:0 8px 20px rgba(225,29,72,.4); }
.dlx-dest__price b{ display:block; font-size:1.3rem; font-weight:800; }
.dlx-dest__price span{ font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; opacity:.9; }
.dlx-dest__name{ position:absolute; left:18px; bottom:14px; z-index:2; color:#fff; font-size:1.5rem; font-weight:800; letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.4); margin:0; }
.dlx-dest__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.dlx-dest__body p{ font-size:1rem; line-height:1.68; color:var(--d-ink2); margin:0 0 18px; flex:1; }
.dlx-book{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--d-brand-d); text-decoration:none; align-self:flex-start; }
.dlx-book svg{ width:16px; height:16px; transition:transform .2s; }
.dlx-book:hover svg{ transform:translateX(5px); }

/* ---- value props (icon row) ---- */
.dlx-vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; }
.dlx-vcard{ background:#fff; border:1px solid var(--d-line); border-radius:var(--d-r-lg); padding:30px 26px; box-shadow:var(--d-sh); }
.dlx-vcard__ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--d-brand-soft); color:var(--d-brand); }
.dlx-vcard__ico svg{ width:26px; height:26px; }
.dlx-vcard h3{ font-size:1.15rem; font-weight:800; color:var(--d-ink); margin:0 0 8px; }
.dlx-vcard p{ font-size:1.02rem; line-height:1.72; color:var(--d-ink2); margin:0; }
.dlx-lead{ max-width:820px; margin:0 auto 44px; text-align:center; }
.dlx-lead p{ font-size:1.06rem; line-height:1.75; color:var(--d-ink2); margin:0 0 1rem; }

/* ---- price table ---- */
.dlx-tablecard{ max-width:100%; margin:0 auto; border:1px solid var(--d-line); border-radius:var(--d-r-lg); overflow:hidden; box-shadow:var(--d-sh-md); background:#fff; }
.dlx-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.dlx-table thead th{ background:var(--d-navy); color:#fff; text-align:left; font-weight:700; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; padding:16px 20px; }
.dlx-table td{ padding:16px 22px; border-top:1px solid var(--d-line2); color:var(--d-ink2); font-size:1rem; line-height:1.6; vertical-align:top; }
.dlx-table tbody tr:nth-child(odd){ background:#fbfcfe; }
.dlx-table tbody tr:hover{ background:var(--d-brand-soft); }
.dlx-table td:first-child{ font-weight:700; color:var(--d-ink); width:26%; }
.dlx-table td:nth-child(2){ color:var(--d-gold-d); font-weight:800; white-space:nowrap; width:20%; }

/* ---- fare-type cards ---- */
.dlx-fgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:22px; }
.dlx-fcard{ background:#fff; border:1px solid var(--d-line); border-radius:var(--d-r-lg); padding:30px 30px 32px; box-shadow:var(--d-sh); position:relative; overflow:hidden; }
.dlx-fcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--d-brand),var(--d-brand-d)); }
.dlx-fcard h3{ font-size:1.12rem; font-weight:800; color:var(--d-ink); margin:0 0 10px; }
.dlx-fcard p{ font-size:1rem; line-height:1.72; color:var(--d-ink2); margin:0; }

/* ---- feature grids (seats / facilities / tips / factors) ---- */
.dlx-featgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dlx-feat{ display:flex; gap:16px; background:#fff; border:1px solid var(--d-line); border-radius:var(--d-r); padding:24px 24px; box-shadow:var(--d-sh); }
.dlx-sec--tint .dlx-feat{ background:#fff; }
.dlx-feat__ico{ flex:0 0 42px; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--d-brand-soft); color:var(--d-brand); }
.dlx-feat__ico svg{ width:22px; height:22px; }
.dlx-feat b{ display:block; color:var(--d-ink); font-size:1.05rem; font-weight:700; margin-bottom:5px; }
.dlx-feat span{ font-size:.98rem; line-height:1.64; color:var(--d-ink2); }
.dlx-featnote{ max-width:840px; margin:30px auto 0; text-align:center; font-size:.98rem; line-height:1.7; color:var(--d-muted); }

/* ---- airline logo grid ---- */
.dlx-airgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.dlx-air{ background:#fff; border:1px solid var(--d-line); border-radius:var(--d-r-lg); padding:30px; box-shadow:var(--d-sh);
  display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.dlx-air:hover{ box-shadow:var(--d-sh-md); transform:translateY(-3px); }
.dlx-air__h{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.dlx-air__logo{ flex:0 0 64px; width:64px; height:64px; border-radius:14px; background:#fff; border:1px solid var(--d-line2);
  display:grid; place-items:center; overflow:hidden; }
.dlx-air__logo img{ max-width:48px; max-height:48px; object-fit:contain; }
.dlx-air__h h3{ font-size:1.2rem; font-weight:800; color:var(--d-ink); margin:0; letter-spacing:-.01em; }
.dlx-air__h span{ font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--d-muted); }
.dlx-air > p{ font-size:1rem; line-height:1.72; color:var(--d-ink2); margin:0 0 16px; }
.dlx-air__facts{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px; border-top:1px solid var(--d-line2); padding-top:14px; }
.dlx-air__facts li{ font-size:.97rem; line-height:1.65; color:var(--d-ink2); }
.dlx-air__facts li b{ display:block; color:var(--d-brand-d); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px; }
.dlx-air .dlx-btn{ margin-top:auto; align-self:flex-start; padding:10px 20px; font-size:.88rem; }

/* ---- accordion FAQ ---- */
.dlx-acc{ max-width:980px; margin:0 auto; display:grid; gap:12px; }
.dlx-acc-item{ background:#fff; border:1px solid var(--d-line); border-radius:14px; overflow:hidden; transition:box-shadow .2s; }
.dlx-acc-item:hover{ box-shadow:var(--d-sh); }
.dlx-acc-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; font-family:var(--d-font); font-weight:700;
  font-size:1.02rem; color:var(--d-ink); padding:20px 56px 20px 22px; position:relative; line-height:1.4; }
.dlx-acc-ico{ position:absolute; right:22px; top:50%; width:15px; height:15px; transform:translateY(-50%); }
.dlx-acc-ico::before,.dlx-acc-ico::after{ content:""; position:absolute; background:var(--d-brand); border-radius:2px; left:50%; top:50%; }
.dlx-acc-ico::before{ width:15px; height:2.4px; transform:translate(-50%,-50%); }
.dlx-acc-ico::after{ width:2.4px; height:15px; transform:translate(-50%,-50%); transition:opacity .25s; }
.dlx-acc-q.is-open .dlx-acc-ico::after{ opacity:0; }
.dlx-acc-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.dlx-acc-a__inner{ padding:0 22px 20px; }
.dlx-acc-a__inner p{ font-size:.97rem; line-height:1.7; color:var(--d-ink2); margin:0 0 .8rem; }
.dlx-acc-a__inner ul{ margin:.2rem 0 .6rem; padding-left:20px; }
.dlx-acc-a__inner li{ font-size:.95rem; line-height:1.6; color:var(--d-ink2); margin:5px 0; }

/* ---- final CTA band ---- */
.dlx-cta{ background:linear-gradient(120deg,#081524 0%,#0e2c47 55%,#0a68c4 130%); color:#fff; padding:76px 0; text-align:center; position:relative; overflow:hidden; }
.dlx-cta::after{ content:""; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(240,165,42,.18),transparent 70%); }
.dlx-cta__in{ position:relative; z-index:1; }
.dlx-cta h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:800; color:#fff; margin:0 0 14px; letter-spacing:-.025em; }
.dlx-cta p{ color:rgba(255,255,255,.8); font-size:1.05rem; line-height:1.7; max-width:640px; margin:0 auto 26px; }

/* ---- hover text visibility (override the site's global a:hover colour bleed) ---- */
.dlx .dlx-btn--ghost:hover,.dlx .dlx-btn--ghost:hover *{ color:#fff !important; }
.dlx .dlx-btn--solid:hover,.dlx .dlx-btn--solid:hover *{ color:#fff !important; }
.dlx .dlx-btn:hover{ text-decoration:none !important; }
.dlx a:hover{ text-decoration:none; }
.dlx-book:hover{ color:var(--d-brand) !important; }
.dlx-dest__name,.dlx-dest__route,.dlx-dest__price *{ text-decoration:none !important; }

/* ---- responsive ---- */
/* small desktop / large tablet: 3-col grids drop to 2 */
@media (max-width:1150px){
  .dlx-airgrid,.dlx-featgrid{ grid-template-columns:repeat(2,1fr); }
}
/* iPad (portrait & landscape) */
@media (max-width:1024px){
  .dlx-sec{ padding:64px 0; }
  .dlx-destgrid{ grid-template-columns:repeat(2,1fr); }
  .dlx-vgrid{ grid-template-columns:repeat(2,1fr); }
}
/* phones */
@media (max-width:768px){
  .dlx-sec{ padding:46px 0; }
  .dlx-wrap{ padding:0 16px; }
  .dlx-head{ margin-bottom:28px; }
  .dlx-head h2{ font-size:clamp(1.45rem,6vw,1.9rem); }
  .dlx-destgrid,.dlx-vgrid,.dlx-featgrid,.dlx-airgrid,.dlx-fgrid{ grid-template-columns:1fr; }
  /* price table scrolls horizontally instead of clipping the 3rd column */
  .dlx-tablecard{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .dlx-table{ min-width:560px; font-size:.9rem; }
  .dlx-table td,.dlx-table thead th{ padding:12px 14px; }
  .dlx-air{ padding:20px; }
  .dlx-cta{ padding:52px 0; }
  .dlx-feat{ padding:18px; }
}