/* =====================================================================
   header-2026.css  —  SINGLE SOURCE OF TRUTH for the site header
   ---------------------------------------------------------------------
   This file defines the look of the shared 2026 header (top alert bar,
   logo row, desktop nav + dropdowns, phone CTA, hamburger, mobile drawer)
   used on EVERY modern page of the site.

   It is linked by BOTH header wrappers:
     - header-new-home.php  (Home, Blog, Flights-to-India, Business pages)
     - header-bar-2026.php  (all internal city / airline pages)

   The header MARKUP is likewise a single file: header-markup-2026.php.
   Together (this CSS + that markup) they are the one header.

   Anything that legitimately DIFFERS by page environment is NOT here — it
   stays in the wrapper as a thin override that loads after this file:
     - home/blog/fti : global reset (*{box-sizing}), .hidden-* helpers,
                       global .container{1440} width
     - internal      : Bootstrap (custom.css/fly.css) compensations —
                       transition:none, SCOPED container width, logo-width
                       pin, mobile fit
   Do NOT add container-WIDTH rules here; the scope differs per environment.
   ===================================================================== */

:root {
  --primary: #006DA6;
  --white: #fff;
  --text: #333;
}

/* ─── HEADER ─────────────────────────────────── */
.header {
  background: var(--white);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 10px 0;
}
/* Smart header (desktop only, where the hamburger toggle is hidden):
   The header lives in normal flow, so on the way DOWN it simply scrolls off
   the top with the page (no animation). When the user scrolls UP it pins to
   the top and slides back down into view. */
.header-spacer { display: none; }
@media (min-width: 861px) {
  .header-spacer { display: block; height: 0; }
  .header { position: relative; top: auto; }
  .header.header--pinned {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    animation: mfyHeaderDown .3s ease;
  }
  @keyframes mfyHeaderDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
}

.header-inner {
  display: flex;
  align-items: center;
  /* No fixed height: the row sizes to its content (~60px, driven by the trust
     strip). A `height:68px` historically lived here but never actually applied
     (a typo disabled it on Home; bootstrap overrode it on internal), so the row
     has always rendered at content height — keep it that way to avoid a regression. */
  gap: 24px;
  justify-content: space-between;
}
.main_header .header-inner {
  display: flex;
  justify-content: space-between !important;
}

/* ─── DESKTOP NAV ─────────────────────────────── */
.nav {
  display: flex;
  list-style: none;
  gap: 0;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
}

.nav>li {
  position: relative;
}

.nav>li>a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 22px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.nav>li>a .arr {
  font-size: 10px;
  margin-top: 1px;
  transition: transform 0.25s;
}

.nav>li:hover>a {
  color: var(--primary);
}
.nav li a {
  display: block;
  padding: 18px 12px;
  font-size: 16px;
  font-weight: 600;
  color: #1E1E1E;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
  -webkit-text-stroke: 0px;
  font-family: "Bricolage Grotesque", sans-serif;
}
.nav>li:hover>a .arr {
  transform: rotate(180deg);
}

/* DROPDOWN */
.dropdown {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  min-width: 220px;
  border-top: 3px solid var(--primary);
  box-shadow: var(--shadow);
  border-radius: 0 0 10px 10px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
  z-index: 999;
}

.nav>li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown li a {
  display: block;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
  white-space: wrap;
}

.dropdown li:last-child a {
  border-bottom: none;
}

.dropdown li a:hover {
  background: #fff5f5;
  color: var(--primary);
  padding-left: 26px;
}
/* The right-most nav dropdown is anchored left:0 and 220px wide; at the 1440 nav
   width it spilled past the viewport. Right-align it so it opens inward. */
.nav > li:last-child .dropdown { left: auto !important; right: 0 !important; }

/* CTA */
.cta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
  padding: 11px 26px;
  border-radius: 37px;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  font-family: "Bricolage Grotesque", sans-serif;
}

.cta:hover {
  background: #c0181f;
}

.cta-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* Phone CTA typography — canonical values shared by every page. */
.cta-label {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 12px;
  font-weight: 400;
  opacity: .9;
  color: #fff;
  line-height: 1.2;
}
.cta-number {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .5px;
}

/* HAMBURGER */
.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: 8px;
}

.ham span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: #000;
  border-radius: 2px;
  transition: all 0.3s;
}

.ham.open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.ham.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.ham.open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}
.cta-new {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
  padding: 12px 35px;
  border-radius: 37px;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: 10px;
}

/* ─── OVERLAY ─────────────────────────────────── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1100;
  transition: opacity 0.3s;
}

.overlay.active {
  display: block;
}

/* ─── MOBILE DRAWER ────────────────────────────── */
.mob-drawer {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100vh;
  background: var(--white);
  z-index: 1200;
  overflow-y: auto;
  transition: left 0.32s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}

.mob-drawer.open {
  left: 0;
}

.mob-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #eee;
}

.mob-close {
  background: none;
  border: none;
  color: #000;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
}

.mob-nav {
  flex: 1;
  padding: 8px 0;
}

/* Mobile top-level item */
.mob-item {
  border-bottom: 1px solid #f0f0f0;
}

.mob-item>.mob-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.mob-item>.mob-link:hover {
  background: var(--gray);
}

.mob-item>.mob-link .mob-arr {
  font-size: 11px;
  color: #999;
  transition: transform 0.25s;
}

.mob-item.open>.mob-link .mob-arr {
  transform: rotate(90deg);
  color: var(--primary);
}

.mob-item.open>.mob-link {
  color: var(--primary);
}

/* Mobile submenu */
.mob-sub {
  max-height: 0;
  overflow: hidden;
  background: #fafafa;
  transition: max-height 0.35s cubic-bezier(.4, 0, .2, 1);
}

.mob-item.open .mob-sub {
  max-height: 800px;
}

.mob-sub a {
  display: block;
  padding: 10px 18px 10px 30px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #efefef;
  transition: color 0.15s, padding-left 0.15s;
}

.mob-sub a:last-child {
  border-bottom: none;
}

.mob-sub a:hover {
  color: var(--primary);
  padding-left: 36px;
}

/* Mobile CTA */
.mob-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.reviews-section .review-card-right { width: 100%; }
.partner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.tab-content.deals-grid { display: none; }
.tab-content.deals-grid.active { display: grid; }
.disclamer { padding: 10px 0; width: 100%; float: left; }
.disclamer p { margin: 0; color: #fff; padding: 10px; font-size: 13px; line-height: 20px; }
.disclamer p img { margin: 10px 10px 0 0; }
.custom-footer-wrap .footer-head { clear: both; padding-top: 40px; }

/* Reviews slider pagination dots live in #reviews-dots (footer.php), which gets
   Swiper's modifier classes but NOT the base .swiper-pagination class, so the
   generic centering rule never applies. Center them here. */
.reviews-dots-wrap { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; }

/* Footer wrappers share the same 1440 / 32px width on new-design pages */
.mfy-footer__wrap,
.mfy-footer__bar-wrap { max-width: 1440px !important; padding-left: 32px !important; padding-right: 32px !important; }

/* ─── RESPONSIVE ──────────────────────────────── */
@media (max-width: 1024px) {
  .nav>li>a {
    padding: 22px 9px;
    font-size: 12.5px;
  }
}

@media (max-width: 860px) {
  .nav {
    display: none;
  }
  .mob-sub a {
    display: block;
    padding: 13px 18px 10px 41px;
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid #efefef;
    transition: color 0.15s, padding-left 0.15s;
    font-weight: 200;
  }
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ham {
    display: flex;
  }
  .cta {
    padding: 8px 12px;
  }
  .cta-number {
    font-size: 13px;
  }
}

/* Tablet and below: drop the phone CTA from the header bar (logo + hamburger only).
   The number still lives in the top marquee and inside the mobile drawer. */
@media (max-width: 768px) {
  .header-inner .cta { display: none !important; }
}

/* Trust-logo strip: the source PNG is 800px wide; let it shrink with the
   header row instead of forcing horizontal overflow on tablets. */
.header-inner .trust_logo {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 16px;
}
.header-inner .trust_logo img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ─── ALERT BAR ───────────────────────────────── */
.travel-alert {
  width: 100%;
  background: linear-gradient(90deg, #c00200, #016a9b);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  /* Force normal so the bar height is identical everywhere. Internal pages load
     the legacy bootstrap sheets which otherwise leak line-height:20px here,
     making the bar 3px taller than on Home/Blog/FTI. */
  line-height: normal !important;
  padding: 10px 0;
  position: relative;
}
/* Inner content layout (WIDTH is set per-environment in the wrapper). */
.travel-alert .container {
  position: relative;
  display: flex;
  align-items: center;
  line-height: normal !important;
  /* style.css adds .container{padding:20px} at 768-1024px; keep vertical padding 0. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.travel-alert .mfy-mq__seg {
  line-height: normal !important;
  /* Top-bar offer text: bold Bricolage, matching the Flights-to-India page.
     (FTI gets this from style.css, which the internal/bootstrap pages don't load,
     so it must live here in the shared header CSS to match everywhere.) */
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-weight: 700 !important;
}

/* Continuous (seamless) marquee. */
.mfy-mq { flex: 1 1 auto; overflow: hidden; padding-right: 24px; }
.mfy-mq__track { display: flex; width: max-content; animation: mfy-mq-scroll 32s linear infinite; }
.mfy-mq__seg { white-space: nowrap; padding-right: 200px; }
@keyframes mfy-mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mfy-mq:hover .mfy-mq__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mfy-mq__track { animation: none; } }

.travel-alert a {
  color: #fff;
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-weight: 600;
  text-decoration: underline;
}
.travel-alert a:hover {
  text-decoration: none;
}

/* Close Button */
.alert-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  transition: background .2s ease, transform .2s ease;
  z-index: 2;
}
.alert-close:hover {
  background: rgba(255, 255, 255, .38);
  transform: translateY(-50%) scale(1.08);
}