/* =====================================================================
   Travlix design layer (Batch B). Shared polish for the B2C header,
   footer and Flight/Hotel/Bus/Holiday/Visa service tabs.
   Loaded by template/tl_head_assets.php AFTER every theme stylesheet and
   BEFORE the agency's own custom_css (DB), so agency colours always win.
   Colours come only from the existing agency variables
   (--topbar-*, --header-*, --tts-buttton-*, --footer-Bg). The Travlix
   palette below is used only where the agency has not set a value.
   Variant hooks on <body>: .tl-h-<header> .tl-f-<footer> .tl-s-<search>
   Legacy variant 5 (header5/footer5/search5, Bootstrap 3 + external
   devflyway CSS) is deliberately excluded from the structural rules.
   Designs 11-20 (body .tl-h-v2 / .tl-s-v2 / .tl-f-v2, set in tl_head_assets.php)
   are excluded from the header, service-tab and footer rules too: they ship
   their own complete styles (webroot/css/wl_theme/<design>.css), loaded after
   this file. ":not(a, b)" and ":where()" keep every selector's specificity
   unchanged for styles 0-10. Section 8 (phone date picker) applies to all.
   ===================================================================== */

/* ---------- 1. Tokens + Travlix fallback palette ---------- */
:root {
  /* Fallbacks for the agency variables. custom.css used to ship #b01b07 here;
     an agency's custom_css (printed after this file) overrides any of them. */
  --topbar-bg: #5B3DF5;
  --topbar-txt-color: #ffffff;
  --header-bg: #ffffff;
  --header-txt-color: #1F2937;
  --tts-buttton-bg: #5B3DF5;
  --tts-buttton-bg1: #12B8A6;
  --tts-buttton-txt: #ffffff;
  --tts-buttton-txt1: #ffffff;
  --footer-Bg: #ffffff;

  /* Travlix design tokens (internal; agencies may override in custom_css) */
  --tl-primary: var(--tts-buttton-bg);
  --tl-primary-txt: var(--tts-buttton-txt);
  --tl-secondary: var(--tts-buttton-bg1);
  --tl-teal: #12B8A6;
  --tl-coral: #FF7A59;
  --tl-ink: #1F2937;
  --tl-muted: #6B7280;
  --tl-line: #E5E7EB;
  --tl-soft: #F6F7FB;
  --tl-radius: 12px;
  --tl-radius-sm: 8px;
  --tl-shadow: 0 8px 28px rgba(17, 24, 39, .10);
  --tl-shadow-sm: 0 2px 10px rgba(17, 24, 39, .06);
  --tl-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tl-tap: 44px;
}

/* ---------- 2. Header: all Bootstrap-5 variants (header, header1..4) ---------- */
body.tl-portal:not(.tl-h-header5, .tl-h-v2) #topbar,
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .topbar {
  font-family: var(--tl-font);
  font-size: 13px;
  min-height: 36px;
  background: var(--topbar-bg);
  color: var(--topbar-txt-color);
}
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .topbar a,
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .topbar i { color: var(--topbar-txt-color); }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .topbar .social-links a { opacity: .9; transition: opacity .2s; }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .topbar .social-links a:hover { opacity: 1; }

body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar,
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .nav-link,
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu,
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .offcanvas,
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .offcanvassiderbar {
  font-family: var(--tl-font);
}

/* logo: consistent size, never stretched. Same box in every header (220 x 52 px, 170 x 42 px on phones);
   the signup logo hint ("440 x 104 px recommended") is 2x this box. height:auto overrides the fixed heights of header2. */
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar-brand img,
body.tl-portal:not(.tl-h-header5, .tl-h-v2) #logo img,
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .offcanvas-logo img {
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 52px;
  object-fit: contain;
}

/* sticky header elevation */
body.tl-portal .home-header.sticky-top,
body.tl-portal .home-header.fixed-top,
body.tl-portal #header.header-with-alt { box-shadow: var(--tl-shadow-sm); }

/* nav links: same rhythm, focus ring, active indicator in the agency colour */
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar-nav .nav-link {
  font-weight: 600;
  letter-spacing: .1px;
  border-radius: var(--tl-radius-sm);
  transition: color .2s, background-color .2s, box-shadow .2s;
}
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar-nav .nav-link:focus-visible,
body.tl-portal .search_tabs a:focus-visible,
body.tl-portal .navbar-toggler:focus-visible {
  outline: 3px solid var(--tl-primary);
  outline-offset: 2px;
  box-shadow: none;
}
@media (min-width: 992px) {
  body.tl-portal:not(.tl-h-header5, .tl-h-v2):not(.tl-h-header1) .navbar-list .nav-link.active {
    color: var(--tl-primary);
    box-shadow: inset 0 -3px 0 var(--tl-primary);
    border-radius: 0;
  }
  body.tl-portal.tl-h-header1 .navbar-list .nav-link.active { box-shadow: inset 0 -3px 0 currentColor; border-radius: 0; }
}

@media (min-width: 1281px) {
  body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar-list .nav-link { font-size: 14.5px; }
}
@media (min-width: 992px) and (max-width: 1280px) {
  body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar-list .nav-link { font-size: 13px; }
}

/* dropdowns + holiday megamenu */
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu {
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow);
  padding: 10px;
}
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu .dropdown-item { border-radius: var(--tl-radius-sm); padding: 8px 12px; }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu .dropdown-item:hover,
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu .dropdown-link:hover .dropdown-list { background: var(--tl-soft); }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .megamenu .title { font-weight: 700; color: var(--tl-ink); }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .megamenu a { color: var(--tl-muted); }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .megamenu a:hover { color: var(--tl-primary); }

/* login / signup buttons use the agency button colour */
body.tl-portal:where(:not(.tl-h-v2)) .navbar .dropdown-menu-header .btn-secondary,
body.tl-portal .tl-btn,
body.tl-portal .offcanvassiderbar .loginbtn {
  background: var(--tl-primary);
  border-color: var(--tl-primary);
  color: var(--tl-primary-txt);
  border-radius: var(--tl-radius-sm);
  font-weight: 600;
}

/* hamburger: 44px tap target in the agency colour */
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar-toggler {
  width: var(--tl-tap);
  height: var(--tl-tap);
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--tl-radius);
  background: var(--tl-primary);
  color: var(--tl-primary-txt);
  font-size: 18px;
  line-height: 1;
}
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar-toggler i { color: inherit; }
body.tl-portal.tl-h-header1 #header .navbar-toggler,
body.tl-portal.tl-h-header1 #header.header-with-alt .navbar-toggler { color: var(--tl-primary-txt); }
@media (max-width: 991.98px) {
  body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar-toggler { display: inline-flex; }
}
/* header2 always uses the offcanvas toggler */
body.tl-portal.tl-h-header2 .offcanvassiderbar .navbar-toggler { display: inline-flex; }

/* ---------- 3. Mobile menu (<992px) ----------
   header/header1: the collapse becomes a white card under the bar.
   header3/header4: keep their own full-screen slide-in drawer at <=600px
   (header3.css/header4.css). The card style only applies at 601-991px. */
@media (max-width: 991.98px) {
  body.tl-portal:is(.tl-h-header, .tl-h-header1) .navbar-expand-lg .navbar-collapse {
    background: #fff;
    border: 1px solid var(--tl-line);
    border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow);
    margin-top: 10px;
    padding: 8px;
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.tl-portal:not(.tl-h-header5, .tl-h-v2):not(.tl-h-header2) .navbar-expand-lg .navbar-collapse .nav-link {
    color: var(--tl-ink);
    min-height: var(--tl-tap);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    text-align: left;
  }
  body.tl-portal:not(.tl-h-header5, .tl-h-v2):not(.tl-h-header2) .navbar-expand-lg .navbar-collapse .nav-link.active {
    color: var(--tl-primary);
    background: var(--tl-soft);
  }
  body.tl-portal:not(.tl-h-header5, .tl-h-v2):not(.tl-h-header2) .navbar-expand-lg .navbar-collapse .nav-item + .nav-item { border-top: 1px solid var(--tl-line); }
  body.tl-portal:not(.tl-h-header5, .tl-h-v2):not(.tl-h-header2) .navbar-expand-lg .navbar-collapse .dropdown-menu {
    position: static;
    float: none;
    box-shadow: none;
    border: 0;
    background: var(--tl-soft);
    margin: 0 0 6px;
    max-height: 50vh;
    overflow-y: auto;
  }
  body.tl-portal:not(.tl-h-header5, .tl-h-v2):not(.tl-h-header2) .navbar-expand-lg .navbar-collapse .megamenu .row > [class*="col-"] { width: 100%; }
  /* login/signup becomes a full-width button */
  body.tl-portal:not(.tl-h-header5, .tl-h-v2):not(.tl-h-header2) .navbar-expand-lg .navbar-collapse .dropdown-right > .nav-link {
    justify-content: center;
    background: var(--tl-primary);
    color: var(--tl-primary-txt);
    border-radius: var(--tl-radius-sm);
    margin-top: 6px;
  }
  /* compact topbar: centred, wraps instead of overflowing */
  body.tl-portal:not(.tl-h-header5, .tl-h-v2) .topbar .contact-info { flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
  body.tl-portal:not(.tl-h-header5, .tl-h-v2) .topbar .contact-info i.ms-4 { margin-left: 0 !important; }
  body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar-brand img,
  body.tl-portal:not(.tl-h-header5, .tl-h-v2) #logo img { max-height: 42px; max-width: 170px; }
}
@media (min-width: 601px) and (max-width: 991.98px) {
  body.tl-portal:is(.tl-h-header3, .tl-h-header4) .navbar-expand-lg .navbar-collapse {
    background: #fff;
    border: 1px solid var(--tl-line);
    border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow);
    margin-top: 10px;
    padding: 8px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}
@media (max-width: 600px) {
  body.tl-portal:is(.tl-h-header3, .tl-h-header4) .navbar-expand-lg .navbar-collapse.show { box-shadow: var(--tl-shadow); }
}
@media (max-width: 400px) {
  body.tl-portal:not(.tl-h-header5, .tl-h-v2) .topbar { font-size: 12px; }
  body.tl-portal:not(.tl-h-header5, .tl-h-v2) .topbar .contact-info a { word-break: break-all; }
}

/* header2 offcanvas panel */
body.tl-portal.tl-h-header2 .offcanvas { max-width: 86vw; border-left: 0; box-shadow: var(--tl-shadow); }
body.tl-portal.tl-h-header2 .offcanvas .nav-link { min-height: var(--tl-tap); display: flex; align-items: center; color: var(--tl-ink); }
body.tl-portal.tl-h-header2 .offcanvas .nav-link.active { color: var(--tl-primary); }
@media (max-width: 575.98px) {
  body.tl-portal.tl-h-header2 .offcanvassiderbar .loginbtn { font-size: 13px; padding: 8px 10px; white-space: nowrap; }
}

/* ---------- 4. Service tabs (Flight / Hotel / Bus / Holidays / Visa + custom links) ---------- */
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 12px 6px 8px;
  margin-left: 0;
  margin-right: 0;
  list-style: none;
  justify-content: flex-start;
  font-family: var(--tl-font);
}
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs::-webkit-scrollbar { display: none; }
/* centred when it fits, scrollable from the first tab when it does not */
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li:first-child { margin-left: auto; }
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li:last-child { margin-right: auto; }
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li {
  float: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
  border: 0;
  background: transparent;
}
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 88px;
  min-height: 68px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  border-radius: var(--tl-radius);
  background: #fff;
  color: var(--tl-ink);
  border: 1px solid var(--tl-line);
  box-shadow: var(--tl-shadow-sm);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, color .18s, background-color .18s, border-color .18s;
}
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li > a > span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li > a i { font-size: 19px; margin: 0; display: block; color: inherit; }
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li > a:hover {
  color: var(--tl-primary);
  border-color: var(--tl-primary);
  transform: translateY(-2px);
  box-shadow: var(--tl-shadow);
}
/* active tab: search..search4 mark the <li>, search1 marks the <a> (class "current") */
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li.current > a,
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li > a.current {
  background: var(--tl-primary);
  border-color: var(--tl-primary);
  color: var(--tl-primary-txt);
  box-shadow: 0 8px 20px rgba(17, 24, 39, .18);
}
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li.current::after,
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li.current::before { display: none; }
/* custom agency links: same tile, subtle "external" cue */
body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li.tl-custom-tab > a { border-style: dashed; }

@media (max-width: 575.98px) {
  /* 5 services fit side by side at 390px. Extra agency links scroll horizontally */
  body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs { gap: 6px; padding: 10px 2px 6px; }
  body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li { flex: 1 0 58px; }
  body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li:first-child,
  body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li:last-child { margin-left: 0; margin-right: 0; }
  body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li > a { min-width: 0; width: 100%; min-height: 58px; padding: 8px 4px; font-size: 12px; gap: 4px; }
  body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li > a i { font-size: 16px; }
}

/* hero above the search form: keep it a banner, not a full screen, on every device */
body.tl-portal .hero-banner .carousel-item { max-height: 560px; }
body.tl-portal .hero-banner .carousel-item img { width: 100%; max-height: 560px; object-fit: cover; }
@media (max-width: 575.98px) {
  body.tl-portal .hero-banner,
  body.tl-portal .hero-banner .carousel-item { min-height: 240px; }
  body.tl-portal .hero-banner .carousel-item img { max-height: 280px; }
}

/* ---------- 5. Footer: all Bootstrap-5 variants (footer, footer1..4) ---------- */
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer,
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) .footer_newsletter { font-family: var(--tl-font); }
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer h4,
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer h3 { font-weight: 700; letter-spacing: .2px; }
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer ul { padding-left: 0; list-style: none; }
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-links li,
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-widget li { margin: 0 0 8px; line-height: 1.4; }
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-links a,
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-widget a { transition: opacity .2s, padding-left .2s; }
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-links a:hover,
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-widget a:hover { opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .social-links { display: flex; flex-wrap: wrap; gap: 8px; }
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .social-links a {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; margin: 0;
}
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer img.tts-logo-white,
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-info img { max-height: 56px; width: auto; max-width: 220px; object-fit: contain; }
/* newsletter: input + button never overflow */
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer form[name="newsletterform"] { max-width: 100%; }
body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer form[name="newsletterform"] input[type="email"] { min-width: 0; }

@media (max-width: 767.98px) {
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-top { padding-top: 32px; padding-bottom: 8px; }
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-top .row > [class*="col-"] { margin-bottom: 18px; }
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-info,
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-newsletter { flex: 0 0 100%; max-width: 100%; }
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .copyright,
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .copyright.text-end,
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .copyright.text-left { text-align: center !important; float: none; width: 100%; }
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footer-bottom .row > [class*="col-"],
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .bottom__content .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .footernewsletter { flex-direction: column; align-items: stretch !important; gap: 12px; text-align: center; }
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .newsletterform { display: flex; width: 100%; }
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .newsletterform input { flex: 1 1 auto; min-width: 0; }
  body.tl-portal:not(.tl-f-footer5, .tl-f-v2) footer .newsletterform button { flex: 0 0 auto; }
}

/* ---------- 6. Error pages (custom-error-layout) ---------- */
body.tl-portal.tl-error-page { background: var(--tl-soft); }
body.tl-portal.tl-error-page .tl-error-card {
  background: #fff;
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow-sm);
  padding: 40px 24px;
  text-align: center;
  font-family: var(--tl-font);
}
body.tl-portal.tl-error-page .tl-error-card img { width: 120px; max-width: 40%; height: auto; margin-bottom: 16px; }
body.tl-portal.tl-error-page .tl-error-card h1 { font-size: clamp(20px, 3.2vw, 28px); color: var(--tl-ink); }
body.tl-portal.tl-error-page .tl-error-card p { color: var(--tl-muted); }
body.tl-portal.tl-error-page .tl-error-card a:not(.btn) { color: var(--tl-primary); }
body.tl-portal.tl-error-page .tl-btn:hover { filter: brightness(.95); color: var(--tl-primary-txt); }

/* ---------- 7. Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li > a,
  body.tl-portal .navbar-nav .nav-link { transition: none; }
  body.tl-portal:where(:not(.tl-s-v2)) .search_tabs.tl-service-tabs > li > a:hover { transform: none; }
}

/* ---------- 8. Date picker on phones ----------
   search.css (imported by search5-10), search3.css and search4.css force the jQuery UI widget to
   `left:0; top:100%|150px !important` below 600px. #ui-datepicker-div is a child of <body>, so top:100% is the
   bottom of the first screen: the calendar opened off-screen (or far from the field once scrolled). On phones
   it is shown as a centred sheet that always fits the screen, scrolls inside if it is taller than the screen and
   sits above the header, the footer and the trial "Powered by Travlix" ribbon (z-index 99999).
   Same 600px breakpoint as those theme rules: tablets and desktop keep the normal jQuery UI placement.
   The id selector + !important beats those theme rules and jQuery UI's inline top/left. Desktop is untouched. */
@media (max-width: 600px) {
  body #ui-datepicker-div.ui-datepicker {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0 !important;
    padding: 6px !important;
    z-index: 100000 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .45), 0 12px 32px rgba(0, 0, 0, .25) !important;
  }
  body #ui-datepicker-div.ui-datepicker .ui-datepicker-group {
    width: 100% !important;
    float: none !important;
  }
  body #ui-datepicker-div.ui-datepicker .ui-datepicker-group + .ui-datepicker-group { margin-top: 8px; }
  body #ui-datepicker-div.ui-datepicker table { width: 100% !important; margin: 0 0 4px; font-size: 15px; }
  body #ui-datepicker-div.ui-datepicker td a,
  body #ui-datepicker-div.ui-datepicker td span { padding: .55em .2em; text-align: center; }
}

/* ---------- 9. QA 19 Oct fixes ---------- */
/* #12: agencies without a real logo show their name instead of the "Your Logo" placeholder image */
.tl-brand-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-family: var(--tl-font);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--tl-primary);
  text-decoration: none;
}
footer .tl-brand-name, .footer .tl-brand-name { font-size: 20px; }
@media (max-width: 575.98px) { .tl-brand-name { font-size: 18px; max-width: 62vw; } }

/* #5: airport suggestions sit above the "Please select from airport" message (custom.css gives it z-index 998) */
body.tl-portal .ui-autocomplete.ui-widget { z-index: 1001 !important; }

/* #9: account dropdown (Login / Signup, Offer, Agent Login): button and links no longer overlap, same layout in every header */
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu-header { min-width: 230px; }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu-header > span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--tl-ink); }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu-header .btn-secondary { display: block; width: 100%; margin: 10px 0 8px !important; position: relative; }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu-header .dropdown-link { display: block; position: static; margin: 2px 0 0; padding: 0; border: 0; text-decoration: none; }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu-header .dropdown-list { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--tl-radius-sm); }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu-header .dropdown-list i { position: static; flex: 0 0 20px; width: 20px; height: auto; margin: 2px 0 0; padding: 0; font-size: 16px; line-height: 1.2; text-align: center; background: none; color: var(--tl-primary); }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu-header .dropdown-list .dropdown-contnt { margin: 0; padding: 0; }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu-header .dropdown-list h4 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--tl-ink); }
body.tl-portal:not(.tl-h-header5, .tl-h-v2) .navbar .dropdown-menu-header .dropdown-list p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--tl-muted); }

/* #10: login modal contact panel lines up with the form card (same top and height) */
#login-modal-b5 .login-popup > .row { align-items: stretch; }
#login-modal-b5 .login-popup .modal-offer-banner { margin-top: 0; height: 100%; min-height: 550px; }

/* M1: no banner image -> agency-colour gradient, so the white trip-type / fare-type labels stay readable
   and there is no empty band above the tabs */
body.tl-portal .hero-banner.tl-no-slider {
  background: linear-gradient(135deg, var(--tl-primary) 0%, var(--tl-secondary) 100%);
  padding-top: 60px;
}
@media (max-width: 768px) {
  body.tl-portal .hero-banner.tl-no-slider { padding-top: 24px; padding-bottom: 32px; min-height: 0; }
}
/* Fix: search2 (Modern) hero with no slider images. .info is absolute (no flow height), so
   .search-wrapper{margin-top:-100px} pulls the tabs up over the navbar and covers the hero title. */
body.tl-portal .hero-banner.tl-no-slider { padding-top: 0; }
body.tl-portal .hero-banner.tl-no-slider .info { position: static; height: auto; padding: 56px 0 140px; }
@media (max-width: 768px) {
  body.tl-portal .hero-banner.tl-no-slider { padding-top: 0; padding-bottom: 0; }
  body.tl-portal .hero-banner.tl-no-slider .info { padding: 28px 0 120px; }
  body.tl-portal .hero-banner.tl-no-slider .info h2 { font-size: 30px; margin-bottom: 14px; padding-bottom: 14px; }
}
/* Fix: search1 (Ocean) / any hero with no slider and no .info block. The hero is empty, the mobile rule above
   sets padding 0 / min-height 0, and search1 pulls the form up (-90px section, -70px tabs) over the navbar.
   Give the empty hero enough height for the navbar plus the pull-up. */
@media (max-width: 768px) {
  body.tl-portal .hero-banner.tl-no-slider:not(:has(.info)) { min-height: 270px; }
}
/* QA 31 Oct (Ocean / search1 only, phones): 270px left a ~154px empty band between the navbar (bottom 76px at 390) and the
   service tabs; 132px keeps the tabs ~16px below the navbar. The "Oneway / Round Trip / Multi City" pills stay on one line
   (their row already scrolls sideways via .overflow-auto if a phone is narrower). Other templates keep the 270px rule. */
@media (max-width: 768px) {
  body.tl-portal.tl-s-search1 .hero-banner.tl-no-slider:not(:has(.info)) { min-height: 132px; }
  body.tl-portal.tl-s-search1 #flight .search-check-label { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
  body.tl-portal.tl-s-search1 #flight .flight-search .form-check-inline { margin-right: 6px; }
}

/* M4: "Select A Fare Type" airline row wraps on phones instead of being cut off at the right edge (all search templates;
   search2 puts it outside .tts_product_box) */
@media (max-width: 600px) {
  body.tl-portal .makeflex:has(> .search_filters) { flex-wrap: wrap; align-items: flex-start; row-gap: 6px; }
  body.tl-portal .makeflex:has(> .search_filters) > span { flex: 0 0 100%; margin: 0 0 2px; }
  body.tl-portal .makeflex:has(> .search_filters) .search_filters { display: flex; flex-wrap: wrap; gap: 8px 14px; overflow: visible; white-space: normal; max-width: 100%; }
  body.tl-portal .makeflex:has(> .search_filters) .search_filters .form-check-inline { margin: 0; }
  body.tl-portal .makeflex:has(> .search_filters) .search_filters .form-check-border { padding-right: 14px; }
}

/* M4b (19 Oct 2026, faretype-hide-airlines): "Select A Fare Type" shows only Non-Stop. The airline options (Indigo, Vistara,
   AirIndia, Spice jet, Go First, Air Asia) and the divider after Non-Stop are hidden in every search template, themes 11-20,
   header5 and the flight-results modify-search form. Markup is kept, so no view / Angular / jQuery hook changes.
   flight.js (tlxSyncAirlineFilter) unticks any HIDDEN airline box and posts preferred_carriers empty (= all airlines).
   To limit this to phones later: wrap this whole block in @media (max-width: 600px) { ... }. The JS checks whether the
   options are actually hidden, so desktop would then keep working as before with no JS change. */
body.tl-portal .makeflex:has(> .search_filters) .search_filters > .form-check:not(:has(> [check-direct-flight])),
body.tl-portal .makeflex:has(> .search_filters) .search_filters > .blackBorder { display: none !important; }
/* the classic divider is Non-Stop's right border (.form-check-border); themes 11-20 draw Non-Stop as a full pill, keep it */
body.tl-portal .makeflex:has(> .search_filters) .search_filters > .form-check-border:not(:is(.aur-search, .tlt-search) *) { border-right: 0 !important; padding-right: 0; margin-right: 0; }
body.tl-portal .makeflex:has(> .search_filters) .search_filters { overflow: visible; }

/* M6: styles 7, 9 and 10 use one-line pill tabs; at phone width they become equal tiles with the icon above the label */
@media (max-width: 600px) {
  body.tl-portal .tlx-s7 .search_tabs.tl-service-tabs,
  body.tl-portal .tlx-s9 .search_tabs.tl-service-tabs,
  body.tl-portal .tlx-s10 .search_tabs.tl-service-tabs { display: flex; width: 100%; gap: 4px; }
  body.tl-portal .tlx-s7 .search_tabs.tl-service-tabs > li,
  body.tl-portal .tlx-s9 .search_tabs.tl-service-tabs > li,
  body.tl-portal .tlx-s10 .search_tabs.tl-service-tabs > li { flex: 1 1 0; min-width: 56px; margin: 0; }
  body.tl-portal .tlx-s7 .search_tabs.tl-service-tabs > li > a,
  body.tl-portal .tlx-s9 .search_tabs.tl-service-tabs > li > a,
  body.tl-portal .tlx-s10 .search_tabs.tl-service-tabs > li > a { flex-direction: column; gap: 5px; width: 100%; padding: 8px 2px; font-size: 11.5px; border-radius: 10px; }
  body.tl-portal .tlx-s7 .search_tabs.tl-service-tabs > li > a > span,
  body.tl-portal .tlx-s9 .search_tabs.tl-service-tabs > li > a > span,
  body.tl-portal .tlx-s10 .search_tabs.tl-service-tabs > li > a > span { flex-direction: column; gap: 5px; }
  body.tl-portal .tlx-s7 .search_tabs.tl-service-tabs > li > a i,
  body.tl-portal .tlx-s9 .search_tabs.tl-service-tabs > li > a i,
  body.tl-portal .tlx-s10 .search_tabs.tl-service-tabs > li > a i { font-size: 16px; margin: 0; }
}

/* Login modal: "Resend OTP" link under the OTP field, greyed out during the 30 s cooldown */
[tl-resend-otp] { display: inline-block; margin-top: 6px; font-size: 13px; }
[tl-resend-otp].tl-resend-wait { pointer-events: none; color: var(--tl-muted, #6b7280) !important; text-decoration: none; cursor: default; }

/* #8: social icon list with no links (agency has no social URLs) takes no space (footer1-4 print an empty <ul>) */
footer ul.social-icon:not(:has(a)), .footer ul.social-icon:not(:has(a)) { display: none !important; }