/* =========================================================================
   UTS Site-Wide: Mobile Header Decorative Icons
   Adds a promo pill, support icon, and flag/language icon to the mobile
   header, matching the Musafir.com reference layout. These are DECORATIVE
   ONLY for now (no real support chat or language switching wired up yet)
   -- explicitly requested as a placeholder ahead of real functionality.
   Injected via uts-header-decor.js into .srch-moblop-wrap, right before
   the existing hamburger menu button.
   ========================================================================= */

.uts-header-decor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
}

.uts-header-promo-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.06);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.uts-header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: #000;
  flex: 0 0 auto;
  text-decoration: none;
}
.uts-header-icon-btn svg {
  width: 15px;
  height: 15px;
}

.uts-header-flag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 17px;
  line-height: 1;
  background: #F5F5F5;
  flex: 0 0 auto;
}

/* On very narrow screens, drop the promo pill's label text first so the
   icons never get cramped -- keeps this from ever causing overflow like
   the earlier header incident. */
@media (max-width: 380px) {
  .uts-header-promo-pill {
    display: none;
  }
}

/* =========================================================================
   Glassmorphism mobile header
   The site's own Customizer "Additional CSS" forces the header and every
   inner wrapper (.mobile-header, .mobile-header-t/-b, .srch-moblop-wrap,
   .mobile-menu-op-wrap) to solid #ffffff via !important, at the same
   max-width:1024px breakpoint used here. Overriding all of those (not
   just the outer element) is required, or one of the inner wrappers would
   still show solid white through the "gaps". The header is already
   position:sticky;top:0 natively, so this reads as a proper frosted-glass
   bar floating over content while scrolling.

   Also folded in here: the compact header height / smaller logo fix.
   This used to live scoped to body.single-trip only in trip-polish.css,
   which is why the homepage and other non-trip pages kept showing the
   tall ~70px-logo header while trip pages were already compact -- moved
   here so every page matches.
   ========================================================================= */
@media (max-width: 1024px) {
  .mobile-header,
  .mobile-header-t,
  .mobile-header-b,
  .srch-moblop-wrap,
  .mobile-menu-op-wrap {
    background: rgba(255, 255, 255, 0.6) !important;
  }

  .mobile-header {
    min-height: 44px !important;
    padding: 4px 15px !important;
  }
  .mobile-header-t img {
    max-height: 28px !important;
    width: auto !important;
  }
  /* The 44px/28px fixes above weren't enough on their own -- these two
     inner wrappers carry their own separate native padding
     (.mobile-header-t: 25px top+bottom = 50px; the search wrap inside
     .mobile-header-b: 10px top+bottom = 20px) that isn't touched by
     overriding the outer .mobile-header alone, and was still holding the
     header's real height up regardless of the smaller logo. */
  .mobile-header-t {
    padding: 6px 0 !important;
  }
  .mobile-header-b .srch-moblop-wrap .mobile-search-wrap {
    padding: 0 !important;
  }

  /* backdrop-filter goes on .mobile-header-t/-b specifically,
     NOT on the outer .mobile-header. backdrop-filter (like transform and
     filter) turns the element it's applied to into a "containing block"
     for any position:fixed descendants. The full-screen nav menu
     (.mobile-menu-wrapper, a cover-modal that needs position:fixed to
     cover the whole viewport) lives inside .mobile-header -- putting the
     blur there trapped the menu inside the small header box instead of
     covering the screen when opened. .mobile-header-t/-b don't contain
     that menu, so the blur is safe there. */
  .mobile-header-t,
  .mobile-header-b {
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
  }
  .mobile-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 24px rgba(15, 23, 35, 0.06);
  }

  /* Defensive safety net: the full-screen nav menu itself must always
     stay fully solid/opaque -- never let glass/transparency rules reach
     it, regardless of what else changes in the header above. */
  .mobile-menu-wrapper.cover-modal {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}