/* =====================================================================
   Beyond Journey - every breadcrumb in a see-through rounded box
   ---------------------------------------------------------------------
   2026-10-21, the designer, over "Home / Holidays / Group Journeys": "in
   sabko transparent rounded box m design karo". The site has twelve
   breadcrumb styles across about thirty pages; all of them now sit in
   one pill, as wide as its words, in the language of the banners' own
   pills (.hp-hero__kicker): fully round ends, a 1px edge, a soft blur
   of whatever is behind it.

     light banners - the travel-style pages, the hotel detail page and
       the light listing crumb: frosted white, a faint navy edge
     dark banners - Spiritual, About, Contact, the legal pages and
       offers, the flight offer page and the dark listing crumb: white
       at 12% with a white edge at 30%, as the kicker pills

   Loaded from Shared/header.cshtml, so every page has it. The pages' own
   <style> blocks come after the header, so the box carries html body and
   !important; each page keeps its own colours, type and separators.
   To give a new breadcrumb the box, add its class to the lists below.
   ===================================================================== */

html body :is(.jr-hero__crumbs, .grj-crumbs, .kj-crumbs, .sfh-crumbs, .wj-crumbs, .hvd-crumb, .bjl-crumb,
              .spj-hero__crumbs, .bja-hero__crumbs, .bjct-hero__crumbs, .bjfo-hero__crumbs, .bjlg-hero__crumbs) {
  box-sizing: border-box;
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* the listing crumb is a <nav> round an <ol>; the list's own margin
   would sit inside the pill. The pill is 14px taller than the bare line
   was, and on the experience listing it left 8px above the title, so it
   gets a little room of its own */
html body .bjl-crumb > ol { margin: 0 !important; }
html body .bjl-crumb { margin-bottom: 14px !important; }

/* light banners */
html body :is(.jr-hero__crumbs, .grj-crumbs, .kj-crumbs, .sfh-crumbs, .wj-crumbs, .hvd-crumb, .bjl-crumb:not(.bjl-crumb--light)) {
  background: rgba(255, 255, 255, .62) !important;
  border: 1px solid rgba(23, 35, 62, .12) !important;
  box-shadow: 0 2px 10px -4px rgba(23, 35, 62, .14);
}

/* dark banners */
html body :is(.spj-hero__crumbs, .bja-hero__crumbs, .bjct-hero__crumbs, .bjfo-hero__crumbs, .bjlg-hero__crumbs, .bjl-crumb--light) {
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
}

@media (max-width: 575px) {
  html body :is(.jr-hero__crumbs, .grj-crumbs, .kj-crumbs, .sfh-crumbs, .wj-crumbs, .hvd-crumb, .bjl-crumb,
                .spj-hero__crumbs, .bja-hero__crumbs, .bjct-hero__crumbs, .bjfo-hero__crumbs, .bjlg-hero__crumbs) {
    padding: 5px 12px !important;
  }
}