/* ============================================================
   sweep-fixes.css — full-site mobile/desktop sweep fixes
   (SEO / attractions / content pages). Appended by the sweep;
   every desktop-specific rule must carry a media guard.
============================================================ */

/* [S1] Enforce standard closed-<details> semantics (defensive; some render
   environments leak closed FAQ/attraction content over following sections). */
details:not([open]) > *:not(summary){ display:none !important; }

/* [S2] Journey-date modal: perfect-datetimepicker form is 240px with
   overflow:hidden, clipping the Saturday column of its 258px calendar
   table (verified clipped at BOTH 375px and 1280px). All-viewport fix. */
.ccdate form.perfect-datetimepicker,
.modal form.perfect-datetimepicker{
  width: auto !important;
  max-width: 100% !important;
}

/* [S3] SEO pages (seo-pages-header family) mobile tap targets + tiny text */
@media (max-width: 767.98px){
  .bb-seo-mapcard-btn{ min-height: 40px; }
  #myModal .close{ min-width: 40px; min-height: 40px; }
  .bb-seo-search-cell label{ font-size: 11px; }
  .bb-seo-stat small,
  .bb-seo-routecard-foot small{ font-size: 11px; }
  .bb-seo-day,
  .bb-seo-daysmini{ font-size: 11px; }
  .bb-cab-form-cell label,
  .bb-cab-form-cell small{ font-size: 11px; }
  .bb-vh-chip small{ font-size: 11px; }
  .bb-bhr-confirm-ref small{ font-size: 11px; }
  .bb-bp-pkg-price small{ font-size: 11px; }
  .bb-tp-ctag{ font-size: 11px; }
  span.bb-att-nb-tag,
  span.bb-att-pkg-typetag,
  .bb-att-info-cell small,
  .bb-att-related-price small{ font-size: 11px; }
  /* "Book <attraction> Tour" text CTA: 19px-tall tap target */
  a.footer-btn{ display: inline-block; padding: 10px 0; }
  /* Resort enquiry adult/child steppers: 34px tap targets */
  .bb-re-step-btn{ min-width: 40px; min-height: 40px; }
  /* Attraction/tourism section chip links (.btn-sm): 30px tap targets */
  .bb-att-section a.btn-sm{
    display: inline-flex; align-items: center;
    min-height: 40px; padding-top: 8px; padding-bottom: 8px;
  }
  /* Comment/enquiry form submit buttons on attraction pages: 37px tall */
  .bb-att-main form button,
  .bb-att-main form .btn{ min-height: 40px; }
}

/* [S3b] Route-detail sticky promo bar sits at bottom:64px but the mobile
   bottom nav is 67px tall — 3px overlap. Clear it. */
@media (max-width: 991.98px){
  /* !important: route-detail.css loads after this file and re-sets 64px */
  .bb-rd-sticky{ bottom: 68px !important; }
}

/* [S3c] jQuery-toast: close "x" is an 8px-wide tap target overlapping the
   heading text on 375px screens. Reserve space and enlarge the target. */
@media (max-width: 767.98px){
  .jq-toast-single{ padding-right: 34px !important; } /* jquery.toast.css loads later; its shorthand padding wins without !important */
  .close-jq-toast-single{
    width: 28px; height: 28px; line-height: 28px;
    text-align: center; font-size: 18px;
  }
}

/* [S3d] Attraction/tourism content tables (e.g. Telangana districts, 447px)
   overflow their 335px pane on mobile. Make the table its own x-scroller. */
@media (max-width: 767.98px){
  .bb-att-tabpane table,
  .bb-att-section table{
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* [S4] SEO FAQ/attraction rich-text lists: a global reset stripped bullets
   and left padding, so lists jut left of surrounding paragraphs. */
.bb-seo-faq details ul{ list-style: disc; padding-left: 34px; }
.bb-seo-faq details ol{ list-style: decimal; padding-left: 34px; }

/* [S5] partner-with-us: the view uses bb-pw-* classes but partner-with-us.css
   was never linked on the page (0 bb-pw rules loaded, buttons collapsed to
   19px inline links). Inlined here verbatim from assets/mhz/css/partner-with-us.css. */
    /* ── HERO ── */
    .bb-pw-hero {
      background: linear-gradient(135deg, #f97316 0%, #ea580c 55%, #c2410c 100%);
      padding: 70px 0 0; position: relative; overflow: hidden;
    }
    .bb-pw-hero::before {
      content: ''; position: absolute; inset: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='30' fill='none' stroke='rgba(255,255,255,.07)' stroke-width='1'/%3E%3C/svg%3E") repeat;
    }
    .bb-pw-eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
      color: #fff; font-size: 13px; font-weight: 700;
      padding: 6px 16px; border-radius: 999px; margin-bottom: 20px;
    }
    .bb-pw-hero-h1 {
      font-size: clamp(32px, 5vw, 54px); font-weight: 800; color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.15; margin-bottom: 16px;
    }
    .bb-pw-hero-h1 span { color: #fde68a; }
    .bb-pw-hero-sub {
      font-size: 16px; color: rgba(255,255,255,.88); line-height: 1.65;
      max-width: 580px; margin-bottom: 28px;
    }
    .bb-pw-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 50px; }
    .bb-pw-btn-primary {
      background: #fff; color: #c2410c;
      padding: 13px 28px; border-radius: 12px;
      font-size: 15px; font-weight: 800; text-decoration: none;
      display: inline-flex; align-items: center; gap: 8px;
      transition: transform .2s, box-shadow .2s;
      box-shadow: 0 4px 18px rgba(0,0,0,.15);
    }
    .bb-pw-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.22); color: #c2410c; }
    .bb-pw-btn-outline {
      background: rgba(255,255,255,.15); color: #fff;
      border: 1.5px solid rgba(255,255,255,.4);
      padding: 13px 28px; border-radius: 12px;
      font-size: 15px; font-weight: 700; text-decoration: none;
      display: inline-flex; align-items: center; gap: 8px;
      transition: background .2s;
    }
    .bb-pw-btn-outline:hover { background: rgba(255,255,255,.26); color: #fff; }
    .bb-pw-hero-stats {
      background: rgba(0,0,0,.18); backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; padding: 18px 0;
      border-top: 1px solid rgba(255,255,255,.15);
    }
    .bb-pw-hero-stat { text-align: center; padding: 8px 30px; }
    .bb-pw-hero-stat strong {
      display: block; font-size: 24px; font-weight: 800;
      font-family: 'Plus Jakarta Sans', sans-serif; color: #fde68a;
    }
    .bb-pw-hero-stat span { display: block; font-size: 12px; color: rgba(255,255,255,.8); font-weight: 500; }
    .bb-pw-hero-stat-div { width: 1px; height: 40px; background: rgba(255,255,255,.2); }

    /* ── SECTION HEADER ── */
    .bb-pw-section-head { text-align: center; margin-bottom: 36px; }
    .bb-pw-section-head h2 {
      font-size: clamp(22px, 3vw, 30px); font-weight: 800;
      font-family: 'Plus Jakarta Sans', sans-serif; color: var(--bb-text); margin-bottom: 8px;
    }
    .bb-pw-section-head p { font-size: 15px; color: var(--bb-text-muted); margin: 0; }

    /* ── PARTNERSHIP TYPE CARDS ── */
    .bb-pw-type-card {
      background: #fff; border-radius: 20px; padding: 36px 28px 28px;
      border: 1.5px solid #e2e8f0; height: 100%;
      position: relative; overflow: hidden;
      transition: transform .25s, box-shadow .25s;
      display: flex; flex-direction: column;
    }
    .bb-pw-type-card::before {
      content: ''; display: block; height: 5px;
      position: absolute; top: 0; left: 0; right: 0;
    }
    .bb-pw-type-card--orange::before { background: linear-gradient(90deg,#f97316,#ea580c); }
    .bb-pw-type-card--teal::before   { background: linear-gradient(90deg,#0d9488,#0f766e); }
    .bb-pw-type-card--blue::before   { background: linear-gradient(90deg,#1d4ed8,#3b82f6); }
    .bb-pw-type-card--featured { border-color: #0d9488; box-shadow: 0 8px 32px rgba(13,148,136,.15); }
    .bb-pw-type-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
    .bb-pw-type-ribbon {
      position: absolute; top: 18px; right: -24px;
      background: #0d9488; color: #fff;
      font-size: 10px; font-weight: 800; letter-spacing: .8px;
      padding: 4px 32px; transform: rotate(45deg); text-transform: uppercase;
    }
    .bb-pw-type-ico {
      width: 60px; height: 60px; border-radius: 16px;
      background: #fff7ed; color: #f97316;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 24px; margin-bottom: 18px;
    }
    .bb-pw-type-ico--teal { background: #ccfbf1; color: #0d9488; }
    .bb-pw-type-ico--blue { background: #dbeafe; color: #1d4ed8; }
    .bb-pw-type-title { font-size: 20px; font-weight: 800; margin-bottom: 10px; color: var(--bb-text); }
    .bb-pw-type-desc { font-size: 13.5px; color: var(--bb-text-muted); line-height: 1.6; margin-bottom: 18px; }
    .bb-pw-benefits {
      list-style: none; padding: 0; margin: 0 0 24px;
      display: flex; flex-direction: column; gap: 9px; flex: 1;
    }
    .bb-pw-benefits li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--bb-text); }
    .bb-pw-benefits li i { color: #10b981; font-size: 13px; margin-top: 2px; flex-shrink: 0; }
    .bb-pw-type-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px 22px; border-radius: 10px;
      font-size: 14px; font-weight: 700; text-decoration: none; color: #fff;
      transition: opacity .2s, transform .2s;
    }
    .bb-pw-type-btn:hover { opacity: .9; transform: translateX(3px); color: #fff; }
    .bb-pw-type-btn--orange { background: linear-gradient(90deg,#f97316,#ea580c); }
    .bb-pw-type-btn--teal   { background: linear-gradient(90deg,#0d9488,#0f766e); }
    .bb-pw-type-btn--blue   { background: linear-gradient(90deg,#1d4ed8,#2563eb); }

    /* ── WHY US CARDS ── */
    .bb-pw-why-card {
      background: #fff; border: 1.5px solid #e2e8f0;
      border-radius: 16px; padding: 24px 20px; text-align: center;
      transition: transform .2s, box-shadow .2s;
    }
    .bb-pw-why-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.09); }
    .bb-pw-why-ico {
      width: 52px; height: 52px; border-radius: 14px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 20px; margin-bottom: 12px;
    }
    .bb-pw-why-num {
      font-size: 28px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif;
      color: var(--bb-text); line-height: 1.1; margin-bottom: 4px;
    }
    .bb-pw-why-label { font-size: 12.5px; color: var(--bb-text-muted); font-weight: 500; }

    /* ── FEATURE ITEMS ── */
    .bb-pw-feat {
      display: flex; align-items: flex-start; gap: 14px;
      background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
      padding: 20px; height: 100%; transition: box-shadow .2s, border-color .2s;
    }
    .bb-pw-feat:hover { box-shadow: 0 4px 18px rgba(249,115,22,.10); border-color: #fdba74; }
    .bb-pw-feat > i {
      width: 42px; height: 42px; border-radius: 11px;
      background: #fff7ed; color: #f97316;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 17px; flex-shrink: 0;
    }
    .bb-pw-feat strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
    .bb-pw-feat p { font-size: 13px; color: var(--bb-text-muted); margin: 0; line-height: 1.55; }

    /* ── HOW IT WORKS ── */
    .bb-pw-steps {
      display: flex; align-items: flex-start;
      justify-content: center; flex-wrap: wrap; gap: 0;
    }
    .bb-pw-step {
      flex: 1; min-width: 180px; max-width: 210px;
      text-align: center; padding: 0 12px;
    }
    .bb-pw-step-num {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg,#f97316,#ea580c);
      color: #fff; font-weight: 800; font-size: 15px;
      display: inline-flex; align-items: center; justify-content: center;
      margin: 0 auto 12px;
    }
    .bb-pw-step-num--green { background: linear-gradient(135deg,#10b981,#059669); }
    .bb-pw-step-ico {
      width: 64px; height: 64px; border-radius: 18px;
      background: #fff; border: 2px solid #e2e8f0; color: #f97316; font-size: 24px;
      display: inline-flex; align-items: center; justify-content: center;
      margin: 0 auto 14px; box-shadow: 0 4px 14px rgba(249,115,22,.12);
    }
    .bb-pw-step-ico--green { color: #10b981; border-color: #a7f3d0; box-shadow: 0 4px 14px rgba(16,185,129,.12); }
    .bb-pw-step strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
    .bb-pw-step p { font-size: 12.5px; color: var(--bb-text-muted); line-height: 1.55; margin: 0; }
    .bb-pw-step-conn { color: #cbd5e1; font-size: 18px; padding-top: 52px; flex-shrink: 0; }
    @media (max-width: 767px) {
      .bb-pw-step-conn { display: none; }
      .bb-pw-step { min-width: 45%; }
    }

    /* ── REGISTER FORM ── */
    .bb-pw-form-card {
      background: #fff; border: 1.5px solid #e2e8f0; border-radius: 20px;
      padding: 40px; box-shadow: 0 8px 40px rgba(249,115,22,.10);
      overflow: hidden; position: relative;
    }
    .bb-pw-form-card::before {
      content: ''; display: block; height: 5px;
      background: linear-gradient(90deg,#f97316,#fb923c,#ea580c);
      position: absolute; top: 0; left: 0; right: 0;
    }
    .bb-pw-form-head { text-align: center; margin-bottom: 28px; }
    .bb-pw-form-head > i {
      width: 60px; height: 60px; border-radius: 50%;
      background: linear-gradient(135deg,#fff7ed,#ffedd5);
      border: 2px solid #fed7aa; color: #f97316; font-size: 22px;
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
    }
    .bb-pw-form-head h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
    .bb-pw-form-head p { font-size: 13.5px; color: var(--bb-text-muted); margin: 0; }
    .bb-pw-label {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .6px; color: var(--bb-text-muted); margin-bottom: 6px;
    }
    .bb-pw-label i { font-size: 12px; color: var(--bb-primary); }
    .bb-pw-input {
      width: 100%; padding: 11px 14px; border-radius: 10px;
      border: 1.5px solid #e2e8f0; font-size: 14px;
      font-family: 'Inter', sans-serif; color: var(--bb-text);
      background: #fff; outline: none; transition: border-color .2s, box-shadow .2s;
      appearance: none; -webkit-appearance: none;
    }
    .bb-pw-input:focus { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
    .bb-pw-submit {
      width: 100%; padding: 14px 24px; border-radius: 12px;
      background: linear-gradient(90deg,#f97316,#ea580c);
      color: #fff; font-size: 15px; font-weight: 800;
      border: none; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: opacity .2s, transform .2s;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .bb-pw-submit:hover { opacity: .92; transform: translateY(-1px); }

    /* ── CTA BANNER ── */
    .bb-pw-cta { background: linear-gradient(135deg,#0d9488,#134e4a); padding: 50px 0; }
    .bb-pw-cta-inner {
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
    }
    .bb-pw-cta-h2 { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 6px; }
    .bb-pw-cta-p  { color: rgba(255,255,255,.8); margin: 0; font-size: 14px; }
    .bb-pw-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
    .bb-pw-cta-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 22px; border-radius: 10px;
      font-size: 14px; font-weight: 700; text-decoration: none;
      transition: opacity .2s, transform .2s;
    }
    .bb-pw-cta-btn:hover { opacity: .9; transform: translateY(-2px); }
    .bb-pw-cta-btn--white   { background: #fff; color: #134e4a; }
    .bb-pw-cta-btn--wa      { background: #25d366; color: #fff; }
    .bb-pw-cta-btn--outline { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }

/* ============ Homepage search card: compact mobile stacking ============ */
/* On phones the From/To/swap flex row wraps to a column and the swap button
   became its own full-height row -> ~83px of dead space between the fields.
   Take the swap out of the flow: pin it to the fields' right edge at the
   From/To boundary (rotated for vertical swap semantics). */
@media (max-width:575.98px){
  .bb-idx-sf-row .bb-idx-swap-btn{
    position:absolute; right:16px; top:50%;
    transform:translateY(-50%) rotate(90deg);
    margin:0; z-index:3; background:#fff;
    box-shadow:0 2px 10px rgba(10,21,37,.15); border:1px solid #e5e7eb;
  }
  .bb-idx-sf-row{gap:8px;}
}

/* ============ User punch-list (mobile, 2026-07-17) ============ */
/* 1. Popular route chips: space between the bus icon and the label */
.bb-idx-route-chip i{margin-right:6px;}
/* 2. Our Services tiles: "Domestic Tours" on one line.
   NB: owl-carousel writes an inline width on every .owl-item, so a min-width on
   the tile inside it makes tiles spill over their neighbours. Width comes from
   the owl config (stagePadding) instead — here we only shrink the label. */
@media (max-width:767.98px){
  .bb-qc-tile{min-width:0;width:100%;padding-left:4px;padding-right:4px;}
  .bb-qc-tile span:last-child{white-space:nowrap;font-size:11.5px;letter-spacing:-.1px;}
}
/* 3. Header logo bigger on phones (was pinned 34px during the overflow fix) */
@media (max-width:575.98px){
  .bb-logo img, header .navbar-brand img{height:50px!important;max-height:50px!important;width:auto!important;}
}
/* 4. Breadcrumb: drop the current-page crumb on phones (it wrapped to 2 lines) */
@media (max-width:575.98px){
  .page-header .breadcrumb li.active{display:none;}
}
/* 5. Category/page-header title: one line on phones */
@media (max-width:575.98px){
  .page-header h2.headert.fnsz{font-size:19px;line-height:1.25;}
}
/* 9. Nearest-boarding widget: input + Find button were clipping right — stack them */
@media (max-width:575.98px){
  .bb-tpd-nearest form,.bb-tpd-nearest .input-group,.bb-tpd-nearest-row{flex-wrap:wrap!important;}
  .bb-tpd-nearest input[type=text]{width:100%!important;flex:1 1 100%!important;margin-bottom:8px;}
  .bb-tpd-nearest button,.bb-tpd-nearest .btn{width:100%!important;justify-content:center;}
}
/* 8. Similar-package card vehicle badges (Bus/Car) are absolute but their card
   wasn't a positioning context on this page -> badges anchored to the VIEWPORT
   and landed on the site header. Anchor them to their own card. */
.bb-pkg-card,.bb-pkg-body{position:relative;}
/* 6/7. Origin-cities + vehicle-type pill rows: one-line scrollers with arrows */
@media (max-width:767.98px){
  .cat-navs,.main-navs{flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0;}
  .cat-navs::-webkit-scrollbar,.main-navs::-webkit-scrollbar{display:none;}
  .cat-navs .nav-link b,.main-navs .nav-link b{white-space:nowrap;}
}
/* Arrows sit OUTSIDE the scroller (flex track), so they can never overlap a pill.
   The scroller is matched with *:not(.bb-arrowscroll-btn) rather than a class
   list: any row we arm (ul, div, nav, whatever) must shrink, or it keeps its
   intrinsic width and pushes the right arrow past the parent's overflow:hidden
   edge -> arrow invisible, row clipped. */
.bb-arrowscroll-wrap{display:flex;align-items:center;gap:6px;width:100%;max-width:100%;}
.bb-arrowscroll-wrap>*:not(.bb-arrowscroll-btn){flex:1 1 auto!important;min-width:0!important;max-width:100%;order:0;}
.bb-arrowscroll-btn--left{order:-1;}
.bb-arrowscroll-btn--right{order:1;}
.bb-arrowscroll-btn{flex:0 0 28px;width:28px;height:28px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;color:#f97316;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(10,21,37,.12);font-size:11px;padding:0;cursor:pointer;transition:opacity .18s;}
.bb-arrowscroll-btn:active{background:#fff7ed;}
/* Auto-hide the arrow that has nothing left to scroll to. At load the row sits
   at scrollLeft 0, so the left arrow is dead weight -- hiding it lets the pills
   start flush with the rest of the section instead of leaving a 34px gap. */
.bb-arrowscroll-wrap[data-at="start"] .bb-arrowscroll-btn--left,
.bb-arrowscroll-wrap[data-at="end"] .bb-arrowscroll-btn--right{display:none;}
/* ============================================================
   BLOG HERO (bb-blg-hero) — DNA replacement for the violet inner-hero.
   Navy gradient + orange/teal glows + route watermark; the swoosh under
   the accent word echoes the homepage section titles.
============================================================ */
.bb-blg-hero{
  position:relative;overflow:hidden;color:#fff;
  padding:38px 0 42px;
  background:linear-gradient(120deg,#0a1525 0%,#13273f 55%,#0f2233 100%);
}
.bb-blg-hero-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;}
.bb-blg-hero-glow--o{width:340px;height:340px;left:-90px;top:-130px;background:rgba(249,115,22,.28);}
.bb-blg-hero-glow--t{width:300px;height:300px;right:-70px;bottom:-150px;background:rgba(13,148,136,.3);}
.bb-blg-hero-wm{
  position:absolute;right:-14px;top:50%;transform:translateY(-50%) rotate(-12deg);
  font-size:150px;color:rgba(255,255,255,.045);pointer-events:none;
}
.bb-blg-hero .container{position:relative;z-index:2;}
.bb-blg-hero-text{text-align:center;max-width:720px;margin:0 auto;}
.bb-blg-hero-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,rgba(249,115,22,.28),rgba(234,88,12,.2));
  border:1px solid rgba(249,115,22,.5);color:#ffd7b0;
  padding:6px 16px;border-radius:99px;
  font-size:12.5px;font-weight:700;letter-spacing:.4px;margin-bottom:16px;
  backdrop-filter:blur(8px);
}
.bb-blg-hero-eyebrow i{color:#fb923c;}
.bb-blg-hero h1{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:clamp(30px,4.5vw,46px);font-weight:800;color:#fff;
  margin:0 0 12px;line-height:1.12;
}
.bb-blg-hero h1 em{
  font-style:normal;position:relative;display:inline-block;
  background:linear-gradient(120deg,#fb923c,#f97316);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.bb-blg-hero-swoosh{
  position:absolute;left:0;right:0;bottom:-10px;width:100%;height:10px;
  color:#f97316;opacity:.85;
}
.bb-blg-hero h1 em .bb-blg-hero-swoosh{position:absolute;}
.bb-blg-hero p{font-size:15.5px;color:rgba(255,255,255,.82);margin:0 0 18px;}
.bb-blg-hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.bb-blg-hero-chips span{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.85);padding:6px 14px;border-radius:99px;
  font-size:12px;font-weight:600;
}
.bb-blg-hero-chips span i{color:#5eead4;font-size:11px;}
@media (max-width:575.98px){
  .bb-blg-hero{padding:30px 0 34px;}
  .bb-blg-hero-wm{font-size:110px;right:-30px;}
}
/* ============================================================
   CMS PROMO BANNERS (bb-cmsban) — CI3 parity component.
   The old blog / india-tourism / ramoji / wonderla landings carried an
   admin-managed owl-carousel of cms_news_banners (image + optional
   redirect_url). The v2 rebuild dropped it; this restores it as a
   scroll-snap strip, no carousel JS needed. Data-gated: renders only
   when $banners has rows.
============================================================ */
.bb-cmsban{padding:18px 0 4px;}
.bb-cmsban-track{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px;
}
.bb-cmsban-track::-webkit-scrollbar{display:none;}
.bb-cmsban-item{
  flex:0 0 auto;scroll-snap-align:start;display:block;
  border-radius:16px;overflow:hidden;background:#f1f5f9;
  border:1px solid #e2e8f0;box-shadow:0 6px 18px rgba(10,21,37,.08);
  transition:transform .18s,box-shadow .18s;
}
.bb-cmsban-item img{display:block;height:150px;width:auto;max-width:82vw;object-fit:cover;}
a.bb-cmsban-item[href]:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,21,37,.14);}
.bb-cmsban-track:has(> .bb-cmsban-item:only-child){justify-content:center;}
@media (min-width:768px){.bb-cmsban-item img{height:190px;}}

/* span variant of the banner item (india-tourism-view highlights: images only,
   no link) + the india-tourism card date/reviews meta row */
span.bb-cmsban-item{cursor:default;}
.bb-itc-cardmeta{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;
  font-size:11.5px;font-weight:600;color:#64748b;
}
.bb-itc-cardmeta i{color:#0d9488;margin-right:4px;font-size:10.5px;}

/* ============================================================
   POPULAR BLOG POSTS (bb-blg-pop) — ranked trending card, replaces the
   plain grey strip (bb-uv8owns) the owner flagged. Same $popular links.
============================================================ */
.bb-blg-pop{
  background:#fff;border:1px solid #e2e8f0;border-radius:18px;
  padding:18px 20px;margin:0 0 30px;
  box-shadow:0 10px 28px rgba(10,21,37,.07);
}
.bb-blg-pop-head{display:flex;align-items:center;gap:12px;margin:0 0 14px;}
.bb-blg-pop-ico{
  flex:0 0 42px;width:42px;height:42px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-size:17px;
  box-shadow:0 6px 16px rgba(249,115,22,.35);
}
.bb-blg-pop-head h6{
  margin:0;font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:16.5px;font-weight:800;color:#0a1525;line-height:1.2;
}
.bb-blg-pop-head small{display:block;font-size:11.5px;font-weight:600;color:#94a3b8;margin-top:2px;}
.bb-blg-pop-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media (max-width:767.98px){.bb-blg-pop-list{grid-template-columns:1fr;}}
.bb-blg-pop-item{
  display:flex;align-items:center;gap:10px;
  background:#f8fafc;border:1.5px solid transparent;border-radius:12px;
  padding:9px 12px;text-decoration:none;
  transition:border-color .15s,background .15s,transform .15s;
}
.bb-blg-pop-rank{
  flex:0 0 24px;width:24px;height:24px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;
  font-size:11.5px;font-weight:800;color:#c2410c;
}
.bb-blg-pop-title{
  flex:1;min-width:0;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;
}
.bb-blg-pop-arrow{flex:0 0 auto;font-size:11px;color:#cbd5e1;transition:all .15s;}
.bb-blg-pop-item:hover{background:#fff7ed;border-color:#fdba74;transform:translateY(-1px);}
.bb-blg-pop-item:hover .bb-blg-pop-title{color:#c2410c;}
.bb-blg-pop-item:hover .bb-blg-pop-arrow{color:#f97316;transform:translateX(3px);}

/* CI3-parity blog category sections: one section per category (heading via
   the site's standard bb-section-head component) + card meta/footer. */
.bb-blg-cat{margin:0 0 38px;}
.bb-blg-cat .bb-section-head{margin-bottom:18px;}
/* meta row: Posted On left, reviews chip right */
.bb-blg-cat .bb-blog-card-meta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 10px;
}
.bb-blog-card-date{font-size:12px;color:#64748b;}
.bb-blog-card-date strong{color:#0a1525;font-weight:700;}
/* real View More button (presentational — the card itself is the link) */
.bb-blog-card-morebtn{
  margin-top:auto;align-self:stretch;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.2px;
  padding:9px 16px;border-radius:99px;
  box-shadow:0 4px 12px rgba(249,115,22,.3);
  transition:box-shadow .15s,transform .15s;
}
.bb-blog-card-morebtn i{font-size:10px;transition:transform .15s;}
.bb-blog-card:hover .bb-blog-card-morebtn{box-shadow:0 8px 18px rgba(249,115,22,.4);transform:translateY(-1px);}
.bb-blog-card:hover .bb-blog-card-morebtn i{transform:translateX(3px);}

/* Banner strip arrows: the generic arrow-scroller arms .bb-cmsban-track, but
   its buttons are display:none from 768px up (pill rows scroll by touch on
   desktop). Banners need the arrows at EVERY width, orange like the strip
   arrows on the category pages. */
.bb-arrowscroll-wrap:has(> .bb-cmsban-track){display:flex;align-items:center;gap:6px;}
.bb-arrowscroll-wrap:has(> .bb-cmsban-track) .bb-arrowscroll-btn{
  display:flex!important;
  background:#f97316!important;color:#fff!important;border:0!important;
  box-shadow:0 3px 10px rgba(249,115,22,.35)!important;
}
.bb-arrowscroll-wrap:has(> .bb-cmsban-track) .bb-arrowscroll-btn:active{background:#ea580c!important;}
.bb-arrowscroll-wrap:has(> .bb-cmsban-track)[data-at="start"] .bb-arrowscroll-btn--left,
.bb-arrowscroll-wrap:has(> .bb-cmsban-track)[data-at="end"] .bb-arrowscroll-btn--right{display:none!important;}

/* CI3 parity: the old page shows THREE cards per row on desktop (col-md-4);
   style.css:13862 made it four. 3 -> 2 -> 1 down the breakpoints. */
.bb-blg-cat .bb-blog-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:991px){.bb-blg-cat .bb-blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.bb-blg-cat .bb-blog-grid{grid-template-columns:1fr;}}

/* View More button + reviews line inside the attraction-style cards
   (ramoji / wonderla / india-tourism blog sections) */
.bb-att-related-body{display:flex;flex-direction:column;}
.bb-att-related-body .bb-blog-card-morebtn{width:100%;margin-top:8px;padding:7px 12px;font-size:11.5px;}
.card-body .bb-blog-card-morebtn{width:100%;margin-top:10px;}
.bb-att-revline{display:block;font-size:11.5px;font-weight:700;color:#64748b;margin:2px 0 0;}
.bb-att-revline i{color:#0d9488;}

/* ============================================================
   BLOG DETAIL — CI3 structure pieces (carousel hero, sidebar TOC +
   packages, fixed bottom CTA)
============================================================ */
/* hero SLIDER: one full-width rounded image per slide (CI3's owl showed one
   at a time), scroll-snap paging with the shared orange arrows */
.bb-bp-slides{padding:0;margin:0 0 20px;}
.bb-bp-slides .bb-cmsban-track{gap:12px;scroll-snap-type:x mandatory;}
.bb-bp-slides .bb-cmsban-item{
  /* snap START, not center: with full-width slides a centred snap point for
     slide 1 sits at a negative scrollLeft, so wrapping back to 0 snapped
     forward to slide 2 instead and the loop never returned to the first
     image. */
  flex:0 0 100%;scroll-snap-align:start;
  border-radius:18px;border:0;box-shadow:0 14px 36px rgba(10,21,37,.14);
}
.bb-bp-slides .bb-cmsban-item img{
  width:100%;max-width:none;height:280px;object-fit:cover;display:block;
}
@media (min-width:768px){.bb-bp-slides .bb-cmsban-item img{height:420px;}}

/* article body images (hero-section imgs AND CMS-content imgs): cap the
   height and centre them — full-bleed 700px walls read terribly */
.bb-bp-content img{
  display:block;max-width:100%;width:auto;max-height:420px;
  margin:16px auto;border-radius:14px;
  box-shadow:0 8px 22px rgba(10,21,37,.10);
}

.bb-bp-aside{position:sticky;top:84px;display:flex;flex-direction:column;gap:18px;}
@media (max-width:991.98px){.bb-bp-aside{position:static;}}

/* TOC: navy header band + numbered jump list */
.bb-bp-toc{
  background:#fff;border:1px solid #e2e8f0;border-radius:16px;
  overflow:hidden;box-shadow:0 10px 26px rgba(10,21,37,.08);
}
.bb-bp-toc-title{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:14px;font-weight:800;color:#fff;margin:0;
  padding:13px 16px;
  background:linear-gradient(120deg,#0a1525,#13273f);
  border-bottom:2px solid #f97316;
}
.bb-bp-toc-title i{color:#fb923c;margin-right:8px;}
.bb-bp-toc-sub{margin:0;padding:9px 16px 2px;font-size:11.5px;font-weight:600;color:#94a3b8;}
.bb-bp-toc ul{
  list-style:none;margin:0;padding:8px;counter-reset:bbtoc;
  max-height:44vh;overflow-y:auto;scrollbar-width:thin;
}
.bb-bp-toc li{border:0;}
.bb-bp-toc a{
  display:flex;align-items:flex-start;gap:10px;
  padding:7px 8px;border-radius:10px;
  font-size:12.5px;font-weight:600;color:#475569;
  text-decoration:none;line-height:1.45;
  transition:background .12s,color .12s;
}
.bb-bp-toc a::before{
  counter-increment:bbtoc;content:counter(bbtoc);
  flex:0 0 22px;width:22px;height:22px;margin-top:-1px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#fff7ed,#ffedd5);
  border:1px solid #fed7aa;border-radius:7px;
  font-size:10.5px;font-weight:800;color:#c2410c;
}
.bb-bp-toc a:hover{background:#fff7ed;color:#c2410c;}
.bb-bp-toc li:first-child a{color:#0a1525;font-weight:800;}
/* ============================================================
   DETAIL BREADCRUMB (bb-crumbx)  the plain wrapping text trail became a
   navy bar with a home chip, orange chevrons and the current title on ONE
   truncated line (it wrapped to two lines on phones).
============================================================ */
.bb-breadcrumb.bb-crumbx{
  background:linear-gradient(120deg,#0a1525,#13273f) !important;
  padding:0 !important;border-bottom:2px solid #f97316;
}
.bb-crumbx-row{
  display:flex;align-items:center;gap:9px;
  min-width:0;padding:11px 0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.bb-crumbx-row::-webkit-scrollbar{display:none;}
.bb-crumbx .bb-crumbx-home{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:#fff !important;text-decoration:none !important;
  padding:5px 12px;border-radius:99px;
  font-size:12px;font-weight:700;transition:all .15s;
}
.bb-crumbx .bb-crumbx-home i{font-size:11px;color:#fb923c;}
.bb-crumbx .bb-crumbx-home:hover{background:rgba(249,115,22,.24);border-color:rgba(249,115,22,.5);}
.bb-crumbx .bb-crumbx-sep{flex:0 0 auto;font-size:9px;margin:0;color:rgba(255,255,255,.4);}
.bb-crumbx .bb-crumbx-link{
  flex:0 0 auto;color:rgba(255,255,255,.86) !important;text-decoration:none !important;
  font-size:12.5px;font-weight:700;white-space:nowrap;
}
.bb-crumbx .bb-crumbx-link:hover{color:#fb923c !important;}
.bb-crumbx .bb-crumbx-now{
  flex:1 1 auto;min-width:0;
  color:#fff;font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:575.98px){
  .bb-crumbx-row{gap:7px;padding:9px 0;}
  .bb-crumbx .bb-crumbx-home span{display:none;}
  .bb-crumbx .bb-crumbx-home{padding:5px 9px;}
}

/* ---- full-width VIDEO: cinema card ---- */
.bb-bp-video{margin:0 0 34px;}
.bb-bp-video-shell{
  max-width:900px;margin:0 auto;padding:10px;
  background:linear-gradient(120deg,#0a1525,#13273f);
  border-radius:20px;border-bottom:3px solid #f97316;
  box-shadow:0 18px 46px rgba(10,21,37,.25);
}
.bb-bp-video-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;}
.bb-bp-video-frame #player,
.bb-bp-video-frame iframe{position:absolute;inset:0;width:100%!important;height:100%!important;}

/* ---- full-width RELATED PACKAGES grid ---- */
.bb-bp-pkgs{margin:0 0 34px;}
.bb-bp-pkgs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:1100px){.bb-bp-pkgs-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575.98px){.bb-bp-pkgs-grid{grid-template-columns:1fr;}}

/* ---- full-width USER COMMENTS: testimonial cards ---- */
.bb-bp-ucmts{margin:0 0 34px;}
.bb-bp-ucmts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:991px){.bb-bp-ucmts-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575.98px){.bb-bp-ucmts-grid{grid-template-columns:1fr;}}
.bb-bp-ucmt{
  position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:16px;
  padding:18px 18px 14px;box-shadow:0 8px 22px rgba(10,21,37,.06);
  display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s;
}
.bb-bp-ucmt:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,21,37,.12);}
.bb-bp-ucmt-q{position:absolute;top:14px;right:16px;font-size:26px;color:#ffedd5;}
.bb-bp-ucmt p{font-size:13.5px;color:#334155;line-height:1.6;margin:0 0 14px;flex:1;}
.bb-bp-ucmt-foot{display:flex;align-items:center;gap:10px;border-top:1px solid #f1f5f9;padding-top:11px;}
.bb-bp-ucmt-av{
  flex:0 0 36px;width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:15px;font-weight:800;
}
.bb-bp-ucmt-foot strong{display:block;font-size:13px;font-weight:800;color:#0a1525;line-height:1.2;}
.bb-bp-ucmt-foot small{font-size:11px;color:#94a3b8;font-weight:600;}
.bb-bp-ucmts-empty{
  text-align:center;
  border:1.5px dashed #e2e8f0;border-radius:16px;background:#f8fafc;
  padding:26px 20px;font-size:13.5px;font-weight:600;color:#64748b;
}
.bb-bp-ucmts-empty i{display:block;font-size:26px;color:#f97316;margin-bottom:8px;}

/* slider pagination dots (script.js bbCmsbanAutoplay) — Owl shows dots on
   .slideshow, so the CMS banner strips and the article hero get them too */
.bb-cmsban-dots{
  display:flex;justify-content:center;align-items:center;gap:7px;
  margin:10px 0 0;
}
.bb-cmsban-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:99px;
  background:#cbd5e1;cursor:pointer;transition:all .18s;
}
.bb-cmsban-dot:hover{background:#fdba74;}
.bb-cmsban-dot.is-on{width:24px;background:linear-gradient(90deg,#f97316,#ea580c);}

/* Unfilled AdSense slots reserve a tall empty block (the "waste gaps" the
   owner circled). Google stamps data-ad-status="filled" only when an ad is
   actually served — collapse the wrapper in every other state, including
   before the script runs, so the page never shows the hole. */
div:has(> ins.adsbygoogle:not([data-ad-status="filled"])){display:none!important;}

/* ---- sidebar Related Packages: compact rows in a card matching the TOC ---- */
.bb-bp-sidepkgs{
  background:#fff;border:1px solid #e2e8f0;border-radius:16px;
  overflow:hidden;box-shadow:0 10px 26px rgba(10,21,37,.08);
}
.bb-bp-sidepkgs-sub{font-size:11.5px;color:#94a3b8;margin:0;padding:10px 14px 2px;line-height:1.5;}
.bb-bp-sidepkgs-list{padding:8px;}
.bb-bp-sidepkg{
  display:flex;align-items:center;gap:11px;
  padding:8px;border-radius:12px;text-decoration:none;
  transition:background .12s;
}
.bb-bp-sidepkg + .bb-bp-sidepkg{border-top:1px solid #f1f5f9;}
.bb-bp-sidepkg:hover{background:#fff7ed;}
.bb-bp-sidepkg-img{
  position:relative;flex:0 0 86px;width:86px;height:64px;
  border-radius:10px;overflow:hidden;
}
.bb-bp-sidepkg-img img{width:100%;height:100%;object-fit:cover;display:block;}
.bb-bp-sidepkg-img em{
  position:absolute;left:0;bottom:0;right:0;
  background:linear-gradient(90deg,rgba(249,115,22,.95),rgba(234,88,12,.9));
  color:#fff;font-style:normal;font-size:9.5px;font-weight:800;
  text-align:center;padding:2px 0;letter-spacing:.3px;
}
.bb-bp-sidepkg-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bb-bp-sidepkg-body strong{
  font-size:12.5px;font-weight:700;color:#0a1525;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bb-bp-sidepkg-body small{font-size:10.5px;color:#94a3b8;font-weight:600;}
.bb-bp-sidepkg-price{font-size:13px;font-weight:800;color:#f97316;}
.bb-bp-sidepkg-price em{font-style:normal;font-size:10px;font-weight:600;color:#94a3b8;}
.bb-bp-sidepkg-arw{flex:0 0 auto;font-size:11px;color:#cbd5e1;transition:all .12s;}
.bb-bp-sidepkg:hover .bb-bp-sidepkg-arw{color:#f97316;transform:translateX(3px);}

/* ---- Write Your Comments: one clean card ---- */
.bb-bp-cmt{
  background:#fff;border:1px solid #e2e8f0;border-radius:18px;
  box-shadow:0 12px 30px rgba(10,21,37,.08);
  padding:0;margin:0 0 8px;overflow:hidden;
}
.bb-bp-cmt-head{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px 16px;
  background:linear-gradient(120deg,#0a1525,#13273f);
  border-bottom:2px solid #f97316;
}
.bb-bp-cmt-ico{
  flex:0 0 44px;width:44px;height:44px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-size:18px;
  box-shadow:0 6px 16px rgba(249,115,22,.4);
}
.bb-bp-cmt-head h2{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:17px;font-weight:800;color:#fff;margin:0 0 3px;
}
.bb-bp-cmt-head p{font-size:12.5px;color:rgba(255,255,255,.75);margin:0;line-height:1.5;}
.bb-bp-cmt-form{padding:18px 20px 20px;}
.bb-bp-cmt-form label{
  display:block;font-size:11px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:#64748b;margin:0 0 5px;
}
.bb-bp-cmt-form .form-control{
  border:1.5px solid #e2e8f0;border-radius:11px;
  font-size:13.5px;font-weight:600;color:#0a1525;
  padding:9px 13px;box-shadow:none;
}
.bb-bp-cmt-form .form-control:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.14);}
.bb-bp-cmt-count{font-size:11px;font-weight:700;color:#94a3b8;margin-top:4px;}
.bb-bp-cmt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;border:0;border-radius:99px;padding:12px 24px;
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:14px;font-weight:800;
  box-shadow:0 6px 18px rgba(249,115,22,.35);transition:all .15s;
}
.bb-bp-cmt-btn:hover{background:linear-gradient(135deg,#ea580c,#c2410c);transform:translateY(-1px);}
.bb-bp-cmt-note{display:block;text-align:center;font-size:11px;color:#94a3b8;margin-top:9px;}
.bb-bp-cmt-note i{color:#0d9488;margin-right:4px;}
/* fixed bottom CTA (CI3 footer-fixed-div) */
.bb-bp-cta-fixed{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-top:1px solid #e2e8f0;box-shadow:0 -8px 24px rgba(10,21,37,.12);
  text-align:center;
}
.bb-bp-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:min(480px,100%);
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff !important;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:14.5px;font-weight:800;letter-spacing:.2px;
  padding:12px 26px;border-radius:99px;text-decoration:none !important;
  box-shadow:0 8px 22px rgba(249,115,22,.4);
}
body:has(.bb-bp-cta-fixed) .bb-bp-main{padding-bottom:70px;}
/* the article's section anchors land under the sticky header without this */
.bb-bp-content h2[id],.bb-bp-head[id]{scroll-margin-top:90px;}

/* detail pages: sub-line under bb-bp section titles (CI3 carsfont line) */
.bb-bp-section-sub{font-size:13px;color:#64748b;margin:-6px 0 14px;}
.bb-bp-card .bb-blog-card-morebtn{width:100%;margin-top:8px;padding:7px 12px;font-size:11.5px;}
.bb-bp-card-body{display:flex;flex-direction:column;}

/* CI3-parity card meta: reviews count + View More hint on the blog cards */
.bb-blog-card-meta{align-items:center;justify-content:space-between;gap:8px;}
.bb-blog-card-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.bb-blog-card-rev{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:#64748b;
  background:#f1f5f9;border-radius:99px;padding:3px 10px;
}
.bb-blog-card-rev i{color:#0d9488;font-size:10px;}
.bb-blog-card-more{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:800;color:#f97316;
}
.bb-blog-card-more i{font-size:10px;transition:transform .15s;}
.bb-blog-card:hover .bb-blog-card-more i{transform:translateX(3px);}

/* ============================================================
   SELECT SHEET (bb-select-sheet.js)
   The one option list every browser and device gets: opening any single-pick
   <select> shows this sheet (bottom sheet on phones, centred card above that)
   instead of the OS list, so Chrome / Firefox / Safari / Android all match.
   The <select> itself is untouched — this is presentation only.
============================================================ */
/* Deliberately NO entrance animation and no JS-toggled visibility class. Both
   were tried and both can leave the sheet stuck invisible: a class added from
   requestAnimationFrame never lands if rAF is throttled, and an `animation`
   whose from-state is opacity:0 holds that state for as long as animation time
   is not advancing (hidden window / paused compositor). A picker must be on
   screen the instant it is inserted, so it simply is. */
.bb-selsheet{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-end;justify-content:center;}
.bb-selsheet-backdrop{position:absolute;inset:0;background:rgba(10,21,37,.5);}
.bb-selsheet-panel{
  position:relative;width:100%;max-width:520px;max-height:76vh;
  display:flex;flex-direction:column;background:#fff;
  border-radius:20px 20px 0 0;box-shadow:0 -18px 50px rgba(10,21,37,.28);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.bb-selsheet-head{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:16px 16px 12px;border-bottom:1px solid #eef2f7;
}
.bb-selsheet-head::before{
  content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:38px;height:4px;border-radius:99px;background:#e2e8f0;
}
.bb-selsheet-head strong{
  flex:1;min-width:0;font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:15px;font-weight:800;color:#0a1525;line-height:1.3;
}
.bb-selsheet-close{
  flex:0 0 32px;width:32px;height:32px;border:0;border-radius:50%;
  background:#f1f5f9;color:#475569;font-size:20px;line-height:1;cursor:pointer;
}
.bb-selsheet-close:active{background:#e2e8f0;}
.bb-selsheet-search{flex:0 0 auto;padding:10px 16px 4px;}
.bb-selsheet-search input{
  width:100%;height:42px;border:1.5px solid #e2e8f0;border-radius:12px;
  padding:0 14px;font-size:14px;font-weight:600;color:#0a1525;background:#fff;
}
.bb-selsheet-search input:focus{outline:0;border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.14);}
.bb-selsheet-list{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  list-style:none;margin:0;padding:8px 10px 14px;
}
.bb-selsheet-list li{margin:0;padding:0;}
.bb-selsheet-group{
  padding:12px 8px 5px;font-size:10.5px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:#94a3b8;
}
.bb-selsheet-opt{
  position:relative;width:100%;display:flex;align-items:center;gap:10px;
  text-align:left;border:0;background:transparent;cursor:pointer;
  padding:13px 40px 13px 14px;border-radius:12px;
  font-size:14.5px;font-weight:600;color:#0a1525;line-height:1.4;
}
.bb-selsheet-opt + .bb-selsheet-opt{margin-top:2px;}
.bb-selsheet-list li + li .bb-selsheet-opt::before{
  content:"";position:absolute;top:-1px;left:14px;right:14px;height:1px;background:#f1f5f9;
}
.bb-selsheet-opt:active{background:#fff7ed;}
.bb-selsheet-opt.is-selected{background:#f97316;color:#fff;font-weight:800;}
.bb-selsheet-opt.is-selected::before,
.bb-selsheet-opt.is-selected + li .bb-selsheet-opt::before{display:none;}
.bb-selsheet-opt.is-selected::after{
  content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:900;
  position:absolute;right:14px;font-size:12px;
}
.bb-selsheet-opt.is-disabled{color:#cbd5e1;cursor:not-allowed;}
.bb-selsheet-empty{display:none;margin:0;padding:22px 16px 26px;text-align:center;font-size:13.5px;color:#94a3b8;}
.bb-selsheet-empty.is-shown{display:block;}
body.bb-selsheet-lock{overflow:hidden;}
/* wider screens: centre it as a card instead of a bottom sheet */
@media (min-width:768px){
  .bb-selsheet{align-items:center;}
  .bb-selsheet-panel{border-radius:18px;max-height:70vh;}
  .bb-selsheet-head::before{display:none;}
}

/* The edge-fade that used to live here is GONE on purpose. It masked the
   scroller from 84% to transparent, so the pill/card that was only half
   scrolled into view faded out mid-shape -- on a real phone that reads as a
   broken, half-drawn element sitting next to the arrow, not as "there is more
   to the right". The solid-orange arrows below already carry that message.
   Do not reintroduce mask-image here. */
@media (min-width:768px){.bb-arrowscroll-btn{display:none;}.bb-arrowscroll-wrap{display:block;}}
/* 6/7 (DNA category view): origin-cities UL + vehicle-type tabs get the arrows too */
@media (max-width:767.98px){
  .bb-tpc-origin-scroll-wrap ul,.bb-tpc-vtabs{scrollbar-width:none;}
  .bb-tpc-origin-scroll-wrap ul::-webkit-scrollbar,.bb-tpc-vtabs::-webkit-scrollbar{display:none;}
  .bb-arrowscroll-wrap>ul{padding-left:0;padding-right:0;}
}
/* Category-page tab scroll arrows (origin-cities + vehicle-type): the white
   circle blended into the light section background and read as a cut / faint
   half-glyph. Make them clear solid-orange buttons. Scoped so the
   package-details tab arrows keep their own look. */
.bb-arrowscroll-wrap:has(> .bb-tpc-origin-tabs) .bb-arrowscroll-btn,
.bb-arrowscroll-wrap:has(> .bb-tpc-vtabs) .bb-arrowscroll-btn{
  background:#f97316!important;color:#fff!important;border:0!important;
  box-shadow:0 3px 10px rgba(249,115,22,.35)!important;
}
.bb-arrowscroll-wrap:has(> .bb-tpc-origin-tabs) .bb-arrowscroll-btn:active,
.bb-arrowscroll-wrap:has(> .bb-tpc-vtabs) .bb-arrowscroll-btn:active{background:#ea580c!important;}
/* THIS is what made the arrow look washed-out and half-drawn on a real phone.
   style.css:2814 / :2851 paint a 52px white gradient (z-index 2) over the
   right edge of each strip and only switch it off at >=992px -- so on a phone
   it sits directly on top of the arrow AND the pill next to it, bleaching both
   into one pale smear. The arrows are the affordance below 768px, so the
   gradient goes; 768-991px keeps it, because arrows are hidden there.
   Also pull the arrow in from the screen edge and widen the gap to the strip,
   so it reads as its own control with air on both sides. */
@media (max-width:767.98px){
  .bb-tpc-origin-scroll-wrap::after,
  .bb-tpc-vtabs-wrap::after{display:none!important;}
  .bb-arrowscroll-wrap:has(> .bb-tpc-origin-tabs),
  .bb-arrowscroll-wrap:has(> .bb-tpc-vtabs){padding-right:12px;gap:10px;}
}
/* 5 (DNA category view): title one line on phones */
@media (max-width:575.98px){
  .bb-tpc-title{font-size:18px!important;line-height:1.3;}
}
/* 4 (DNA category view): current-page crumb off on phones (wrapped to 2 lines) */
@media (max-width:575.98px){
  .bb-tpc-bcrumb span:last-child{display:none;}
  .bb-tpc-bcrumb i:last-of-type{display:none;}
}
/* The teal page-head band was 136px on a 375px phone -- 32/28 padding around a
   two-line title -- pushing the banner and package list below the fold. Halve
   it: tighter padding, a lighter crumb line, and a title sized to fit the
   column so long "<Category> from <City>" headings stop wrapping. Shared by all
   7 tour-packages listing views (by-category / -nation / -type / search). */
@media (max-width:575.98px){
  .bb-tpc-head{padding:9px 0 10px;}
  .bb-tpc-bcrumb{font-size:11px;margin-bottom:2px;line-height:1.3;}
  .bb-tpc-bcrumb-sep{margin:0 5px;}
  .bb-tpc-title{font-size:15px!important;line-height:1.18;}
}

/* ============ Booking step-1: reclaim the header, re-skin the calendar ============ */
/* The chrome above "Choose your travel date" ate 386px of an 812px phone screen,
   and most of it was duplicated: .bb-tpd-pkgbar already prints the package name
   AND "Step 1/3 - Select Vehicle". */
@media (max-width:767.98px){
  /* Breadcrumb: last crumb was already truncated, pkgbar carries the context */
  .bb-tpd-bcrumb-wrap{display:none;}
  /* H1 + PID duplicate the pkgbar. Keep them for SEO/screen readers, drop the pixels. */
  .bb-tbr-pagehead-row > div:first-child{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  /* Back link + date pill share one row instead of stacking two blocks */
  .bb-tbr-pagehead{padding-top:10px!important;padding-bottom:10px!important;}
  .bb-tbr-pagehead .container{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;}
  .bb-tbr-pagehead-row{flex:0 0 auto;margin:0!important;}
  .bb-tbr-back{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0!important;border-radius:50%;font-size:0;flex:0 0 38px;}
  .bb-tbr-back i{font-size:14px;margin:0!important;}
  .bb-tbr-pagehead-jdate{flex:1 1 auto;min-width:0;margin:0!important;}
  .bb-tbr-pagehead-jdate .col-md-4,.bb-tbr-pagehead-jdate [class*="col-"]{width:100%;max-width:100%;flex:1 1 auto;padding:0!important;}
  .bb-tbr-pagehead-jdate a{width:100%;justify-content:center;}
  /* Wizard: slimmer rail, smaller nodes */
  .bb-tbr-wizard{padding-top:10px!important;padding-bottom:10px!important;}
  .bb-tbr-steps li .bb-tbr-step-num,.bb-tbr-steps li > span:first-child{width:28px!important;height:28px!important;line-height:28px!important;font-size:13px!important;}
  .bb-tbr-steps li{font-size:11.5px!important;gap:4px!important;}
}

/* ---- Zebra_DatePicker re-skin (journey-date modal) ---------------------------
   Zebra writes an inline width:0 on its container, so the tables were sized off
   a zero-width box and clipped on both edges. Everything below is presentation
   only -- no Zebra option, callback or CI3 handler is touched. */
#myJDModal .modal-dialog,
#myJDModal1 .modal-dialog{max-width:420px;}
#myJDModal .modal-content,
#myJDModal1 .modal-content{border:0;border-radius:20px;overflow:hidden;box-shadow:0 24px 70px rgba(10,21,37,.28);}
#myJDModal .modal-body,
#myJDModal1 .modal-body{padding:18px 16px 8px;}
#myJDModal #cincouttext,
#myJDModal1 #cincouttext{font-size:17px;font-weight:800;color:#0a1525;margin:0 0 2px;animation:none!important;}
#myJDModal .modal-body > hr,
#myJDModal1 .modal-body > hr{margin:12px 0 6px;border-top:1px solid #eef1f5;}
/* stock Bootstrap .close: 35x32 grey square, 0.45 opacity. Round chip like the
   other close controls in the funnel, vertically centred on the sheet title. */
#myJDModal .close,
#myJDModal1 .close{
  position:absolute;top:12px;right:14px;z-index:3;
  width:34px;height:34px;padding:0!important;margin:0!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  border-radius:50%!important;
  background:#fff!important;border:1px solid var(--bb-border-light,#f1f5f9)!important;
  box-shadow:0 2px 8px rgba(10,21,37,.10);
  font-size:20px;line-height:1;font-weight:400;
  color:var(--bb-text-muted,#6b7480)!important;opacity:1!important;text-shadow:none!important;
  transition:background .16s,color .16s,transform .16s;
}
#myJDModal .close:hover,
#myJDModal1 .close:hover{background:#f8fafc!important;color:var(--bb-text,#0a1525)!important;}
#myJDModal .close:active,
#myJDModal1 .close:active{transform:scale(.92);}

/* Zebra grid theme lives in ci-overrides.css: the CI3 inline styles need
   #myJDModal #container_date (2 ids) to be beaten, which this file cannot reach.
   Only the modal chrome + legend stay here. */
/* legend appended by bb-modal-enhance.js */
#myJDModal .bb-cal-legend,
#myJDModal1 .bb-cal-legend{display:flex;justify-content:center;gap:16px;padding:8px 0 12px;border-top:1px solid #f1f4f8;margin-top:6px;font-size:11.5px;color:#6b7480;font-weight:600;}
#myJDModal .bb-cal-legend span,
#myJDModal1 .bb-cal-legend span{display:inline-flex;align-items:center;gap:5px;}
#myJDModal .bb-cal-legend i,
#myJDModal1 .bb-cal-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;}
/* Each swatch mirrors the real cell it names:
   available    -> white chip with the same 1px ring as a bookable day
   selected     -> solid primary, as the selected day
   weekend      -> bookable but its number renders rose
   not available-> NO fill; a faded outline, matching a day that is just
                   greyed text with no chip (the old solid grey dot implied a
                   filled state the grid never shows) */
#myJDModal .bb-cal-legend .is-avail,
#myJDModal1 .bb-cal-legend .is-avail{background:#fff;box-shadow:inset 0 0 0 1px #edf0f4;}
#myJDModal .bb-cal-legend .is-weekend,
#myJDModal1 .bb-cal-legend .is-weekend{background:#fff;box-shadow:inset 0 0 0 1px #fecdd3;position:relative;}
#myJDModal .bb-cal-legend .is-weekend::after,
#myJDModal1 .bb-cal-legend .is-weekend::after{content:"";position:absolute;inset:2px;border-radius:50%;background:#e11d48;}
#myJDModal .bb-cal-legend .is-sel,
#myJDModal1 .bb-cal-legend .is-sel{background:#f97316;box-shadow:0 0 0 2px rgba(249,115,22,.25);}
#myJDModal .bb-cal-legend .is-off,
#myJDModal1 .bb-cal-legend .is-off{background:transparent;box-shadow:inset 0 0 0 1px #dde3ea;}
/* Phone: bottom sheet -- more room for the grid, thumb-reachable */
@media (max-width:575.98px){
  /* margin:0 is !important -- the base .modal-dialog carries margin:10px, which
     with width:100% pushed the sheet 10px past the right edge of the screen. */
#myJDModal .modal-dialog,
#myJDModal1 .modal-dialog{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0!important;max-width:none;width:100%;}
#myJDModal .modal-content,
#myJDModal1 .modal-content{border-radius:22px 22px 0 0;}
#myJDModal .modal-body,
#myJDModal1 .modal-body{padding:16px 12px 6px;}
#myJDModal .dp_daypicker td,
#myJDModal1 .dp_daypicker td{font-size:15px;border-radius:12px;height:48px!important;}
}

/* Route-card timings table: the 460px min-width in style.css was sized for the
   5-column DNA layout. The live table is 3 columns now (Distance/Map only exist
   in the near_by_boarding_ponts result, after a nearest-point search), so it
   fits a phone without a horizontal scroller. */
.bb-rc-tbl{min-width:0!important;}
.bb-rc-td-stop strong{display:block;}

/* ---- Booking step-1 travel-date scroller -------------------------------------
   The row sat inset from the card content (arrows are 34x60 rectangles that ate
   the gutter) and the track clipped a half chip right under the right arrow.
   Same language as the pill scrollers: round arrows at the card edge, edge fade,
   and the arrow with nothing to scroll to gets out of the way.
   prevnextDate() and every id/onclick are untouched. */
.bb-tbr-dates-row{gap:6px;}
.bb-tbr-dates-arrow{
  width:34px!important;height:34px!important;border-radius:50%!important;
  display:flex;align-items:center;justify-content:center;
  color:var(--bb-primary,#f97316);border-color:#ffe2cc!important;background:var(--bb-primary-soft,#fff7ed)!important;
  font-size:12px;padding:0;transition:opacity .18s;
}
.bb-tbr-dates-arrow:active{background:#ffedd5!important;}
.bb-tbr-dates-track{scrollbar-width:none;}
.bb-tbr-dates-track::-webkit-scrollbar{display:none;}
.bb-tbr-dates-row[data-at="start"] #arrleft,
.bb-tbr-dates-row[data-at="end"] #arrright{display:none;}
@media (max-width:767.98px){
  /* pull the row out to the card's padding edge so the chips line up with the
     section heading instead of starting 19px in */
  .bb-tbr-dates-row{margin-left:-4px;margin-right:-4px;}
  .bb-tbr-dates-row[data-at="start"] .bb-tbr-dates-track{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);}
  .bb-tbr-dates-row[data-at="mid"] .bb-tbr-dates-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
  .bb-tbr-dates-row[data-at="end"] .bb-tbr-dates-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);mask-image:linear-gradient(90deg,transparent,#000 12%);}
}
@media (max-width:767.98px){
  /* last 19px of the 3-column table still spilled the 263px panel */
  .bb-rc-tbl th,.bb-rc-tbl td{padding-left:6px!important;padding-right:6px!important;}
  .bb-rc-th-sno,.bb-rc-td-sno{width:34px;}
  .bb-rc-td-stop span{font-size:11.5px;}
}

/* ---- Book-Now modal (#select-bus-direct-agent): passenger row + tab strip ----
   Both blocks are legacy CI3 markup carrying Bootstrap grid classes that fight
   the DNA layout. Measured before: the Children field ran 15px past the row's
   right edge (635-906 inside a 343-891 row), the two fields were unequal
   (264 vs 272), and the 4 tab chips ragged-wrapped 3 + 1 because their wrapper
   is display:block + text-align:center. Presentation only; every id, class and
   onchange/onclick handler is left as-is. */

/* passenger counts: two equal columns, labels and selects on shared baselines */
.bb-tbr-modal-counts{
  display:grid!important;grid-template-columns:1fr 1fr;gap:12px 14px;align-items:stretch;
  margin-left:0!important;margin-right:0!important;
}
/* stray/full-width children (hidden input-groups, total, next button) span both */
.bb-tbr-modal-counts > .col-sm-12,
.bb-tbr-modal-counts > .col-xs-12,
.bb-tbr-modal-counts > .bb-tbr-modal-total,
.bb-tbr-modal-counts > .bb-tbr-modal-next{grid-column:1 / -1;}
/* the two count fields: kill the bootstrap width/padding so the grid track wins */
.bb-tbr-modal-counts > .bb-tbr-modal-count{
  display:flex;flex-direction:column;justify-content:space-between;
  width:auto!important;max-width:100%;min-width:0;
  margin:0!important;padding:12px!important;flex:none!important;
}
.bb-tbr-modal-count-label{display:block;margin-bottom:8px;}
.bb-tbr-modal-count-label strong{display:block;line-height:1.3;}
.bb-tbr-modal-count-label small{display:block;line-height:1.35;margin-top:2px;}
.bb-tbr-modal-count .bb-tbr-modal-select,
.bb-tbr-modal-count select{width:100%!important;max-width:100%!important;margin-top:auto;}
@media (max-width:575.98px){
  .bb-tbr-modal-counts{grid-template-columns:1fr;}
}

/* Boarding / Dropping / Cancellation / Terms chips: one grid, never ragged.
   4 across when they fit, 2x2 when they do not. */
/* One row, horizontally scrollable -- 4 chips never fit the 515px modal, and a
   2 x 2 grid wasted vertical space. The wrapper is a flex item of a display:flex
   parent, so width:100% is required or it shrinks to the widest chip. */
.bb-tbr-ptabs{
  display:flex!important;flex-wrap:nowrap!important;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  gap:8px;text-align:left;padding-bottom:2px;
  scrollbar-width:none;
  width:100%!important;flex:1 1 100%!important;min-width:0;
}
.bb-tbr-ptabs::-webkit-scrollbar{display:none;}
.bb-tbr-ptabs > *{
  margin:0!important;width:auto!important;flex:0 0 auto;white-space:nowrap;
  display:inline-flex!important;align-items:center;justify-content:center;
  text-align:center;min-height:38px;padding:8px 16px;
}

/* ---- Booking step-1 header, desktop ------------------------------------------
   Measured at 1440: pkgbar -> content was 343px, and the journey-date pill sat
   on its own 41px row under the title row for no reason. Pull it up onto the
   title row and tighten the rails. Markup untouched: .bb-tbr-pagehead-row is
   flattened with display:contents so the title, the pill and the back link
   become siblings in one flex line. */
@media (min-width:768px){
  .bb-tpd-bcrumb-wrap{padding-top:8px!important;padding-bottom:8px!important;}

  .bb-tbr-pagehead{padding-top:12px!important;padding-bottom:12px!important;}
  .bb-tbr-pagehead .container{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .bb-tbr-pagehead-row{display:contents;}
  /* one row: [back]  [package name, centred]  [journey date] */
  .bb-tbr-back{order:0;flex:0 0 auto;margin:0!important;}
  .bb-tbr-pagehead-row > div:first-child{order:1;flex:1 1 auto;min-width:0;text-align:center;}
  .bb-tbr-pagehead-jdate{order:2;margin:0!important;flex:0 0 auto;}
  .bb-tbr-pagehead-jdate [class*="col-"]{padding:0!important;width:auto!important;max-width:none!important;flex:0 0 auto!important;}
  .bb-tbr-pagetitle{margin-bottom:2px!important;}
}
/* Wide desktop: 1fr auto 1fr makes the two side columns exactly equal, so the
   package name is centred against the PAGE, not against the leftover space
   (flex alignment put it 24px off because the back link and the date pill are
   different widths). Below 992 the flex row above keeps its wrap behaviour --
   the three items do not fit on one line there. */
@media (min-width:768px){
  .bb-tbr-pagehead .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;}
  .bb-tbr-back{grid-column:1;justify-self:start;}
  .bb-tbr-pagehead-row > div:first-child{grid-column:2;justify-self:center;text-align:center;min-width:0;}
  .bb-tbr-pagehead-jdate{grid-column:3;justify-self:end;}
  /* tablet band: let the name use two lines rather than pushing the pill onto
     a second row -- the auto column shrinks, the 1fr sides stay equal so the
     name is still dead-centre */
  .bb-tbr-pagetitle{overflow-wrap:anywhere;}

  .bb-tbr-wizard{padding-top:12px!important;padding-bottom:12px!important;}
  .bb-tbr-steps li .bb-tbr-step-num,
  .bb-tbr-steps li > span:first-child{width:30px!important;height:30px!important;line-height:30px!important;font-size:13.5px!important;}
  .bb-tbr-steps li{font-size:12.5px!important;gap:5px!important;}
}

/* ---- Booking step-1 vehicle card head, desktop --------------------------------
   The operator block stacked three rows (name / badges / trip times) inside a
   281px column while the header itself was 1058px wide -- all that space to the
   right went unused and the head ran 97px tall. Put the trip times in their own
   right-hand column spanning both rows: two rows instead of three.
   Markup untouched. */
@media (min-width:768px){
  .bb-tbr-vcard-op{align-items:center;}
  .bb-tbr-vcard-op > div:last-child{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;column-gap:18px;row-gap:4px;
    flex:1 1 auto;width:100%;min-width:0;
  }
  .bb-tbr-vcard-op > div:last-child > h4{grid-column:1;grid-row:1;margin-bottom:0!important;}
  .bb-tbr-vcard-op > div:last-child > .bb-tbr-vcard-meta{grid-column:1;grid-row:2;margin-bottom:0!important;}
  .bb-tbr-vcard-op > div:last-child > .bb-tbr-vcard-tripline{
    grid-column:2;grid-row:1 / span 2;justify-self:end;
    margin:0!important;white-space:nowrap;
  }
}

/* ---- Inline panel: collapse control + Itinerary sub-tabs ----------------------
   Both blocks are legacy CI3 markup kept byte-for-byte; only presentation here.
   Measured before: the collapse control was a bare 9x19 glyph with no hit area,
   and the four sub-tabs flex-wrapped 2 / 1 / 1 at 375px (95, 106, 107, 175 wide)
   with a generic fa-cog on three of them. */

/* collapse control -> round chip, pinned top-right of the open panel */
.bb-tbr-inlinepanel .layout52{position:relative;min-height:0;}
.bb-tbr-inlinepanel a.seat8{
  position:absolute;top:0;right:0;z-index:3;
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--bb-border-light,#f1f5f9);
  box-shadow:0 2px 8px rgba(10,21,37,.08);
  color:var(--bb-primary,#f97316);
  transition:background .16s,box-shadow .16s,transform .16s;
}
.bb-tbr-inlinepanel a.seat8:hover{background:var(--bb-primary-soft,#fff7ed);box-shadow:0 4px 14px rgba(249,115,22,.18);}
.bb-tbr-inlinepanel a.seat8:active{transform:scale(.92);}
.bb-tbr-inlinepanel a.seat8 .arrowdouble{font-size:14px;line-height:1;}

/* Itinerary / Inclusions / Exclusions / Terms -> even grid of chip tabs */
.bb-tbr-inlinepanel #myTab.nav-tabs{
  display:grid!important;grid-template-columns:repeat(2,1fr);gap:8px;
  border:0!important;margin:6px 0 14px!important;padding:0!important;
}
.bb-tbr-inlinepanel #myTab.nav-tabs > li.nav-item{margin:0!important;width:auto!important;float:none!important;}
.bb-tbr-inlinepanel #myTab.nav-tabs .nav-link{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  height:100%;min-height:64px;margin:0!important;padding:10px 8px!important;
  background:#fff!important;border:1px solid var(--bb-border-light,#f1f5f9)!important;
  border-radius:12px!important;
  font-size:12px;font-weight:700;line-height:1.25;text-align:center;
  color:var(--bb-text,#0a1525)!important;
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s;
}
.bb-tbr-inlinepanel #myTab.nav-tabs .nav-link br{display:none;}
.bb-tbr-inlinepanel #myTab.nav-tabs .nav-link i{font-size:15px;color:var(--bb-text-muted,#6b7480);transition:color .16s;}
.bb-tbr-inlinepanel #myTab.nav-tabs .nav-link:hover{border-color:#fdba74!important;background:var(--bb-primary-soft,#fff7ed)!important;}
.bb-tbr-inlinepanel #myTab.nav-tabs .nav-link.active{
  background:var(--bb-primary,#f97316)!important;border-color:var(--bb-primary,#f97316)!important;
  color:#fff!important;box-shadow:0 6px 16px rgba(249,115,22,.28);
}
.bb-tbr-inlinepanel #myTab.nav-tabs .nav-link.active i{color:#fff;}
/* three of the four tabs shipped a generic fa-cog -- give each its own glyph
   without touching the markup */
.bb-tbr-inlinepanel #itinerary-tab i::before{content:"\f4d7";}   /* route      */
.bb-tbr-inlinepanel #inclusions-tab i::before{content:"\f058";}  /* check-circle */
.bb-tbr-inlinepanel #exclusions-tab i::before{content:"\f057";}  /* times-circle */
.bb-tbr-inlinepanel #terms-tab i::before{content:"\f571";}       /* file-contract */
@media (min-width:768px){
  .bb-tbr-inlinepanel #myTab.nav-tabs{grid-template-columns:repeat(4,1fr);}
}

/* ---- Book-Now modal: note box padding + Cancel button ------------------------
   The child-fare note is a bare <span class="red"> sitting directly on the
   yellow strip with 0 padding, so the text touched both edges. The Cancel
   button read as the primary action (white on a white sheet, dark label). */
/* NB: the required-field asterisk is also a span.red, nested in the count
   label -- a bare span.red selector wrapped it in this yellow box too. Only the
   note (a direct child of the full-width .col-sm-12 cell) gets the treatment. */
#select-bus-direct-agent .bb-tent-modal-note,
#select-bus-direct-agent .bb-tbr-modal-counts > .col-sm-12 > span.red{
  display:block;padding:12px 16px;border-radius:10px;
  background:#fffbeb;border:1px solid #fde68a;
  color:#92400e;font-size:12.5px;line-height:1.6;
}
#select-bus-direct-agent .bb-tbr-cancel-btn{
  background:#fef2f2!important;border:1px solid #fecaca!important;
  color:#b91c1c!important;font-weight:700;border-radius:10px;
  padding:10px 22px!important;transition:background .16s,border-color .16s;
}
#select-bus-direct-agent .bb-tbr-cancel-btn:hover{background:#fee2e2!important;border-color:#fca5a5!important;}
#select-bus-direct-agent .bb-tbr-cancel-btn:active{transform:scale(.97);}

/* Only the chip whose section is selected renders its pane (bb-modal-enhance.js
   sets the inline display). openNav61() still runs and still scrolls. */
#chatboxx61{padding:4px 2px 0;}
#chatboxx61 > div{padding:2px 0 10px;}

/* ---- Boarding / dropping point picker rows -----------------------------------
   CI3 nests the row: div.radio.bsl-point > label.bpoint_ids.bsl-point > [time,
   name, radio]. Both carry .bsl-point, so the DNA grid landed on the OUTER div
   (whose only child is the label) while the label -- the actual row -- stayed
   display:block. Result: time / name / radio stacked into a 262px column with
   the radio bottom-left. Grid belongs on the label; the wrapper is just a box. */
#boardingsidebar div.radio,
#droppingsidebar div.radio{
  display:block!important;padding:0!important;margin:0!important;
}
/* Match the label on its OWN classes -- CI3 renders two wrapper variants:
   div.radio.bsl-point > label   (boarding) and plain div.radio > label
   (dropping). A parent-dependent selector missed the second one, leaving those
   rows at display:block with a full-width time chip and a 102px height. */
#boardingsidebar label.bsl-point,
#droppingsidebar label.bsl-point{
  display:grid!important;grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;gap:12px;
  padding:12px 16px!important;margin:0!important;width:100%!important;max-width:none!important;
  cursor:pointer;font-weight:400!important;
  transition:background .14s;
}
#boardingsidebar label.bsl-point:hover,
#droppingsidebar label.bsl-point:hover{background:#fff7ed;}
#boardingsidebar .bsl-point-name,#droppingsidebar .bsl-point-name{min-width:0;display:block;}
#boardingsidebar .bsl-point-name strong,#droppingsidebar .bsl-point-name strong{display:block;font-size:13.5px;font-weight:700;color:#0a1525;line-height:1.3;}
#boardingsidebar .bsl-point-name small,#droppingsidebar .bsl-point-name small{display:block;font-size:11.5px;color:#6b7480;line-height:1.35;}
#boardingsidebar .bsl-point-radio,#droppingsidebar .bsl-point-radio{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  border:2px solid #d7dee7;background:#fff;justify-self:end;
}

/* ---- Seat layout centring (#select-busseats) ---------------------------------
   .row.bb-seat-bus is an inline-block carrying Bootstrap's -12px row margins,
   so the chart sat 19px left of the sheet's centre at 375px. Centre the bus and
   the chart explicitly at every width. */
/* NB: width:fit-content + margin:auto inside an overflow-x:auto box centres
   the chart, but as soon as the chart is WIDER than the box the auto margin
   goes negative -- the left column is cut off and cannot be scrolled back to.
   A flex parent with "safe center" centres while it fits and falls back to
   start alignment (fully scrollable) once it does not. */
#select-busseats .row.bb-seat-bus{
  display:flex!important;
  justify-content:center;justify-content:safe center;
  max-width:100%;margin-left:0!important;margin-right:0!important;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
#select-busseats .row.bb-seat-bus::-webkit-scrollbar{display:none;}
#select-busseats .row.bb-seat-bus{scrollbar-width:none;}
#select-busseats .seatCharts-container{
  display:block!important;
  width:auto;max-width:none;flex:0 0 auto;
  margin-left:0!important;margin-right:0!important;
}
#select-busseats .bb-seat-grid,
#select-busseats .tab-content{text-align:center;}

/* ---- Seat sheet bottom bars (#select-busseats) --------------------------------
   Two stacked .round-trip-fare bars sit fixed at the bottom of the seat sheet.
   Measured: the fare summary was 12px tall with color == background (its
   "2 Seats (W1,W2) 962.9" line was invisible), and the CTA was a 23px orange
   sliver with a blinking label. Rebuilt as one readable summary + a real
   48px action button. Both keep their markup, ids and onclick handlers. */
#select-busseats .round-trip-fare.bg-light{
  background:#fff!important;color:var(--bb-text,#0a1525)!important;
  border-top:1px solid var(--bb-border-light,#f1f5f9);
  border-radius:16px 16px 0 0;
  padding:10px 16px 8px!important;margin-bottom:0!important;
  box-shadow:0 -6px 22px rgba(10,21,37,.10);
}
/* the summary's text inherits, but not the fare-break-up chevron -- this
   blanket !important was overriding its primary colour to the body text tone */
#select-busseats .round-trip-fare.bg-light *:not(.arrowdouble){color:inherit!important;}
#select-busseats .round-trip-fare.bg-light .container{padding:0!important;}
#select-busseats .round-trip-fare.bg-light .row{margin:0!important;align-items:center;}
/* the collapse chevron that hangs above the summary */
#select-busseats .round-trip-fare.bg-light .layout52 a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--bb-border-light,#f1f5f9);
  box-shadow:0 2px 8px rgba(10,21,37,.08);color:var(--bb-primary,#f97316);
}

/* the CTA */
#select-busseats .round-trip-fare.bg-blue{
  background:transparent!important;box-shadow:none!important;
  padding:0 16px calc(12px + env(safe-area-inset-bottom))!important;
  border-radius:0!important;
}
#select-busseats .round-trip-fare.bg-blue b{display:block;}
#select-busseats .round-trip-fare.bg-blue .selectbtn{
  display:flex!important;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:48px;padding:0 18px;
  background:linear-gradient(135deg,#f97316,#ea580c)!important;
  color:#fff!important;font-size:15px!important;font-weight:800;
  border-radius:12px;box-shadow:0 8px 20px rgba(249,115,22,.32);
  transition:transform .14s,box-shadow .14s;
}
#select-busseats .round-trip-fare.bg-blue .selectbtn > .blink{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  animation:none!important;   /* the label blinked */
}
#select-busseats .round-trip-fare.bg-blue:active .selectbtn{
  transform:scale(.985);box-shadow:0 4px 12px rgba(249,115,22,.28);
}

/* ---- Seat chart overflow (#select-busseats) ----------------------------------
   jquery.seat-charts.css pins .seatCharts-row to height:35px and floats the
   seats, but the themed seats render 40px. Floats do not grow their parent, so
   every row overflowed 5px and the container ended 59px shorter than its
   content -- the last seat rows painted outside the card, over the legend.
   Let the rows contain their floats and size to content. */
#select-busseats .seatCharts-row{
  height:auto!important;min-height:35px;
}
#select-busseats .seatCharts-row::after{content:"";display:table;clear:both;}
#select-busseats .seatCharts-container{height:auto!important;}

/* Dropping picker: CI3 renders a working "PREVIOUS" (backtoboardingpoints()),
   so the DNA .bsl-sidepanel-back next to it is a dead duplicate -- 3 buttons in
   a footer the DNA gives 2. Drop it here; the boarding one is wired in
   bb-modal-enhance.js instead (it is that panel's only back affordance). */
#droppingsidebar .bsl-sidepanel-back{display:none!important;}

/* ---- Passenger details: coupon row + fare breakdown ---------------------------
   1) The coupon row is the DNA .bb-tpx-coupon-row flex track, but CI3 drops a
      parsley <ul> and eight hidden inputs inside it. The 195px error list was a
      flex sibling, squeezing the input to 31px. Give the input the flex and
      push the error list onto its own line.
   2) #fare_breakup is legacy markup (header.section-header + ul.list-unstyled
      with float-right amounts). Re-skinned into the same card language as the
      Coupon / Contact cards, with a glyph per line. */
.bb-tpx-coupon-row{flex-wrap:wrap;align-items:center;}
.bb-tpx-coupon-row > .bb-tpx-input{flex:1 1 150px!important;min-width:0!important;width:auto!important;}
.bb-tpx-coupon-row > .bb-tpx-coupon-apply{flex:0 0 auto;}
.bb-tpx-coupon-row > .parsley-errors-list{flex:0 0 100%;order:9;margin:4px 0 0;padding-left:0;list-style:none;}
.bb-tpx-coupon-row > input[type=hidden]{display:none!important;}

#fare_breakup.bestbus104{
  background:#fff!important;border:1px solid var(--bb-border-light,#f1f5f9);
  border-radius:16px;padding:0!important;overflow:hidden;
  box-shadow:0 6px 24px rgba(10,21,37,.07)!important;
}
#fare_breakup.bestbus104 > header.section-header{
  background:linear-gradient(135deg,#f97316,#ea580c);
  margin:0!important;padding:14px 18px!important;text-align:left!important;
  display:flex;align-items:center;gap:10px;
}
#fare_breakup.bestbus104 > header.section-header h4{
  margin:0!important;color:#fff!important;font-size:15px!important;font-weight:800!important;
  text-align:left!important;display:flex;align-items:center;gap:9px;
}
#fare_breakup.bestbus104 > header.section-header h4 i{
  width:30px;height:30px;border-radius:9px;flex:0 0 30px;
  background:rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;font-size:13px;
}
#fare_breakup.bestbus104 > header.section-header .line{display:none!important;}

#fare_breakup.bestbus104 ul.list-unstyled{margin:0!important;padding:10px 18px 4px!important;}
#fare_breakup.bestbus104 ul.list-unstyled > li{
  display:flex;align-items:center;gap:9px;
  margin:0!important;padding:9px 0!important;
  border-bottom:1px dashed var(--bb-border-light,#f1f5f9);
  font-size:13px;color:var(--bb-text-muted,#6b7480);
}
#fare_breakup.bestbus104 ul.list-unstyled > li:last-child{border-bottom:0;}
/* amounts were float:right -- make them the flex tail instead */
#fare_breakup.bestbus104 ul.list-unstyled > li .float-right{
  float:none!important;margin-left:auto;
  font-size:13.5px!important;font-weight:700!important;color:var(--bb-text,#0a1525)!important;white-space:nowrap;
}
/* section label rows ("Bus Fare Break-up", "Coupon Discount") */
#fare_breakup.bestbus104 ul.list-unstyled > li:has(> b){
  border-bottom:0;padding-bottom:2px!important;
  font-size:12px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--bb-text,#0a1525);
}
#fare_breakup.bestbus104 ul.list-unstyled > li:has(> b)::before{content:none;}
/* a glyph per line */
#fare_breakup.bestbus104 ul.list-unstyled > li::before{
  font-family:"Font Awesome 5 Free";font-weight:900;
  width:24px;height:24px;flex:0 0 24px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bb-primary-soft,#fff7ed);color:var(--bb-primary,#f97316);font-size:11px;
  content:"\f0d6";               /* money-bill fallback */
}
#fare_breakup.bestbus104 ul.list-unstyled > li:nth-of-type(2)::before{content:"\f3ff";}  /* ticket   */
#fare_breakup.bestbus104 ul.list-unstyled > li:nth-of-type(3)::before{content:"\f295";}  /* percent  */
#fare_breakup.bestbus104 ul.list-unstyled > li:nth-of-type(4)::before{content:"\f543";}  /* receipt  */
#fare_breakup.bestbus104 ul.list-unstyled > li:nth-of-type(5)::before{content:"\f1ec";}  /* calculator */
#fare_breakup.bestbus104 ul.list-unstyled > li.text-danger{
  color:#b91c1c!important;font-size:12px;border-bottom:0;
}
#fare_breakup.bestbus104 ul.list-unstyled > li.text-danger::before{
  content:"\f06a";background:#fef2f2;color:#b91c1c;   /* exclamation-circle */
}
#fare_breakup.bestbus104 ul.list-unstyled hr{display:none!important;}

/* Book-Now modal: the inline "Boarding & Dropping Points" browser (#accordion2 --
   heading + Boarding/Dropping/Cancellation/Terms chips + the point lists) is
   redundant here. The actual choice happens in the dedicated boarding/dropping
   side panels reached from "Select Boarding Point" further down this same modal.
   Kept in the DOM (openNav61() and its panes are untouched), just not shown. */
#select-bus-direct-agent #accordion2{display:none!important;}

/* ---- Book-Now modal: vehicle-summary rate, total box, fare break-up ----------
   Measured: the rate block carried a dashed top border that read as a stray
   dotted line on the dark header; the estimated-total box had padding:0 inside
   its border; the toggle's .arrowdouble glyph sits on a solid green square
   (#0faa14, turning red via .down) from the view's inline <style>; and the
   break-up itself was a plain float-right list with no heading or icons. */

/* 1. stray dotted line */
#select-bus-direct-agent .bb-tbr-modal-vsum-rate{border-top:0!important;}

/* 2. estimated total box */
/* the .bb-tent-modal-pax>[class*="col-"] rule in ci-overrides.css zeroes the
   padding with !important and outranks a plain id+class selector, so match its
   specificity here. */
#select-bus-direct-agent .bb-tent-modal-pax > .bb-tbr-modal-total{
  padding:9px 12px!important;border-radius:12px;
  background:#f0fdf4;border:1px solid #bbf7d0!important;
}
#select-bus-direct-agent .bb-tbr-modal-total > div{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;line-height:1.25;
}
#select-bus-direct-agent .bb-tbr-modal-total small{
  font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#166534;
}
#select-bus-direct-agent .bb-tbr-modal-total strong{font-size:19px;font-weight:800;color:#0a1525;}
#select-bus-direct-agent .bb-tbr-modal-total-note{
  display:flex;align-items:flex-start;gap:6px;margin-top:4px;
  font-size:11.5px;line-height:1.3;color:#3f6212;text-transform:none!important;letter-spacing:0!important;font-weight:600!important;
}

/* 3. toggle chevron: drop the coloured square, rotate on open */
#select-bus-direct-agent #priceaccid .arrowdouble{
  background:none!important;background-color:transparent!important;
  color:var(--bb-primary,#f97316)!important;border-radius:0!important;
  padding:0!important;width:auto!important;height:auto!important;
  transition:transform .2s;
}
#select-bus-direct-agent #priceaccid .arrowdouble.down{transform:rotate(180deg);}

/* 4. the break-up panel */
#pricedemo{
  background:#fff;border:1px solid var(--bb-border-light,#f1f5f9);
  border-radius:12px;padding:12px 14px;margin-top:8px;
}
#pricedemo > hr{display:none!important;}
#pricedemo::before{
  content:"Fare break-up";display:block;
  font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--bb-text,#0a1525);margin-bottom:6px;
}
#pricedemo ul.list-unstyled{margin:0!important;padding:0!important;}
#pricedemo ul.list-unstyled > li{
  display:flex;align-items:center;gap:9px;
  margin:0!important;padding:8px 0!important;
  border-bottom:1px dashed var(--bb-border-light,#f1f5f9);
  font-size:12.5px;color:var(--bb-text-muted,#6b7480);
}
#pricedemo ul.list-unstyled > li:last-child{border-bottom:0;}
#pricedemo .float-right{
  float:none!important;margin-left:auto;white-space:nowrap;
  font-size:13px!important;font-weight:700!important;color:var(--bb-text,#0a1525)!important;
}
#pricedemo ul.list-unstyled > li::before{
  font-family:"Font Awesome 5 Free";font-weight:900;
  width:22px;height:22px;flex:0 0 22px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bb-primary-soft,#fff7ed);color:var(--bb-primary,#f97316);font-size:10px;
  content:"\f0d6";
}
#pricedemo ul.list-unstyled > li:nth-of-type(1)::before{content:"\f3ff";} /* ticket */
#pricedemo ul.list-unstyled > li:nth-of-type(2)::before{content:"\f055";} /* plus-circle */
#pricedemo ul.list-unstyled > li:nth-of-type(3)::before{content:"\f295";} /* percent */
#pricedemo ul.list-unstyled > li:nth-of-type(4)::before{content:"\f543";} /* receipt */
#pricedemo ul.list-unstyled > li:nth-of-type(5)::before{content:"\f555";} /* wallet */
/* the grand-total line reads as the summary */
#pricedemo ul.list-unstyled > li:last-child{
  margin-top:2px!important;padding-top:10px!important;
  border-top:1px solid var(--bb-border-light,#f1f5f9);
  font-weight:800;color:var(--bb-text,#0a1525);
}
@media (min-width:768px){
  #pricedemo{padding:14px 16px;}
  #pricedemo ul.list-unstyled > li{font-size:13px;padding:9px 0!important;}
}

/* ---- Seat sheet: duplicate FRONT + wrap-proof rows ---------------------------
   1) Two front indicators render: a DNA .front-indicator (with the steering
      wheel) that sits OUTSIDE .bb-seat-bus and lands half-clipped at the top of
      the sheet, and CI3's own .front-indicator inside .seatCharts-container,
      which is correctly placed above the seats. Keep the inner one.
   2) The seats are float:left, so at a narrow width (or with the OS font scaled
      up) a row can wrap and the grid falls apart. Lay each row out as a
      no-wrap flex line and let the chart scroll instead. */
#select-busseats .front-indicator:not(.seatCharts-container .front-indicator){display:none!important;}

#select-busseats .seatCharts-row{
  display:flex!important;flex-wrap:nowrap!important;align-items:center;
  justify-content:center;
}
#select-busseats .seatCharts-row > *{flex:0 0 auto;float:none!important;}
/* scrolling now lives on .bb-seat-bus (the flex parent), not the chart */
#select-busseats .seatCharts-container{overflow:visible;}
#select-busseats .seatCharts-container::-webkit-scrollbar{display:none;}

/* ---- Passenger details, mobile fare bar (.round-trip-fare.fixed-bottom) -------
   Measured at 375: the bar's three columns are correct (8-98 / 98-278 /
   278-368) but each one holds a nested Bootstrap .row whose -12px margins push
   it OUTSIDE its column -- 1-105 inside 8-98, and 271-374 inside 278-367. With
   all three bleeding ~7px each way the Amount / Proceed Payment / Have a Coupon
   blocks pile on top of one another. Also cap the fare panel so it can never
   eat a short screen, and give it the same row language as the other fare
   break-ups (icons, dashed rows, amount right). */
.round-trip-fare.fixed-bottom .row .row{margin-left:0!important;margin-right:0!important;}
.round-trip-fare.fixed-bottom [class*="col-"]{min-width:0;}
.round-trip-fare.fixed-bottom .busamount,
.round-trip-fare.fixed-bottom .buscoupon{overflow:hidden;}

/* the two chevron toggles */
.round-trip-fare.fixed-bottom .arrowdouble{
  background:none!important;background-color:transparent!important;
  color:var(--bb-primary,#f97316)!important;border-radius:0!important;
  transition:transform .2s;
}
.round-trip-fare.fixed-bottom .arrowdouble.down{transform:rotate(180deg);}

/* fare panel: bounded + scrollable */
.round-trip-fare.fixed-bottom #btmpanel,
.round-trip-fare.fixed-bottom #btmpanel1{
  max-height:45vh;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
  background:#fff;border-radius:14px 14px 0 0;padding:12px 14px 6px!important;
}
.round-trip-fare.fixed-bottom #btmpanel .section-header{margin-bottom:8px!important;}
.round-trip-fare.fixed-bottom #btmpanel h4{
  font-size:13px!important;font-weight:800!important;text-align:left!important;
  text-transform:uppercase;letter-spacing:.4px;margin:0!important;
}
.round-trip-fare.fixed-bottom #btmpanel .line{display:none!important;}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled{margin:0!important;padding:0!important;}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li{
  display:flex;align-items:center;gap:9px;
  margin:0!important;padding:8px 0!important;
  border-bottom:1px dashed var(--bb-border-light,#f1f5f9);
  font-size:12.5px;color:var(--bb-text-muted,#6b7480);
}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li:last-child{border-bottom:0;}
.round-trip-fare.fixed-bottom #btmpanel .float-right{
  float:none!important;margin-left:auto;white-space:nowrap;
  font-size:13px!important;font-weight:700!important;color:var(--bb-text,#0a1525)!important;
}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li::before{
  font-family:"Font Awesome 5 Free";font-weight:900;
  width:22px;height:22px;flex:0 0 22px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bb-primary-soft,#fff7ed);color:var(--bb-primary,#f97316);font-size:10px;
  content:"\f0d6";
}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li:has(> b){
  border-bottom:0;padding-bottom:2px!important;
  font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--bb-text,#0a1525);
}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li:has(> b)::before{content:none;}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li:nth-of-type(2)::before{content:"\f3ff";}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li:nth-of-type(3)::before{content:"\f295";}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li:nth-of-type(4)::before{content:"\f543";}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li:nth-of-type(5)::before{content:"\f1ec";}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li.text-danger{
  color:#b91c1c!important;font-size:11.5px;border-bottom:0;
}
.round-trip-fare.fixed-bottom #btmpanel ul.list-unstyled > li.text-danger::before{
  content:"\f06a";background:#fef2f2;color:#b91c1c;
}
.round-trip-fare.fixed-bottom #btmpanel hr{display:none!important;}
/* "Have a Coupon?" ran 5px past its 89px column (307-372 inside 278-367) */
/* NB: overflow-wrap:anywhere here broke "Amount" and "Have a Coupon?" into one
   character per line inside their 90px columns and pushed the bar to 117px.
   Normal word wrapping + a smaller label is what these need. */
.round-trip-fare.fixed-bottom .busamount *,
.round-trip-fare.fixed-bottom .buscoupon *{max-width:100%;overflow-wrap:normal;word-break:normal;}
.round-trip-fare.fixed-bottom .busamount,
.round-trip-fare.fixed-bottom .buscoupon{font-size:11.5px;line-height:1.3;}
.round-trip-fare.fixed-bottom .busamount .font-16,
.round-trip-fare.fixed-bottom .buscoupon .font-16{font-size:13px!important;}
.round-trip-fare.fixed-bottom .busamount,
.round-trip-fare.fixed-bottom .buscoupon{padding-left:4px;padding-right:4px;text-align:center;}

/* ---- jQuery-toast: the actual coupon / validation feedback -------------------
   The inline .bb-tpx-coupon-status blocks stay .is-hidden -- CI3 reports coupon
   results through jQuery-toast instead, which still had its stock bootstrap-ish
   look (#a94442 on #f2dede, 4px radius). Re-skinned to the site language and
   lifted clear of the mobile fixed fare bar. */
.jq-toast-wrap{z-index:1085!important;}
/* top-anchored toasts sat at top:20px with z-index 9000, i.e. straight over the
   sticky header -- on the ticket-details pages the "ticket details sent" toast
   covered Login / My Bookings. Drop them clear of topbar(37) + header(60). */
.jq-toast-wrap.top-right,.jq-toast-wrap.top-left,.jq-toast-wrap.top-center,
.jq-toast-wrap.jq-toast-top-right,.jq-toast-wrap.jq-toast-top-left,
.jq-toast-wrap.jq-toast-top-center{top:110px!important;}
@media (max-width:991.98px){
  /* .bb-topbar is d-none below lg, so only the header height applies */
  .jq-toast-wrap.top-right,.jq-toast-wrap.top-left,.jq-toast-wrap.top-center,
  .jq-toast-wrap.jq-toast-top-right,.jq-toast-wrap.jq-toast-top-left,
  .jq-toast-wrap.jq-toast-top-center{top:74px!important;}
}
@media (max-width:767.98px){
  .jq-toast-wrap.jq-toast-bottom-right,
  .jq-toast-wrap.jq-toast-bottom-left,
  .jq-toast-wrap.jq-toast-bottom-center{bottom:96px!important;}
  .jq-toast-wrap{left:12px!important;right:12px!important;width:auto!important;}
}
.jq-toast-single{
  border-radius:12px!important;
  padding:12px 40px 12px 46px!important;
  font-family:'Plus Jakarta Sans',sans-serif!important;
  font-size:13px!important;line-height:1.45!important;
  box-shadow:0 10px 30px rgba(10,21,37,.18)!important;
  border:1px solid transparent!important;
}
.jq-toast-single h2,.jq-toast-single .jq-toast-heading{
  font-family:'Plus Jakarta Sans',sans-serif!important;
  font-size:13px!important;font-weight:800!important;margin:0 0 2px!important;
  letter-spacing:.2px;
}
.jq-icon-error{background:#fef2f2!important;color:#991b1b!important;border-color:#fecaca!important;}
.jq-icon-error .jq-toast-heading{color:#b91c1c!important;}
.jq-icon-success{background:#ecfdf5!important;color:#065f46!important;border-color:#a7f3d0!important;}
.jq-icon-success .jq-toast-heading{color:#047857!important;}
.jq-icon-warning{background:#fffbeb!important;color:#92400e!important;border-color:#fde68a!important;}
.jq-icon-warning .jq-toast-heading{color:#b45309!important;}
.jq-icon-info{background:#eff6ff!important;color:#1e40af!important;border-color:#bfdbfe!important;}
.jq-icon-info .jq-toast-heading{color:#1d4ed8!important;}
.close-jq-toast-single{
  color:inherit!important;opacity:.55;font-size:18px!important;
  width:30px;height:30px;line-height:30px;text-align:center;
}
.close-jq-toast-single:hover{opacity:1;}

/* Passenger details: the old sticky package strip (#flip + its #panel) repeats
   what .bb-tpx-tripbar right below it already shows -- package name, date,
   operator, pax, the expiry countdown and Modify. Drop it on this page. */
body.bb-page-tpx #flip,
body.bb-page-tpx #panel{display:none!important;}

/* The fixed fare bar itself had background:rgba(0,0,0,0) -- only its three inner
   boxes were white, so the page content behind it (the Boarding & Dropping card)
   showed through the gaps and read as an overlap. Make the bar opaque and give
   the page enough bottom padding to scroll clear of it. */
.round-trip-fare.fixed-bottom{
  background:#fff!important;
  border-top:1px solid var(--bb-border-light,#f1f5f9);
  box-shadow:0 -8px 24px rgba(10,21,37,.10)!important;
  padding-bottom:env(safe-area-inset-bottom);
}
.round-trip-fare.fixed-bottom > .container{background:transparent;}
@media (max-width:1199.98px){
  body.bb-page-tpx{padding-bottom:110px!important;}
}


/* ---- Fare / coupon toggles on the mobile bar ---------------------------------
   Round green buttons with a white double-chevron, straddling the top edge of
   the Amount and Have-a-Coupon cards. They were a 7x12 .arrowdouble inside a
   span.text-white, so once the bar went white they were white-on-white and
   invisible. ids, onclicks and slide targets untouched. */
.round-trip-fare.fixed-bottom #btmflip > .bg-transparent,
.round-trip-fare.fixed-bottom #btmflip1 > .bg-transparent{
  margin-top:-16px!important;position:relative;z-index:4;text-align:center;
  line-height:0;
}
.round-trip-fare.fixed-bottom #btmflip > .bg-transparent > span,
.round-trip-fare.fixed-bottom #btmflip1 > .bg-transparent > span{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--bb-primary,#f97316)!important;
  border:3px solid #fff;
  box-shadow:0 3px 10px rgba(249,115,22,.35);
  color:#fff!important;
  transition:transform .16s,box-shadow .16s;
}
.round-trip-fare.fixed-bottom #btmflip > .bg-transparent > span:active,
.round-trip-fare.fixed-bottom #btmflip1 > .bg-transparent > span:active{
  transform:scale(.92);box-shadow:0 2px 6px rgba(249,115,22,.32);
}
.round-trip-fare.fixed-bottom #btmflip .arrowdouble,
.round-trip-fare.fixed-bottom #btmflip1 .arrowdouble{
  font-size:14px!important;line-height:1!important;
  color:#fff!important;background:none!important;background-color:transparent!important;
  transition:transform .2s;
}
.round-trip-fare.fixed-bottom #btmflip .arrowdouble.down,
.round-trip-fare.fixed-bottom #btmflip1 .arrowdouble.down{transform:rotate(180deg);}
/* the button straddles the card's top edge */
.round-trip-fare.fixed-bottom .busamount,
.round-trip-fare.fixed-bottom .buscoupon{overflow:visible!important;}

/* the three cards + the pay button, per the reference */
.round-trip-fare.fixed-bottom .busamount,
.round-trip-fare.fixed-bottom .buscoupon,
.round-trip-fare.fixed-bottom .col-6 > .bgbc{
  background:#fff!important;border:1px solid var(--bb-border-light,#eef2f7)!important;
  border-radius:12px!important;
}
.round-trip-fare.fixed-bottom .busamount b,
.round-trip-fare.fixed-bottom .buscoupon b{color:var(--bb-text,#0a1525)!important;font-weight:800;}
/* same CTA language as .bb-tbr-book-btn elsewhere in the funnel */
.round-trip-fare.fixed-bottom #proceed_to_payment_mobile{
  background:linear-gradient(135deg,var(--bb-primary,#f97316),#ea580c)!important;
  border:0!important;border-radius:12px!important;
  color:#fff!important;font-size:14px!important;font-weight:800!important;letter-spacing:.2px;
  min-height:44px;padding:0 14px!important;
  display:flex!important;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 8px 20px rgba(249,115,22,.32);
  transition:transform .14s,box-shadow .14s;
}
.round-trip-fare.fixed-bottom #proceed_to_payment_mobile::after{
  content:"\f061";font-family:"Font Awesome 5 Free";font-weight:900;font-size:12px;
}
.round-trip-fare.fixed-bottom #proceed_to_payment_mobile:active{
  transform:scale(.985);box-shadow:0 4px 12px rgba(249,115,22,.28);
}
.round-trip-fare.fixed-bottom #proceed_to_payment_mobile .blinker{animation:none!important;}

/* ---- Mobile fare bar: real layout, not patches --------------------------------
   Measured at 375: the 3 columns were 90/180/90 but the inner .company-info
   blocks were only 55px, so "Amount / ₹ / 963/-" and "Have a / Coupon / ?" each
   wrapped to THREE lines, and the pay button's inner <b> inherited a legacy
   black (#1a202c) on the orange gradient. Re-proportioned to 28/52/20 with the
   inner blocks full-width and single-line. */
.round-trip-fare.fixed-bottom .row > .col-3:first-child{flex:0 0 28%!important;max-width:28%!important;}
.round-trip-fare.fixed-bottom .row > .col-6{flex:0 0 52%!important;max-width:52%!important;}
.round-trip-fare.fixed-bottom .row > .col-3:last-child{flex:0 0 20%!important;max-width:20%!important;}

.round-trip-fare.fixed-bottom .company-info,
.round-trip-fare.fixed-bottom .company-info > span,
.round-trip-fare.fixed-bottom .busamount .col,
.round-trip-fare.fixed-bottom .buscoupon .col,
.round-trip-fare.fixed-bottom .busamount [class*="col-"],
.round-trip-fare.fixed-bottom .buscoupon [class*="col-"]{
  width:100%!important;max-width:100%!important;flex:1 1 100%!important;
  padding-left:0!important;padding-right:0!important;margin:0!important;text-align:center;
}
/* one line each */
.round-trip-fare.fixed-bottom .busamount,
.round-trip-fare.fixed-bottom .buscoupon{white-space:nowrap;padding:6px 2px 8px!important;}
.round-trip-fare.fixed-bottom .busamount .text-2,
.round-trip-fare.fixed-bottom .busamount .d-block{
  font-size:9.5px!important;font-weight:800!important;letter-spacing:.4px;text-transform:uppercase;
  color:var(--bb-text-muted,#6b7480)!important;line-height:1.2!important;margin-bottom:1px;
}
.round-trip-fare.fixed-bottom .busamount .font-16,
.round-trip-fare.fixed-bottom .busamount b i,
.round-trip-fare.fixed-bottom .busamount b{
  font-size:15px!important;font-weight:800!important;color:var(--bb-text,#0a1525)!important;
  white-space:nowrap;line-height:1.2!important;font-style:normal;
}
.round-trip-fare.fixed-bottom .buscoupon,
.round-trip-fare.fixed-bottom .buscoupon b,
.round-trip-fare.fixed-bottom .buscoupon .font-16{
  font-size:9.5px!important;font-weight:800!important;line-height:1.25!important;
  color:var(--bb-text,#0a1525)!important;white-space:nowrap;
}

/* the pay button's inner <b>/<span> inherited a black colour on the gradient */
.round-trip-fare.fixed-bottom #proceed_to_payment_mobile,
.round-trip-fare.fixed-bottom #proceed_to_payment_mobile *{color:#fff!important;}
.round-trip-fare.fixed-bottom #proceed_to_payment_mobile b{font-weight:800!important;}
.round-trip-fare.fixed-bottom .custom-control-label{
  font-size:9.5px!important;line-height:1.3;color:var(--bb-text-muted,#6b7480)!important;
}

/* ---- Trip summary: 169px of header on a 812px screen ------------------------ */
@media (max-width:767.98px){
  .bb-tpx-tripbar{padding:6px 0!important;}
  .bb-tpx-tripbar .bb-tpx-tripbar-row{gap:2px!important;}
  .bb-tpx-tripbar-info,.bb-tpx-tripbar-meta{gap:1px!important;line-height:1.3!important;font-size:11.5px!important;}
  .bb-tpx-tripbar-info > *,.bb-tpx-tripbar-meta > *{margin:0!important;}
  .bb-tpx-tripbar h1,.bb-tpx-tripbar h2,.bb-tpx-tripbar h3,.bb-tpx-tripbar strong{font-size:12.5px!important;line-height:1.3!important;}
  .bb-tpx-tripbar .bb-tpx-timer{padding:5px 9px!important;}
  .bb-tpx-tripbar .bb-tpx-modify{padding:6px 12px!important;font-size:12px!important;}
  .bb-tpx-tripbar-actions{gap:8px!important;margin-top:4px!important;}
}

/* ---- Trip summary: 160px of header before any content -----------------------
   Breakdown measured at 375: h2 "Trip Summary" 16px (the rows below already say
   exactly that), the vehicle line wrapping to 2 lines (33px), date and pax on
   their own rows (16px each), then the timer + Modify row. Cut the redundant
   heading, keep the vehicle line to one line, and pair date with pax. */
@media (max-width:767.98px){
  .bb-tpx-tripbar > .container > .bb-tpx-tripbar-row > .bb-tpx-tripbar-info > h2{display:none!important;}
  .bb-tpx-tripbar-meta{display:flex!important;flex-wrap:wrap;gap:2px 14px!important;}
  .bb-tpx-tripbar-meta > li{
    display:flex;align-items:center;gap:5px;min-width:0;
    font-size:11px!important;line-height:1.35!important;
  }
  /* pair the two short rows (date + pax) on one line, keep the long vehicle
     line and the itinerary link on their own -- 4 rows becomes 3 */
  .bb-tpx-tripbar-meta > li:nth-child(1){order:0;}
  .bb-tpx-tripbar-meta > li:nth-child(3){order:1;}
  .bb-tpx-tripbar-meta > li:nth-child(2){order:2;flex:1 1 100%;}
  .bb-tpx-tripbar-meta > li:nth-child(4){order:3;flex:1 1 100%;}
  .bb-tpx-tripbar-meta > li:nth-child(2) strong{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:block;min-width:0;font-size:11.5px!important;
  }
  .bb-tpx-tripbar-meta > li strong{font-size:11.5px!important;line-height:1.35!important;}
  .bb-tpx-tripbar-actions{margin-top:5px!important;gap:8px!important;}
}
/* coupon label: one line inside its 67px cell */
.round-trip-fare.fixed-bottom .buscoupon,
.round-trip-fare.fixed-bottom .buscoupon *{white-space:nowrap!important;}

/* The trip bar sticks at top:52px, an offset reserved for the #flip package
   strip -- which is hidden on this page now. That left a 52px band above the
   bar with nothing in it, so page content scrolled through it in full view and
   read as the bar overlapping the Contact Details card. Stick it to the top. */
@media (max-width:767.98px){
  body.bb-page-tpx .bb-tpx-tripbar{top:0!important;}
}

/* ---- IRCTC trip bar: proper alignment + shorter height ----------------------
   The generic reorder above (nth-child 1/2/3/4) was tuned for the 4-item
   bus/tours meta list. The IRCTC bar carries FIVE items -- date, IR-Tours
   line, boarding->deboarding route, pax, and the "View Itinerary" link -- and
   the boarding row is conditional, so the nth-child mapping scattered them
   (the link tangled onto the date row, 5 ragged lines, ~146px). Re-order the
   IRCTC bar by its own icon, conditional-safe via :has(): pair the two short
   rows (date + pax), then give each long row its own full-width line.
   Result: 4 tidy rows, ~129px. Scoped to .bb-tpx-tripbar--irctc so the
   bus/tours/cars bars keep their own layout. */
@media (max-width:767.98px){
  .bb-tpx-tripbar--irctc .bb-tpx-tripbar-row{gap:3px!important;}
  .bb-tpx-tripbar--irctc .bb-tpx-tripbar-meta{gap:2px 14px!important;align-items:baseline;}
  .bb-tpx-tripbar--irctc .bb-tpx-tripbar-meta > li{
    flex:0 1 auto!important;font-size:11px!important;line-height:1.3!important;margin:0!important;
  }
  .bb-tpx-tripbar--irctc .bb-tpx-tripbar-meta > li:has(i.fa-calendar){order:1!important;}
  .bb-tpx-tripbar--irctc .bb-tpx-tripbar-meta > li:has(i.fa-users){order:2!important;}
  .bb-tpx-tripbar--irctc .bb-tpx-tripbar-meta > li:has(i.fa-train){order:3!important;flex:1 1 100%!important;}
  .bb-tpx-tripbar--irctc .bb-tpx-tripbar-meta > li:has(i.fa-map-marker-alt){order:4!important;flex:1 1 100%!important;}
  .bb-tpx-tripbar--irctc .bb-tpx-tripbar-meta > li:has(a){order:5!important;flex:1 1 100%!important;margin-top:1px!important;}
  .bb-tpx-tripbar--irctc .bb-tpx-tripbar-meta > li:has(a) a{
    color:#fbbf24!important;text-decoration:underline;font-size:11px;font-weight:700;
  }
}

/* ---- Passenger form: parsley lists are flex items ----------------------------
   Parsley injects <ul class="parsley-errors-list"> as a sibling right after each
   field, and these wrappers are flex rows -- so the ul becomes a flex item and
   takes real space. Measured: in the phone group it took 117px (prefix 53 +
   input 136 = 189 of a 306px row, so the input stopped at x223 while every
   other field ran to x341), and between the gender labels it is a 306px block,
   pushing Male and Female onto separate lines. Park every one of them on its
   own line at the end. */
.bb-tpx-input-group > .parsley-errors-list,
.bb-tpx-radios > .parsley-errors-list{
  flex:0 0 100%!important;order:9;
  margin:3px 0 0!important;padding-left:0;list-style:none;
  font-size:11px;line-height:1.35;
}
.bb-tpx-input-group{flex-wrap:wrap;}
.bb-tpx-input-group > .bb-tpx-input{flex:1 1 auto!important;width:auto!important;min-width:0!important;}
.bb-tpx-input-group > .bb-tpx-prefix{flex:0 0 auto!important;}

/* Measured gap between a field and the NEXT field's label: 2-5px, so every
   heading read as stuck to the input above it. The labels are each first-child
   of their own column, so the space belongs on the columns. */
@media (max-width:767.98px){
  .bb-tpx-paxcard [class*="col-"]{margin-bottom:10px;}
  .bb-tpx-paxcard .row > [class*="col-"]:last-child{margin-bottom:0;}
}
@media (min-width:768px){
  .bb-tpx-paxcard [class*="col-"]{margin-bottom:8px;}
}

/* Coupon card: no sticky on desktop */
@media (min-width:1200px){
  #coupon_card{position:static!important;top:auto!important;}
}

/* Fare card: the T&C checkbox row and its parsley list carry padding:0 while
   every other row in the card is inset 16-18px, so they sat flush on the card's
   left edge. Match the card's gutter. */
#fare_breakup.bestbus104 > .custom-control,
#fare_breakup.bestbus104 > .parsley-errors-list{
  padding-left:18px!important;padding-right:18px!important;
}
#fare_breakup.bestbus104 > .custom-control{padding-top:10px;padding-bottom:10px;}
#fare_breakup.bestbus104 > .btn{margin:0 18px 18px!important;width:calc(100% - 36px)!important;border-radius:12px!important;}

/* ---- bootbox dialogs -------------------------------------------------------
   Every alert/confirm on the site (session expiry, "select boarding point",
   validation) is a bootbox dialog and still had the library's stock look: no
   header, a grey square close button pinned by an inline margin-top:-10px, a
   transparent 46px "btn-primary" OK, and an 8px radius. Themed here once, so
   all of them pick it up. Markup and handlers untouched. */
.bootbox .modal-dialog{max-width:400px;margin:auto;padding:16px;}
.bootbox .modal-content{
  border:0!important;border-radius:18px!important;
  box-shadow:0 24px 60px rgba(10,21,37,.26)!important;overflow:hidden;
}
.bootbox .modal-body{padding:26px 22px 18px!important;text-align:center;position:relative;}
/* an icon above the message */
.bootbox.bootbox-alert .modal-body::before,
.bootbox.bootbox-confirm .modal-body::before{
  content:"\f071";                       /* exclamation-triangle */
  font-family:"Font Awesome 5 Free";font-weight:900;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  background:#fff7ed;color:var(--bb-primary,#f97316);
  box-shadow:0 0 0 6px rgba(249,115,22,.09);
}
.bootbox .bootbox-body{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;font-weight:700;line-height:1.5;color:var(--bb-text,#0a1525);
}
.bootbox .bootbox-body b,.bootbox .bootbox-body strong{color:#b91c1c!important;font-weight:800;}
/* close: round chip, top right */
.bootbox .bootbox-close-button{
  position:absolute!important;top:12px;right:12px;margin:0!important;
  width:32px;height:32px;border-radius:50%!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  background:#fff!important;border:1px solid var(--bb-border-light,#f1f5f9)!important;
  box-shadow:0 2px 8px rgba(10,21,37,.08);
  font-size:18px;line-height:1;color:var(--bb-text-muted,#6b7480)!important;opacity:1!important;
  padding:0!important;text-shadow:none!important;
}
.bootbox .bootbox-close-button:hover{background:#f8fafc!important;color:var(--bb-text,#0a1525)!important;}
/* footer + buttons */
.bootbox .modal-footer{
  border-top:0!important;padding:0 22px 22px!important;
  display:flex;gap:10px;justify-content:center;
}
.bootbox .modal-footer .btn{
  min-width:120px;min-height:44px;border-radius:12px!important;
  font-size:14px;font-weight:800;padding:0 20px!important;border:0!important;
  transition:transform .14s,box-shadow .14s;
}
.bootbox .modal-footer .btn-primary,
.bootbox .modal-footer [data-bb-handler="ok"],
.bootbox .modal-footer [data-bb-handler="confirm"]{
  background:linear-gradient(135deg,var(--bb-primary,#f97316),#ea580c)!important;
  color:#fff!important;box-shadow:0 8px 20px rgba(249,115,22,.32);
}
.bootbox .modal-footer .btn-secondary,
.bootbox .modal-footer [data-bb-handler="cancel"]{
  background:#f1f5f9!important;color:var(--bb-text,#0a1525)!important;box-shadow:none;
}
.bootbox .modal-footer .btn:active{transform:scale(.98);}
@media (max-width:575.98px){
  .bootbox .modal-footer .btn{flex:1 1 auto;min-width:0;}
}

/* ---- "Only UPI Offer" modal (#onlyUpiModal) ---------------------------------
   Stock CI3 markup: a grey .bg-secondary header bar, options as boxes with an
   inline border:1px solid #000 and a native radio that sat outside the card's
   left edge, and a blinking bell. Rebuilt as selectable payment cards in the
   site's language. Radio names/ids/onclicks are untouched -- the native input
   is only hidden and replaced by a styled indicator. */
#onlyUpiModal .modal-dialog{max-width:420px;}
#onlyUpiModal .modal-content{border:0!important;border-radius:18px!important;overflow:hidden;
  box-shadow:0 24px 60px rgba(10,21,37,.28)!important;}

/* header */
#onlyUpiModal .bg-secondary{
  background:linear-gradient(135deg,var(--bb-primary,#f97316),#ea580c)!important;
  border:0!important;padding:14px 18px!important;text-align:left!important;
  display:flex;align-items:center;gap:10px;
}
#onlyUpiModal .bg-secondary::before{
  content:"\f0e7";font-family:"Font Awesome 5 Free";font-weight:900;font-size:14px;
  width:32px;height:32px;flex:0 0 32px;border-radius:10px;
  background:rgba(255,255,255,.22);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
}
#onlyUpiModal .modal-title{font-size:16px!important;font-weight:800!important;margin:0!important;text-align:left!important;}
#onlyUpiModal .modal-body{padding:16px!important;}
#onlyUpiModal .modal-body > form > div[style*="max-height"]{max-height:none!important;overflow:visible!important;}

/* savings strip */
#onlyUpiModal .alert-success{
  background:#ecfdf5!important;border:1px solid #a7f3d0!important;color:#065f46!important;
  border-radius:12px!important;padding:12px 14px!important;margin:0 0 14px!important;
  font-size:13px;line-height:1.5;font-weight:600;box-shadow:none!important;
  display:flex;align-items:flex-start;gap:9px;
}
#onlyUpiModal .alert-success .blink{animation:none!important;color:#059669;font-size:14px;margin-top:1px;}

/* each gateway becomes a selectable card */
#onlyUpiModal .main_vtab_radio{
  border:1.5px solid var(--bb-border-light,#e8edf3)!important;
  border-radius:14px!important;margin:0 0 10px!important;
  background:#fff;overflow:hidden;transition:border-color .16s,background .16s,box-shadow .16s;
}
#onlyUpiModal .main_vtab_radio:hover{border-color:#fdba74!important;}
#onlyUpiModal .main_vtab_radio:has(input:checked){
  border-color:var(--bb-primary,#f97316)!important;
  background:linear-gradient(180deg,#fff7ed,#fff)!important;
  box-shadow:0 6px 18px rgba(249,115,22,.16);
}
#onlyUpiModal .main_vtab_radio label{display:block;margin:0!important;cursor:pointer;width:100%;}
#onlyUpiModal .main_vtab_radio .d-flex{align-items:center!important;padding:13px 14px;gap:12px;}
/* hide the native radio, draw our own indicator in its place */
#onlyUpiModal .main_vtab_radio input[type=radio]{
  position:absolute!important;opacity:0!important;width:0!important;height:0!important;margin:0!important;
}
#onlyUpiModal .main_vtab_radio .d-flex > div:first-child{
  flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  border:2px solid #d7dee7;background:#fff;position:relative;transition:border-color .16s;
}
#onlyUpiModal .main_vtab_radio:has(input:checked) .d-flex > div:first-child{
  border-color:var(--bb-primary,#f97316);
  box-shadow:inset 0 0 0 4px var(--bb-primary,#f97316);
}
#onlyUpiModal .main_vtab_radio .d-flex > div:last-child{flex:1 1 auto;min-width:0;padding:0!important;}
#onlyUpiModal .main_vtab_radio .d-flex > div:last-child > div:first-child b{
  font-size:13.5px;font-weight:800;color:var(--bb-text,#0a1525)!important;line-height:1.35;
}
#onlyUpiModal .main_vtab_radio .green{color:#047857!important;font-weight:800;font-size:13px;}
#onlyUpiModal .main_vtab_radio .d-flex > div:last-child > div + div{margin-top:3px;}

/* the hint line + CTA */
#onlyUpiModal .modal-body form > *:not(div[style*="max-height"]){text-align:center;}
#onlyUpiModal .modal-body b:not(.headdingcolor){font-size:12.5px;color:var(--bb-text-muted,#6b7480);font-weight:600;}
#onlyUpiModal button[type=submit],#onlyUpiModal .modal-body .btn{
  display:flex!important;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:46px;margin-top:12px;
  background:linear-gradient(135deg,var(--bb-primary,#f97316),#ea580c)!important;
  border:0!important;border-radius:12px!important;
  color:#fff!important;font-size:15px;font-weight:800;
  box-shadow:0 8px 20px rgba(249,115,22,.32);
}
#onlyUpiModal button[type=submit] *{color:#fff!important;}
#onlyUpiModal button[type=submit]:active{transform:scale(.985);}

/* The fare-break-up chevron carries an inline-styled background from the view
   (.arrowdouble{background:#0faa14} and .down{background:red}), which rendered
   as a small coloured square wherever the chip was not explicitly reset.
   Neutralise it everywhere the toggle appears. */
#priceaccid .arrowdouble,
a[onclick*="priceacc"] .arrowdouble{
  background:none!important;background-color:transparent!important;
  border-radius:0!important;padding:0!important;width:auto!important;height:auto!important;
  color:var(--bb-primary,#f97316)!important;transition:transform .2s;
}
#priceaccid .arrowdouble.down,
a[onclick*="priceacc"] .arrowdouble.down{transform:rotate(180deg);}
/* seat sheet: give the panel the sheet's gutter so rows cannot run off the edge */
#select-busseats #pricedemo{margin-left:16px;margin-right:16px;}

/* ============================================================
   Hotel "Check Availability" card heading.

   The DNA rule makes the <h3> display:flex, which turns the
   <small> subtitle into a sibling flex ITEM -- it landed to the
   right of "Check Availability" on the same line instead of
   under it (small's display:block is inert inside flex).
   Let the row wrap and give the subtitle a full-width line.
============================================================ */
.bb-htl-cacard-title{
  flex-wrap:wrap;justify-content:center;
  row-gap:0;max-width:100%;
}
.bb-htl-cacard-title small{flex:0 0 100%;width:100%;}

/* ============================================================
   Hotel Fare Details rows -- give each line the same icon chip
   the tours fare break-up (#pricedemo) uses, so the two steps of
   the funnel read the same. The DNA rows are label/value only.
============================================================ */
.bb-htl-farecard-rows li{align-items:center;gap:9px;padding:7px 0;}
.bb-htl-farecard-rows li > span:first-child{
  display:flex;align-items:center;gap:9px;margin-right:auto;
}
.bb-htl-farecard-rows li > span:first-child::before{
  font-family:"Font Awesome 5 Free";font-weight:900;
  width:22px;height:22px;flex:0 0 22px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bb-primary-soft,#fff7ed);color:var(--bb-primary,#f97316);
  font-size:10px;content:"\f0d6";                                /* money-bill */
}
.bb-htl-farecard-rows li:nth-of-type(1) > span:first-child::before{content:"\f3ff";} /* ticket  */
.bb-htl-farecard-rows li:nth-of-type(2) > span:first-child::before{content:"\f295";} /* percent */
.bb-htl-farecard-rows li:nth-of-type(3) > span:first-child::before{content:"\f543";} /* receipt */
.bb-htl-farecard-rows li:nth-of-type(4) > span:first-child::before{content:"\f555";} /* wallet  */

/* ============================================================
   "I Accept the Terms & Conditions..." row.

   The DNA rule centres the label's flex items, so on the two-line
   wrap the 13px checkbox floated halfway down the text block
   instead of sitting with the first line. Top-align it, give it a
   real hit target and the theme colour.
============================================================ */
.bb-tpx-tos label.bb-ubu4gq.bb-ubu4gq.bb-ubu4gq{
  align-items:flex-start;gap:9px;text-align:left;
}
.bb-tpx-tos label.bb-ubu4gq input[type="checkbox"]{
  flex:0 0 16px;width:16px;height:16px;margin:0;
  accent-color:var(--bb-primary,#f97316);cursor:pointer;
}
.bb-tpx-tos label.bb-ubu4gq > span{line-height:1.5;}

/* Hotel pay CTA: the DNA ships it green, but the same step of the tours
   funnel (#proceed_to_payment_desktop / _mobile) was moved to the theme
   colour -- one funnel should not change accent colour mid-way. */
.bb-htl-farecard-pay{
  background:linear-gradient(135deg,var(--bb-primary,#f97316),#ea580c);
  box-shadow:0 8px 20px rgba(249,115,22,.32);
}
.bb-htl-farecard-pay:hover{box-shadow:0 10px 26px rgba(249,115,22,.45);}

/* Same for the hotel search CTA -- it is the page's primary action and the
   only green thing on an orange-themed page. */
.bb-htl-cacard-btn{
  background:linear-gradient(135deg,var(--bb-primary,#f97316),#ea580c);
  box-shadow:0 6px 18px rgba(249,115,22,.32);
}
.bb-htl-cacard-btn:hover{box-shadow:0 10px 26px rgba(249,115,22,.45);}

/* ============================================================
   "Available rooms / for <dates>" heading on mobile.

   .bb-htl-h3 lays the title and its <small> on one flex row with
   margin-left:auto on the small. At phone width the row wraps, but
   the auto margin survives, so the date line stays shoved to the
   right under a left-aligned title -- ragged both edges. Stack the
   two centred instead. Desktop keeps the DNA's title-left /
   dates-right row.
============================================================ */
@media (max-width:767.98px){
  .bb-htl-h3:has(small){justify-content:center;text-align:center;}
  .bb-htl-h3:has(small) small{
    flex:0 0 100%;margin-left:0;text-align:center;
  }
}

/* ============================================================
   Bullets/numbers for admin-authored (CKEditor) body content.

   style.css:83 resets `ul{margin:0;padding:0;list-style:none}` for
   the design-system lists, and several content wrappers repeat
   `list-style:none` on the WRAPPER (e.g. .bb-tpd-incl-list), which
   inherits down into the <ol>/<li> inside. Net effect: every list
   an admin typed in CKEditor rendered as flat unindented lines.

   Target = lists with NO class of their own. Every list this theme
   ships carries a class (.bb-*, .list-unstyled, .navbar-nav,
   .dropdown-menu, …); CKEditor emits bare <ul> / <ol dir="ltr">.
   Measured on tour-package-details: 8 classless lists, all of them
   CKEditor content in <main>; the only other classless lists on the
   page are the footer link columns, excluded below. Menus and every
   classed list are untouched.

   Two carve-outs, both measured rather than assumed:
   - `display:list-item` has to be forced. Wrappers like
     .bb-tpd-incl-list set `li{display:flex}` to lay out icon+text
     rows; a flex box is not a list-item, so NO marker is generated
     at all however the list-style reads. That is why the <ol> in
     Inclusions/Exclusions had neither numbers nor a chevron.
   - lists whose items lead with their own <i>/<svg> icon (e.g. the
     hand-authored .bb-att-highlights rows on the ramoji landing)
     already have a marker; :not(:has()) leaves those alone so they
     keep their icon and their flex row.

   The :has() guards are wrapped in :where() so they add NO
   specificity -- otherwise they outrank the chrome carve-out below
   and the footer link columns sprout bullets.
============================================================ */
ul:not([class]):not(:where(:has(> li > i:first-child), :has(> li > svg:first-child), :has(> li > :first-child[class]))),
ol:not([class]):not(:where(:has(> li > i:first-child), :has(> li > svg:first-child), :has(> li > :first-child[class]))){
  margin:.5em 0 .85em;
  padding-left:1.35em;
  list-style-position:outside;
}
ul:not([class]):not(:where(:has(> li > i:first-child), :has(> li > svg:first-child), :has(> li > :first-child[class]))){list-style-type:disc;}
ol:not([class]):not(:where(:has(> li > i:first-child), :has(> li > svg:first-child), :has(> li > :first-child[class]))){list-style-type:decimal;}
ul:not([class]) ul:not([class]){list-style-type:circle;}
ul:not([class]) ul:not([class]) ul:not([class]){list-style-type:square;}
ol:not([class]) ol:not([class]){list-style-type:lower-alpha;}
ul:not([class]) > li:not(:where(:has(> i:first-child), :has(> svg:first-child), :has(> :first-child[class]))),
ol:not([class]) > li:not(:where(:has(> i:first-child), :has(> svg:first-child), :has(> :first-child[class]))){
  display:list-item;margin:0 0 .3em;
}
ul:not([class]) > li::marker,
ol:not([class]) > li::marker{color:var(--bb-primary,#f97316);}

/* site chrome keeps the flat reset -- nav/menu/footer link columns are
   also classless in places, and they must not sprout bullets */
:is(header,nav,footer,aside,.bb-drawer,.bb-mobnav,.bb-topbar,.sidenavv,
    .navbar,.dropdown-menu,.modal-header,.modal-footer,.owl-carousel) ul:not([class]),
:is(header,nav,footer,aside,.bb-drawer,.bb-mobnav,.bb-topbar,.sidenavv,
    .navbar,.dropdown-menu,.modal-header,.modal-footer,.owl-carousel) ol:not([class]){
  margin:0;padding-left:0;list-style:none;
}

/* ============================================================
   Bootstrap-5 modal close button on this theme's dark headers.

   Every .modal-header in the my-hz theme is the navy gradient
   (linear-gradient(135deg,#0a1525,#1a2f4a)) with a white title --
   measured across all 14 headers on tour-package-details. BS5's
   .btn-close paints a BLACK svg at opacity .5, so on every one of
   them the x was invisible (Child Fare Policy, entry-package
   inclusions, passenger-select, …). Swap in the white glyph and
   give it the same round chip .bb-tent-modal-close uses in the DNA.
============================================================ */
.modal-header .btn-close{
  width:32px;height:32px;padding:0;margin:0 0 0 auto;
  opacity:1;border:0;border-radius:50%;
  background-color:rgba(255,255,255,.18);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:center;background-size:11px 11px;
  transition:background-color .16s,transform .16s;
}
.modal-header .btn-close:hover{background-color:rgba(255,255,255,.34);transform:rotate(90deg);}
.modal-header .btn-close:focus{box-shadow:0 0 0 3px rgba(255,255,255,.28);}
/* the legacy BS4 markup (button.close with a literal ×) shows up in a few
   CI3 modals -- same chip treatment so both generations match */
.modal-header button.close{
  width:32px;height:32px;padding:0;margin:0 0 0 auto;
  opacity:1;border:0;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;
  font-size:19px;line-height:1;text-shadow:none;
  transition:background-color .16s,transform .16s;
}
.modal-header button.close:hover{background:rgba(255,255,255,.34);transform:rotate(90deg);}

/* ------------------------------------------------------------
   Entry-package card: "+ Inclusions" and "Book Now" sit in the
   same flex row but were 38px and 44px tall. Match them.
------------------------------------------------------------ */
.bb-pkg-body .bb-tbr-toggle,
.bb-pkg-body .bb-tbr-book-btn{min-height:44px;}

/* ============ Package switch tabs (Car Package / Bus Package / IRCTC ...) ============
   .bb-tbr-linktabs was put on the markup but never given any styles, so the
   tabs fell straight through to Bootstrap's raw .nav-pills default: a #0d6efd
   blue slab for the active one, plain link blue for the rest, flush left.
   Rebuilt as a centred segmented control on the brand palette. Teal for the
   active pill rather than orange, so it does not compete with the orange
   Book Now / step-1 markers directly below it.
   Labels come from the DB (inter_linking_tab_name), so nothing here assumes a
   particular word or tab count. */
.bb-tbr-linktabs{
  width:-moz-fit-content;width:fit-content;max-width:100%;
  margin:0 auto 12px;
  display:flex;gap:4px;padding:4px;
  list-style:none;
  background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;
  /* 3+ tabs on a phone must still be reachable. `safe center` centres while
     there is room but falls back to flex-start once it overflows -- plain
     `center` would push the first tab into unreachable negative scroll. */
  overflow-x:auto;justify-content:safe center;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.bb-tbr-linktabs::-webkit-scrollbar{display:none;}
.bb-tbr-linktabs .nav-item{flex:0 0 auto;list-style:none;}
.bb-tbr-linktabs .nav-link{
  display:block;white-space:nowrap;
  padding:8px 18px;border:0;border-radius:999px;
  font-size:13px;font-weight:700;line-height:1.25;
  color:#475569;background:transparent;text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.bb-tbr-linktabs .nav-link:hover{background:#e2e8f0;color:#0f172a;}
/* one notch more specific than Bootstrap's .nav-pills .nav-link.active so the
   win does not depend on stylesheet order */
ul.bb-tbr-linktabs .nav-link.active{
  background:linear-gradient(135deg,#14b8a6,#0f766e);
  color:#fff;
  box-shadow:0 4px 10px -3px rgba(13,148,136,.5);
}
/* inactive labels are wrapped in this span, which carries its own link colour */
.bb-tbr-linktabs .inter-linking-tab{color:inherit;font:inherit;}
/* legacy corner helpers would square off the pill */
.bb-tbr-linktabs .bdrtpl1,.bb-tbr-linktabs .bdrtpr1{border-radius:999px!important;}

/* ============ Header logo: give DESKTOP an explicit height ============
   style.css sets a global `img{height:auto}`, which outranks the markup's
   height="44" (CSS always beats a presentational attribute). Every .bb-logo-img
   height rule lives inside a mobile media query (<=991.98px), so above that the
   logo fell back to its INTRINSIC size -- fine while the file happened to be
   167x59, but a retina-resolution logo then painted at full size across the
   header. Pin the desktop height so the header no longer depends on how many
   pixels the logo file happens to contain.
   Scoped to min-width:992px on purpose: this sheet loads after ci-overrides.css,
   so an unscoped rule would clobber the 44px/34px mobile sizes. */
@media (min-width:992px){
  .bb-logo-img{height:50px!important;width:auto!important;}
}

/* ============ Section headings: 2-colour title + curved divider ============
   Every .bb-section-head across the site (Popular Packages, Trending, Why
   BestBus, ...) shares .bb-section-title + .bb-section-divider, so this restyles
   all of them at once.
   1) Title gets a two-tone brand gradient (teal -> orange, our primary +
      secondary). -webkit-text-fill-color wins over the earlier `color` !important,
      so the clip works; `color` stays set as a no-clip fallback.
   2) The flat 56x4 orange bar becomes an SVG mark: one big curved stroke
      (orange gradient) with a short teal line beneath it -- the "big line +
      small line" the design called for, drawn as a swoosh so it is not a plain
      rule. */
/* Applies to any section heading -- .bb-section-title AND the tour-packages
   page's own .bb-tpc-origin-title ("Available From These Origin Cities"), which
   is the same kind of centred section heading under a different class. */
/* Match the section heading by POSITION, not class: any h1-h4 that is the direct
   heading of a section-head container. This is class-agnostic, so hotels, tours,
   content pages -- every page's section heading -- gets the same treatment
   without listing each bespoke title class. */
[class*="bb-section-head"] > h1,
[class*="bb-section-head"] > h2,
[class*="bb-section-head"] > h3,
[class*="bb-section-head"] > h4{
  /* two clearly-readable brand tones: orange holds the LEFT half, teal the
     RIGHT half, blend near centre so BOTH colours register. */
  background:linear-gradient(100deg,#f97316 0%,#f97316 40%,#0d9488 62%,#0d9488 100%);
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:#ea580c!important;                /* fallback where background-clip:text is unsupported */
  letter-spacing:-.4px;
  /* underline must be HALF the heading's own width; the text varies per section,
     so shrink the title to its text (fit-content, still block-level so it never
     flows next to the eyebrow) and hang the mark off it as ::after at width:50%. */
  width:-moz-fit-content;width:fit-content;max-width:100%;
  margin-left:auto!important;margin-right:auto!important;
  position:relative;padding-bottom:22px!important;margin-bottom:6px!important;
}
[class*="bb-section-head"] > h1::after,
[class*="bb-section-head"] > h2::after,
[class*="bb-section-head"] > h3::after,
[class*="bb-section-head"] > h4::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:50%;height:16px;
  /* hand-drawn tapered double stroke (bold orange over thin teal); the shape is
     stretch-tolerant (preserveAspectRatio none) so it stays a clean brush at
     any heading width. */
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%2020'%20preserveAspectRatio='none'%20fill='none'%3E%3Cdefs%3E%3ClinearGradient%20id='mhzo'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fb923c'/%3E%3Cstop%20offset='.5'%20stop-color='%23f97316'/%3E%3Cstop%20offset='1'%20stop-color='%23ea580c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M7%208.5%20Q53%203%2098%206%20Q126%207.4%20144%206.4%20Q126%2011.4%2098%209.4%20Q53%208%207%208.5%20Z'%20fill='url(%23mhzo)'/%3E%3Cpath%20d='M31%2014.6%20Q66%2012%2098%2013.6%20Q119%2014.5%20134%2013.8%20Q119%2016.4%2098%2015.3%20Q66%2014.4%2031%2014.6%20Z'%20fill='%230d9488'%20opacity='.92'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* the old fixed-width divider div is now redundant */
[class*="bb-section-head"] .bb-section-divider{display:none!important;}

/* Hotels pages carry bespoke heading classes (no section-head container), so the
   generic rule above misses them -- opt the real hotel section headings in. */
.bb-htll-desc-title,
.bb-htl-h3{
  background:linear-gradient(100deg,#f97316 0%,#f97316 40%,#0d9488 62%,#0d9488 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:#ea580c!important;letter-spacing:-.3px;
  width:-moz-fit-content;width:fit-content;max-width:100%;
  margin-left:auto!important;margin-right:auto!important;
  position:relative;padding-bottom:22px!important;margin-bottom:8px!important;
  border-bottom:0!important;              /* drop .bb-htll-desc-title's old 2px orange rule */
}
.bb-htll-desc-title::after,
.bb-htl-h3::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:50%;height:16px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%2020'%20preserveAspectRatio='none'%20fill='none'%3E%3Cdefs%3E%3ClinearGradient%20id='mhzo'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fb923c'/%3E%3Cstop%20offset='.5'%20stop-color='%23f97316'/%3E%3Cstop%20offset='1'%20stop-color='%23ea580c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M7%208.5%20Q53%203%2098%206%20Q126%207.4%20144%206.4%20Q126%2011.4%2098%209.4%20Q53%208%207%208.5%20Z'%20fill='url(%23mhzo)'/%3E%3Cpath%20d='M31%2014.6%20Q66%2012%2098%2013.6%20Q119%2014.5%20134%2013.8%20Q119%2016.4%2098%2015.3%20Q66%2014.4%2031%2014.6%20Z'%20fill='%230d9488'%20opacity='.92'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* keep the bed/gift icon out of the gradient clip */
.bb-htl-h3 > i{-webkit-text-fill-color:#f97316!important;margin-right:6px;}
/* the instruction that used to sit INSIDE the h3 (which pushed the underline
   below it) is now a sibling, placed under the underline like a section sub */
.bb-htl-h3-sub{
  text-align:center;color:#64748b;font-size:12.5px;font-weight:600;
  margin:-2px 0 14px;line-height:1.4;
}

/* ============ Tour category card -- premium restyle (CSS only) ============
   Every field/concept kept exactly (photo, "Tour" badge, title, N Operators,
   Starting-from price, View Packages CTA); only the styling is elevated. One
   class, so all category grids get it. */
.bb-tour-card{
  border-radius:20px!important;
  border:1px solid #eef1f6!important;
  box-shadow:0 6px 20px -12px rgba(15,23,42,.25)!important;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .28s!important;
}
.bb-tour-card:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 26px 44px -20px rgba(234,88,12,.36)!important;
  border-color:rgba(249,115,22,.35)!important;
}
/* photo: a touch taller + a richer bottom scrim so badge/photo pop */
.bb-tour-img{height:188px!important;}
.bb-tour-img--photo::after{
  background:linear-gradient(180deg,rgba(2,6,23,0) 44%,rgba(2,6,23,.42) 100%)!important;
}
/* frosted-glass "Tour" badge with a live dot */
.bb-tour-badge{
  top:14px!important;left:14px!important;
  display:inline-flex!important;align-items:center;gap:6px;
  background:rgba(255,255,255,.82)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#ea580c!important;font-weight:800!important;font-size:11px!important;
  padding:5px 11px 5px 9px!important;border-radius:999px!important;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4)!important;text-transform:uppercase;letter-spacing:.3px;
}
.bb-tour-badge::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.22);
}
/* body */
.bb-tour-body{padding:15px 18px 18px!important;gap:12px!important;}
.bb-tour-name{
  font-size:16px!important;line-height:1.32!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.64em;                       /* keeps 1- and 2-line cards aligned in the grid */
}
/* operators: soft brand chip instead of the dashed rails */
.bb-tour-stats{
  border:0!important;padding:0!important;justify-content:flex-start!important;
}
.bb-tour-stats span{
  background:#fff7ed;border:1px solid #fed7aa;
  color:#9a3412;font-weight:700;font-size:11.5px;
  padding:5px 11px;border-radius:999px;
}
.bb-tour-stats i{color:#f97316!important;}
/* foot: hairline rule, gradient price, pill CTA */
.bb-tour-foot{padding-top:14px!important;border-top:1px solid #f1f5f9;gap:10px;}
.bb-tour-foot small{font-size:10px!important;color:#94a3b8!important;font-weight:700!important;}
.bb-tour-foot strong{
  font-size:23px!important;
  background:linear-gradient(90deg,#f97316,#ea580c);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#ea580c;
}
.bb-tour-cta{
  background:linear-gradient(135deg,#f97316,#ea580c)!important;
  color:#fff!important;font-size:12.5px!important;font-weight:800!important;
  padding:9px 14px!important;border-radius:999px!important;white-space:nowrap;
  box-shadow:0 10px 18px -8px rgba(234,88,12,.6);
  transition:gap .2s,transform .2s,box-shadow .2s!important;
}
.bb-tour-card:hover .bb-tour-cta{
  gap:9px!important;transform:translateY(-1px);
  box-shadow:0 14px 22px -8px rgba(234,88,12,.72);
}

/* ============ Package listing card (.bb-pkg-card) -- same premium look ============
   The category-grid card carries more fields than the homepage tour card (a
   transport-type badge, a duration/PID meta row, an amenities strip, Book Now),
   so it gets the same shell + finishes with every field kept. */
.bb-pkg-card{
  border-radius:20px!important;
  border:1px solid #eef1f6!important;
  box-shadow:0 6px 20px -12px rgba(15,23,42,.25)!important;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .28s!important;
}
.bb-pkg-card:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 26px 44px -20px rgba(234,88,12,.36)!important;
  border-color:rgba(249,115,22,.35)!important;
}
/* photo: richer bottom scrim so the type badge reads on any image */
.bb-pkg-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,23,0) 46%,rgba(2,6,23,.36) 100%);
}
/* type badge -> frosted-glass pill; the transport TYPE stays encoded, now as
   the icon+text colour instead of a solid slab */
.bb-pkg-vbadge{
  top:14px!important;right:14px!important;
  background:rgba(255,255,255,.86)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#334155!important;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4)!important;
  font-size:10.5px!important;padding:5px 11px!important;
}
.bb-pkg-vbadge--bus i,.bb-pkg-vbadge--bus{color:#1d4ed8!important;}
.bb-pkg-vbadge--car i,.bb-pkg-vbadge--car{color:#c2410c!important;}
.bb-pkg-vbadge--flight i,.bb-pkg-vbadge--flight{color:#0369a1!important;}
.bb-pkg-vbadge--train i,.bb-pkg-vbadge--train{color:#047857!important;}
.bb-pkg-vbadge--entry i,.bb-pkg-vbadge--entry{color:#b91c1c!important;}
/* body */
.bb-pkg-body{padding:15px 17px 17px!important;gap:11px!important;}
.bb-pkg-name{
  font-size:15.5px!important;line-height:1.32!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.64em!important;
}
/* meta: drop the dashed rails for a clean muted row */
.bb-pkg-meta{
  border:0!important;padding:0!important;gap:12px!important;
  font-size:11.5px!important;color:#64748b!important;
}
.bb-pkg-meta i{color:#f97316!important;}
/* amenities: soft rounded tiles */
.bb-pkg-amen li{
  width:29px!important;height:29px!important;border-radius:9px!important;
  background:#fff7ed!important;border:1px solid #fed7aa;color:#f97316!important;
}
/* foot: hairline rule, gradient price, pill CTA with hover lift */
.bb-pkg-foot{padding-top:13px!important;border-top:1px solid #f1f5f9;gap:10px;}
.bb-pkg-foot small{font-size:10px!important;color:#94a3b8!important;}
.bb-pkg-foot strong{
  font-size:22px!important;
  background:linear-gradient(90deg,#f97316,#ea580c);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#ea580c;
}
.bb-pkg-cta{
  padding:9px 14px!important;border-radius:999px!important;font-weight:800!important;
  box-shadow:0 10px 18px -8px rgba(234,88,12,.6)!important;
  transition:gap .2s,transform .2s,box-shadow .2s!important;
}
.bb-pkg-card:hover .bb-pkg-cta{
  gap:9px!important;transform:translateY(-1px);
  box-shadow:0 14px 22px -8px rgba(234,88,12,.72)!important;
}
/* keep the secondary CTA variants' own hues on hover */
.bb-pkg-cta--enq{box-shadow:0 10px 18px -8px rgba(13,148,136,.55)!important;}
.bb-pkg-cta--ext{box-shadow:0 10px 18px -8px rgba(14,165,233,.5)!important;}

/* Empty state ("Oops! No Buses found") -- Change Date button alignment.
   style.css has a blanket `.bb-tbr-empty i{font-size:48px;display:block}` meant
   for the leading frown, but it also caught the <i class="fa fa-edit"> INSIDE
   the button, stacking a 48px block pencil above the label. Combined with the
   phone rule `.bb-tbr-book-btn{width:100%}` the CTA became a full-bleed slab.
   Keep the frown big, put the button's own icon back inline, size the CTA to
   its text and let .bb-tbr-empty-actions (flex, centered) place it. */
.bb-tbr-empty a i,
.bb-tbr-empty button i{
  font-size:inherit;color:inherit;display:inline-block;margin:0;line-height:1;
}
.bb-tbr-empty .bb-tbr-book-btn{
  width:auto;justify-content:center;min-height:44px;
}
.bb-tbr-empty .bb-tbr-book-btn b{
  display:inline-flex;align-items:center;gap:8px;
}
/* the copy under the heading is a <span class="error1">, so .bb-tbr-empty p
   never applied -- give it the muted paragraph treatment it was meant to have */
.bb-tbr-empty .error1{
  display:block;color:var(--bb-text-muted);font-size:13.5px;
  margin:0 auto 18px;max-width:38ch;line-height:1.5;
}

/* ============ Fare summary: the "pay the balance later" note ============
   Shipped as a bare <span class="mb-2 text-danger">, so it rendered as loose
   centre-aligned red text hanging under the DISTANCE CHARGES row -- easy to
   read as an error rather than the payment instruction it is. Same words,
   promoted to a proper callout: amber "action needed" tint, accent rail, and
   an icon badge that reflects WHICH instruction it is (pay the driver at
   boarding vs pay in advance). Text is untouched. */
.bb-tpx-paynote{
  display:flex;align-items:flex-start;gap:10px;
  margin:12px 0 4px;padding:11px 13px;
  background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;
  border-radius:10px;
  color:#78350f!important;                 /* .text-danger red -> readable amber-brown */
  font-size:12.5px;font-weight:600;line-height:1.5;text-align:left;
}
.bb-tpx-paynote::before{
  flex:0 0 26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#f59e0b;color:#fff;border-radius:50%;
  font-family:"Font Awesome 5 Free";font-weight:900;font-size:12px;
  line-height:1;
}
/* glyphs verified present in the loaded "Font Awesome 5 Free" 900 face */
.bb-tpx-paynote--driver::before{content:"\f1b9";}   /* fa-car: hand it to the driver */
.bb-tpx-paynote--advance::before{content:"\f133";}  /* fa-calendar: pay N days ahead */

/* ------------------------------------------------------------
   "Skip Transportation" was raw .btn.btn-success -- plain
   bootstrap green, 6px radius, no theme. The DNA's equivalent
   alternate CTA is .bb-tbr-book-btn--alt (secondary gradient),
   so give it that language.
------------------------------------------------------------ */
a.movenext.btn-success,
button.movenext.btn-success{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px!important;
  background:linear-gradient(135deg,var(--bb-secondary,#0d9488),var(--bb-secondary-dark,#134e4a))!important;
  border:0!important;border-radius:12px!important;
  color:#fff!important;font-size:14px!important;font-weight:800!important;letter-spacing:.2px;
  box-shadow:0 8px 18px -4px rgba(13,148,136,.45);
  transition:transform .14s,box-shadow .14s;
}
a.movenext.btn-success:hover,
button.movenext.btn-success:hover{
  transform:translateY(-1px);box-shadow:0 10px 22px -4px rgba(13,148,136,.55);
}
a.movenext.btn-success:active,
button.movenext.btn-success:active{transform:scale(.985);}

/* ============================================================
   "Package Full Details" panel (openentry() inline block).

   The DNA (tour-booking-entry.html #bbTentInclModal) presents this
   as a rounded modal card: light-blue head, a 4-up tab strip, then
   the pane. CI3 renders the same content INLINE via openentry(),
   and the conversion bolted the DNA classes onto bootstrap's
   nav-tabs markup -- so three things broke:
     - the .panel had no card treatment, so the blue head ran the
       full page width as a flat strip
     - .bb-tent-modal-tabs is a 4-col grid, but its children are
       <li class="nav-item"> wrappers, so the <a> tabs were not the
       grid items -- display:contents flattens them back
     - CI3 marks the open tab `.active`, the DNA styles `.is-active`,
       so the selected tab never highlighted
   Kept inline (openentry() untouched); only the look is restored.
============================================================ */
.panel:has(> #more_abt1.bb-tent-modal-head),
.panel:has(> .bb-tent-modal-head){
  background:#fff;border:1px solid var(--bb-border-light,#e2e8f0);
  border-radius:14px;overflow:hidden;
  box-shadow:0 10px 30px -12px rgba(10,21,37,.18);
  margin-bottom:16px!important;
}
/* the collapse chevron rides in the head, not as a bare sliver above it */
.panel:has(> .bb-tent-modal-head) > .layout52{
  position:relative;height:0;margin:0!important;z-index:3;
}
/* Identical to .modal-header .btn-close: the Font Awesome "times" glyph
   renders only 9x13 at 13px, which read as a thin undersized mark inside
   the 32px chip. Use the same 11px square white SVG every other close
   button on the theme uses, and hide the CI3 chevron <i>. */
.panel:has(> .bb-tent-modal-head) > .layout52 > a.seat8{
  position:absolute;top:13px;right:14px;
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background-color:rgba(255,255,255,.18);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:center;background-size:11px 11px;
  transition:background-color .16s,transform .16s;
}
.panel:has(> .bb-tent-modal-head) > .layout52 > a.seat8:hover{
  background-color:rgba(255,255,255,.34);transform:rotate(90deg);
}
.panel:has(> .bb-tent-modal-head) > .layout52 > a.seat8 .arrowdouble{display:none!important;}

.bb-tent-modal-head--light{padding:16px 20px;text-align:center;}

/* tab strip: flatten the <li> wrappers so the <a>s become the grid items */
.nav-tabs.bb-tent-modal-tabs{
  /* one scrollable row instead of the DNA 4-up grid: the labels wrapped to
     two rows at phone width. Arrows are injected by script.js. */
  display:flex!important;flex-wrap:nowrap!important;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-bottom:1px solid var(--bb-border-light,#e2e8f0)!important;
  margin:0!important;padding:0!important;
}
.nav-tabs.bb-tent-modal-tabs::-webkit-scrollbar{display:none;}
.nav-tabs.bb-tent-modal-tabs > li.nav-item{display:contents;}
.nav-tabs.bb-tent-modal-tabs > li.nav-item > a.bb-tent-modal-tab,
a.nav-link.bb-tent-modal-tab{
  display:flex!important;align-items:center;justify-content:center;gap:7px;
  background:#fff;color:#475569;
  border:0!important;border-radius:0!important;
  border-bottom:3px solid transparent!important;
  padding:13px 14px!important;font-size:12.5px;font-weight:700;
  margin:0!important;transition:all .15s;
  flex:0 0 auto;white-space:nowrap;
}
a.nav-link.bb-tent-modal-tab:hover{color:#0f172a;background:#f8fafc;}
/* CI3 writes .active / .show; the DNA styles .is-active -- accept both.
   The long form has to be repeated: the base rule above is (0,4,3), so a
   short `a.nav-link.bb-tent-modal-tab.active` (0,3,1) loses to it and the
   selected tab stayed grey. */
.nav-tabs.bb-tent-modal-tabs > li.nav-item > a.bb-tent-modal-tab.active,
.nav-tabs.bb-tent-modal-tabs > li.nav-item > a.bb-tent-modal-tab.is-active,
a.nav-link.bb-tent-modal-tab.active,
a.nav-link.bb-tent-modal-tab.is-active{
  color:#1e40af!important;background:#eff6ff!important;
  border-bottom-color:#1e40af!important;
}
a.nav-link.bb-tent-modal-tab i{font-size:11px;}

@media (max-width:767.98px){
  .nav-tabs.bb-tent-modal-tabs > li.nav-item > a.bb-tent-modal-tab,
  a.nav-link.bb-tent-modal-tab{padding:11px 12px!important;font-size:11.5px;gap:5px;}
}

/* The entry-package AJAX partial injects its panes wrapped in
   #myTabContent.bb-tbr-vcard-panels. That class is the collapsible
   vehicle-card body, which style.css:4518 hides until `.is-open` --
   so the Inclusions/Exclusions/Terms/Cancellation content loaded but
   never showed. Here it is the tab body, not a collapsible. */
.bb-tent-modal-body > .bb-tbr-vcard-panels{display:block;}
.bb-tent-modal-body{max-height:min(58vh,460px);}

/* ============================================================
   Package Full Details, presented as the DNA's modal popup.

   bb-modal-enhance.js re-creates the #shadowbg element that CI3's
   openentry() already shows/hides; these rules turn that pair into
   a centred modal. #accordiona is display:none until CI3 slides it
   open, so none of this applies on a closed page.
============================================================ */
#shadowbg.bb-tent-backdrop{
  display:none;position:fixed;inset:0;z-index:1050;
  background:rgba(10,21,37,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
#accordiona:has(.bb-tent-modal-head){
  position:fixed;z-index:1060;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(920px,calc(100vw - 32px));
  max-height:min(88vh,780px);
  margin:0!important;padding:0!important;
  background:transparent;border:0;overflow:visible;
}
#accordiona:has(.bb-tent-modal-head) .panel{margin-bottom:0!important;}
@media (max-width:767.98px){
  #accordiona:has(.bb-tent-modal-head){
    width:calc(100vw - 24px);max-height:86vh;
  }
}

/* ============================================================
   Bootstrap 4 -> 5 artifact: .input-group-prepend / -append.

   BS5 dropped these wrappers, so the CI3 markup
     <div class="input-group">
       <div class="input-group-prepend"><span class="input-group-text">..
       <select class="custom-select">
   has an unstyled block <div> as its first flex child. Measured in
   #select-entry-package: prepend 25x24 at y293, select 326x43 at
   y317 -- the icon wrapped onto its own line ABOVE the field and
   read as a stray floating icon. Restore the BS4 behaviour.
============================================================ */
.input-group:has(> .input-group-prepend),
.input-group:has(> .input-group-append){flex-wrap:nowrap;}
.input-group > .input-group-prepend,
.input-group > .input-group-append{display:flex;flex:0 0 auto;align-items:stretch;}
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .input-group-text{
  display:inline-flex;align-items:center;justify-content:center;
  height:auto;white-space:nowrap;
}
.input-group > select,
.input-group > select.custom-select,
.input-group > input.form-control{flex:1 1 auto;width:1%;min-width:0;}

/* the pax fields read as one control: icon chip fused to the select */
.bb-tent-modal-pax-field > .input-group-prepend > .bb-tent-modal-pax-ico{
  min-width:46px;padding:0 10px;
  background:var(--bb-primary-soft,#fff7ed);
  border:1px solid var(--bb-border-light,#e2e8f0);border-right:0;
  border-radius:10px 0 0 10px;
}
.bb-tent-modal-pax-field > select{border-radius:0 10px 10px 0!important;}

/* ------------------------------------------------------------
   Modal title vs close button.

   The CI3 title carries bootstrap grid classes -- .modal-title
   .col-10 .offset-1 -- inside a flex .modal-header. 83.3% width
   plus an 8.3% offset left no room for the close chip: measured
   title 39->337 against a close button starting at 330, i.e. a 7px
   collision. Let the title just be the flex child it should be.
------------------------------------------------------------ */
.modal-header .modal-title{
  flex:1 1 auto;width:auto;max-width:none;min-width:0;
  margin-left:0!important;margin-right:0!important;
  padding-right:10px;
}
.modal-header.bb-tent-modal-head{padding:12px 14px!important;}

/* The close chip is position:absolute (right:5px), so it is out of the
   header's flex flow and simply paints over the title's right end --
   the title still measured the full 330px. Reserve the chip's width on
   BOTH sides so the centred title stays centred and clears it. */
.modal-header .modal-title{padding-left:44px;padding-right:44px;}

/* The child-height-rules block also carries `input-group` (CI3 reuses the
   class as a layout hook), so it must stack title-over-list, not sit on
   one row. Explicit, since the generic input-group rule no longer
   applies to it. */
.bb-tent-modal-childrules{flex-direction:column;align-items:stretch;}
.bb-tent-modal-childrules > ul{margin:0;padding-left:0;list-style:none;}
.bb-tent-modal-childrules > ul > li{display:flex;align-items:flex-start;gap:8px;margin:0 0 5px;}

/* ============================================================
   Modal stacking: the dialog layer must sit above page chrome.

   entry-packages.php (and ~6 sibling views) ship an inline
   <style> with `.modal-backdrop{z-index:0}` -- legacy CI3. Being
   inline it also wins on document order. Measured with
   #select-entry-package open: backdrop computed z-index 0, while
   the sticky CTA bar (z60), mobile nav (z90), back-to-top and
   WhatsApp floats (z95) and the Package-Details strip (z100) all
   painted straight over the dim. That is the overlap.

   Restore bootstrap's own layering so the backdrop covers every
   chrome layer and they stop being clickable behind the dialog.
============================================================ */
.modal-backdrop{z-index:1050!important;}
.modal{z-index:1055!important;}

/* ------------------------------------------------------------
   Package Full Details: no open-then-close flash on page load.

   The panel was hidden in JS at DOMContentLoaded, but the CSS
   already makes it a fixed centred card -- so it PAINTED as an
   open modal first. Sampled on load: display:block / 688px tall
   from t=520ms (readyState "loading") until the JS hid it at
   t=770ms. Hide it in CSS instead so it never paints; jQuery's
   slideToggle still opens it (a CSS-hidden node is :visible=false,
   so the first toggle slides down).
------------------------------------------------------------ */
#accordiona:has(.bb-tent-modal-head){display:none;}

/* ============================================================
   #accordion2 -- the boarding/dropping/policy bottom sheet that
   ships INSIDE .modal-content of #select-entry-package.

   Removed on request. It duplicated content already reachable from
   the "+ Inclusions" button (the Package Full Details modal), and its
   inline position:fixed tore it out of the dialog: as a child of
   .modal-content it inherits the modal stacking context (z1055), so it
   painted above the 1050 backdrop and pinned its collapsed strip to the
   viewport bottom, over the mobile nav and the sticky CTA bar.

   Same treatment the Book-Now modal already gets at
   #select-bus-direct-agent #accordion2 above.
============================================================ */
.modal-content > #accordion2{display:none!important;}

/* ============================================================
   Entry-package modal: Total Amount + fare break-up.

   Changing Adults/Child calls get_entry_fare_details(), which flips
   #pricedata from display:none to block -- but the fare block is
   `.round-trip-fare.fixed-bottom`, position:fixed z-index:1030. Two
   consequences measured in #select-entry-package:
     - it escapes the dialog and pins to the viewport bottom (y793,
       19px tall), so it is not part of the modal at all
     - z1030 sits UNDER the 1050 backdrop, so once the backdrop was
       restored to bootstrap's default it disappeared behind the dim.
       That is a regression from the stacking fix, called out here.
   And #pricedemo (the break-up itself) is a .collapse whose only
   trigger is the .layout52 chevron, which renders 0-height.

   Same treatment #select-bus-direct-agent already gets in
   ci-overrides.css:705 -- dock the fare block inside the dialog and
   turn the chevron into a "Fare break-up" chip. priceacc() untouched.
============================================================ */
#select-entry-package #pricedata .round-trip-fare.fixed-bottom{
  position:static!important;bottom:auto!important;z-index:auto!important;
  width:auto!important;
  background:linear-gradient(#f8fafc,#f1f5f9)!important;
  border:1px solid #e8edf3!important;border-radius:14px!important;
  padding:12px 14px!important;margin:10px 0 0!important;
}
#select-entry-package #pricedata .layout52{
  display:block!important;position:relative;z-index:2;text-align:center;
}
#select-entry-package #pricedata a#priceaccid{
  display:inline-flex!important;align-items:center;justify-content:center;gap:7px;
  min-height:32px;padding:0 14px;border-radius:999px;
  background:#fff;border:1px solid var(--bb-border-light,#f1f5f9);
  box-shadow:0 3px 10px rgba(10,21,37,.10);
  color:var(--bb-primary,#f97316);font-size:12px;font-weight:800;
}
#select-entry-package #pricedata a#priceaccid::before{content:"Fare break-up";}
#select-entry-package #pricedata a#priceaccid .arrowdouble{font-size:12px;background:none!important;color:inherit!important;}
#select-entry-package #pricedemo.collapse.show{
  display:block!important;background:#fff;
  border:1px solid var(--bb-border-light,#f1f5f9);
  border-radius:12px;padding:10px 14px;margin:10px 0 0;
}

/* ============================================================
   "Skip Transportation" bottom bar (.fixedfooterabc).

   ci-overrides.css:491 gave it the dark background but never a text
   colour, so the two CI3 note spans inherited #1a202c on a #0a1525
   bar -- "Transportation is not needed? / Click 'Skip Transportation'"
   was there all along, just invisible. Give it the same gradient and
   white-on-dark language as the next page's .bb-tpx-tripbar, and
   compact it (was 118px tall on a 375 viewport).
============================================================ */
.bb-tbr-corecol .fixedfooterabc{
  background:linear-gradient(135deg,#134e4a 0%,#0f172a 100%)!important;
  border-top:0!important;
  box-shadow:0 -8px 24px -10px rgba(15,23,42,.45)!important;
  padding:10px 14px!important;
}
.bb-tbr-corecol .fixedfooterabc,
.bb-tbr-corecol .fixedfooterabc span{color:#fff!important;}
.bb-tbr-corecol .fixedfooterabc .row.f1p{
  margin:0!important;align-items:center;
}
.bb-tbr-corecol .fixedfooterabc .selectedbus{
  font-size:12px;line-height:1.45;color:rgba(255,255,255,.9)!important;
}
.bb-tbr-corecol .fixedfooterabc .selectedbus span{font-size:12px;}
/* the markup pads itself out with <br> + empty spans -- collapse them */
.bb-tbr-corecol .fixedfooterabc .selectedbus br,
.bb-tbr-corecol .fixedfooterabc .selectedbus span:empty,
.bb-tbr-corecol .fixedfooterabc .selectedbus .pls{display:none!important;}
.bb-tbr-corecol .fixedfooterabc .selectedbus > span:first-of-type{
  display:block;font-weight:800;color:#fff!important;
}
.bb-tbr-corecol .fixedfooterabc [class*="col-"]{padding-left:0!important;padding-right:0!important;}
.bb-tbr-corecol .fixedfooterabc .mt-1{margin-top:6px!important;}

/* ============================================================
   Bus Transportation / Entry Tickets mode pills on one line.

   .bb-tbr-modetabs is flex-wrap:wrap and the two pills measured
   186 + 198 = 384px inside a 343px row at 375 viewport, so the
   second dropped to its own line. Split the row evenly instead.
============================================================ */
@media (max-width:767.98px){
  .bb-tbr-modetabs,
  ul.nav-pills.bb-tbr-modetabs,
  ul.nav-pills.outstation{flex-wrap:nowrap!important;gap:8px;}
  .bb-tbr-modetabs > .nav-item,
  ul.nav-pills.outstation > .nav-item{flex:1 1 0;min-width:0;}
  .bb-tbr-modetabs > .nav-item > .nav-link,
  ul.nav-pills.outstation > .nav-item > .nav-link{
    width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 6px!important;font-size:11.5px!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .bb-tbr-modetabs > .nav-item > .nav-link i,
  ul.nav-pills.outstation > .nav-item > .nav-link i{font-size:11px;flex:0 0 auto;}
  /* this page wraps its label in <b class="fontentry"> */
  ul.nav-pills.outstation .fontentry{font-size:11.5px!important;white-space:nowrap;}
}

/* ------------------------------------------------------------
   Entry-package modal: dead band under "Total Amount".

   Measured: the Total Amount row carries bootstrap's mb-20, the
   fare card adds 12px bottom padding, and the Proceed block below
   adds margin-top:10px + 12px padding -- ~45px of stacked empty
   space between the figure and the button. Tighten the seam.
------------------------------------------------------------ */
#select-entry-package #pricedata .round-trip-fare.fixed-bottom{
  padding-bottom:8px!important;
}
#select-entry-package #pricedata .row.mb-20{margin-bottom:0!important;}
#select-entry-package #pricedata .round-trip-fare.text-center{
  margin-top:6px!important;padding-top:6px!important;padding-bottom:10px!important;
}

/* the CI3 markup carries .text-light (#f8f9fa) on this fare card -- fine on the
   old dark bar, invisible now that the card is light. Re-ink it. */
#select-entry-package #pricedata .round-trip-fare.fixed-bottom,
#select-entry-package #pricedata .round-trip-fare.fixed-bottom [class*="col-"]{
  color:var(--bb-text,#0a1525)!important;
}
#select-entry-package #pricedata .round-trip-fare.fixed-bottom .row [class*="col-"]:first-child{
  font-weight:700;
}
#select-entry-package #pricedata .round-trip-fare.fixed-bottom .row [class*="col-"]:last-child{
  font-weight:800;font-size:16px;color:var(--bb-primary,#f97316)!important;
}

/* ============================================================
   Book-Now passenger modal height (#select-bus-direct-agent).

   Measured at 375x812: card 738px -- nearly full screen. Budget was
   header 135 + two 124px pax fields (33px of label stack each) +
   67px child-rules note + 91px total block. Trim the padding/label
   stack rather than removing anything; every line still reads.
============================================================ */
#select-bus-direct-agent .bb-tbr-modal-count-label{margin-bottom:4px!important;}
#select-bus-direct-agent .bb-tbr-modal-count-label strong{font-size:13px;line-height:1.3;}
#select-bus-direct-agent .bb-tbr-modal-count-label small{font-size:11px;margin-top:1px!important;line-height:1.3;}
#select-bus-direct-agent .bb-tent-modal-pax > .form-group{padding:9px 10px!important;}
#select-bus-direct-agent .bb-tbr-modal-select,
#select-bus-direct-agent select.custom-select{
  height:40px!important;min-height:40px!important;padding-top:7px!important;padding-bottom:7px!important;
}
/* child-fare note + estimated-total block */
#select-bus-direct-agent .bb-tent-modal-pax span.red{padding:9px 12px!important;font-size:11.5px;line-height:1.45;}
#select-bus-direct-agent .bb-tbr-modal-total{padding:10px 12px!important;}
#select-bus-direct-agent .bb-tbr-modal-total-note{margin-top:4px!important;font-size:11px;line-height:1.35;}
#select-bus-direct-agent .modal-body{padding:10px 12px!important;}
#select-bus-direct-agent header.section-header h4{margin-bottom:8px!important;}
/* vehicle-summary header */
#select-bus-direct-agent .modal-header.bb-tbr-modal-vsum{padding:10px 12px!important;}

/* second pass -- the two biggest remaining blocks:
   - the count label stacked strong-over-small (33px each); one line reads the
     same and halves it
   - the vsum title's .layout1 rows measured 32px each for a single line of
     12px text (double leading) */
#select-bus-direct-agent .bb-tbr-modal-count-label{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 7px;
}
#select-bus-direct-agent .bb-tbr-modal-count-label small{margin-top:0!important;}
#select-bus-direct-agent .modal-title .layout1{
  line-height:1.35!important;margin:0!important;
}
#select-bus-direct-agent .modal-title{padding-top:0!important;padding-bottom:0!important;}
#select-bus-direct-agent .bb-tbr-modal-vsum-rate{margin-top:2px!important;padding-top:2px!important;}

/* third pass -- the modal still measured 883px on an 812px phone (overflowed).
   The fare-rule panel and the child/total notes had grown after later edits.
   Tighten the vertical rhythm only (gaps, paddings, leading); no field, note,
   or line is removed, so every concept still shows. Percent/px stay fluid, so
   this holds across widths. */
#select-bus-direct-agent .bb-tent-modal-pax{gap:8px!important;}
/* our numbered fare-rule panel */
#select-bus-direct-agent .bb-farerules{gap:4px!important;padding:8px 10px!important;margin:0 0 2px!important;}
#select-bus-direct-agent .bb-farerule{font-size:11.5px!important;line-height:1.32!important;}
/* child-fare note ("Less than 5 years..." / "Above 5 years...") */
#select-bus-direct-agent .bb-tent-modal-childrules{padding:7px 11px!important;line-height:1.35!important;}
/* the two select cards */
#select-bus-direct-agent .bb-tent-modal-pax > .form-group{padding:7px 10px!important;}
/* estimated-total block + its helper line */
#select-bus-direct-agent .bb-tbr-modal-total{padding:9px 12px!important;}
#select-bus-direct-agent .bb-tbr-modal-total-note{margin-top:3px!important;line-height:1.3!important;}
/* Cancel row */
#select-bus-direct-agent .bb-tbr-modal-next,
#select-bus-direct-agent .bb-tent-modal-pax > .text-center{margin:2px 0 0!important;}
#select-bus-direct-agent .bb-tbr-modal-cancel,
#select-bus-direct-agent .bb-tent-modal-pax .btn{padding-top:8px!important;padding-bottom:8px!important;}
/* header: trim its vertical padding (long package names wrap to ~3 lines, which
   is content we keep -- so recover the room from padding, matching the
   .modal-header specificity that owns it) */
#select-bus-direct-agent .modal-header.bb-tbr-modal-vsum{padding-top:9px!important;padding-bottom:9px!important;}
#select-bus-direct-agent .bb-tbr-modal-vsum .modal-title{gap:1px!important;}
/* the two select cards: shave the select to 38 and drop the label bottom gap */
#select-bus-direct-agent .bb-tent-modal-pax > .form-group{padding:6px 10px!important;}
#select-bus-direct-agent .bb-tbr-modal-select,
#select-bus-direct-agent .bb-tbr-modal-count select.custom-select{height:38px!important;min-height:38px!important;}
#select-bus-direct-agent .bb-tbr-modal-count-label{margin-bottom:2px!important;}

/* The vsum title carries padding:0 44px, but the bus icon and the rate are
   separate flex SIBLINGS -- that padding just squeezed the text to 109px, so
   "24-Jul-2026 (Friday)" and the tour name each wrapped to 2 lines (32px a
   piece). Give the title its own width back. */
#select-bus-direct-agent .modal-title{
  padding-left:8px!important;padding-right:8px!important;flex:1 1 auto;min-width:0;
}

/* ============================================================
   Boarding / dropping point sheets: same height pass.

   Measured at 375x812: each .bsl-point row was 70px (label padding
   12/16 + a 45px time chip), the panel capped itself at 649px of an
   812px viewport, and the search block took 68px -- so only ~7 of 64
   points were visible at a time. Trim the row and let the sheet use
   the screen.
============================================================ */
/* dvh, not vh: on a real phone the browser's URL/nav bar eats into the viewport,
   but 100vh is the LARGE viewport (bars hidden), so the drawer ran taller than
   the visible area and its Back/Next footer fell BELOW the fold -- right where
   the mobile browser chrome / gesture bar sits. 100dvh tracks the actually
   visible height so the footer always stays on screen. (vh kept as a fallback
   for engines without dvh.) */
#boardingsidebar,#droppingsidebar{max-height:100vh!important;height:100vh!important;}
#boardingsidebar,#droppingsidebar{max-height:100dvh!important;height:100dvh!important;}
/* keep the action bar clear of the home indicator / gesture area */
#boardingsidebar .bb-seat-pts-foot,#droppingsidebar .bb-seat-pts-foot,
#boardingsidebar .bsl-sidepanel-foot,#droppingsidebar .bsl-sidepanel-foot,
#boardingsidebar .modalfooter,#droppingsidebar .modalfooter,
#boardingsidebar .modalfooter1,#droppingsidebar .modalfooter1{
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
}
#boardingsidebar .bsl-point > label.bsl-point,
#droppingsidebar .bsl-point > label.bsl-point,
#boardingsidebar label.bsl-point,
#droppingsidebar label.bsl-point{padding:8px 14px!important;gap:10px!important;}
#boardingsidebar .bsl-point-time,
#droppingsidebar .bsl-point-time{
  padding:4px 7px!important;font-size:11.5px!important;line-height:1.25!important;
  align-self:center;
}
#boardingsidebar .bsl-point-name,
#droppingsidebar .bsl-point-name{line-height:1.3;}
#boardingsidebar .bsl-point-name strong,
#droppingsidebar .bsl-point-name strong{font-size:13.5px;}
#boardingsidebar .bsl-point-name small,
#droppingsidebar .bsl-point-name small{font-size:11px;}
#boardingsidebar .bsl-sidepanel-search,
#droppingsidebar .bsl-sidepanel-search{padding:8px 14px!important;}
#boardingsidebar .bsl-sidepanel-search input,
#droppingsidebar .bsl-sidepanel-search input{height:38px!important;padding:8px 12px!important;}
#boardingsidebar .modal-header.modalheader1,
#droppingsidebar .modal-header.modalheader1{padding:11px 16px!important;}
#boardingsidebar .modal-header.modalheader1 b.font-20,
#droppingsidebar .modal-header.modalheader1 b.font-20{font-size:15px!important;}

/* The skip bar spans the viewport, so its content sat at x=14 while the page
   container starts at x=32 -- the note read as glued to the screen edge.
   Constrain the inner row to the same 1200px container so they line up. */
.bb-tbr-corecol .fixedfooterabc .row.f1p{
  max-width:1200px;width:100%;
  margin-left:auto!important;margin-right:auto!important;
}

/* ============================================================
   Entry-page sticky bar: match the previous step.

   .bb-tent-stickybar shipped a blue gradient (#1e3a8a -> #1e40af)
   while the Skip Transportation bar one step earlier is the
   teal->navy .bb-tpx-tripbar gradient. Same bar, same step of the
   funnel -- one language.
============================================================ */
.bb-tent-stickybar{
  background:linear-gradient(135deg,#134e4a 0%,#0f172a 100%)!important;
  box-shadow:0 -8px 24px -10px rgba(15,23,42,.45);
}

/* the floating WhatsApp button collides with that sticky bar and the entry
   cards; this page already has a persistent CTA, so drop the float here.
   Scoped by the sticky bar, which only exists on booking_entry. */
body:has(.bb-tent-stickybar) .bb-wa-float{display:none!important;}

/* Package Full Details tab row: centre it when it fits.
   `safe` matters -- a plain `center` in an overflow-x container pushes the
   first tab into unreachable negative scroll space once the row overflows. */
.nav-tabs.bb-tent-modal-tabs{justify-content:safe center;}

/* ============================================================
   Entry-package passenger modal: alignment + height.

   .bb-tent-modal-pax is a 2-col grid. The Adults and Child selects
   take one column each, but the "Child height rules" block is
   col-sm-12 and still landed in column 1 only (measured 390px of a
   791px row) -- leaving column 2 empty. That lopsided half-block is
   what read as unaligned. Let any full-width child span the grid.
============================================================ */
.bb-tent-modal-pax > [class*="col-sm-12"],
.bb-tent-modal-pax > .bb-tent-modal-childrules{grid-column:1 / -1;}

/* the Proceed button is display:flex (block-level), so the parent's
   text-align:center could not centre it -- measured x240 in a 230..1021 row */
#select-entry-package #pricedata .movenext,
#select-entry-package #pricedata button.btn-success{
  margin-left:auto!important;margin-right:auto!important;
}

/* Total Amount needs the rupee sign. :not(:empty) so a missing value does not
   leave a bare currency symbol sitting there. */
#select-entry-package #pricedata .total_bus_entry_final_fare:not(:empty)::before,
#select-entry-package #pricedata .total_entry_final_fare:not(:empty)::before{
  content:"\20B9 ";font-weight:800;
}

/* tighter on phones */
@media (max-width:767.98px){
  .bb-tent-modal-pax{gap:8px!important;}
  #select-entry-package .bb-tent-modal-childrules{padding:8px 10px!important;}
  #select-entry-package .bb-tent-modal-childrules > ul > li{margin-bottom:3px!important;font-size:11.5px;}
}

/* bus + entry booking: the refund slabs are the BUS policy, and entry tickets
   are non-refundable. Both notes only render when an entry package is in the
   cart (passenger-details-tours.php). */
.bb-tpx-cancel-scope,
.bb-tpx-cancel-noentry{
  display:flex;align-items:flex-start;gap:9px;
  margin:10px 0 0;padding:9px 12px;border-radius:10px;
  font-size:12px;line-height:1.5;
}
.bb-tpx-cancel-scope{
  background:var(--bb-primary-soft,#fff7ed);
  border:1px solid #fed7aa;color:#7c2d12;
}
.bb-tpx-cancel-scope i{color:var(--bb-primary,#f97316);margin-top:2px;}
.bb-tpx-cancel-noentry{
  background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d;
}
.bb-tpx-cancel-noentry i{color:#dc2626;margin-top:2px;}

/* ============================================================
   Coupon messages (passenger-details .div_couponAlertMessage).

   Measured on a live SVRFC10 apply -- all three states were broken:
     - errors use <span class="red">, but .red is only defined as
       `.bb-tbc-page .red` (the confirmation page). Here it computed
       to rgb(26,32,44), the normal near-black body colour. So every
       failure message ("Coupon Doesn't Exists", "Coupon is Expired",
       "Maximum No.of Uses Exceeded", "Minimum Booking Amount",
       "Minimum N persons") rendered as plain dark text, not red.
     - success uses .badge-info and the Remove link uses
       .badge-danger -- both dropped in Bootstrap 5, so they
       computed to white-on-transparent, i.e. INVISIBLE.
   Errors red, success green, remove a real chip.
============================================================ */
.div_couponAlertMessage{display:block;}
.div_couponAlertMessage h5{margin:0;}

/* error states */
.div_couponAlertMessage .red,
.div_couponAlertMessage .red.font-14{
  display:inline-flex;align-items:center;gap:7px;
  color:#b91c1c!important;font-size:12.5px!important;font-weight:700;
}
.div_couponAlertMessage .red::before{
  content:"\f057";font-family:"Font Awesome 5 Free";font-weight:900;font-size:12px;color:#dc2626;
}

/* success: the applied-coupon pill */
.div_couponAlertMessage .badge-info{
  display:inline-flex!important;align-items:center;gap:6px;
  background:#dcfce7!important;color:#166534!important;
  border:1px solid #86efac;border-radius:999px;
  padding:5px 12px!important;font-size:12px!important;font-weight:800;letter-spacing:.2px;
}
.div_couponAlertMessage .badge-info::before{
  content:"\f058";font-family:"Font Awesome 5 Free";font-weight:900;font-size:11px;
}
/* remove chip */
.div_couponAlertMessage .badge-danger{
  display:inline-flex!important;align-items:center;gap:6px;float:none!important;
  background:#fef2f2!important;color:#b91c1c!important;
  border:1px solid #fecaca;border-radius:999px;
  padding:5px 12px!important;font-size:12px!important;font-weight:800;
  cursor:pointer;margin-left:8px;
}
.div_couponAlertMessage .badge-danger::before{
  content:"\f00d";font-family:"Font Awesome 5 Free";font-weight:900;font-size:11px;
}
.div_couponAlertMessage .badge-danger:hover{background:#fee2e2!important;}

/* the enhancer's own inline notices */
.bb-coupon-note{
  display:flex;align-items:center;gap:8px;
  margin:8px 0 0;padding:8px 11px;border-radius:9px;
  font-size:12.5px;font-weight:700;line-height:1.4;
}
.bb-coupon-note--ok{background:#dcfce7;border:1px solid #86efac;color:#166534;}
.bb-coupon-note--err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;}

/* ============================================================
   Mobile coupon drawer (#btmpanel1) -- type scale + theming.

   Measured in the 307px drawer: the "Coupon Code" h4 rendered at
   21.5px plain dark, the APPLY button was .btn-secondary (grey
   #6c757d) at 16px and only 77px wide inside its 102px column, the
   input at 16px, and the suggestion list's legacy .text-2 /
   .font-weight-600 / .text-1 classes are all undefined in this
   theme so every line collapsed to flat 15px body text -- which is
   why it read as "SVRFC10 / SVRFC10 Terms & Conditions".
============================================================ */
#btmpanel1{padding:12px 14px!important;}

/* title */
#btmpanel1 .section-header{margin-bottom:8px!important;}
#btmpanel1 .section-header h4{
  font-size:13px!important;font-weight:800!important;
  letter-spacing:.5px;text-transform:uppercase;
  color:var(--bb-primary,#f97316)!important;
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:0!important;
}
#btmpanel1 .section-header h4::before{
  content:"\f02b";font-family:"Font Awesome 5 Free";font-weight:900;font-size:12px;
}
/* the input already has a placeholder -- the standalone label is noise */
#btmpanel1 > b{display:none!important;}

/* field + button on one tidy row */
#btmpanel1 .row.mx-0{gap:8px;flex-wrap:nowrap;align-items:stretch;}
#btmpanel1 .col-8{flex:1 1 auto;max-width:none;}
#btmpanel1 .col-4{flex:0 0 96px;max-width:96px;}
#btmpanel1 input.promcod{
  height:40px!important;font-size:13px!important;
  border:1.5px solid var(--bb-border,#e5e7eb)!important;
  border-radius:10px!important;padding:0 12px!important;
}
#btmpanel1 input.promcod:focus{
  border-color:var(--bb-primary,#f97316)!important;
  box-shadow:0 0 0 3px rgba(249,115,22,.14)!important;
}
#btmpanel1 a.btn-secondary{
  width:100%!important;height:40px;
  display:inline-flex!important;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bb-primary,#f97316),#ea580c)!important;
  border:0!important;border-radius:10px!important;
  font-size:12.5px!important;font-weight:800!important;letter-spacing:.3px;
  color:#fff!important;padding:0!important;
}
#btmpanel1 a.btn-secondary b{font-size:12.5px!important;font-weight:800!important;}

/* suggested-coupon list -> real chips */
#btmpanel1 ul.promo-code{margin:10px 0 0!important;padding:0!important;list-style:none!important;}
#btmpanel1 ul.promo-code > li{
  border:1px dashed var(--bb-border,#e5e7eb);border-radius:10px;
  padding:8px 11px;margin:0 0 7px;background:#fff;
  /* the list inherits text-align:center from the panel, and the bare
     short_description text node runs straight into the T&C anchor */
  text-align:left!important;font-size:11.5px;color:var(--bb-text-muted,#6b7480);line-height:1.5;
}
#btmpanel1 ul.promo-code > li > span{
  font-size:12.5px!important;font-weight:800!important;
  color:var(--bb-primary,#f97316)!important;letter-spacing:.4px;
}
#btmpanel1 ul.promo-code > li > a{
  display:block;margin-top:3px;
  font-size:11px!important;font-weight:700;
  color:var(--bb-secondary,#0d9488)!important;text-decoration:underline;
}

/* ============================================================
   IRCTC "Choose your journey date" arrows.

   The DNA (tour-booking-irctc.html) puts the class straight on the
   button: <button class="bb-tbi-datesbar-arrow">. CI3 instead wraps
   it -- <a><span class="bb-tbi-datesbar-arrow">..</span></a> -- so
   the bare <a> is the flex child of .bb-tbi-datesbar (no class, so
   it shrinks to the icon) and the span carrying flex:0 0 44px is not
   a flex item at all. Measured: 15x19 inline glyphs at the bar edges
   instead of two 44px full-height buttons.
   display:contents flattens the wrapper so the span becomes the
   flex item the DNA rule was written for.
============================================================ */
.bb-tbi-datesbar > a:has(> .bb-tbi-datesbar-arrow){display:contents;}
.bb-tbi-datesbar .bb-tbi-datesbar-arrow{
  display:flex!important;align-items:center;justify-content:center;
  flex:0 0 44px!important;width:44px!important;
  /* style.css declares an explicit height (90px, then 78px in a later
     duplicate of the rule) -- an explicit height defeats align-self:stretch,
     so the buttons sat 78px tall inside a 136px bar. */
  align-self:stretch;height:auto!important;
  background:#1e40af!important;color:#fff!important;
  font-size:16px;border:0;cursor:pointer;
  transition:background .15s;
}
.bb-tbi-datesbar .bb-tbi-datesbar-arrow:hover{background:#1e3a8a!important;}
.bb-tbi-datesbar .bb-tbi-datesbar-arrow i{color:#fff!important;font-size:16px;}

/* The legacy inline <style> in tour-packages-booking-irctc.php forces
   `.datenav a{min-width:180px!important}` -- sized for the OLD wide date
   buttons. On the v2 page the date cards ARE `.datenav a` (<a class=
   "bb-tbi-datecard layout64">), so that min-width pinned every card at 180px
   and defeated the responsive flex-basis (92/100/116px) -- the next card never
   peeked. Neutralise it (higher specificity + !important); flex-basis then
   drives the width and the carousel shows ~2.5 cards. */
.bb-tbi-datesbar-track .bb-tbi-datecard{min-width:0!important;}

/* The selected card goes solid orange (ci-overrides `.datenav .layout64.active`)
   -- but CI3 toggles `.active`, not the DNA's `.is-active`, so the intended
   light-on-cream active styling never applies and the day/date/month text keeps
   its dark-slate colours (meant for the WHITE inactive card). Dark text on the
   orange fill reads poorly. Invert to white for the active card. */
.bb-tbi-datecard.active .bb-tbi-datecard-day,
.bb-tbi-datecard.active .bb-tbi-datecard-date,
.bb-tbi-datecard.active .bb-tbi-datecard-mon{color:#fff!important;}
.bb-tbi-datecard.active .bb-tbi-datecard-classes{border-top-color:rgba(255,255,255,.45)!important;}

/* ============================================================
   "Checking seat availability" interstitial (#load_operators).

   The view ships it inline as a flat white full-screen div with a
   loading.gif at 33% width and #004F9E text -- off-theme, and a
   2-minute wait with no sense of progress. Restyled as a dimmed
   backdrop + centred card with a CSS ring and an indeterminate
   progress bar. Markup and ids untouched (the script toggles
   #load_operators and fills #package_name_text / #to_place).
   Selector is id-led so it outranks the view's inline <style>.
============================================================ */
#load_operators.bbload-div{
  background:rgba(10,21,37,.62)!important;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
#load_operators .bbload-img{
  width:min(380px,calc(100vw - 32px))!important;
  background:#fff;border-radius:18px;
  padding:26px 24px 22px;
  box-shadow:0 24px 60px -18px rgba(10,21,37,.55);
}
/* route line */
#load_operators .bbload-img > h5:first-child{
  font-size:14px;font-weight:800;line-height:1.45;
  color:var(--bb-text,#0a1525);margin:0 0 4px;
}
#load_operators .bbload-img > h5:first-child .fa-arrow-right{
  color:var(--bb-primary,#f97316);margin:0 4px;
}
/* swap the gif for a themed CSS ring */
#load_operators .bbload-img img{display:none!important;}
#load_operators .bbload-img::before{
  content:"";display:block;margin:16px auto 14px;
  width:54px;height:54px;border-radius:50%;
  border:5px solid var(--bb-primary-soft,#fff7ed);
  border-top-color:var(--bb-primary,#f97316);
  animation:bbLoadSpin .85s linear infinite;
}
@keyframes bbLoadSpin{to{transform:rotate(360deg);}}
/* copy */
#load_operators .bbload-color{
  color:var(--bb-text,#0a1525)!important;
  font-size:13.5px;font-weight:800;line-height:1.5;
}
#load_operators .bbload-img > h5:last-of-type .bbload-color{
  color:var(--bb-text-muted,#6b7480)!important;
  font-size:12px;font-weight:600;
}
#load_operators .bbload-img h5{margin:0 0 6px;}
/* indeterminate progress bar so a 2-minute wait still feels alive */
#load_operators .bbload-img::after{
  content:"";display:block;margin:16px auto 0;
  width:100%;height:5px;border-radius:99px;
  background:var(--bb-border-light,#eef2f7);
  background-image:linear-gradient(90deg,var(--bb-primary,#f97316),#fdba74);
  background-repeat:no-repeat;background-size:38% 100%;
  animation:bbLoadBar 1.5s ease-in-out infinite;
}
@keyframes bbLoadBar{
  0%{background-position:-45% 0;}
  100%{background-position:145% 0;}
}

/* ============================================================
   Header/section vertical rhythm on the tour-package pages.

   Category listing: .bb-tpc-summary carries padding-bottom:60px and
   the "From your city" section that follows adds padding-top:26px --
   86px of stacked empty band under the intro paragraph.
   Package details: .bb-tpd-hero runs 24px top AND bottom around a
   short badge/title/meta block, pushing the tab strip down.
============================================================ */
.bb-tpc-summary{padding-top:22px!important;padding-bottom:22px!important;}
.bb-tpc-origin{padding-top:18px!important;}
.bb-tpd-hero{padding-top:14px!important;padding-bottom:14px!important;}
.bb-tpd-bcrumb-wrap{padding-top:6px!important;padding-bottom:6px!important;}

@media (max-width:767.98px){
  .bb-tpc-summary{padding-top:16px!important;padding-bottom:16px!important;}
  .bb-tpc-origin{padding-top:14px!important;}
  .bb-tpd-hero{padding-top:10px!important;padding-bottom:10px!important;}
}

/* ============ Sticky vehicle fare bar (.round-trip-fare) ============
   The "N Seat(s)" (left) and the amount (right) were stacking on mobile and the
   amount carried no rupee sign. Force the two cols onto ONE row, and trim the
   bar's padding so it is shorter. (Rupee icon added in the markup.) */
.round-trip-fare .row.align-items-center{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;}
.round-trip-fare .row.align-items-center > .col-6{flex:1 1 50%!important;max-width:50%!important;width:50%!important;}
.round-trip-fare .row.align-items-center > .col-6.text-right{text-align:right!important;}
.round-trip-fare{padding-top:9px!important;padding-bottom:6px!important;}
.round-trip-fare .seat-layout-1{font-size:15px!important;line-height:1.2!important;}

/* Passenger cards (No. of Adults / Children): the flex column carried a 12px
   gap between the label and the select -- the visible "waste space" the user
   flagged. Tighten it so each card is ~10px shorter and the label sits right
   above its dropdown. */
#select-bus-direct-agent .bb-tbr-modal-count{gap:2px!important;}
#select-busseats .bb-tbr-modal-count{gap:2px!important;}

/* Book-Now modal header: the package name shared the row with the fare block and
   wrapped/cramped. It now sits on its OWN full-width line under the operator /
   date / fare row. */
#select-bus-direct-agent .bb-tbr-modal-vsum{flex-wrap:wrap!important;}
#select-bus-direct-agent .bb-tbr-modal-vsum-pkg{
  flex:1 1 100%!important;width:100%!important;order:5;margin-top:5px;
  color:#fff;font-size:12.5px;font-weight:600;line-height:1.35;opacity:.92;
}

/* ============================================================
   CAR-PACKAGE BOOKING (tour-packages/car_package_booking)
   CI3-parity pass.
============================================================ */
/* 1. Every booking-form field (Package Name, Journey Date, Package Type,
   Vehicle, Boarding City/Point/Time, Dropping City/Point): the heading
   label gets its own line and the value/select stacks BELOW it instead
   of sitting beside it and truncating. */
.bb-tcar-fields .bb-tbi-field{flex-wrap:wrap;}
.bb-tcar-fields .bb-tbi-field .bb-tbi-field-label{flex:1 1 100%;}
.bb-tcar-fields .bb-tbi-field .bb-tbi-field-select{
  flex:1 1 100%;width:100%;min-width:0;
}
.bb-tcar-fields .bb-tbi-field--info > strong{
  flex:1 1 100%;font-size:12px;font-weight:600;color:#334155;
  line-height:1.45;padding:1px 0 5px;
}

/* 2. Fare Details aside (re-shown via .bb-tcar-aside exception in
   ci-overrides): DNA card theme over its legacy classes. */
.bb-tcar-aside #fare_breakup{
  background:#fff!important;border:1px solid #e2e8f0;border-radius:16px;
  box-shadow:0 4px 20px rgba(15,23,42,.06);padding:16px!important;border-radius:16px!important;
}
/* The header carries the site-wide orange-gradient card-header band --
   run it FULL-BLEED to the card edges with rounded top corners (like the
   card headers on the other pages) instead of floating inset with white
   gaps and square corners. */
.bb-tcar-aside #fare_breakup.bestbus104 > header.section-header{
  margin:-16px -16px 12px!important;
  border-radius:15px 15px 0 0;overflow:hidden;
}
.bb-tcar-aside .section-header h4{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:800;margin:0;
}
.bb-tcar-aside .section-header .line{display:none;}
.bb-tcar-aside ul li{font-size:13px;color:#334155;}
.bb-tcar-aside ul li.green{color:#16a34a!important;font-weight:800;}
.bb-tcar-aside ul li.green .green{color:#16a34a!important;}
.bb-tcar-aside .bg-light-4{background:#f8fafc!important;border-radius:10px;font-size:13.5px;margin-bottom:6px;}
.bb-tcar-aside > div > span.text-danger,
.bb-tcar-aside .text-danger{font-size:12px;}
.bb-tcar-aside button[name="proceed_to_payment"]{
  border-radius:99px!important;border:0;font-weight:800;padding:11px 20px;
  background:linear-gradient(135deg,#16a34a,#15803d)!important;
  border-radius:99px!important;box-shadow:0 4px 14px rgba(22,163,74,.35);
}
.bb-tcar-aside button[name="proceed_to_payment"] .blink{animation:none;text-decoration:none;}

/* 3. Details-page mobile bottom CTA: car packages render NO fare block in
   the bar, so the lone "Book Now" pill hugged the left edge with the rest
   of the bar empty. When the button is the bar's only child, stretch it
   full-width; package types that show fare + button are untouched. */
.bb-tpd-mobcta .bb-tpd-mobcta-btn:only-child{
  flex:1 1 100%;width:100%;justify-content:center;
}

/* 4. Fare panel payment plan: the two grey Advance/Due rows become a
   "Pay Now vs Pay Driver" split with the ORIGINAL due-amount note kept.
   The JS-filled ids (#total_advance_final_fare_html / #total_due_amount_html)
   are verbatim inside. */
.bb-tcar-payplan{display:flex;align-items:stretch;gap:6px;margin:10px 0 4px;}
.bb-tcar-payplan-item{
  flex:1;min-width:0;position:relative;border-radius:12px;padding:8px 10px 8px;
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 6px;
}
.bb-tcar-payplan-item--now{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1.5px solid #86efac;}
.bb-tcar-payplan-item--later{background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1.5px solid #fcd34d;}
.bb-tcar-payplan-ico{
  width:22px;height:22px;border-radius:7px;flex:0 0 22px;
  display:flex;align-items:center;justify-content:center;font-size:10px;
}
.bb-tcar-payplan-item--now .bb-tcar-payplan-ico{background:#16a34a;color:#fff;}
.bb-tcar-payplan-item--later .bb-tcar-payplan-ico{background:#d97706;color:#fff;}
.bb-tcar-payplan-item small{
  flex:1;min-width:0;font-size:9.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:#64748b;line-height:1.25;
}
.bb-tcar-payplan-item--now small{color:#15803d;}
.bb-tcar-payplan-item--later small{color:#b45309;}
.bb-tcar-payplan-item strong{
  flex:1 1 100%;font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:800;line-height:1.2;
}
.bb-tcar-payplan-item--now strong{color:#15803d;}
.bb-tcar-payplan-item--later strong{color:#b45309;}
.bb-tcar-payplan-item strong i{font-size:13px;}
.bb-tcar-payplan-arrow{align-self:center;color:#cbd5e1;font-size:13px;flex:0 0 auto;}
.bb-tcar-paynote{
  display:flex;gap:7px;align-items:flex-start;
  background:#fffbeb;border:1px solid #fde68a;border-radius:10px;
  padding:8px 11px;margin:8px 0 10px;
  font-size:11.5px;font-weight:600;color:#92400e;line-height:1.45;
}
.bb-tcar-paynote i{color:#d97706;margin-top:1px;}


/* Car passenger page: the #fare-rules2 (Itinerary / Inclusions) modal title
   rendered huge and wrapped to two lines -- bring it down to the size the
   other modal headers use. */
#fare-rules2 .modal-title,
#fare-rules2 .modal-title span{font-size:15px!important;font-weight:800;line-height:1.3;}

/* Car passenger page: Parsley injects its errors <ul> BETWEEN the two
   gender chips (right after the first label's radio), and inside the
   flex .bb-tpx-gender it becomes a full-width item that pushes "Female"
   to the next line. Park it after both chips -- same parsley-as-flex-item
   fix as the passenger form above. */
.bb-tpx-gender > .parsley-errors-list{flex:1 1 100%;order:9;margin:0;}

/* 5. No inner focus box on the stacked field controls: the journey-date
   input painted a rectangular outline when its calendar opened, and the
   selects would do the same on focus. The field card itself is the
   affordance. */
.bb-tcar-fields .bb-tbi-field-select,
.bb-tcar-fields .bb-tbi-field-select:focus,
.bb-tcar-fields .bb-tbi-field-select:focus-visible{
  outline:0!important;border:0!important;box-shadow:none!important;
}

/* 6. Tighten the gap between each section heading and its fields
   (12px + 12px of stacked padding read as dead space). */
.bb-tcar-card > header.bb-tcar-section{padding-bottom:2px;}
.bb-tcar-card > header.bb-tcar-section + .bb-tcar-section{padding-top:5px;}

/* 7. Fare card: tighten the orange band and its gap to the break-up list. */
.bb-tcar-aside #fare_breakup .section-header{margin-bottom:6px!important;padding:11px 16px!important;}
.bb-tcar-aside #fare_breakup ul.mt-2{margin-top:2px!important;}

/* ============================================================
   SITE-WIDE dropdowns -- ONE look in every browser.

   Was: `appearance: base-select` + `::picker(select)`, which only desktop
   Chrome understands. Chrome therefore showed our themed option list while
   Firefox / Safari / Android showed the OS list, and the closed control drew a
   grey chevron in one browser and a solid triangle in another (Firefox even
   showed two arrows where a page supplied its own).

   Now: the control is normalised here, and the OPEN list is drawn by
   bb-select-sheet.js in every browser. The <select> element, its name/id/value
   and its change events are untouched, so every CI3 cascade keeps working.
   Opt a field out with data-bb-native.
============================================================ */
select:not([multiple]):not([size]):not([data-bb-native]){
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  appearance:none!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  background-size:12px!important;
  padding-right:34px!important;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-indent:0.01px;              /* keeps old Firefox from re-adding its arrow */
}
/* the sheet is doing the work -- no UA picker chrome anywhere */
select::picker-icon{display:none;}


/* 9. A touch more air between a field label's icon and its text
   (enquiry / passenger-details forms). */
.bb-tpx-label i{margin-right:7px!important;}

/* 10. .layout80 icon+text rows (Popular category chips, quick-menu items):
   the icon column sat flush against the label. Add breathing room. */
.layout80 > .d-flex.align-items-center{gap:8px;}

/* 11. Enquiry form: Package Name is a view-only value (full name wraps),
   not a truncating single-line input. */
.bb-tbe-pkgname{
  font-size:13.5px;font-weight:700;color:#0a1525;line-height:1.45;
  padding:2px 0 4px;
}

/* 12. Enquiry form: tighten the vertical gap between stacked fields
   (g-3's 1rem row gutter felt too airy on mobile). */
.bb-tbe-main .bb-tpx-paxcard-body .row.g-3{--bs-gutter-y:.5rem;}

/* 13. Footer payment-method logos strip: hidden per request (markup kept). */
.bb-foot-pay{display:none!important;}

/* ============================================================
   CAB BOOKING (CI3-faithful rebuild): the form now carries only the five
   fields the controller saves, two per row -- so the old 5-column grid
   (sized for the removed date/time/cab-type/pax cells) is re-flowed, and
   the new heading / "Fill the details" / CMS blocks get their styles.
============================================================ */
.bb-cab-form-head{
  display:flex;flex-direction:column;gap:2px;
  padding:14px 12px 4px;text-align:left;
}
.bb-cab-form-head h2{
  display:flex;align-items:center;gap:9px;margin:0;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:800;color:#0a1525;
}
.bb-cab-form-head h2 i{color:#f97316;font-size:15px;}
.bb-cab-form-head small{font-size:12.5px;color:#64748b;}

.bb-cab-form-fill{
  margin:0 0 10px;padding:0 4px;text-align:left;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;
}

/* two fields per row (was a 5-up grid) */
.bb-cab-form-body .bb-cab-form-row{grid-template-columns:1fr 1fr;}
/* requirements + reCAPTCHA rows span the full width */
.bb-cab-form-body .bb-cab-form-row > .bb-umn5j5m,
.bb-cab-form-body .bb-cab-form-row > .bb-cab-form-cell:only-child{grid-column:1 / -1;}
.bb-cab-form-body textarea{
  width:100%;border:none;outline:none;padding:0;resize:vertical;min-height:62px;
  font-size:13.5px;font-weight:600;color:#0f172a;background:transparent;
}
.bb-cab-form-body .bb-cab-form-btn{width:100%;height:auto;padding:14px;margin-top:2px;}
/* the reCAPTCHA holder is a plain box, not a bordered field */
.bb-cab-form-body .bb-cab-form-row > .bb-cab-form-cell:has(#html_element){
  background:transparent;border:0;padding:0;
}

.bb-cab-cms{font-size:14px;line-height:1.7;color:#334155;}
.bb-cab-cms p{margin-bottom:12px;}

@media (max-width:575.98px){
  .bb-cab-form-body .bb-cab-form-row{grid-template-columns:1fr;}
}

/* ============================================================
   TOURIST ATTRACTIONS — landing city cards, city page + place detail
   ============================================================ */

/* landing: city cards */
.bb-ta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.bb-ta-card{background:#fff;border:1px solid #e8eef6;border-radius:18px;overflow:hidden;box-shadow:0 6px 22px rgba(15,23,42,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.bb-ta-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,23,42,.14);border-color:#fed7aa;}
.bb-ta-card-link{display:block;color:inherit;text-decoration:none;}
.bb-ta-card-link:hover{color:inherit;text-decoration:none;}
.bb-ta-card-imgwrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eef2f7;}
.bb-ta-card-imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.bb-ta-card:hover .bb-ta-card-imgwrap img{transform:scale(1.07);}
.bb-ta-card-imgwrap::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(to top,rgba(11,31,59,.72),rgba(11,31,59,0));pointer-events:none;}
.bb-ta-card-city{position:absolute;left:12px;bottom:11px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(11,31,59,.55);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);padding:5px 11px;border-radius:999px;}
.bb-ta-card-city i{color:#fb923c;}
.bb-ta-card-body{padding:14px 16px 16px;}
.bb-ta-card-title{font-size:16.5px;font-weight:800;color:#0b1f3b;margin:0 0 8px;line-height:1.35;}
.bb-ta-card-stats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:#64748b;margin-bottom:12px;}
.bb-ta-card-stats strong{color:#0b1f3b;font-weight:800;}

/* city page: hero */
.bb-ta-chero{position:relative;border-radius:22px;overflow:hidden;margin:16px 0 22px;min-height:230px;display:flex;align-items:flex-end;background:#0b1f3b;}
.bb-ta-chero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5;}
.bb-ta-chero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(11,31,59,.92) 0%,rgba(11,31,59,.55) 55%,rgba(11,31,59,.25) 100%);}
.bb-ta-chero-in{position:relative;z-index:2;padding:26px 26px 24px;}
.bb-ta-chero-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#fde3c8;background:rgba(249,115,22,.22);border:1px solid rgba(249,115,22,.42);padding:5px 12px;border-radius:999px;}
.bb-ta-chero-title{color:#fff;font-size:30px;font-weight:800;margin:12px 0 6px;line-height:1.2;}
.bb-ta-chero-sub{color:#cbd5e1;font-size:14.5px;margin:0 0 14px;}
.bb-ta-chero-stats{display:flex;flex-wrap:wrap;gap:8px;}
.bb-ta-chero-stats span{font-size:12.5px;color:#e2e8f0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:999px;}
.bb-ta-chero-stats strong{color:#fdba74;font-weight:800;}

/* city page: place cards */
.bb-ta-places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:8px;}
.bb-ta-place{display:flex;flex-direction:column;background:#fff;border:1px solid #e8eef6;border-radius:16px;overflow:hidden;box-shadow:0 5px 18px rgba(15,23,42,.06);color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.bb-ta-place:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(15,23,42,.13);border-color:#fed7aa;color:inherit;text-decoration:none;}
.bb-ta-place-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#eef2f7;}
.bb-ta-place-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.bb-ta-place:hover .bb-ta-place-img img{transform:scale(1.07);}
.bb-ta-place-area,.bb-ta-place-rate{position:absolute;z-index:2;font-style:normal;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;}
.bb-ta-place-area{left:10px;top:10px;color:#fff;background:rgba(11,31,59,.62);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(6px);}
.bb-ta-place-rate{right:10px;top:10px;color:#0b1f3b;background:#fff;box-shadow:0 3px 10px rgba(15,23,42,.18);}
.bb-ta-place-rate i{color:#f59e0b;}
.bb-ta-place-body{display:flex;flex-direction:column;gap:6px;padding:13px 15px 15px;flex:1;}
.bb-ta-place-name{font-size:15.5px;font-weight:800;color:#0b1f3b;line-height:1.35;}
.bb-ta-place-desc{font-size:12.5px;color:#64748b;line-height:1.6;}
.bb-ta-place-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px;border-top:1px dashed #e2e8f0;}
.bb-ta-place-fee{font-size:12px;color:#64748b;}
.bb-ta-place-fee strong{display:block;font-size:14px;color:#0b1f3b;font-weight:800;}
.bb-ta-place-go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:#f97316;}
.bb-ta-place-go i{transition:transform .2s ease;}
.bb-ta-place:hover .bb-ta-place-go i,.bb-ta-near:hover .bb-ta-place-go i{transform:translateX(3px);}
.bb-ta-about{margin-top:26px;}

/* place detail: header — the page heading now rides on the site-wide
   .bb-section-head component, so it inherits the index-page heading look
   (two-tone gradient title + the double-stroke swoosh beneath it). */
.bb-ta-dhead{padding:16px 0 14px;border-bottom:1px solid #e8eef6;margin-bottom:18px;text-align:center;}
.bb-ta-dhead .bb-section-head{margin-bottom:12px;}
.bb-ta-dhead .bb-section-title{font-size:clamp(21px,2.5vw,29px);}
/* icon stays beside the address instead of breaking onto its own line */
.bb-ta-dhead-addr{display:flex;justify-content:center;gap:6px;font-size:13.5px;color:#64748b;margin:0;}
.bb-ta-dhead-addr i{color:#f97316;flex:0 0 auto;margin-top:3px;}
.bb-ta-dhead-addr p,.bb-ta-addr p{margin:0;}
.bb-ta-dhead-side{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.bb-ta-dhead-rate,.bb-ta-dhead-fee{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:96px;padding:9px 14px;border-radius:14px;text-align:center;}
.bb-ta-dhead-rate{background:linear-gradient(135deg,#0b1f3b,#12325c);color:#fff;}
.bb-ta-dhead-rate strong{font-size:19px;font-weight:800;}
.bb-ta-dhead-rate i{color:#fbbf24;}
.bb-ta-dhead-rate small{font-size:11px;color:#cbd5e1;}
.bb-ta-dhead-fee{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;}
.bb-ta-dhead-fee small{font-size:11px;color:#c2410c;}
.bb-ta-dhead-fee strong{font-size:17px;font-weight:800;}

/* place detail: panels */
.bb-ta-panel{background:#fff;border:1px solid #e8eef6;border-radius:18px;box-shadow:0 5px 18px rgba(15,23,42,.05);padding:18px;margin-bottom:20px;}
/* panel heads carry .bb-section-head too, so the site-wide heading rule paints
   the two-tone gradient + double-stroke swoosh; only the size and the solid
   icon colour are set here (the gradient would otherwise bleach the icon). */
.bb-ta-panel-head{text-align:center;margin-bottom:14px;}
.bb-ta-panel-head > h2{font-size:18px;font-weight:800;line-height:1.3;}
.bb-ta-panel-head > h2 i{margin-right:6px;color:#f97316!important;-webkit-text-fill-color:#f97316;}
.bb-ta-panel-head p{font-size:13px;color:#64748b;margin:8px 0 0;}
.bb-ta-gal{margin-bottom:20px;}
.bb-ta-mapbox{border-radius:14px;overflow:hidden;border:1px solid #e2e8f0;background:#eef2f7;line-height:0;}
.bb-ta-mapbox iframe{display:block;width:100%;border:0;}
.bb-ta-addr{font-size:14px;color:#334155;text-align:center;margin:0 0 14px;}

/* timings table */
.bb-ta-tt{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;}
.bb-ta-tt thead th{background:linear-gradient(135deg,#0b1f3b,#12325c);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.3px;text-transform:uppercase;padding:9px 12px;text-align:left;}
.bb-ta-tt tbody td{padding:9px 12px;border-top:1px solid #eef2f7;color:#334155;}
.bb-ta-tt tbody td:first-child{font-weight:700;color:#0b1f3b;width:44%;}
.bb-ta-tt tbody tr:nth-child(even){background:#f8fafc;}
.bb-ta-tt tbody em{font-style:normal;color:#94a3b8;}

/* fees */
.bb-ta-fees{list-style:none;margin:0;padding:0;}
.bb-ta-fees li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #eef2f7;border-radius:12px;margin-bottom:8px;background:#f8fafc;}
.bb-ta-fees li:last-child{margin-bottom:0;}
.bb-ta-fees li span{font-size:13px;color:#475569;}
.bb-ta-fees li span i{color:#f97316;margin-right:6px;}
.bb-ta-fees li strong{font-size:13.5px;font-weight:800;color:#0b1f3b;text-align:right;}

/* contacts */
.bb-ta-contacts{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;}
.bb-ta-contact{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#0b1f3b;background:#fff7ed;border:1px solid #fed7aa;padding:9px 15px;border-radius:999px;text-decoration:none;}
.bb-ta-contact:hover{background:#f97316;border-color:#f97316;color:#fff;text-decoration:none;}
.bb-ta-contact i{color:#f97316;}
.bb-ta-contact:hover i{color:#fff;}

/* full-width sections */
.bb-ta-full{margin:30px 0;}
.bb-ta-vid{position:relative;border-radius:18px;overflow:hidden;background:#0b1f3b;box-shadow:0 10px 30px rgba(15,23,42,.14);}
.bb-ta-vid #player,.bb-ta-vid iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;}

/* package inclusion icons */
.bb-ta-incl{display:flex;gap:8px;margin:2px 0 4px;}
.bb-ta-incl span{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#f1f5f9;color:#0b1f3b;font-size:12.5px;}

/* near-by places */
.bb-ta-nearby{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.bb-ta-near{display:flex;flex-direction:column;background:#fff;border:1px solid #e8eef6;border-radius:16px;overflow:hidden;box-shadow:0 5px 18px rgba(15,23,42,.06);color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.bb-ta-near:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(15,23,42,.13);border-color:#fed7aa;color:inherit;text-decoration:none;}
.bb-ta-near-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#eef2f7;}
.bb-ta-near-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.bb-ta-near:hover .bb-ta-near-img img{transform:scale(1.07);}
.bb-ta-near-body{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;}
.bb-ta-near-body strong{font-size:15px;font-weight:800;color:#0b1f3b;line-height:1.35;}

/* reviews summary */
.bb-ta-revtop{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:center;background:#fff;border:1px solid #e8eef6;border-radius:18px;box-shadow:0 5px 18px rgba(15,23,42,.05);padding:18px;margin-bottom:20px;}
.bb-ta-revsum{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(135deg,#0b1f3b,#12325c);color:#fff;border-radius:14px;padding:18px 12px;text-align:center;}
.bb-ta-revsum-avg{font-size:40px;font-weight:800;line-height:1;}
.bb-ta-revsum-word{font-size:14px;font-weight:700;color:#fdba74;}
.bb-ta-revsum small{font-size:11.5px;color:#cbd5e1;}
.bb-ta-revbars{display:flex;flex-direction:column;gap:9px;}
.bb-ta-revbar{display:grid;grid-template-columns:66px 1fr 28px;align-items:center;gap:10px;}
.bb-ta-revbar-lbl{font-size:12.5px;font-weight:700;color:#475569;}
.bb-ta-revbar-track{display:block;height:9px;border-radius:999px;background:#eef2f7;overflow:hidden;}
.bb-ta-revbar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f97316,#fbbf24);}
.bb-ta-revbar-n{font-size:12.5px;font-weight:800;color:#0b1f3b;text-align:right;}
.bb-ta-revstars{display:flex;align-items:center;gap:3px;font-size:13px;color:#f59e0b;margin-bottom:8px;}
.bb-ta-revstars b{margin-left:5px;font-size:12.5px;color:#0b1f3b;}

/* star-rating fieldset (same radio names/values CI3 posted) */
.bb-ta-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;border:0;margin:0;padding:6px 0 0;}
.bb-ta-stars input{position:absolute;opacity:0;width:0;height:0;}
.bb-ta-stars label{cursor:pointer;font-size:24px;color:#dbe2ea;margin:0;line-height:1;transition:color .15s ease,transform .15s ease;}
.bb-ta-stars label:hover,.bb-ta-stars label:hover ~ label,
.bb-ta-stars input:checked ~ label{color:#f59e0b;}
.bb-ta-stars label:hover{transform:scale(1.12);}
.bb-ta-stars input:focus-visible + label{outline:2px solid #f97316;outline-offset:3px;border-radius:4px;}

@media (max-width:991.98px){
  .bb-ta-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
  .bb-ta-nearby{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bb-ta-chero-title{font-size:25px;}
}
@media (max-width:767.98px){
  .bb-ta-revtop{grid-template-columns:1fr;gap:14px;}
  .bb-ta-dhead{padding-top:12px;}
  .bb-ta-dhead-side{width:100%;}
  .bb-ta-dhead-rate,.bb-ta-dhead-fee{flex:1;}
}
@media (max-width:575.98px){
  .bb-ta-grid,.bb-ta-places,.bb-ta-nearby{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .bb-ta-card-title{font-size:14px;}
  .bb-ta-card-body,.bb-ta-place-body,.bb-ta-near-body{padding:10px 11px 12px;}
  .bb-ta-card-stats{font-size:11.5px;gap:4px 10px;}
  .bb-ta-place-name,.bb-ta-near-body strong{font-size:13.5px;}
  .bb-ta-place-desc{display:none;}
  .bb-ta-near-body{flex-direction:column;align-items:flex-start;gap:6px;}
  .bb-ta-chero{min-height:190px;}
  .bb-ta-chero-in{padding:18px;}
  .bb-ta-chero-title{font-size:21px;}
  .bb-ta-panel{padding:14px;border-radius:15px;}
  .bb-ta-panel-head h2{font-size:16px;}
}

/* tourist-attractions: phone card footers — keep the fee + View More on one line each */
@media (max-width:575.98px){
  .bb-ta-place-foot{flex-direction:column;align-items:flex-start;gap:7px;padding-top:9px;}
  .bb-ta-place-fee{display:flex;align-items:baseline;gap:5px;white-space:nowrap;}
  .bb-ta-place-fee strong{display:inline;font-size:13.5px;}
  .bb-ta-place-go{white-space:nowrap;font-size:12px;}
  .bb-ta-place-body{gap:5px;}
}

/* ============================================================
   EXPLORE-RAIL LOOK, SHARED — the hotels module has its own quick-link strip
   (.bb-htll-navpills, a teal slab of ghost pills) which is NOT the site-wide
   secondary-header partial, so the new rail design never reached it. These
   rules restyle it to the exact same component: light rail, white pills with
   a per-item accent, navy round arrows, edge fades. The markup, links and
   bbHtllPillsScroll() handlers are untouched.
   Any future bespoke strip can simply be added to these selector lists.
   ============================================================ */
.bb-htll-navpills{
  position:relative;
  gap:6px;
  background:linear-gradient(180deg,#f7fbff 0%,#eef4fc 100%)!important;
  border:1px solid #dde7f4;
  border-radius:16px;
  padding:9px 7px!important;
  box-shadow:0 4px 16px rgba(15,23,42,.07)!important;
}
.bb-htll-navpills::before{
  content:"";position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#0d9488,#22d3ee 28%,#f97316 68%,#fb923c);
  opacity:.85;pointer-events:none;
}
/* arrows: navy discs, matching the explore rail */
.bb-htll-navpills-arrow{
  width:34px!important;height:34px!important;border-radius:50%!important;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0f2744,#1d4470)!important;
  border:1px solid rgba(255,255,255,.5)!important;
  color:#fff!important;
  box-shadow:0 3px 10px rgba(15,39,68,.28);
  transition:all .18s ease;
}
.bb-htll-navpills-arrow:hover{
  background:linear-gradient(135deg,#f97316,#ea580c)!important;
  box-shadow:0 5px 14px rgba(249,115,22,.45);
  transform:scale(1.08);
}
.bb-htll-navpills.at-start .bb-htll-navpills-arrow:first-child,
.bb-htll-navpills.at-end .bb-htll-navpills-arrow:last-child,
.bb-htll-navpills.no-scroll .bb-htll-navpills-arrow{opacity:.22;pointer-events:none;}
/* the track */
.bb-htll-navpills-track{
  gap:8px!important;
  padding:2px!important;
  scroll-behavior:auto!important;  /* smooth would animate every scrollLeft write,
                                      so a drag lags behind the cursor */
  overscroll-behavior-x:contain;   /* no snap: pills of very different widths kept
                                      yanking the row back after a flick */
  scrollbar-width:none;
  cursor:grab;
}
.bb-htll-navpills-track::-webkit-scrollbar{display:none!important;height:0!important;}
.bb-htll-navpills-track{user-select:none;-webkit-user-select:none;}
.bb-htll-navpills-track.is-drag{cursor:grabbing;}
/* one white pill per link */
.bb-htll-navpills-track a{
  gap:8px!important;
  background:#fff!important;
  border:1px solid #e3ebf7;
  border-radius:999px!important;
  box-shadow:0 2px 6px rgba(15,23,42,.05);
  color:#17324f!important;
  padding:8px 16px 8px 8px!important;
  font-size:13px;font-weight:700;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.bb-htll-navpills-track a i{
  font-size:15px!important;
  width:33px;height:33px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--bbc-soft,#eef2f7);
  color:var(--bbc,#0f2744);
  transition:all .18s ease;
}
.bb-htll-navpills-track a:hover{
  background:#fff!important;color:#0b1f3b!important;
  transform:translateY(-2px);
  border-color:var(--bbc,#cbd5e1);
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}
.bb-htll-navpills-track a:hover i{background:var(--bbc,#0f2744);color:#fff;}
/* same seven-tone accent cycle as the explore rail */
.bb-htll-navpills-track a:nth-child(7n+1){--bbc:#0d9488;--bbc-soft:#d3f5f0;}
.bb-htll-navpills-track a:nth-child(7n+2){--bbc:#2563eb;--bbc-soft:#dce9fe;}
.bb-htll-navpills-track a:nth-child(7n+3){--bbc:#7c3aed;--bbc-soft:#e9e2fe;}
.bb-htll-navpills-track a:nth-child(7n+4){--bbc:#db2777;--bbc-soft:#fce0ee;}
.bb-htll-navpills-track a:nth-child(7n+5){--bbc:#ea580c;--bbc-soft:#ffe6d2;}
.bb-htll-navpills-track a:nth-child(7n+6){--bbc:#0891b2;--bbc-soft:#d3f3fa;}
.bb-htll-navpills-track a:nth-child(7n+7){--bbc:#16a34a;--bbc-soft:#d8f5e3;}
/* the current category */
.bb-htll-navpills-track a.is-active{
  background:linear-gradient(135deg,#f97316,#fb923c 55%,#f59e0b)!important;
  border-color:transparent;color:#fff!important;font-weight:800;
  box-shadow:0 6px 16px rgba(249,115,22,.38)!important;
  outline:3px solid rgba(249,115,22,.18);outline-offset:1px;
}
.bb-htll-navpills-track a.is-active i{background:rgba(255,255,255,.22);color:#fff;}
.bb-htll-navpills-track a.is-active:hover{color:#fff!important;border-color:transparent;}
/* edge fades */
.bb-htll-navpills::after{
  content:"";position:absolute;right:44px;top:8px;bottom:8px;width:26px;z-index:2;
  pointer-events:none;transition:opacity .18s ease;
  background:linear-gradient(270deg,#eef4fc,rgba(238,244,252,0));
}
.bb-htll-navpills.at-end::after,
.bb-htll-navpills.no-scroll::after{opacity:0;}

@media (max-width:767.98px){
  .bb-htll-navpills{padding:6px 5px!important;border-radius:14px;}
  .bb-htll-navpills-arrow{width:28px!important;height:28px!important;font-size:11px;}
  .bb-htll-navpills-track{gap:7px!important;}
  .bb-htll-navpills-track a{padding:5px 11px 5px 6px!important;font-size:11.5px;}
  .bb-htll-navpills-track a i{width:27px;height:27px;font-size:13px!important;}
  .bb-htll-navpills::after{right:36px;}
}

/* ---- operator dashboard status tabs (.scrollmenunew1) ----
   Third and last horizontal link rail in the app: Enquiries / Interested /
   Confirmed / Completed / ... on operators/trips*. Its geometry lived in the
   legacy custom.css, which my-hz pages do not load, so the row rendered as
   bare wrapping links. Same rail component as the other two; no arrows in
   that markup, so drag / wheel / swipe do the scrolling. */
.scrollmenunew1{
  position:relative;
  display:flex!important;flex-wrap:nowrap;align-items:center;gap:8px;
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;
  background:linear-gradient(180deg,#f7fbff 0%,#eef4fc 100%);
  border:1px solid #dde7f4;border-radius:16px;
  box-shadow:0 4px 16px rgba(15,23,42,.07);
  padding:10px!important;margin-bottom:4px;
  overscroll-behavior-x:contain;scroll-behavior:auto!important;scrollbar-width:none;cursor:grab;
}
.scrollmenunew1::-webkit-scrollbar{display:none;}
.scrollmenunew1{user-select:none;-webkit-user-select:none;}
.scrollmenunew1.is-drag{cursor:grabbing;}
.scrollmenunew1 a{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid #e3ebf7;border-radius:999px;
  box-shadow:0 2px 6px rgba(15,23,42,.05);
  color:#17324f!important;text-decoration:none;
  padding:10px 17px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.scrollmenunew1 a .busfontmain{font-size:13px;font-weight:700;white-space:nowrap;color:inherit;}
.scrollmenunew1 a:hover{
  transform:translateY(-2px);border-color:var(--bbc,#cbd5e1);
  box-shadow:0 8px 18px rgba(15,23,42,.12);text-decoration:none;
}
.scrollmenunew1 a:nth-child(7n+1){--bbc:#0d9488;}
.scrollmenunew1 a:nth-child(7n+2){--bbc:#2563eb;}
.scrollmenunew1 a:nth-child(7n+3){--bbc:#7c3aed;}
.scrollmenunew1 a:nth-child(7n+4){--bbc:#db2777;}
.scrollmenunew1 a:nth-child(7n+5){--bbc:#ea580c;}
.scrollmenunew1 a:nth-child(7n+6){--bbc:#0891b2;}
.scrollmenunew1 a:nth-child(7n+7){--bbc:#16a34a;}
/* bushire-v1 is the current tab in the CI3 markup */
.scrollmenunew1 a.bushire-v1{
  background:linear-gradient(135deg,#f97316,#fb923c 55%,#f59e0b);
  border-color:transparent;color:#fff!important;font-weight:800;
  box-shadow:0 6px 16px rgba(249,115,22,.38);
  outline:3px solid rgba(249,115,22,.18);outline-offset:1px;
}
.scrollmenunew1 a.bushire-v1 .busfontmain{color:#fff;}
@media (max-width:767.98px){
  .scrollmenunew1{gap:7px;padding:7px!important;border-radius:14px;}
  .scrollmenunew1 a{padding:7px 12px;}
  .scrollmenunew1 a .busfontmain{font-size:11.5px;}
}

/* phones: a very long category name must not eat the whole rail */
@media (max-width:575.98px){
  .bb-htll-navpills-track a{max-width:210px;}
  .bb-htll-navpills-track a span,
  .bb-htll-navpills-track a{overflow:hidden;text-overflow:ellipsis;}
}

/* ============================================================
   RAMOJI SCHOOL / COLLEGE PACKAGES (bb-rsc-*)
   Landing, package detail, enquiry form and enquiry-sent pages. Same tokens as
   the rest of the my-hz DNA: navy #0b1f3b text, orange #f97316 accent, white
   cards on #f8fafc, 999px pills.
   ============================================================ */
.bb-rsc-main{padding:0 0 34px;}
.bb-rsc-crumb{padding:0;margin:14px 0 4px;}
.bb-rsc-crumbbar{background:linear-gradient(120deg,#0b1f3b,#12325c);}
.bb-rsc-crumbbar .bb-crumbx{margin:0;}
.bb-rsc-section{margin:34px 0 0;}
.bb-rsc-slides{padding:0;margin:16px 0 0;}
.bb-rsc-slides .bb-cmsban-item img{border-radius:16px;}
/* the package banners carry readable text, so they get more height than the
   generic 150/190px promo strip */
@media (min-width:768px){.bb-rsc-slides .bb-cmsban-item img{height:250px;}}
@media (min-width:1200px){.bb-rsc-slides .bb-cmsban-item img{height:290px;}}

/* "Have any Queries?" card */
.bb-rsc-query{
  position:relative;margin-top:16px;
  background:linear-gradient(160deg,#0b1f3b,#12325c 60%,#123f6b);
  border-radius:18px;padding:22px 20px;color:#e2e8f0;text-align:center;
  box-shadow:0 12px 30px rgba(11,31,59,.22);
}
.bb-rsc-query--side{position:sticky;top:86px;}
.bb-rsc-query-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;font-size:19px;
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;
  box-shadow:0 6px 16px rgba(249,115,22,.4);margin-bottom:10px;
}
.bb-rsc-query-title{font-size:17px;font-weight:800;color:#fff;margin:0 0 8px;}
.bb-rsc-query-title::after{
  content:"";display:block;width:52px;height:3px;border-radius:3px;margin:9px auto 0;
  background:linear-gradient(90deg,#f97316,#fbbf24);
}
.bb-rsc-query-note{font-size:12.5px;line-height:1.65;color:#cbd5e1;margin:10px 0 14px;}
.bb-rsc-query-call{
  display:inline-flex;align-items:center;gap:8px;
  font-size:17px;font-weight:800;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  padding:9px 18px;border-radius:999px;
}
.bb-rsc-query-call:hover{background:#f97316;border-color:#f97316;color:#fff;text-decoration:none;}
.bb-rsc-query-call i{color:#fdba74;}
.bb-rsc-query-call:hover i{color:#fff;}

/* package cards */
/* auto-fit so two packages fill the row instead of leaving an empty track */
.bb-rsc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
.bb-rsc-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid #e8eef6;border-radius:18px;overflow:hidden;
  box-shadow:0 6px 22px rgba(15,23,42,.06);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.bb-rsc-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,23,42,.14);border-color:#fed7aa;}
.bb-rsc-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#eef2f7;}
.bb-rsc-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.bb-rsc-card:hover .bb-rsc-card-img img{transform:scale(1.06);}
.bb-rsc-card-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;flex:1;}
.bb-rsc-card-title{font-size:15.5px;font-weight:800;line-height:1.35;margin:0;}
.bb-rsc-card-title a{color:#0b1f3b;text-decoration:none;}
.bb-rsc-card-title a:hover{color:#c2410c;text-decoration:none;}
.bb-rsc-fares{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bb-rsc-fare{
  display:flex;flex-direction:column;gap:2px;text-align:center;
  background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;padding:8px 6px;
}
.bb-rsc-fare small{font-size:11.5px;color:#64748b;}
.bb-rsc-fare small i{color:#f97316;margin-right:4px;}
.bb-rsc-fare strong{font-size:15px;font-weight:800;color:#0b1f3b;}
.bb-rsc-valid{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;color:#64748b;border-top:1px dashed #e2e8f0;padding-top:9px;
}
.bb-rsc-valid i{color:#0d9488;margin-right:5px;}
.bb-rsc-valid strong{font-size:12px;color:#0b1f3b;font-weight:700;text-align:right;}
.bb-rsc-free{
  font-size:12px;font-weight:700;color:#9a3412;
  background:#fff7ed;border:1px dashed #fed7aa;border-radius:10px;padding:7px 10px;
}
.bb-rsc-free i{color:#f97316;margin-right:5px;}
.bb-rsc-more{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;font-weight:800;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,#f97316,#ea580c);
  padding:9px 16px;border-radius:999px;
  box-shadow:0 5px 14px rgba(249,115,22,.34);
}
.bb-rsc-more:hover{color:#fff;text-decoration:none;transform:translateY(-1px);}
.bb-rsc-more i{transition:transform .2s ease;}
.bb-rsc-more:hover i{transform:translateX(3px);}

/* CMS tabs (same component as the home page's Why-us tabs) */
.bb-rsc-tabcard{background:#fff;border:1px solid #e8eef6;border-radius:18px;box-shadow:0 6px 22px rgba(15,23,42,.06);padding:16px;}
.bb-rsc-tabs{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;border:0;}
@media (min-width:768px){.bb-rsc-tabs{justify-content:center;flex-wrap:wrap;overflow:visible;}}
.bb-rsc-tabs::-webkit-scrollbar{display:none;}
.bb-rsc-tabs .nav-link{
  flex:0 0 auto;border:1px solid #e3ebf7;background:#f8fafc;border-radius:999px;
  font-size:12.5px;font-weight:700;color:#17324f;padding:8px 16px;white-space:nowrap;
}
.bb-rsc-tabs .nav-link.active{background:linear-gradient(135deg,#f97316,#fb923c);border-color:transparent;color:#fff;box-shadow:0 5px 14px rgba(249,115,22,.32);}
.bb-rsc-tabbody{font-size:13.5px;color:#334155;line-height:1.75;padding:14px 4px 2px;}
.bb-rsc-tabbody p{margin-bottom:12px;}

/* ---------- package detail ---------- */
.bb-rsc-dhead{padding:14px 0 12px;border-bottom:1px solid #e8eef6;margin-bottom:16px;text-align:center;}
.bb-rsc-dhead .bb-section-head{margin-bottom:12px;}
.bb-rsc-dhead .bb-section-title{font-size:clamp(20px,2.4vw,28px);}
.bb-rsc-dhead-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:stretch;}
.bb-rsc-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:104px;padding:8px 14px;border-radius:14px;text-align:center;
  background:linear-gradient(135deg,#0b1f3b,#12325c);color:#fff;
}
.bb-rsc-chip small{font-size:11px;color:#cbd5e1;}
.bb-rsc-chip strong{font-size:16px;font-weight:800;}
.bb-rsc-chip--soft{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;}
.bb-rsc-chip--soft small{color:#c2410c;}
.bb-rsc-chip--soft strong{font-size:12.5px;}
.bb-rsc-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff!important;
  font-size:13.5px;font-weight:800;text-decoration:none;
  padding:10px 20px;border-radius:999px;
  box-shadow:0 6px 16px rgba(249,115,22,.38);
}
.bb-rsc-cta:hover{text-decoration:none;transform:translateY(-1px);}
.bb-rsc-cta--block{display:flex;width:100%;margin-top:14px;}
.bb-rsc-gal{margin-bottom:6px;}

/* sticky section nav */
.bb-rsc-tabnav{
  position:sticky;top:64px;z-index:6;
  background:linear-gradient(180deg,#f7fbff,#eef4fc);
  border:1px solid #dde7f4;border-radius:14px;
  box-shadow:0 4px 16px rgba(15,23,42,.07);
  padding:7px;margin:0 0 18px;
}
.bb-rsc-tabnav-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:auto;}
.bb-rsc-tabnav-track::-webkit-scrollbar{display:none;}
.bb-rsc-tabnav-item{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid #e3ebf7;border-radius:999px;
  font-size:12.5px;font-weight:700;color:#17324f;text-decoration:none;
  padding:8px 15px;white-space:nowrap;
  transition:all .18s ease;
}
.bb-rsc-tabnav-item i{color:#f97316;font-size:12px;}
.bb-rsc-tabnav-item:hover{color:#0b1f3b;text-decoration:none;border-color:#f97316;transform:translateY(-1px);}
.bb-rsc-tabnav-item.active{background:linear-gradient(135deg,#f97316,#fb923c);border-color:transparent;color:#fff;box-shadow:0 5px 14px rgba(249,115,22,.32);}
.bb-rsc-tabnav-item.active i{color:#fff;}

/* detail panels */
.bb-rsc-panel{
  position:relative;background:#fff;border:1px solid #e8eef6;border-radius:18px;
  box-shadow:0 5px 18px rgba(15,23,42,.05);padding:18px;margin-bottom:18px;
  scroll-margin-top:130px;
}
.bb-rsc-panel-head{text-align:center;margin-bottom:12px;}
.bb-rsc-panel-head > h2{font-size:18px;font-weight:800;line-height:1.3;}
.bb-rsc-panel-head > h2 i{margin-right:6px;color:#f97316!important;-webkit-text-fill-color:#f97316;}
.bb-rsc-panel-head p{font-size:12.5px;color:#64748b;margin:8px 0 0;}
.bb-rsc-panel-cta{
  position:absolute;top:16px;right:16px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:800;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,#0d9488,#0f766e);
  padding:8px 14px;border-radius:999px;box-shadow:0 5px 14px rgba(13,148,136,.3);
}
.bb-rsc-panel-cta:hover{color:#fff;text-decoration:none;background:linear-gradient(135deg,#f97316,#ea580c);}
.bb-rsc-panel-pkg{font-size:15px;font-weight:800;color:#0b1f3b;text-align:center;margin:0 0 12px;}
.bb-rsc-note{
  display:flex;gap:9px;align-items:flex-start;
  font-size:13px;line-height:1.7;color:#334155;
  border:1px solid #e2e8f0;border-left:4px solid #94a3b8;
  background:#f8fafc;border-radius:12px;padding:12px 14px;
}
.bb-rsc-note > i{margin-top:3px;}
.bb-rsc-note--ok{background:#f0fdf4;border-color:#bbf7d0;border-left-color:#16a34a;}
.bb-rsc-note--ok > i{color:#16a34a;}
.bb-rsc-note--info{background:#eff6ff;border-color:#c7ddfe;border-left-color:#2563eb;}
.bb-rsc-note--info > i{color:#2563eb;}
.bb-rsc-note--warn{background:#fffbeb;border-color:#fde68a;border-left-color:#f59e0b;}
.bb-rsc-note--warn > i{color:#d97706;}
.bb-rsc-note--alert{background:#fef2f2;border-color:#fecaca;border-left-color:#dc2626;}
.bb-rsc-note--alert > i{color:#dc2626;}
.bb-rsc-note p:last-child{margin-bottom:0;}

/* tables */
.bb-rsc-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;}
.bb-rsc-table thead th{
  background:linear-gradient(135deg,#0b1f3b,#12325c);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  padding:10px 12px;text-align:center;
}
.bb-rsc-table tbody td{padding:12px;border-top:1px solid #eef2f7;color:#334155;text-align:center;}
.bb-rsc-table tbody strong{color:#0b1f3b;font-weight:800;}
.bb-rsc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,#16a34a,#15803d);color:#fff!important;
  font-size:12.5px;font-weight:800;text-decoration:none;padding:8px 14px;border-radius:999px;
}
.bb-rsc-btn:hover{text-decoration:none;background:linear-gradient(135deg,#f97316,#ea580c);}

/* school feedbacks */
.bb-rsc-revs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.bb-rsc-revs .bb-rsc-rev.is-extra{display:none;}
.bb-rsc-revs.show-all .bb-rsc-rev.is-extra{display:flex;}
.bb-rsc-rev{
  display:flex;flex-direction:column;gap:10px;
  background:#fff;border:1px solid #e8eef6;border-radius:16px;
  box-shadow:0 5px 18px rgba(15,23,42,.05);padding:16px;
}
.bb-rsc-rev-who{display:flex;align-items:center;gap:11px;}
.bb-rsc-rev-av{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0b1f3b,#12325c);color:#fff;
  font-size:17px;font-weight:800;
}
.bb-rsc-rev-who strong{display:block;font-size:14px;font-weight:800;color:#0b1f3b;line-height:1.3;}
.bb-rsc-rev-who small{font-size:11.5px;color:#64748b;}
.bb-rsc-rev-who small i{color:#f97316;margin-right:4px;}
.bb-rsc-rev-counts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bb-rsc-rev-counts span{
  display:flex;flex-direction:column;gap:2px;text-align:center;
  background:#f8fafc;border:1px solid #eef2f7;border-radius:11px;padding:7px 6px;
}
.bb-rsc-rev-counts small{font-size:11px;color:#64748b;}
.bb-rsc-rev-counts strong{font-size:14px;font-weight:800;color:#0b1f3b;}
.bb-rsc-rev-txt{font-size:13px;color:#475569;line-height:1.7;margin:0;}
.bb-rsc-revmore-wrap{text-align:center;margin-top:18px;}
.bb-rsc-revmore{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:#fff;border:1px solid #e3ebf7;border-radius:999px;
  font-size:13px;font-weight:800;color:#0b1f3b;padding:10px 20px;
  box-shadow:0 4px 12px rgba(15,23,42,.07);
}
.bb-rsc-revmore:hover{border-color:#f97316;color:#c2410c;}
.bb-rsc-revmore i{color:#f97316;}

/* ---------- enquiry form ---------- */
.bb-rsc-enq{padding-bottom:150px;}
/* the enquiry form uses the passenger-details component (.bb-tpx-paxcard /
   .bb-tpx-label / .bb-tpx-input); only these two extras are local to it */
.bb-rsc-facsplit{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  min-height:44px;font-size:12.5px;color:#0b1f3b;
  background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:8px 12px;
}
.bb-rsc-datefield{cursor:pointer;background-image:none!important;padding-right:14px!important;}
.bb-rsc-enq .bb-tpx-paxcard{margin-bottom:16px;}
.bb-rsc-enq .parsley-errors-list{list-style:none;margin:4px 0 0;padding:0;font-size:11.5px;color:#dc2626;font-weight:600;}

/* fare panel */
.bb-rsc-fare-card{
  position:sticky;top:86px;
  background:#fff;border:1px solid #e8eef6;border-radius:18px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);padding:18px;
}
.bb-rsc-fare-title{font-size:16px;font-weight:800;color:#0b1f3b;margin:0 0 14px;text-align:center;}
.bb-rsc-fare-title i{color:#f97316;margin-right:7px;}
.bb-rsc-fare-list{list-style:none;margin:0;padding:0;}
.bb-rsc-fare-list li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;color:#475569;padding:7px 0;}
.bb-rsc-fare-list li em{font-style:normal;}          /* label: one flex item, so "GST ( 0 %)" stays together */
.bb-rsc-fare-list li > span{font-weight:700;color:#0b1f3b;white-space:nowrap;}
.bb-rsc-fare-list li.bb-rsc-fare-sep{border-top:1px dashed #e2e8f0;margin-top:4px;padding-top:11px;}
.bb-rsc-fare-total{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;
  padding:11px 14px;margin-top:10px;font-size:13.5px;font-weight:700;color:#0b1f3b;
}
.bb-rsc-fare-total strong{font-size:16px;font-weight:800;}
.bb-rsc-fare-total--adv{background:#fff7ed;border-color:#fed7aa;color:#9a3412;}
.bb-rsc-submit{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:14px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff!important;
  font-size:14.5px;font-weight:800;text-decoration:none;
  padding:13px 18px;border-radius:999px;
  box-shadow:0 8px 20px rgba(249,115,22,.4);
}
.bb-rsc-submit:hover{text-decoration:none;transform:translateY(-1px);}

/* mobile fare sheet */
.bb-rsc-mfare{position:fixed;left:0;right:0;bottom:0;z-index:1020;}
.bb-rsc-mfare-panel{
  display:none;background:#fff;border:1px solid #e8eef6;border-bottom:0;
  border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(15,23,42,.16);
  padding:16px 16px 8px;
}
.bb-rsc-mfare-bar{
  position:relative;display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#0b1f3b,#12325c);
  padding:10px 14px;border-radius:16px 16px 0 0;
  box-shadow:0 -6px 20px rgba(11,31,59,.28);
}
.bb-rsc-mfare-flip{
  position:absolute;left:50%;top:-15px;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;
  box-shadow:0 5px 14px rgba(249,115,22,.45);
}
.bb-rsc-mfare-flip i{transition:transform .3s ease;}
.bb-rsc-mfare-flip span.down i{transform:rotate(180deg);}
.bb-rsc-mfare-amt{flex:1;font-size:12.5px;color:#cbd5e1;}
.bb-rsc-mfare-amt strong{display:block;font-size:16px;font-weight:800;color:#fff;}
.bb-rsc-submit--mob{width:auto;margin:0;padding:11px 18px;font-size:13.5px;}

/* ---------- enquiry sent ---------- */
.bb-rsc-promos{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.bb-rsc-promos img{width:100%;height:auto;border-radius:16px;box-shadow:0 8px 22px rgba(15,23,42,.1);}

@media (max-width:991.98px){
  .bb-rsc-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
  .bb-rsc-query--side,.bb-rsc-fare-card{position:static;}
  .bb-rsc-tabnav{top:56px;}
}
@media (max-width:767.98px){
  .bb-rsc-revs{grid-template-columns:1fr;}
  .bb-rsc-promos{grid-template-columns:1fr;}
  .bb-rsc-frow{grid-template-columns:1fr;}
  .bb-rsc-panel-cta{position:static;display:flex;width:100%;margin:0 0 12px;justify-content:center;}
  .bb-rsc-panel-head{margin-bottom:10px;}
  .bb-rsc-table thead th{font-size:11px;padding:8px 6px;}
  .bb-rsc-table tbody td{padding:9px 6px;font-size:12.5px;}
}
@media (max-width:575.98px){
  .bb-rsc-grid{grid-template-columns:1fr;gap:14px;}
  .bb-rsc-card-body{padding:13px 14px 15px;gap:9px;}
  .bb-rsc-card-title{font-size:15px;}
  .bb-rsc-fare strong{font-size:15px;}
  .bb-rsc-free{font-size:12px;}
  .bb-rsc-dhead-chips{gap:8px;}
  .bb-rsc-chip{min-width:88px;padding:7px 11px;}
}

/* ============================================================
   RAMOJI SCHOOL/COLLEGE — enquiry-sent receipt (replaces .bb-rsc-succ*)
   A celebration band over a ticket-style receipt: perforated notches, a dashed
   tear line, the enquiry's own values, the three-step "what happens next" and
   the action row. Confetti is static CSS (no JS, no entrance animation that
   could strand it invisible in a throttled tab); only the tick pulses, and it
   starts fully visible.
   ============================================================ */
.bb-rsc-receipt{
  position:relative;max-width:820px;margin:24px auto 0;
  background:#fff;border:1px solid #e8eef6;border-radius:22px;overflow:hidden;
  box-shadow:0 16px 42px rgba(15,23,42,.11);
}
/* celebration band */
.bb-rsc-celebrate{
  position:relative;overflow:hidden;text-align:center;padding:30px 22px 26px;
  background:linear-gradient(160deg,#065f46 0%,#15803d 55%,#16a34a 100%);
  color:#fff;
}
.bb-rsc-celebrate h1{font-size:clamp(21px,2.6vw,28px);font-weight:800;color:#fff;margin:14px 0 6px;}
.bb-rsc-celebrate p{font-size:13.5px;color:#d1fae5;margin:0;}
.bb-rsc-celebrate p b{color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:2px 10px;margin-left:4px;}
.bb-rsc-tick{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;font-size:31px;
  background:#fff;color:#16a34a;
  box-shadow:0 0 0 10px rgba(255,255,255,.16),0 12px 26px rgba(2,44,34,.32);
  animation:bbRscTick 2.6s ease-in-out infinite;
}
@keyframes bbRscTick{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
/* static confetti: 12 chips scattered across the band */
.bb-rsc-confetti{position:absolute;inset:0;pointer-events:none;}
.bb-rsc-confetti i{position:absolute;width:9px;height:14px;border-radius:2px;opacity:.55;}
.bb-rsc-confetti i:nth-child(1){left:6%;top:18%;background:#fbbf24;transform:rotate(18deg);}
.bb-rsc-confetti i:nth-child(2){left:14%;top:62%;background:#f97316;transform:rotate(-24deg);}
.bb-rsc-confetti i:nth-child(3){left:22%;top:12%;background:#38bdf8;transform:rotate(42deg);}
.bb-rsc-confetti i:nth-child(4){left:30%;top:74%;background:#f472b6;transform:rotate(-12deg);}
.bb-rsc-confetti i:nth-child(5){left:41%;top:8%;background:#a3e635;transform:rotate(30deg);}
.bb-rsc-confetti i:nth-child(6){left:52%;top:80%;background:#fbbf24;transform:rotate(-38deg);}
.bb-rsc-confetti i:nth-child(7){left:62%;top:14%;background:#f472b6;transform:rotate(12deg);}
.bb-rsc-confetti i:nth-child(8){left:70%;top:68%;background:#38bdf8;transform:rotate(-20deg);}
.bb-rsc-confetti i:nth-child(9){left:78%;top:22%;background:#f97316;transform:rotate(36deg);}
.bb-rsc-confetti i:nth-child(10){left:86%;top:58%;background:#a3e635;transform:rotate(-30deg);}
.bb-rsc-confetti i:nth-child(11){left:93%;top:30%;background:#fbbf24;transform:rotate(16deg);}
.bb-rsc-confetti i:nth-child(12){left:47%;top:44%;background:#fff;opacity:.3;transform:rotate(-8deg);}
/* perforation between band and body */
.bb-rsc-rbody{position:relative;padding:26px 22px 22px;}
.bb-rsc-rbody::before,.bb-rsc-rbody::after{
  content:"";position:absolute;top:-13px;width:26px;height:26px;border-radius:50%;
  background:#f8fafc;border:1px solid #e8eef6;
}
.bb-rsc-rbody::before{left:-14px;}
.bb-rsc-rbody::after{right:-14px;}
.bb-rsc-rtop{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:2px dashed #e2e8f0;padding-bottom:16px;margin-bottom:16px;
}
.bb-rsc-rlabel{display:block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#94a3b8;}
.bb-rsc-rpkg{display:block;font-size:17px;font-weight:800;color:#0b1f3b;line-height:1.35;margin-top:3px;}
.bb-rsc-rdate{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;padding:9px 15px;
  font-size:12.5px;color:#9a3412;
}
.bb-rsc-rdate i{color:#f97316;}
.bb-rsc-rdate strong{font-size:15px;font-weight:800;color:#c2410c;}
.bb-rsc-rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.bb-rsc-rcell{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  background:#f8fafc;border:1px solid #eef2f7;border-radius:14px;padding:12px 14px;
}
.bb-rsc-rcell > span{font-size:11.5px;font-weight:700;color:#64748b;}
.bb-rsc-rcell > span i{color:#f97316;margin-right:5px;}
.bb-rsc-rcell > strong{font-size:15px;font-weight:800;color:#0b1f3b;line-height:1.35;overflow-wrap:anywhere;}
.bb-rsc-rcell > small{font-size:11.5px;color:#64748b;}
.bb-rsc-rcell--hi{background:#f0fdf4;border-color:#bbf7d0;}
.bb-rsc-rcell--hi > strong{color:#15803d;}
.bb-rsc-rmail{font-size:13px!important;}
.bb-rsc-rfare{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:13px 16px;border-radius:14px;
  background:linear-gradient(135deg,#0b1f3b,#12325c);color:#cbd5e1;font-size:12.5px;
}
.bb-rsc-rfare > div{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.bb-rsc-rfare em{font-style:normal;color:#e2e8f0;}
.bb-rsc-rfare strong{font-size:19px;font-weight:800;color:#fdba74;}
.bb-rsc-rfare b{font-size:12.5px;color:#fff;background:rgba(249,115,22,.25);border:1px solid rgba(249,115,22,.5);border-radius:999px;padding:3px 11px;}

/* what happens next */
.bb-rsc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 14px;}
.bb-rsc-step{display:flex;align-items:flex-start;gap:11px;border:1px solid #eef2f7;border-radius:14px;padding:12px 14px;background:#fff;}
.bb-rsc-step > span{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;
  background:#eef2f7;color:#94a3b8;
}
.bb-rsc-step strong{display:block;font-size:13.5px;font-weight:800;color:#0b1f3b;line-height:1.3;}
.bb-rsc-step small{font-size:11.5px;color:#64748b;}
.bb-rsc-step.is-done{border-color:#bbf7d0;background:#f0fdf4;}
.bb-rsc-step.is-done > span{background:#16a34a;color:#fff;}
.bb-rsc-step.is-now{border-color:#fed7aa;background:#fff7ed;}
.bb-rsc-step.is-now > span{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;box-shadow:0 5px 14px rgba(249,115,22,.35);}

/* two actions, always side by side (they stay readable down to 320px) */
.bb-rsc-ractions{display:flex;flex-wrap:nowrap;gap:10px;justify-content:center;margin-top:16px;}
.bb-rsc-ractions > a{flex:1 1 0;min-width:0;justify-content:center;text-align:center;}
.bb-rsc-ghost{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #e3ebf7;border-radius:999px;
  font-size:13px;font-weight:800;color:#0b1f3b!important;text-decoration:none;
  padding:10px 18px;box-shadow:0 4px 12px rgba(15,23,42,.06);cursor:pointer;
}
.bb-rsc-ghost:hover{border-color:#f97316;color:#c2410c!important;text-decoration:none;}
.bb-rsc-ghost i{color:#f97316;}

@media (max-width:767.98px){
  .bb-rsc-rgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bb-rsc-steps{grid-template-columns:1fr;}
  .bb-rsc-rtop{flex-direction:column;align-items:flex-start;}
  .bb-rsc-ractions{gap:8px;}
  .bb-rsc-ractions > a{padding-left:10px;padding-right:10px;font-size:12.5px;white-space:nowrap;}
}
@media (max-width:575.98px){
  .bb-rsc-rgrid{grid-template-columns:1fr;}
  .bb-rsc-celebrate{padding:24px 16px 20px;}
  .bb-rsc-tick{width:62px;height:62px;font-size:26px;}
  .bb-rsc-rbody{padding:22px 14px 18px;}
  .bb-rsc-rfare strong{font-size:17px;}
}
@media (max-width:420px){
  .bb-rsc-ractions{gap:6px;}
  .bb-rsc-ractions > a{padding-left:8px;padding-right:8px;font-size:11.5px;gap:6px;}
  .bb-rsc-ractions > a i{font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  .bb-rsc-tick{animation:none;}
}
/* printing the receipt */
@media print{
  .bb-rsc-noprint,.bb-secnav,.bb-bp-cta-fixed,.bb-rsc-mfare{display:none!important;}
  .bb-rsc-receipt{box-shadow:none;border-color:#cbd5e1;margin:0;}
  .bb-rsc-celebrate{background:#15803d!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ============================================================
   MMTS TRAIN TIMINGS (bb-mmts-*)
   Landing route/station cards, the route timing matrix (sticky station column)
   and the station tables. Same tokens as the rest of the DNA.
   ============================================================ */
.bb-mmts-main{padding:0 0 34px;}
.bb-mmts-section{margin:30px 0 0;}
.bb-mmts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.bb-mmts-grid--routes{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));}
.bb-mmts-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid #e8eef6;border-radius:18px;overflow:hidden;
  box-shadow:0 6px 22px rgba(15,23,42,.06);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.bb-mmts-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,23,42,.14);border-color:#fed7aa;}
.bb-mmts-card-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#eef2f7;}
.bb-mmts-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.bb-mmts-card:hover .bb-mmts-card-img img{transform:scale(1.06);}
.bb-mmts-card-tag{
  position:absolute;left:11px;top:11px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:800;color:#fff;
  background:rgba(11,31,59,.62);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);padding:5px 11px;border-radius:999px;
}
.bb-mmts-card-tag i{color:#fb923c;}
.bb-mmts-card-tag--st i{color:#5eead4;}
.bb-mmts-card-body{display:flex;flex-direction:column;gap:11px;padding:14px 16px 16px;flex:1;}
.bb-mmts-card-body h3{font-size:15.5px;font-weight:800;line-height:1.35;margin:0;}
.bb-mmts-card-body h3 a{color:#0b1f3b;text-decoration:none;}
.bb-mmts-card-body h3 a:hover{color:#c2410c;text-decoration:none;}
.bb-mmts-more{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;font-weight:800;color:#fff!important;text-decoration:none;
  background:linear-gradient(135deg,#f97316,#ea580c);
  padding:9px 16px;border-radius:999px;box-shadow:0 5px 14px rgba(249,115,22,.34);
}
.bb-mmts-more:hover{text-decoration:none;transform:translateY(-1px);}
.bb-mmts-more i{transition:transform .2s ease;}
.bb-mmts-more:hover i{transform:translateX(3px);}

/* inner-page header */
.bb-mmts-dhead{padding:14px 0 12px;border-bottom:1px solid #e8eef6;margin-bottom:18px;text-align:center;}
.bb-mmts-dhead .bb-section-head{margin-bottom:12px;}
.bb-mmts-dhead .bb-section-title{font-size:clamp(20px,2.4vw,28px);}
.bb-mmts-dchips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.bb-mmts-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:#475569;
  background:#f8fafc;border:1px solid #e3ebf7;border-radius:999px;padding:7px 14px;
}
.bb-mmts-chip strong{font-size:14px;font-weight:800;color:#0b1f3b;}

/* panels */
.bb-mmts-panel{
  background:#fff;border:1px solid #e8eef6;border-radius:18px;
  box-shadow:0 5px 18px rgba(15,23,42,.05);padding:18px;margin-bottom:18px;
}
.bb-mmts-panel--table{padding:14px;}
.bb-mmts-fig{margin:0;border-radius:14px;overflow:hidden;}
.bb-mmts-fig img{width:100%;height:auto;display:block;}
.bb-mmts-note{margin-bottom:18px;}
.bb-mmts-swipe{margin:10px 0 0;text-align:center;font-size:11.5px;color:#94a3b8;font-weight:600;}
.bb-mmts-swipe i{color:#f97316;margin-right:5px;}

/* the timing matrix: horizontal scroll with a frozen station column */
.bb-mmts-tablewrap{
  overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid #e2e8f0;border-radius:14px;
  scrollbar-width:thin;
}
.bb-mmts-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:#fff;}
.bb-mmts-table th,.bb-mmts-table td{
  padding:9px 12px;text-align:center;white-space:nowrap;
  border-bottom:1px solid #eef2f7;border-right:1px solid #eef2f7;
}
.bb-mmts-table thead th{
  background:linear-gradient(135deg,#0b1f3b,#12325c);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.2px;
  position:sticky;top:0;z-index:2;
}
.bb-mmts-table thead th small{display:block;font-size:10.5px;font-weight:600;color:#cbd5e1;margin-top:2px;}
.bb-mmts-table tbody td{color:#334155;font-variant-numeric:tabular-nums;}
.bb-mmts-table tbody tr:nth-child(even) td{background:#f8fafc;}
.bb-mmts-table tbody tr:hover td{background:#fff7ed;}
.bb-mmts-table td.is-empty{color:#cbd5e1;}
.bb-mmts-table th:last-child,.bb-mmts-table td:last-child{border-right:0;}
.bb-mmts-table tbody tr:last-child th,.bb-mmts-table tbody tr:last-child td{border-bottom:0;}
/* frozen first column */
.bb-mmts-sticky{position:sticky;left:0;z-index:3;min-width:150px;text-align:left!important;}
thead .bb-mmts-sticky{z-index:4;}
.bb-mmts-stname{
  background:#fff;color:#0b1f3b;font-weight:700;font-size:12.5px;
  box-shadow:2px 0 6px rgba(15,23,42,.06);
}
.bb-mmts-table tbody tr:nth-child(even) .bb-mmts-stname{background:#f8fafc;}
.bb-mmts-table tbody tr:hover .bb-mmts-stname{background:#fff7ed;}

/* the * / MB markers */
.bb-mmts-mark{display:inline-block;margin-left:4px;font-weight:800;}
.bb-mmts-mark--sun{color:#dc2626;font-size:15px;line-height:1;}
.bb-mmts-mark--mb{
  color:#92400e;background:#fef3c7;border:1px solid #fcd34d;
  font-size:10px;padding:1px 5px;border-radius:5px;vertical-align:middle;
}

/* station page: one card per destination */
.bb-mmts-stgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;}
.bb-mmts-stcard{margin-bottom:0;}
.bb-mmts-stcard-title{
  display:flex;align-items:flex-start;gap:9px;
  font-size:15px;font-weight:800;color:#0b1f3b;line-height:1.4;margin:0 0 12px;
}
.bb-mmts-stcard-title i{color:#f97316;font-size:13px;margin-top:3px;}
.bb-mmts-stcard-title em{font-style:normal;color:#f97316;}
.bb-mmts-table--st th{width:50%;}

@media (max-width:991.98px){
  .bb-mmts-grid,.bb-mmts-grid--routes{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
}
@media (max-width:575.98px){
  .bb-mmts-grid,.bb-mmts-grid--routes,.bb-mmts-stgrid{grid-template-columns:1fr;gap:14px;}
  .bb-mmts-panel{padding:13px;border-radius:15px;}
  .bb-mmts-table th,.bb-mmts-table td{padding:8px 10px;font-size:12.5px;}
  .bb-mmts-sticky{min-width:124px;}
  .bb-mmts-stcard-title{font-size:14px;}
}

/* ============================================================
   CMS CONTENT TABLES (admin-authored, e.g. the MMTS timetables inside
   train-timings / blog posts). CKEditor writes a bare .timingsTable with a
   two-row <thead> (train numbers, then the LF/FL codes) and the station name in
   the first column -- 50-60 columns wide and completely unstyled, so it read as
   loose text running off the page.

   Themed here to match the module's own .bb-mmts-table: navy sticky header,
   bordered zebra rows, tabular figures, and a frozen first column so the
   station stays visible while the timings scroll. Scoped to content bodies so
   nothing else on the site is touched.
   ============================================================ */
.bb-bp-content .table-responsive,
.bb-bp-content .timingsTable{scroll-behavior:auto;}
.bb-bp-content .table-responsive{
  overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid #e2e8f0;border-radius:14px;
  margin:14px 0 6px;background:#fff;
  box-shadow:0 4px 14px rgba(15,23,42,.05);
  scrollbar-width:thin;
}
.bb-bp-content table.timingsTable,
.bb-bp-content .table-responsive > table{
  width:auto;min-width:100%;
  border-collapse:separate;border-spacing:0;
  font-size:12.5px;background:#fff;margin:0;
}
/* header rows (CKEditor puts plain <td>s inside <thead>) */
.bb-bp-content .table-responsive > table > thead td,
.bb-bp-content .table-responsive > table > thead th{
  background:linear-gradient(135deg,#0b1f3b,#12325c);color:#fff!important;
  font-weight:700;font-size:11.5px;letter-spacing:.2px;
  padding:8px 10px;text-align:center;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.14);border-bottom:0;
  position:sticky;top:0;z-index:2;
}
.bb-bp-content .table-responsive > table > thead tr:nth-child(2) td{
  top:31px;font-size:10.5px;color:#cbd5e1!important;
  background:linear-gradient(135deg,#12325c,#1b4270);
}
/* body cells */
.bb-bp-content .table-responsive > table > tbody td{
  padding:7px 10px;text-align:center;white-space:nowrap;
  color:#334155;font-variant-numeric:tabular-nums;
  border-right:1px solid #eef2f7;border-bottom:1px solid #eef2f7;
}
.bb-bp-content .table-responsive > table > tbody tr:nth-child(even) td{background:#f8fafc;}
.bb-bp-content .table-responsive > table > tbody tr:hover td{background:#fff7ed;}
.bb-bp-content .table-responsive > table > tbody tr:last-child td{border-bottom:0;}
.bb-bp-content .table-responsive > table td:last-child{border-right:0;}
/* frozen first column: the station name */
.bb-bp-content .table-responsive > table > thead td:first-child,
.bb-bp-content .table-responsive > table > tbody td:first-child{
  position:sticky;left:0;z-index:3;
  text-align:left;font-weight:700;min-width:132px;
}
.bb-bp-content .table-responsive > table > thead td:first-child{z-index:4;}
.bb-bp-content .table-responsive > table > tbody td:first-child{
  background:#fff;color:#0b1f3b;
  box-shadow:2px 0 6px rgba(15,23,42,.06);
}
.bb-bp-content .table-responsive > table > tbody tr:nth-child(even) td:first-child{background:#f8fafc;}
.bb-bp-content .table-responsive > table > tbody tr:hover td:first-child{background:#fff7ed;}
/* the * / MB markers the admin writes inline */
.bb-bp-content .table-responsive > table .red,
.bb-bp-content .table-responsive > table td span[style*="red"]{color:#dc2626!important;font-weight:800;}
.bb-bp-content .table-responsive > table .yellow{
  color:#92400e!important;background:#fef3c7;border:1px solid #fcd34d;
  font-size:10px;padding:0 5px;border-radius:5px;
}
/* a hint that the grid scrolls sideways */
.bb-bp-content .table-responsive::after{content:none;}
.bb-cttable-hint{
  margin:4px 0 16px;text-align:center;font-size:11.5px;color:#94a3b8;font-weight:600;
}
.bb-cttable-hint i{color:#f97316;margin-right:5px;}

@media (max-width:575.98px){
  .bb-bp-content .table-responsive > table{font-size:11.5px;}
  .bb-bp-content .table-responsive > table > thead td{padding:7px 8px;font-size:10.5px;}
  .bb-bp-content .table-responsive > table > tbody td{padding:6px 8px;}
  .bb-bp-content .table-responsive > table > thead td:first-child,
  .bb-bp-content .table-responsive > table > tbody td:first-child{min-width:104px;}
}

/* ============================================================
   ABOUT US (bb-abt-*)
   CI3 renders two `bg-light shadow-md rounded p-4` cards -- the CMS
   description and the Booking.com affiliate widget. Same two panels here in
   DNA clothing; the page has nothing else.
   ============================================================ */
.bb-abt-panel{
  background:#fff;border:1px solid #e8eef6;border-radius:18px;
  box-shadow:0 6px 22px rgba(15,23,42,.06);
  padding:26px 26px 24px;margin-bottom:22px;
}
.bb-abt-panel .bb-section-head{margin-bottom:16px;}
.bb-abt-panel--widget{padding:18px;}
.bb-abt-panel--widget iframe{max-width:100%;}

/* the CMS body: CKEditor writes bare <p>/<ul>/<h*> straight into it */
.bb-abt-body{font-size:15px;line-height:1.75;color:var(--bb-text,#334155);}
.bb-abt-body > *:last-child{margin-bottom:0;}
.bb-abt-body p{font-size:15px;line-height:1.75;margin-bottom:14px;}
.bb-abt-body h1,.bb-abt-body h2,.bb-abt-body h3,
.bb-abt-body h4,.bb-abt-body h5{
  font-size:17px;font-weight:800;color:#0b1f3b;margin:20px 0 9px;
}
.bb-abt-body a{color:#c2410c;font-weight:600;}
.bb-abt-body img{max-width:100%;height:auto;border-radius:12px;}

@media (max-width:575.98px){
  .bb-abt-panel{padding:18px 16px 16px;border-radius:15px;margin-bottom:16px;}
  .bb-abt-panel--widget{padding:12px;}
  .bb-abt-body,.bb-abt-body p{font-size:14.5px;}
}

/* ============================================================
   BREADCRUMB INSIDE THE INNER HERO
   On the common CMS pages (about/contact/faqs/legal/careers/offers/feedback/
   operator) the crumb used to sit in its own pale band under the coloured
   band, which read as a second header. It now lives inside the hero, directly
   under the title, as a translucent chip -- same vocabulary as
   .bb-inner-hero-eyebrow, so it reads as part of the band.

   Colours are set for the coloured hero, not the page background: links at
   82% white, the current page solid white, separators at 55%.
   ============================================================ */
.bb-inner-hero .bb-breadcrumb{
  background:none;padding:0;margin:14px 0 0;
  font-size:12.5px;text-align:center;line-height:1.2;
}
.bb-inner-hero .bb-breadcrumb > .container{
  display:inline-flex;align-items:center;flex-wrap:wrap;
  justify-content:center;gap:1px;
  width:auto;max-width:100%;padding:6px 15px;
  /* dark glass, not light: the hero band ranges from slate #0a1525 to yellow #eab308,
     and only a darkening overlay keeps white crumb text above 4.5:1 on the bright ones */
  background:rgba(9,20,40,.45);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--bb-radius-pill,999px);
  backdrop-filter:blur(8px);
}
/* !important because style.css sets .bb-breadcrumb a{color:var(--mz-sc)!important} -- teal reads as a broken link on the coloured band */
.bb-inner-hero .bb-breadcrumb a{color:rgba(255,255,255,.95)!important;text-decoration:none;font-weight:600;}
.bb-inner-hero .bb-breadcrumb a:hover{color:#fff!important;text-decoration:underline;}
.bb-inner-hero .bb-breadcrumb span{color:#fff;font-weight:800;}
.bb-inner-hero .bb-breadcrumb i{font-size:8px;color:rgba(255,255,255,.72);margin:0 7px;}

.bb-inner-hero .bb-breadcrumb--left{text-align:left;}

@media (max-width:575.98px){
  .bb-inner-hero .bb-breadcrumb{margin-top:12px;font-size:12px;}
  .bb-inner-hero .bb-breadcrumb > .container{padding:5px 12px;}
  .bb-inner-hero .bb-breadcrumb i{margin:0 5px;}
}

/* ============================================================
   CMS PAGE RHYTHM -- tighten the dead space
   Measured on about-us before this block: 30px above the title, 64px between
   the crumb and the end of the band (28px .bb-inner-hero-text margin + 36px
   hero padding, both now redundant since the crumb IS the last line), and a
   50px gap from the band to the first panel. The band was 169px tall to hold
   a 32px title and a 29px chip.
   ============================================================ */
.bb-inner-hero{padding:20px 0 22px;}
/* only when the text block is the whole band -- faqs/offers keep the gap
   because a search bar or CTA follows it inside the same container */
.bb-inner-hero .container > .bb-inner-hero-text:only-child{margin-bottom:0;}
.bb-inner-hero h1{margin-bottom:6px;}
.bb-inner-hero-eyebrow{margin-bottom:10px;}
.bb-inner-hero .bb-breadcrumb{margin-top:10px;}

.bb-static-page{padding:26px 0 34px;}

/* about-us panels: less chrome, tighter CMS body */
.bb-abt-panel{padding:20px 22px 18px;margin-bottom:16px;}
.bb-abt-panel .bb-section-head{margin-bottom:12px;}
.bb-abt-body{line-height:1.65;}
.bb-abt-body p{line-height:1.65;margin-bottom:11px;}
.bb-abt-body h1,.bb-abt-body h2,.bb-abt-body h3,
.bb-abt-body h4,.bb-abt-body h5{margin:15px 0 7px;}

@media (max-width:575.98px){
  /* tripled to out-specify style.css .bb-ut46b0k.bb-ut46b0k.bb-ut46b0k{padding:36px 0 50px},
   which was keeping the legal/influencer/investor bands tall */
.bb-inner-hero.bb-inner-hero.bb-inner-hero{padding:16px 0 18px;}
  .bb-static-page{padding:18px 0 26px;}
  .bb-abt-panel{padding:15px 15px 13px;margin-bottom:13px;}
}

/* ---- second pass: more height off the CMS pages ---- */
/* tripled to out-specify style.css .bb-ut46b0k.bb-ut46b0k.bb-ut46b0k{padding:36px 0 50px},
   which was keeping the legal/influencer/investor bands tall */
.bb-inner-hero.bb-inner-hero.bb-inner-hero{padding:16px 0 18px;}
.bb-inner-hero h1{margin-bottom:4px;}
.bb-inner-hero .bb-breadcrumb{margin-top:8px;}
.bb-static-page{padding:20px 0 22px;}
.bb-abt-panel{padding:18px 20px 15px;margin-bottom:12px;}
.bb-abt-panel .bb-section-head{margin-bottom:9px;}
.bb-abt-panel--widget{padding:10px;}
.bb-abt-body{line-height:1.58;}
.bb-abt-body p{line-height:1.58;margin-bottom:9px;}
.bb-abt-body h1,.bb-abt-body h2,.bb-abt-body h3,
.bb-abt-body h4,.bb-abt-body h5{margin:12px 0 5px;}

/* The Booking.com widget keeps its SDK height (360px on the host, inline).
   Clamping it was tried and rejected: the SDK re-asserts its own height as soon
   as the widget is interacted with -- it even beat an !important rule -- and the
   destination autocomplete opens inside that cross-origin iframe, so a clamp
   that half-holds would clip their suggestions. Only the panel padding around
   it is ours to trim. */

@media (max-width:575.98px){
  .bb-inner-hero.bb-inner-hero.bb-inner-hero{padding:13px 0 15px;}
  .bb-static-page{padding:14px 0 18px;}
  .bb-abt-panel{padding:14px 14px 11px;margin-bottom:10px;}
  .bb-abt-panel--widget{padding:8px;}
}

/* ============================================================
   THE CRUMB CHIP IN THE OTHER TWO HEADER SHAPES
   Same dark-glass chip as .bb-inner-hero .bb-breadcrumb, for the headers that
   are not that band:
     - .bb-mgb-ribbon-crumb  the Manage-Booking ribbon card (cancel / print-SMS /
       reschedule). The nav itself is the chip -- it has no inner .container.
     - .bb-pw-hero-crumb     the partner-with-us marketing hero.
   Both headers are left-aligned, so the chip is too.
   ============================================================ */
.bb-mgb-ribbon-crumb{
  display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;
  align-self:flex-start;width:auto;max-width:100%;
  margin:9px 0 0;padding:5px 13px;
  font-size:12px;line-height:1.2;
  background:rgba(9,20,40,.42);
  border:1px solid rgba(255,255,255,.26);
  border-radius:var(--bb-radius-pill,999px);
  backdrop-filter:blur(8px);
}
.bb-mgb-ribbon-crumb a{color:rgba(255,255,255,.95)!important;text-decoration:none;font-weight:600;}
.bb-mgb-ribbon-crumb a:hover{color:#fff!important;text-decoration:underline;}
.bb-mgb-ribbon-crumb > span{color:#fff;font-weight:800;}
.bb-mgb-ribbon-crumb i{color:rgba(255,255,255,.72);}
.bb-mgb-ribbon-crumb .bb-tpd-bcrumb-sep{font-size:8px;margin:0 6px;}

.bb-pw-hero-crumb{background:none;padding:0;margin:0 0 14px;font-size:12.5px;line-height:1.2;text-align:left;}
.bb-pw-hero-crumb > .container{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:1px;
  width:auto;max-width:100%;padding:6px 15px;
  background:rgba(9,20,40,.45);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--bb-radius-pill,999px);
  backdrop-filter:blur(8px);
}
.bb-pw-hero-crumb a{color:rgba(255,255,255,.95)!important;text-decoration:none;font-weight:600;}
.bb-pw-hero-crumb a:hover{color:#fff!important;text-decoration:underline;}
.bb-pw-hero-crumb span{color:#fff;font-weight:800;}
.bb-pw-hero-crumb i{font-size:8px;color:rgba(255,255,255,.72);margin:0 7px;}

@media (max-width:575.98px){
  .bb-mgb-ribbon-crumb{margin-top:8px;padding:4px 11px;font-size:11.5px;}
  .bb-mgb-ribbon-crumb .bb-tpd-bcrumb-sep{margin:0 5px;}
  .bb-pw-hero-crumb{margin-bottom:11px;font-size:12px;}
  .bb-pw-hero-crumb > .container{padding:5px 12px;}
  .bb-pw-hero-crumb i{margin:0 5px;}
}

/* ============================================================
   ONE HEADER COLOUR ACROSS THE CMS PAGES
   about-us sets the reference: .bb-ufqbx5v = linear-gradient(135deg,#f97316,#c2410c).
   Every page on the owner's list now wears that exact gradient -- the bands via
   the class swap in their views, and the two headers that are not bands here:
   the Manage-Booking ribbon (it carried a 3-stop orange, and cancel-tickets a
   rose variant) and the partner-with-us hero (3-stop orange under its pattern).
   ============================================================ */
.bb-mgb-ribbon{background:linear-gradient(135deg,#f97316,#c2410c);box-shadow:0 8px 22px rgba(249,115,22,.2);}
.bb-pw-hero{background:linear-gradient(135deg,#f97316,#c2410c);}

/* ============================================================
   MANAGE-BOOKING HEADER + SERVICE TABS
   (cancel-tickets / print-sms-ticket / reschedule-tickets, all sharing bb-mgb)

   1. The orange ribbon was an inset card, so it read differently from the
      about-us band that every other CMS page now uses. It goes full-bleed at
      every width -- it escapes the container with margin:calc(50% - 50vw) and
      pulls its own content back onto the container gutter, so the text still
      lines up with the cards below. Safe because html/body are overflow-x:clip.

   2. .bb-mgb-svctabs was a 3-column grid: five services meant a ragged 3+2 on
      desktop and a stack of full-width rows on phones. It is now one scrolling
      line of pills -- white pill, coloured icon disc, orange gradient when
      active -- and script.js arms it with the shared < > arrow buttons, which
      appear only when the row actually overflows.
   ============================================================ */
.bb-mgb-ribbon{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border-radius:0;margin-bottom:16px;
  /* pull the content back onto the container gutter: the container is 1200px
     wide with a 20px pad, so that gutter is (100vw - 1200)/2 + 20 */
  padding:16px max(20px,calc((100vw - 1200px)/2 + 20px));
  box-shadow:none;
}
.bb-mgb-ribbon-back{margin-left:0;}

/* one scrolling line of service pills */
.bb-mgb-svctabs,.bb-mgb-svctabs--small{
  display:flex!important;grid-template-columns:none!important;
  flex-wrap:nowrap;gap:8px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:#f1f5f9;padding:6px;border-radius:14px;
}
.bb-mgb-svctabs::-webkit-scrollbar{display:none;}
.bb-mgb-svctab{
  flex:0 0 auto;white-space:nowrap;
  justify-content:flex-start;gap:9px;
  background:#fff;border:1px solid #e3ebf7;border-radius:999px;
  padding:7px 15px 7px 7px;font-size:12.5px;color:#334155;
}
.bb-mgb-svctab:hover{border-color:#fed7aa;color:#0f172a;}
.bb-mgb-svctab.is-active{
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;
  border-color:transparent;box-shadow:0 5px 14px rgba(249,115,22,.32);
}
/* nothing to scroll (few services, or a wide screen): bbPillRails stamps
   .no-scroll, and the pills share the row instead of leaving dead space at the
   right. When it does overflow they keep their natural width and scroll. */
.bb-mgb-svctabs.no-scroll .bb-mgb-svctab{flex:1 1 auto!important;justify-content:center;}
.bb-mgb-svctab-ico{width:26px;height:26px;font-size:12px;}
.bb-mgb-svctab.is-active .bb-mgb-svctab-ico{background:rgba(255,255,255,.22)!important;}
.bb-mgb-svctab.is-active .bb-mgb-svctab-count{background:rgba(255,255,255,.22);color:#fff;}

/* --- make the switch read at a glance -------------------------------------
   The panes below the rail are near-identical lookup forms, so an orange pill
   alone did not tell the user the tab had changed. Push the two states further
   apart (weight + lift + a pointer into the card), and let the incoming pane
   animate in so the swap is felt, not just seen. The bridge stamps both
   .active and .is-active, so both are matched. */
.bb-mgb-svctab{transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;}
.bb-mgb-svctab:not(.is-active):not(.active){opacity:.72;font-weight:500;}
.bb-mgb-svctab:not(.is-active):not(.active):hover{opacity:1;}
.bb-mgb-svctab.active{
  background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;
  border-color:transparent;box-shadow:0 5px 14px rgba(249,115,22,.32);
}
.bb-mgb-svctab.is-active,.bb-mgb-svctab.active{
  position:relative;font-weight:700;letter-spacing:.1px;
  transform:translateY(-1px);
  box-shadow:0 7px 18px rgba(249,115,22,.38),0 0 0 3px rgba(249,115,22,.16);
}
.bb-mgb-svctab.active .bb-mgb-svctab-ico{background:rgba(255,255,255,.22)!important;}
/* No notch below the pill: the rail is overflow-x:auto, so anything hanging
   past its box gets clipped (or forces a stray vertical scrollbar). The weight,
   opacity gap, lift and ring carry the state instead. */
@media (prefers-reduced-motion:no-preference){
  .bb-mgb-lookcard .tab-pane.active{animation:bbTabIn .22s ease both;}
}
@keyframes bbTabIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* the arrow wrap sits around the grey rail, so give it the same rhythm */
.bb-arrowscroll-wrap:has(> .bb-mgb-svctabs){margin-bottom:14px;}

@media (max-width:575.98px){
  .bb-mgb-ribbon{padding:14px 20px;margin-bottom:13px;}
  .bb-mgb-svctabs,.bb-mgb-svctabs--small{gap:7px;padding:5px;border-radius:12px;}
  .bb-mgb-svctab{font-size:12px;padding:6px 13px 6px 6px;gap:8px;}
  .bb-mgb-svctab-ico{width:24px;height:24px;font-size:11px;}
}

/* contact-us: the restored CI3 accordion. CI3 marked the caveat with
   class="red bold", which does not exist here. */
.bb-ct-faqs{max-width:860px;margin-left:auto;margin-right:auto;}
.bb-ct-faqs .bb-section-head{margin-bottom:14px;}
.bb-ct-faqnote{color:#dc2626;font-weight:800;}

/* ============================================================
   FAQ ACCORDION -- NUMBERED QUESTIONS
   Used on the FAQs page and the restored contact-us accordion. The number used
   to be plain text inside the question ("3. How can i..."); it is now its own
   .bb-faq-num badge, so it can lead the row and react to the open state.

   Closed: a soft amber chip. Open: it fills with the brand gradient, the row
   gets an orange left rail, the header a warm tint, and the answer fades up.
   ============================================================ */
.bb-faq-item{position:relative;transition:border-color .2s ease,box-shadow .2s ease;}
/* the left rail -- drawn on the item, revealed when open, so it cannot shift the layout */
.bb-faq-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#f97316,#c2410c);
  opacity:0;transition:opacity .2s ease;
}
.bb-faq-item.is-open{border-color:#fed7aa;box-shadow:0 10px 26px rgba(249,115,22,.13);}
.bb-faq-item.is-open::before{opacity:1;}
.bb-faq-item.is-open .bb-faq-q{background:linear-gradient(180deg,#fff8f3,#fff);}

.bb-faq-q{gap:12px;align-items:flex-start;}
.bb-faq-qt{flex:1 1 auto;min-width:0;}
.bb-faq-q > i{flex:0 0 auto;margin-top:3px;color:#94a3b8;}
.bb-faq-item.is-open .bb-faq-q > i{color:#c2410c;}

.bb-faq-num{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:9px;
  font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;
  color:#c2410c;background:#fff3e8;border:1px solid #fed7aa;
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.bb-faq-q:hover .bb-faq-num{transform:translateY(-1px);}
.bb-faq-item.is-open .bb-faq-num{
  color:#fff;background:linear-gradient(135deg,#f97316,#c2410c);
  border-color:transparent;box-shadow:0 5px 12px rgba(249,115,22,.34);
}

/* the answer lines up under the question text, not under the badge */
.bb-faq-a{padding-left:60px;}
.bb-faq-item.is-open .bb-faq-a{animation:bbFaqIn .22s ease both;}
@keyframes bbFaqIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

@media (max-width:575.98px){
  .bb-faq-q{gap:10px;padding:14px 15px;font-size:14.5px;}
  .bb-faq-num{width:25px;height:25px;font-size:11.5px;border-radius:8px;}
  .bb-faq-a{padding-left:50px;padding-right:15px;}
}

/* ============================================================
   INFLUENCERS -- COLLABORATION PORTFOLIO (bb-inf-*)
   The platform switch was a stock Bootstrap nav-pill (a blue button next to a
   blue link) and the videos were bare 215px iframes with a centred heading
   under each. Now: a segmented switch that wears each platform's own colour
   when it is the active one, and a card grid with 16/9 media.
   Bootstrap's tab JS still runs the switching -- only the skin is ours.
   ============================================================ */
.bb-inf-tabs{
  display:inline-flex;flex-wrap:wrap;justify-content:center;gap:5px;
  margin:0 auto 20px;padding:5px;list-style:none;
  background:#f1f5f9;border:1px solid #e3ebf7;border-radius:var(--bb-radius-pill,999px);
}
.bb-inf-tabs{width:auto;}
.bb-inf-tabs .nav-item{margin:0;}
.bb-inf-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--bb-radius-pill,999px);
  font-size:13.5px;font-weight:800;color:#475569!important;text-decoration:none;
  border:1px solid transparent;background:transparent;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.bb-inf-tab i{font-size:15px;}
.bb-inf-tab:hover{background:#fff;color:#0b1f3b!important;border-color:#e3ebf7;text-decoration:none;}
.bb-inf-tab--yt i{color:#ff0000;}
.bb-inf-tab--ig i{color:#dc2743;}
/* active: the platform's own colour, and the icon turns white with it */
.bb-inf-tab.active,.bb-inf-tab.active:hover{
  color:#fff!important;border-color:transparent;transform:translateY(-1px);
}
.bb-inf-tab--yt.active,.bb-inf-tab--yt.active:hover{
  background:linear-gradient(135deg,#ff0000,#b31217);box-shadow:0 6px 16px rgba(255,0,0,.3);
}
.bb-inf-tab--ig.active,.bb-inf-tab--ig.active:hover{
  background:linear-gradient(135deg,#f09433,#dc2743 55%,#bc1888);box-shadow:0 6px 16px rgba(188,24,136,.32);
}
.bb-inf-tab.active i{color:#fff;}
.bb-inf-tabn{
  font-style:normal;font-size:11px;font-weight:800;line-height:1;
  padding:3px 7px;border-radius:999px;
  background:#e2e8f0;color:#475569;
}
.bb-inf-tab.active .bb-inf-tabn{background:rgba(255,255,255,.24);color:#fff;}

/* the grid of embeds */
.bb-inf-grid{
  /* 260px, not 300: this page sits in a max-width:1000px container with a
     36px-padded card, so the grid is 879px wide -- 300px would only ever fit two */
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;align-items:start;
}
.bb-inf-card{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid #e8eef6;border-radius:16px;overflow:hidden;
  box-shadow:0 5px 18px rgba(15,23,42,.06);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.bb-inf-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(15,23,42,.13);border-color:#fed7aa;}
/* 16/9 instead of the old fixed 215px, so the frame never letterboxes */
.bb-inf-media{position:relative;aspect-ratio:16/9;background:#0b1f3b;}
.bb-inf-media iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;display:block;}
.bb-inf-body{display:flex;flex-direction:column;gap:8px;padding:13px 15px 15px;}
.bb-inf-chip{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;color:#fff;
}
.bb-inf-chip--yt{background:linear-gradient(135deg,#ff0000,#b31217);}
.bb-inf-chip--ig{background:linear-gradient(135deg,#f09433,#dc2743 55%,#bc1888);}
.bb-inf-title{
  font-size:15px;font-weight:800;color:#0b1f3b;line-height:1.4;margin:0;text-align:left;
}

/* Instagram's own embed carries inline min-width:326px, which would push the
   card past a phone's viewport -- neutralised inside our shell */
.bb-inf-card--ig .bb-inf-igwrap{padding:0;}
/* embed.js swaps the blockquote for an iframe.instagram-media that keeps the
   same inline min-width:326px, so BOTH have to be neutralised -- otherwise the
   embed is 326px inside a 280px card and gets clipped. */
.bb-inf-igwrap blockquote.instagram-media,
.bb-inf-igwrap iframe.instagram-media{
  min-width:0!important;max-width:none!important;width:100%!important;
  margin:0!important;border-radius:0!important;box-shadow:none!important;
}
.bb-inf-igwrap iframe{max-width:100%!important;}
/* reels are portrait: give their column more room than the 16/9 videos.
   Dropped whole in browsers without :has(), which just leaves the 260px min. */
.bb-inf-grid:has(> .bb-inf-card--ig){grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}

@media (max-width:575.98px){
  .bb-inf-grid{grid-template-columns:1fr;gap:15px;}
  /* side by side the two tabs need 302px and the card is 277px wide here, so
     they wrapped onto two lines -- let them share the row instead */
  .bb-inf-tabs{display:flex;width:100%;gap:4px;padding:4px;margin-bottom:16px;}
  .bb-inf-tabs .nav-item{flex:1 1 0;min-width:0;display:flex;}
  .bb-inf-tab{flex:1 1 auto;justify-content:center;padding:8px;font-size:12px;gap:6px;}
  .bb-inf-tab span{white-space:nowrap;}
  .bb-inf-tabn{padding:3px 6px;}
  .bb-inf-title{font-size:14.5px;}
}

/* ============================================================
   INFLUENCERS PAGE SHELL (bb-infl-*)
   Was: everything inside one bordered white card in a max-width:1000px
   container (the .bb-legal-page theme) -- a page inside a page. Now two
   full-width sections at the site's own container width: an editorial intro
   with the copy on the left and the numbers on the right, then the portfolio
   on a tinted band so the switch and the cards read as their own chapter.
   ============================================================ */
.bb-infl{background:#fff;}
.bb-infl-intro{padding:28px 0 30px;}
.bb-infl-lead{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start;
}
.bb-infl-leadmain .bb-section-head{margin-bottom:14px;text-align:left;}
/* the copy keeps a comfortable measure even though the section is full width */
.bb-infl-copy{max-width:72ch;font-size:15.5px;line-height:1.75;color:#334155;}
.bb-infl-copy > *:last-child{margin-bottom:0;}
.bb-infl-copy p{font-size:15.5px;line-height:1.75;margin-bottom:14px;}
.bb-infl-copy h1,.bb-infl-copy h2,.bb-infl-copy h3,
.bb-infl-copy h4,.bb-infl-copy h5{font-size:17.5px;font-weight:800;color:#0b1f3b;margin:20px 0 8px;}
.bb-infl-copy a{color:#c2410c;font-weight:600;}
.bb-infl-copy ul,.bb-infl-copy ol{padding-left:20px;margin-bottom:14px;}
.bb-infl-copy img{max-width:100%;height:auto;border-radius:12px;}

/* right rail: the two real numbers plus the page's own CTA */
.bb-infl-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:96px;}
.bb-infl-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.bb-infl-stat{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:2px;
  padding:15px 14px;border-radius:16px;color:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.14);
}
.bb-infl-stat i{font-size:17px;opacity:.9;}
.bb-infl-stat strong{font-size:26px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;}
.bb-infl-stat span{font-size:11.5px;font-weight:700;line-height:1.35;opacity:.92;}
/* the oversized platform glyph behind each tile */
.bb-infl-stat::after{
  content:"";position:absolute;right:-18px;bottom:-24px;
  width:88px;height:88px;border-radius:50%;
  background:rgba(255,255,255,.13);
}
.bb-infl-stat--yt{background:linear-gradient(135deg,#ff0000,#b31217);}
.bb-infl-stat--ig{background:linear-gradient(135deg,#f09433,#dc2743 55%,#bc1888);}
.bb-infl-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 18px;border-radius:14px;
  font-size:14px;font-weight:800;color:#fff!important;text-decoration:none;
  background:linear-gradient(135deg,#f97316,#c2410c);
  box-shadow:0 8px 20px rgba(249,115,22,.3);
  transition:transform .2s ease,box-shadow .2s ease;
}
.bb-infl-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(249,115,22,.4);text-decoration:none;}

/* portfolio band */
.bb-infl-folio{
  padding:30px 0 40px;
  background:linear-gradient(180deg,#f6f8fb,#eef2f8);
  border-top:1px solid #e8eef6;
}
.bb-infl-folio .bb-section-head{margin-bottom:16px;}
/* the switch is centred on its own line above the grid */
/* width:fit-content, not auto margins on an inline-flex: inline-level boxes
   ignore those, so the track stretched the whole band */
.bb-infl-folio .bb-inf-tabs{display:flex;width:-moz-fit-content;width:fit-content;max-width:100%;margin:0 auto 20px;}
.bb-infl-folio .tab-content{margin-top:0!important;}

@media (max-width:991.98px){
  .bb-infl-lead{grid-template-columns:1fr;gap:22px;}
  .bb-infl-side{position:static;}
  .bb-infl-stats{grid-template-columns:1fr 1fr;}
  .bb-infl-copy{max-width:none;}
}
@media (max-width:575.98px){
  .bb-infl-intro{padding:18px 0 20px;}
  .bb-infl-folio{padding:20px 0 28px;}
  .bb-infl-copy,.bb-infl-copy p{font-size:14.5px;line-height:1.7;}
  .bb-infl-stat{padding:13px;border-radius:14px;}
  .bb-infl-stat strong{font-size:23px;}
  .bb-infl-cta{padding:12px 16px;font-size:13.5px;}
}

/* ============================================================
   THE LAST NARROW PAGES (.bb-legal-page)
   investors and the two package-timings inner pages still render through the
   ci-overrides .bb-legal-page theme, which caps the container at 1000px and
   draws every block as a bordered white card with a heavy shadow -- the "page
   inside a page" look. Their bodies carry a form and an A-Z AJAX filter, so the
   markup is left alone and only the shell is restyled: the site's own container
   width, DNA panels, and the standard gradient heading.

   Selectors are #content-qualified because ci-overrides sets these with
   !important at .bb-legal-page specificity.
   ============================================================ */
/* the site container token (1200px), not the 1140 I first wrote -- that was still
   60px narrower than every other page */
#content.bb-legal-page .container{max-width:var(--container-max,1200px);}

/* the legacy card -> the same panel the DNA pages use */
#content.bb-legal-page .bestbus104a{
  background:#fff!important;
  border:1px solid #e8eef6!important;
  border-radius:18px!important;
  box-shadow:0 6px 22px rgba(15,23,42,.06)!important;
  padding:22px 24px!important;
}
@media (max-width:575.98px){
  #content.bb-legal-page .bestbus104a{padding:15px 15px 13px!important;border-radius:15px!important;}
}

/* headings: the site's two-tone gradient + swoosh, in place of the flat navy
   title with an orange bar under it */
#content.bb-legal-page .section-header > h4,
#content.bb-legal-page .section-header > h2{
  background:linear-gradient(100deg,#f97316 0%,#f97316 40%,#0d9488 62%,#0d9488 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:#ea580c!important;
  letter-spacing:-.4px;
  width:-moz-fit-content;width:fit-content;max-width:100%;
  margin-left:auto!important;margin-right:auto!important;
  position:relative;padding-bottom:22px!important;margin-bottom:6px!important;
}
#content.bb-legal-page .section-header > h4::after,
#content.bb-legal-page .section-header > h2::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:50%;height:16px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%2020'%20preserveAspectRatio='none'%20fill='none'%3E%3Cdefs%3E%3ClinearGradient%20id='mhzo2'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fb923c'/%3E%3Cstop%20offset='.5'%20stop-color='%23f97316'/%3E%3Cstop%20offset='1'%20stop-color='%23ea580c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M7%208.5%20Q53%203%2098%206%20Q126%207.4%20144%206.4%20Q126%2011.4%2098%209.4%20Q53%208%207%208.5%20Z'%20fill='url(%23mhzo2)'/%3E%3Cpath%20d='M31%2014.6%20Q66%2012%2098%2013.6%20Q119%2014.5%20134%2013.8%20Q119%2016.4%2098%2015.3%20Q66%2014.4%2031%2014.6%20Z'%20fill='%230d9488'%20opacity='.92'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* the flat orange bar it replaces */
#content.bb-legal-page .section-header .line.lined{display:none!important;}
/* icons inside such a heading would go transparent with the clipped text */
#content.bb-legal-page .section-header > h4 > i,
#content.bb-legal-page .section-header > h2 > i{-webkit-text-fill-color:#f97316;}

/* package-timings inner page: the anchor nav (Bus Services / How To Reach / Bus
   Timings / Other Areas) is a legacy nav-tabs built from layout* classes whose
   stylesheet this page no longer loads, so it floated unstyled at the top-left,
   outside any container. Restyled as the site's pill rail, inside the same
   1140px measure as the rest of the page. Its #prevdiv/#nextdiv arrows drive
   scrolltonextprev(), which only makes sense for the old fixed-width strip --
   the rail scrolls natively instead, so they are hidden.
   The markup (divs inside the ul, li inside a div) is CI3's and untouched. */
#content.bb-legal-page ul.nav-tabs.layout68{
  display:flex;flex-wrap:nowrap;justify-content:center;gap:6px;
  /* its parent is already the page container, so 100% lines the rail up with the
     panels below it -- calc(100% - 30px) left it 30px narrower */
  width:100%;max-width:1140px;margin:0 auto 18px;padding:5px;
  list-style:none;border:1px solid #e3ebf7;border-radius:var(--bb-radius-pill,999px);
  background:#f1f5f9;overflow-x:auto;scrollbar-width:none;
}
#content.bb-legal-page ul.nav-tabs.layout68::-webkit-scrollbar{display:none;}
#content.bb-legal-page ul.nav-tabs.layout68 #prevdiv,
#content.bb-legal-page ul.nav-tabs.layout68 #nextdiv{display:none!important;}
#content.bb-legal-page ul.nav-tabs.layout68 .layout36{display:flex;flex-wrap:nowrap;gap:6px;}
#content.bb-legal-page ul.nav-tabs.layout68 li{list-style:none;flex:0 0 auto;}
#content.bb-legal-page ul.nav-tabs.layout68 .nav-link{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:9px 16px;border:1px solid transparent!important;border-radius:var(--bb-radius-pill,999px);
  font-size:13px;font-weight:800;color:#475569!important;background:transparent;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
#content.bb-legal-page ul.nav-tabs.layout68 .nav-link i{
  display:inline-block!important;font-size:13px;color:#f97316;margin:0;
}
#content.bb-legal-page ul.nav-tabs.layout68 .nav-link:hover{
  background:#fff;color:#0b1f3b!important;border-color:#e3ebf7!important;text-decoration:none;
}
#content.bb-legal-page ul.nav-tabs.layout68 .nav-link.active{
  background:linear-gradient(135deg,#f97316,#c2410c);color:#fff!important;
  box-shadow:0 6px 16px rgba(249,115,22,.3);
}
#content.bb-legal-page ul.nav-tabs.layout68 .nav-link.active i{color:#fff;}
/* the shadow strip under it belonged to the old boxed layout */
#content.bb-legal-page > .container ~ img.vspl,
#content.bb-legal-page img.img-fluid.vspl{display:none;}

@media (max-width:575.98px){
  #content.bb-legal-page ul.nav-tabs.layout68{justify-content:flex-start;margin-bottom:14px;}
  #content.bb-legal-page ul.nav-tabs.layout68 .nav-link{padding:8px 13px;font-size:12.5px;}
}

/* ============================================================
   PACKAGE-TIMINGS LANDING GRID (bb-ptg-*)
   Was a bootstrap col-md-4 row of .card cells: full-bleed image, a centred h5
   and a grey "View More" button, with a search-shadow.png under every card.
   Same three-up rhythm, built as the site's card: 16/9 media that zooms on
   hover, a glass "Bus Timings" chip, the name as the link, and an orange
   View Timings pill pinned to the bottom so every card ends level.
   ============================================================ */
.bb-ptg-grid{
  /* auto-fit, not auto-fill: with three packages auto-fill still reserved a 4th
     track and the row stopped short of the container */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:22px;align-items:stretch;margin-top:4px;
}
.bb-ptg-card{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid #e8eef6;border-radius:18px;overflow:hidden;
  box-shadow:0 6px 22px rgba(15,23,42,.06);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.bb-ptg-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,23,42,.14);border-color:#fed7aa;}
.bb-ptg-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#eef2f7;}
.bb-ptg-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.bb-ptg-card:hover .bb-ptg-media img{transform:scale(1.06);}
/* keeps the chip readable over a light photo */
.bb-ptg-media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(180deg,transparent,rgba(11,31,59,.42));
}
.bb-ptg-tag{
  position:absolute;left:11px;top:11px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:800;color:#fff;
  background:rgba(11,31,59,.58);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);padding:5px 11px;border-radius:999px;
}
.bb-ptg-tag i{color:#fb923c;}
.bb-ptg-body{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;flex:1;}
.bb-ptg-title{font-size:15.5px;font-weight:800;line-height:1.35;margin:0;}
.bb-ptg-title a{color:#0b1f3b;text-decoration:none;}
.bb-ptg-title a:hover{color:#c2410c;text-decoration:none;}
.bb-ptg-more{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:800;color:#fff!important;text-decoration:none;
  background:linear-gradient(135deg,#f97316,#ea580c);
  padding:9px 16px;border-radius:999px;box-shadow:0 5px 14px rgba(249,115,22,.34);
}
.bb-ptg-more:hover{text-decoration:none;transform:translateY(-1px);}
.bb-ptg-more i{transition:transform .2s ease;}
.bb-ptg-more:hover i{transform:translateX(3px);}

@media (max-width:575.98px){
  .bb-ptg-grid{grid-template-columns:1fr;gap:15px;}
  .bb-ptg-card{border-radius:15px;}
  .bb-ptg-title{font-size:15px;}
}

/* ============================================================
   PACKAGE-TIMINGS INNER PAGES
   (a) areas list (bb-ptl via the CI3 classes): the A-Z filter re-renders this
       list over AJAX with the same .row / col-md-6 / a.sitemap_link markup, so
       the look is done on those classes -- no markup to keep in sync.
   (b) details: vehicle cards (bb-ptv-*) and boarding rows (bb-ptt-*), replacing
       the two fake tables.
   ============================================================ */

/* ---- (a) A-Z filter + area links ---- */
#content.bb-legal-page .letter_wise_link.radiusatoz{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin:0 4px 8px;border-radius:12px;
  font-size:13.5px;font-weight:800;text-decoration:none;
  /* ci-overrides sets background:#0a1525!important here, so ours has to be
     !important too -- otherwise dark bg kept its bg and took our dark text */
  color:#0b1f3b!important;background:#f1f5f9!important;border:1px solid #e3ebf7!important;
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
#content.bb-legal-page .letter_wise_link.radiusatoz:hover,
#content.bb-legal-page .letter_wise_link.radiusatoz.is-active{
  color:#fff!important;background:linear-gradient(135deg,#f97316,#c2410c)!important;
  border-color:transparent!important;transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(249,115,22,.32);
}
/* the bootstrap row becomes a grid; the cols keep their classes for the AJAX
   markup but stop carrying width */
#places .row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:10px;margin:0;
}
#places .row > [class*="col-"]{
  width:auto!important;max-width:none!important;flex:none!important;
  padding:0!important;margin:0!important;
}
#places hr.citiestopbtm{display:none!important;}
#places a.sitemap_link{
  display:flex;align-items:center;gap:9px;height:100%;
  padding:11px 14px;border-radius:12px;
  background:#fff;border:1px solid #e8eef6;
  font-size:13.5px;font-weight:700;color:#0b1f3b!important;text-decoration:none;
  box-shadow:0 3px 10px rgba(15,23,42,.04);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,color .2s ease;
}
#places a.sitemap_link::before{
  content:"\f3c5";font-family:"Font Awesome 5 Free";font-weight:900;
  font-size:12px;color:#f97316;flex:0 0 auto;
}
#places a.sitemap_link::after{
  content:"\f105";font-family:"Font Awesome 5 Free";font-weight:900;
  margin-left:auto;font-size:13px;color:#cbd5e1;transition:transform .2s ease,color .2s ease;
}
#places a.sitemap_link:hover{
  color:#c2410c!important;border-color:#fed7aa;transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(249,115,22,.14);text-decoration:none;
}
#places a.sitemap_link:hover::after{color:#c2410c;transform:translateX(3px);}

/* ---- (b) vehicles ---- */
.bb-ptv-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;padding:4px 14px 6px;
}
.bb-ptv-card{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  background:#fff;border:1px solid #e8eef6;border-radius:16px;padding:15px;
  box-shadow:0 5px 18px rgba(15,23,42,.05);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.bb-ptv-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,23,42,.12);border-color:#fed7aa;}
.bb-ptv-top{display:flex;align-items:flex-start;gap:11px;}
.bb-ptv-ico{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;font-size:15px;color:#fff;
  background:linear-gradient(135deg,#0d9488,#134e4a);
}
.bb-ptv-id{display:flex;flex-direction:column;gap:3px;min-width:0;}
.bb-ptv-id strong{font-size:14.5px;font-weight:800;color:#0b1f3b;line-height:1.35;}
.bb-ptv-id span{
  align-self:flex-start;font-size:11.5px;font-weight:700;color:#475569;
  background:#f1f5f9;border:1px solid #e3ebf7;padding:3px 9px;border-radius:999px;
}
.bb-ptv-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:11px;border-top:1px dashed #e8eef6;
}
.bb-ptv-fare{display:flex;flex-direction:column;line-height:1.15;}
.bb-ptv-fare small{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#94a3b8;}
.bb-ptv-fare b{font-size:19px;font-weight:800;color:#0b1f3b;font-variant-numeric:tabular-nums;}
.bb-ptv-btn{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:12.5px;font-weight:800;color:#fff!important;text-decoration:none;
  background:linear-gradient(135deg,#f97316,#ea580c);
  padding:9px 15px;border-radius:999px;box-shadow:0 5px 14px rgba(249,115,22,.32);
  transition:transform .2s ease,box-shadow .2s ease;
}
.bb-ptv-btn:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(249,115,22,.4);text-decoration:none;color:#fff!important;}

/* ---- (b) boarding rows ---- */
.bb-ptt-list{display:flex;flex-direction:column;gap:11px;padding:4px 14px 6px;}
.bb-ptt-row{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid #e8eef6;border-radius:14px;padding:12px 14px;
  box-shadow:0 4px 14px rgba(15,23,42,.05);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.bb-ptt-row:hover{border-color:#fed7aa;box-shadow:0 10px 24px rgba(249,115,22,.13);}
.bb-ptt-time{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:86px;padding:8px 10px;border-radius:12px;color:#fff;
  background:linear-gradient(135deg,#0b1f3b,#12325c);
}
.bb-ptt-time small{font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;opacity:.75;}
.bb-ptt-time strong{font-size:14px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;}
.bb-ptt-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto;}
.bb-ptt-point{font-size:14.5px;font-weight:800;color:#0b1f3b;line-height:1.35;}
.bb-ptt-point i{color:#f97316;font-size:12.5px;margin-right:4px;}
.bb-ptt-op{font-size:12.5px;color:#64748b;font-weight:600;}
.bb-ptt-op i{color:#0d9488;font-size:11.5px;margin-right:4px;}
.bb-ptt-btn{flex:0 0 auto;}

@media (max-width:575.98px){
  #content.bb-legal-page .letter_wise_link.radiusatoz{width:32px;height:32px;font-size:12.5px;margin:0 3px 7px;border-radius:10px;}
  #places .row{grid-template-columns:1fr;gap:8px;}
  .bb-ptv-grid,.bb-ptt-list{grid-template-columns:1fr;padding:2px 4px 4px;}
  .bb-ptt-row{flex-wrap:wrap;gap:10px;}
  .bb-ptt-time{min-width:74px;}
  .bb-ptt-btn{width:100%;justify-content:center;}
}

/* ============================================================
   ICON GLUED TO ITS LABEL
   Markup like <i class="fas fa-om"></i> Tirupati has a space in the source, but
   these parents are either display:block (the space collapses against the icon
   box) or a flex row with no gap -- so the glyph ends up touching the word:
   "Tirupati", "TSTDC Haritha", "IRCTC Tourism Packages".
   Measured on the home and tour-packages pages: gap was exactly 0px for every
   selector below. Only leading icons are targeted, so icon-only buttons and
   trailing chevrons are untouched.
   ============================================================ */
.bb-idx-qlink > i:first-child,
.bb-trend-title > i:first-child,
.font-25 > i:first-child,
.font-20 > i:first-child,
.fn-18 > i:first-child,
b > i:first-child,
strong > i:first-child{margin-right:6px;}

/* ============================================================
   TOUR PACKAGES -- CATEGORY FILTER (bb-tpc-filter*)
   The markup was already converted but no rule ever matched it, so the trigger
   rendered as a bare bordered box and the drawer as a raw radio list with
   "RESET APPLY" as plain text.

   openfiltersidebar1() sets left/width inline (0px/360px, and -360px/0 to
   close), exactly like the boarding-point drawer -- so nothing here uses
   !important on left or width, or the inline values could never win.
   ============================================================ */
.bb-tpc-filter-btn{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:11px 22px;border:0;border-radius:999px;
  font-size:13.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#f97316,#c2410c);
  box-shadow:0 8px 20px rgba(249,115,22,.32);
  transition:transform .2s ease,box-shadow .2s ease;
}
.bb-tpc-filter-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(249,115,22,.4);}
.bb-tpc-filter-btn i{font-size:13px;}

/* mobile trigger: a bar of its own, above the app nav rather than in the flow */
.bb-tpc-filter-fixed{
  position:fixed;left:0;right:0;bottom:64px;z-index:1035;
  padding:8px 12px;pointer-events:none;
}
.bb-tpc-filter-fixed a{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:999px;
  font-size:13.5px;font-weight:800;color:#fff!important;text-decoration:none;
  background:linear-gradient(135deg,#0b1f3b,#12325c);
  box-shadow:0 10px 26px rgba(11,31,59,.34);
}
.bb-tpc-filter-fixed a i{color:#fb923c;}

/* the drawer itself */
.bb-tpc-filterbar{
  position:fixed;top:0;bottom:0;left:-360px;width:0;z-index:1050;
  background:#fff;overflow:hidden;
  box-shadow:6px 0 34px rgba(15,23,42,.22);
  transition:left .28s ease,width .28s ease;
}
.bb-tpc-filterbar form{
  display:flex;flex-direction:column;height:100%;
  width:360px;max-width:100vw;   /* fixed inner width so nothing reflows while it slides */
}
.bb-tpc-filterbar-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;color:#fff;
  background:linear-gradient(135deg,#0b1f3b,#12325c);
}
.bb-tpc-filterbar-head b{font-size:15px;font-weight:800;display:inline-flex;align-items:center;}
.bb-tpc-filterbar-head b i{color:#fb923c;}
.bb-tpc-filterbar-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  color:#fff!important;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);text-decoration:none;
}
.bb-tpc-filterbar-close:hover{background:rgba(255,255,255,.26);text-decoration:none;}
.bb-tpc-filterbar-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px;background:#f8fafc;}
.bb-tpc-filterbar-body .scrollhyd{overflow:visible;}
/* the CI3 markup puts an <hr> after every option -- the cards separate themselves */
.bb-tpc-filterbar-body hr{display:none;}

/* each category becomes a selectable card; the radio stays, it is what the form posts */
.bb-tpc-filter-radio{margin:0 0 8px;padding:0;}
.bb-tpc-filter-radio label{
  display:flex;align-items:center;gap:10px;width:100%;margin:0;cursor:pointer;
  padding:11px 13px;border-radius:12px;
  background:#fff;border:1px solid #e8eef6;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.bb-tpc-filter-radio label:hover{border-color:#fed7aa;box-shadow:0 6px 16px rgba(249,115,22,.12);}
.bb-tpc-filter-radio input[type="radio"]{flex:0 0 auto;margin:0;width:16px;height:16px;accent-color:#f97316;}
.bb-tpc-filter-radio b{font-size:13.5px;font-weight:700;color:#0b1f3b;line-height:1.4;}
.bb-tpc-filter-radio label:has(input:checked){
  border-color:#f97316;background:#fff7ed;box-shadow:0 6px 16px rgba(249,115,22,.18);
}

.bb-tpc-filterbar-foot{
  flex:0 0 auto;display:flex;gap:10px;padding:12px;
  background:#fff;border-top:1px solid #e8eef6;
}
.bb-tpc-filter-reset,.bb-tpc-filter-apply{
  flex:1 1 0;text-align:center;cursor:pointer;text-decoration:none;
  padding:11px 14px;border-radius:12px;font-size:13.5px;font-weight:800;
}
.bb-tpc-filter-reset{color:#475569!important;background:#f1f5f9;border:1px solid #e3ebf7;}
.bb-tpc-filter-reset:hover{background:#e2e8f0;text-decoration:none;}
.bb-tpc-filter-apply{
  color:#fff!important;border:1px solid transparent;
  background:linear-gradient(135deg,#f97316,#c2410c);
  box-shadow:0 6px 16px rgba(249,115,22,.3);
}
.bb-tpc-filter-apply:hover{text-decoration:none;transform:translateY(-1px);}

/* empty state used by the same family of pages */
.bb-tpc-empty{
  text-align:center;padding:26px 18px;margin:8px 0;
  background:#fff;border:1px dashed #e2e8f0;border-radius:16px;
  color:#64748b;font-size:14px;font-weight:600;
}

@media (max-width:575.98px){
  .bb-tpc-filter-btn{padding:10px 18px;font-size:13px;}
  .bb-tpc-filterbar form{width:min(360px,92vw);}
}

/* ============================================================
   PACKAGE DETAILS -- the wrappers and modifiers that had no rule
   Every child class on this page was already styled; only these containers and
   variants were missing, so they inherited nothing. Behaviour is untouched --
   the tabs still scroll through scrolltonextprev(), the accordions are still
   Bootstrap's.
   ============================================================ */

/* tab bar: the container is a flex row, so the two arrows only needed placing
   and hiding once the row has nothing left to scroll */
.bb-tpd-tabs-bar > .container{display:flex;align-items:center;gap:8px;}
.bb-tpd-tabs-bar > .container > .bb-tpd-tabs{flex:1 1 auto;min-width:0;}
.bb-tpd-tabs-arrow--prev{order:-1;}
.bb-tpd-tabs-arrow--next{order:1;}
.bb-tpd-tabs-arrow--prev,.bb-tpd-tabs-arrow--next{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid #e5e7eb;background:#fff;color:#f97316;
  box-shadow:0 2px 8px rgba(10,21,37,.12);padding:0;cursor:pointer;
}

/* coupons section: the grid and each coupon are styled, the section was not */
.bb-tpd-coupons .bb-tpd-coupons-grid{margin-top:12px;}
.bb-tpd-coupons > small{display:block;margin-top:12px;line-height:1.6;}

/* the red variant of an operator tag (No Cancellation), matching --green/--blue */
.bb-tpd-op-tag--red{background:#fef2f2;color:#b91c1c;border:1px solid #fca5a5;}

/* entry-ticket card: a bb-pkg-card that should sit flush in its grid cell */
.bb-tpd-entrycard{height:100%;display:flex;flex-direction:column;}

/* itinerary v2 wrapper (its head/num/body/list already have rules) */
.bb-tpd-itin2{display:flex;flex-direction:column;gap:10px;}
.bb-tpd-itin2-block{border:1px solid #e8eef6;border-radius:14px;overflow:hidden;background:#fff;}

/* the timings accordion: same skin as the inclusions/exclusions ones */
.bb-tpd-acc .accordion-item{border:1px solid #e8eef6;border-radius:12px;overflow:hidden;margin-bottom:8px;background:#fff;}
.bb-tpd-acc .accordion-button{font-size:13.5px;font-weight:700;color:#0b1f3b;padding:11px 14px;background:#f8fafc;box-shadow:none;}
.bb-tpd-acc .accordion-button:not(.collapsed){background:#fff7ed;color:#c2410c;}
.bb-tpd-acc .accordion-button:focus{box-shadow:none;border-color:#fed7aa;}
.bb-tpd-acc .accordion-body{padding:12px 14px;}

/* the three per-aspect scores under a review */
.bb-tpd-rev-detailstars{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px;}
.bb-tpd-rev-detailstars span{
  font-size:11.5px;font-weight:700;color:#475569;
  background:#f1f5f9;border:1px solid #e3ebf7;border-radius:999px;padding:4px 10px;
}

@media (max-width:575.98px){
  .bb-tpd-tabs-bar > .container{gap:6px;}
  .bb-tpd-itin2{gap:8px;}
  .bb-tpd-rev-detailstars{gap:6px;}
  .bb-tpd-rev-detailstars span{font-size:11px;padding:3px 8px;}
}
/* arrows only once the tab row overflows (bbTpdTabArrows stamps has-scroll) */
.bb-tpd-tabs-bar .bb-tpd-tabs-arrow--prev,
.bb-tpd-tabs-bar .bb-tpd-tabs-arrow--next{display:none;}
.bb-tpd-tabs-bar.has-scroll .bb-tpd-tabs-arrow--prev,
.bb-tpd-tabs-bar.has-scroll .bb-tpd-tabs-arrow--next{display:inline-flex;}

/* ============================================================
   THE REMAINING UNSTYLED CLASSES
   Everything below is a class the views already use that no rule anywhere
   matched (checked against every stylesheet AND every in-view <style> block).
   These are additions only -- no existing selector is touched, so no page that
   renders correctly today can change.
   ============================================================ */

/* ---- tour enquiry success (admin copy): info strip + summary steps ---- */
.bb-tbes-info-strip{
  display:flex;align-items:flex-start;gap:10px;
  margin:14px 0;padding:12px 14px;border-radius:14px;
  background:#fff7ed;border:1px solid #fed7aa;text-align:left;
}
.bb-tbes-info-strip i{color:#c2410c;font-size:15px;margin-top:2px;flex:0 0 auto;}
.bb-tbes-info-strip-text{font-size:13.5px;line-height:1.6;color:#7c2d12;}
.bb-tbes-steps{
  margin:16px 0 4px;padding:14px;border-radius:16px;text-align:left;
  background:#f8fafc;border:1px solid #e8eef6;
}
.bb-tbes-steps-title{
  margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:#94a3b8;
}
.bb-tbes-step{display:flex;align-items:flex-start;gap:11px;padding:8px 0;border-top:1px solid #eef2f7;}
.bb-tbes-step:first-of-type{border-top:0;padding-top:0;}
.bb-tbes-step-num{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:10px;font-size:12.5px;color:#fff;
  background:linear-gradient(135deg,#f97316,#c2410c);
}
.bb-tbes-step-text{font-size:13.5px;line-height:1.55;color:#334155;}
.bb-tbes-step-text strong{color:#0b1f3b;}
.bb-tbes-divider{height:1px;background:#e8eef6;margin:16px 0;border:0;}

/* ---- manage booking: the action buttons after a ticket is found ---- */
.bb-mgb-actions-section[hidden]{display:none;}
.bb-mgb-act--view,.bb-mgb-act--sms,.bb-mgb-act--email,
.bb-mgb-act--print,.bb-mgb-act--dl{position:relative;}
/* each action keeps the shared .bb-mgb-act shape and only carries its own tint */
.bb-mgb-act--view  i{color:#0d9488;}
.bb-mgb-act--sms   i{color:#2563eb;}
.bb-mgb-act--email i{color:#c026d3;}
.bb-mgb-act--print i{color:#475569;}
.bb-mgb-act--dl    i{color:#f97316;}

/* ---- tour packages: SEO content block under the listings ---- */
.bb-tpc-content{padding-top:6px;}
.bb-tpc-content-box{
  background:#fff;border:1px solid #e8eef6;border-radius:18px;
  box-shadow:0 6px 22px rgba(15,23,42,.06);padding:18px 20px;
}
.bb-tpc-content-tabs{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;padding:5px;
  background:#f1f5f9;border:1px solid #e3ebf7;border-radius:999px;
  width:-moz-fit-content;width:fit-content;max-width:100%;
}
.bb-tpc-content-tabs .nav-link{
  border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:800;color:#475569;
}
.bb-tpc-content-tabs .nav-link.active{
  background:linear-gradient(135deg,#f97316,#c2410c);color:#fff;
  box-shadow:0 5px 14px rgba(249,115,22,.3);
}
.bb-tpc-desc-sec{padding-top:4px;}
.bb-tpc-desc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}

/* section head used by the city search results */
.bb-tpc-secthead{margin-bottom:16px;}
.bb-tpc-secttitle{font-size:clamp(19px,2.2vw,25px);font-weight:800;color:#0b1f3b;margin:0 0 4px;}
.bb-tpc-sectsub{font-size:13.5px;color:#64748b;margin:0;}

/* the struck-through was-price next to a discounted fare */
.bb-pkg-strike{color:#94a3b8;font-weight:600;text-decoration:line-through;margin-right:5px;}

/* search page's filter form wrapper */
.bb-tps-filter-form{display:block;}

/* ---- hotels ---- */
.bb-htl-ribbon--detail{align-items:center;}
.bb-htl-detailrow{align-items:stretch;}

/* ---- route map card ---- */
.bb-route-map{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:14px;
  background:#fff;border:1px solid #e8eef6;box-shadow:0 4px 14px rgba(15,23,42,.05);
}
.bb-route-map__icon{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:11px;color:#fff;
  background:linear-gradient(135deg,#0d9488,#134e4a);
}

/* ---- tourist attractions: the smaller map panel variant ---- */
.bb-ta-panel--map{overflow:hidden;}
.bb-ta-mapbox--sm{border-radius:14px;overflow:hidden;}
.bb-ta-mapbox--sm iframe{display:block;width:100%;border:0;}

/* ---- blog: the whole card is the link ---- */
.bb-blog-card-link{display:block;color:inherit;text-decoration:none;}
.bb-blog-card-link:hover{color:inherit;text-decoration:none;}

@media (max-width:575.98px){
  .bb-tbes-steps{padding:12px;}
  .bb-tbes-step-num{width:27px;height:27px;font-size:11.5px;}
  .bb-tbes-step-text,.bb-tbes-info-strip-text{font-size:13px;}
  .bb-tpc-content-box{padding:14px;border-radius:15px;}
  .bb-tpc-content-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
  .bb-tpc-content-tabs::-webkit-scrollbar{display:none;}
  .bb-tpc-content-tabs .nav-link{white-space:nowrap;}
}

/* ---- the last few one-off classes with no rule ---- */
/* home: the Tomorrow / Day After shortcuts beside the date box.
   They used to be two bare orange words that ran into each other; as tappable
   chips they read as the shortcuts they are and give a real touch target. */
.bb-idx-date-quick{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:4px;
}
.bb-idx-date-quick a{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 12px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.2px;line-height:1;
  color:#c2410c;text-decoration:none;white-space:nowrap;
  background:#fff7ed;border:1px solid #fed7aa;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.bb-idx-date-quick a::before{
  content:"\f073";font-family:"Font Awesome 5 Free";font-weight:900;
  font-size:10px;opacity:.85;
}
/* the second chip is the further-out date -- a touch lighter so the pair reads
   as "next, then the one after" rather than two equal buttons */
.bb-idx-date-quick a + a{
  background:#f8fafc;border-color:#e3ebf7;color:#475569;
}
.bb-idx-date-quick a:hover,
.bb-idx-date-quick a:focus-visible{
  background:linear-gradient(135deg,#f97316,#c2410c);
  border-color:transparent;color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(249,115,22,.28);
}
.bb-idx-date-quick a:active{transform:translateY(0);}

@media (max-width:575.98px){
  .bb-idx-date-quick{gap:5px;}
  .bb-idx-date-quick a{padding:6px 10px;font-size:11px;}
}
/* a banner slide that is only an image: the base slide's padding and min-height
   are for the text variant and would letterbox the picture */
.bb-banner-slide--img{display:block;padding:0;min-height:0;}
.bb-banner-slide--img img{display:block;}
/* bus-route SEO page: the hero's inner column */
.bb-seo-hero-content{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center;}
/* buses list: the from/to chips in the results summary */
.bb-summary-city{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#0b1f3b;}
.bb-summary-city i{color:#f97316;font-size:12px;}
/* payment methods, grid variant (the base only sets margins) */
.bb-paymethods--grid .bb-paymethod{margin:0;}
.bb-paymethods--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
@media (max-width:575.98px){
  .bb-paymethods--grid{grid-template-columns:1fr;}
}

/* the fare variant of the school-packages table: numbers read better right-aligned
   than the base's centred cells, and the first column stays the label */
.bb-rsc-table--fare tbody td{text-align:right;font-variant-numeric:tabular-nums;}
.bb-rsc-table--fare tbody td:first-child,
.bb-rsc-table--fare thead td:first-child,
.bb-rsc-table--fare thead th:first-child{text-align:left;}
/* IRCTC availability summary: the comfort cell, alongside the other --* cells */
.bb-tbi-availsum-cell--comfort{border-top-color:#0d9488;}
.bb-tbi-availsum-cell--comfort .bb-tbi-availsum-num{color:#0d9488;}

/* admin's reply under a package review */
.bb-tpd-rev-reply{
  margin-top:8px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.6;
  color:#334155;background:#f8fafc;border-left:3px solid #0d9488;
}
.bb-tpd-rev-reply strong{color:#0f766e;}
/* the IRCTC booking form wrapper (its fields already carry their own classes) */
.bb-tbi-form{display:block;}
/* a vehicle card whose panel is collapsed */
.bb-tbr-vcard-closed .bb-tbr-vcard-body{display:none;}

/* ============================================================
   TOUR BOOKING CONFIRMATION — rebuilt to CI3 parity
   The page now renders exactly the blocks the CI3 page has (single centred
   column, no side panel, no invented sections). These are the classes that
   replaced the removed hero / fare-panel / tips markup.
   ============================================================ */
.bb-tbc-main{padding:26px 0 34px;background:#f6f8fc;}
.bb-tbc-main .bb-tbc-card{margin-bottom:18px;}
.bb-tbc-card-body{position:relative;}

/* resend SMS / e-mail icons, top-right of the card (CI3 had two small icons) */
.bb-tbc-resend{position:absolute;top:0;right:0;display:flex;gap:8px;}
.bb-tbc-resend a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:#f1f5f9;border:1px solid #e3ebf7;color:#0b1f3b;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.bb-tbc-resend a:hover{background:#f97316;border-color:#f97316;color:#fff;}

/* Success ! / Failed ! */
.bb-tbc-state{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 14px;}
.bb-tbc-state-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;color:#fff;font-size:26px;
}
.bb-tbc-state--ok   .bb-tbc-state-icon{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 8px 22px rgba(22,163,74,.28);}
.bb-tbc-state--fail .bb-tbc-state-icon{background:linear-gradient(135deg,#dc2626,#991b1b);box-shadow:0 8px 22px rgba(220,38,38,.28);}
.bb-tbc-state strong{font-size:20px;font-weight:800;letter-spacing:.3px;}
.bb-tbc-state--ok   strong{color:#15803d;}
.bb-tbc-state--fail strong{color:#b91c1c;}

.bb-tbc-covid{
  margin:0 0 12px;padding:10px 14px;border-radius:12px;text-align:center;
  background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;font-size:13.5px;line-height:1.6;
}

.bb-tbc-pkg-name{font-size:clamp(18px,2.2vw,23px);font-weight:800;color:#0b1f3b;text-align:center;margin:0 0 6px;}
.bb-tbc-jdate{text-align:center;font-size:13.5px;font-weight:700;color:#475569;margin:0 0 14px;}
.bb-tbc-jdate i{color:#f97316;margin-right:6px;}

.bb-tbc-line{text-align:center;font-size:14px;color:#334155;margin:0 0 8px;line-height:1.6;}
.bb-tbc-line--center{margin-top:12px;}
.bb-tbc-ok{color:#15803d;font-weight:700;}
.bb-tbc-fail{color:#b91c1c;font-weight:700;}

/* the paired boxes CI3 draws with a divider between them */
.bb-tbc-points{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin:14px 0;border:1px solid #e8eef6;border-radius:14px;overflow:hidden;background:#fff;
}
.bb-tbc-point{padding:12px 14px;text-align:center;}
.bb-tbc-point + .bb-tbc-point{border-left:1px solid #e8eef6;}
.bb-tbc-point small{display:block;font-size:12px;font-weight:700;color:#64748b;margin-bottom:4px;}
.bb-tbc-point small i{color:#f97316;margin-right:5px;}
.bb-tbc-point strong{display:block;font-size:14px;font-weight:700;color:#0b1f3b;line-height:1.45;}
.bb-tbc-point span{display:block;font-size:12.5px;color:#64748b;margin-top:2px;}

/* AMOUNT PAID / DUE AMOUNT strip */
.bb-tbc-amount{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:12px 0 0;padding:13px 16px;border-radius:12px;
  background:#f8fafc;border:1px solid #e8eef6;
}
.bb-tbc-amount span{font-size:13.5px;font-weight:800;color:#0b1f3b;letter-spacing:.3px;}
.bb-tbc-amount span i{color:#f97316;margin-right:4px;}
.bb-tbc-amount strong{font-size:19px;font-weight:800;}

/* .bb-tbc-actions was forced to display:flex + min-width:230px per button while
   the tour confirmation page was a single wide column (commit 5fb5309). The DNA
   body was restored afterwards and every view now puts this block inside the
   col-lg-4 aside -- a 368px card. A nowrap flex row of two 230px links PLUS the
   Email/SMS/WhatsApp grid then burst out of the card and painted across the
   left column, with WhatsApp running past the page edge. style.css already has
   the right design (white card, full-width stacked buttons, 1fr 1fr grid), so
   the override is gone; only the spacing note it added is kept. */
.bb-tbc-main .bb-tbc-actions{margin-top:16px;}

.bb-tbc-promo{padding:26px 0 34px;}
.bb-tbc-promo .bb-section-sub{margin-top:6px;}

@media (max-width:575.98px){
  .bb-tbc-main{padding:16px 0 24px;}
  .bb-tbc-state-icon{width:54px;height:54px;font-size:22px;}
  .bb-tbc-state strong{font-size:18px;}
  .bb-tbc-points{grid-template-columns:1fr;}
  .bb-tbc-point + .bb-tbc-point{border-left:0;border-top:1px solid #e8eef6;}
  .bb-tbc-amount strong{font-size:17px;}
  .bb-tbc-resend{position:static;justify-content:center;margin-bottom:10px;}
}

/* ============================================================
   CITY PICKER DRAWERS (.sidenavv — #sortsidebar / #filtersidebar / #myNav*)
   ci-overrides.css only ever styled #filtersidebar, so the "Select From City"
   panel was still raw Bootstrap (blue pills, plain link list). These rules are
   scoped to the shared .sidenavv class so BOTH panels get the same treatment,
   and the long single-column city list becomes a scannable chip grid.

   The panels are opened/closed by JS setting inline width/left, so nothing here
   touches width or left -- an !important on those would freeze them shut.
   ============================================================ */
.sidenavv{
  background:#fff!important;
  box-shadow:0 0 40px rgba(10,21,37,.18)!important;
  overflow-x:hidden;
}

/* ---- header bar ---- */
.sidenavv .deal-4{
  display:flex!important;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px!important;margin:0!important;max-width:none!important;
  background:linear-gradient(135deg,#0b1f3b,#12325c)!important;
}
.sidenavv .deal-4 b,
.sidenavv .deal-4 i{color:#fff!important;}
.sidenavv .deal-4 b{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15.5px!important;font-weight:800!important;letter-spacing:.2px;margin:0!important;
}
.sidenavv .deal-4 b i{color:#fb923c!important;font-size:15px;}
.sidenavv .deal-4 > a{
  float:none!important;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  text-decoration:none!important;transition:background .18s ease;
}
.sidenavv .deal-4 > a:hover{background:rgba(255,255,255,.28);}
.sidenavv .deal-4 > a i{font-size:14px!important;}

/* ---- search field ---- */
.sidenavv .form-group{position:relative;padding:0 14px!important;margin:14px 0 0!important;}
.sidenavv .form-control{
  height:46px;padding:10px 14px 10px 40px!important;
  border:1.5px solid #e5e7eb!important;border-radius:12px!important;
  font-size:14px;font-weight:600;color:#0b1f3b!important;background:#f8fafc!important;
}
.sidenavv .form-control:focus{
  background:#fff!important;border-color:#f97316!important;
  box-shadow:0 0 0 3px rgba(249,115,22,.14)!important;
}
.sidenavv .icon-inside{
  position:absolute;left:24px;top:50%;transform:translateY(-50%);
  color:#f97316!important;font-size:14px;pointer-events:none;z-index:2;
}

/* ---- "Or Select" eyebrow ---- */
.sidenavv .recent-1{margin:16px 0 10px!important;padding:0 14px;}
.sidenavv .recent-1 label{margin:0!important;}
.sidenavv .recent-1 b{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px!important;font-weight:800!important;
  letter-spacing:.6px;text-transform:uppercase;color:#94a3b8!important;
}
.sidenavv .recent-1 b i{color:#cbd5e1!important;}

/* ---- tabs: one segmented rail ---- */
.sidenavv .nav-pills{
  display:flex!important;flex-wrap:nowrap;gap:4px;
  margin:0 14px 4px!important;padding:4px!important;
  background:#f1f5f9;border:1px solid #e3ebf7;border-radius:999px;
}
.sidenavv .nav-pills .nav-item{flex:1 1 0;min-width:0;}
.sidenavv .nav-pills .nav-link{
  display:block;width:100%;text-align:center;white-space:nowrap;
  margin:0!important;padding:8px 10px!important;
  border:0!important;border-radius:999px!important;
  font-size:12.5px!important;font-weight:800!important;
  color:#475569!important;background:transparent!important;
}
.sidenavv .nav-pills .nav-link.active{
  color:#fff!important;
  background:linear-gradient(135deg,#f97316,#c2410c)!important;
  box-shadow:0 4px 12px rgba(249,115,22,.28)!important;
}

/* ---- city list becomes a chip grid ---- */
.sidenavv .scrolindex{
  max-height:min(48vh,340px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:2px 0 6px;
}
.sidenavv .scrolindex::-webkit-scrollbar{width:6px;}
.sidenavv .scrolindex::-webkit-scrollbar-thumb{background:#dbe3ee;border-radius:999px;}
.sidenavv .padleft{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:8px;padding:2px 14px 0!important;margin:0!important;
}
.sidenavv .radio.custom_for_city{margin:0!important;padding:0!important;}
.sidenavv .custom_for_city label{width:100%;margin:0!important;}
.sidenavv .custom_for_city .select_city{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;
  background:#fff;border:1px solid #e8eef6;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  font-size:13.5px!important;font-weight:700!important;
  color:#0b1f3b!important;text-decoration:none!important;line-height:1.3;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.sidenavv .custom_for_city .select_city::before{
  content:"\f3c5";font-family:"Font Awesome 5 Free";font-weight:900;
  font-size:11.5px;color:#f97316;flex:0 0 auto;
}
.sidenavv .custom_for_city .select_city:hover{
  border-color:#f97316;transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(249,115,22,.16);
}

/* ---- empty state ---- */
.sidenavv .padleft > .red,
.sidenavv .padleft > span.red{
  grid-column:1/-1;display:block;text-align:center;
  padding:18px 12px;border:1px dashed #e2e8f0;border-radius:12px;
  background:#f8fafc;color:#64748b!important;font-size:13px;font-weight:600;
}

/* ---- the ajax "next cities" list uses the same look ---- */
.sidenavv #div_nextCities{display:block;padding:0 14px;}

@media (max-width:575.98px){
  .sidenavv .padleft{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px;}
  .sidenavv .scrolindex{max-height:calc(100vh - 260px);}
  .sidenavv .deal-4{padding:12px 14px!important;}
  .sidenavv .deal-4 b{font-size:14.5px!important;}
}

/* ci-overrides.css styles the To-city panel through #filtersidebar, and an ID
   beats the .sidenavv class above however many !importants it carries. These
   ID-qualified duplicates make both panels land on the same design. Only the
   conflicting declarations are repeated -- #myNav's own rules are left alone. */
#sortsidebar .deal-4,
#filtersidebar .deal-4{
  display:flex!important;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px!important;margin:0!important;max-width:none!important;
  background:linear-gradient(135deg,#0b1f3b,#12325c)!important;border:0!important;
}
#sortsidebar .recent-1 b,
#filtersidebar .recent-1 b{
  font-size:11.5px!important;font-weight:800!important;
  letter-spacing:.6px;text-transform:uppercase;color:#94a3b8!important;
}
#sortsidebar .form-control,
#filtersidebar .form-control{
  padding:10px 14px 10px 40px!important;
  border:1.5px solid #e5e7eb!important;border-radius:12px!important;background:#f8fafc!important;
}
#sortsidebar .form-control:focus,
#filtersidebar .form-control:focus{
  background:#fff!important;border-color:#f97316!important;
  box-shadow:0 0 0 3px rgba(249,115,22,.14)!important;
}
#sortsidebar .nav-pills .nav-link,
#filtersidebar .nav-pills .nav-link{
  margin:0!important;padding:8px 10px!important;
  border:0!important;border-radius:999px!important;
  font-size:12.5px!important;font-weight:800!important;
  color:#475569!important;background:transparent!important;
}
#sortsidebar .nav-pills .nav-link.active,
#filtersidebar .nav-pills .nav-link.active{
  color:#fff!important;border-color:transparent!important;
  background:linear-gradient(135deg,#f97316,#c2410c)!important;
  box-shadow:0 4px 12px rgba(249,115,22,.28)!important;
}
#sortsidebar label,
#filtersidebar label,
#sortsidebar .select_city,
#filtersidebar .select_city{color:#0b1f3b!important;}
#sortsidebar .custom_for_city .select_city,
#filtersidebar .custom_for_city .select_city{
  font-weight:700!important;text-decoration:none!important;
}

/* ============================================================
   JOURNEY DATE PICKER (#myModal > #demo2 — perfect-datetimepicker)
   The widget ships its own bare table styling, so the booking date modal still
   looked like a stock jQuery calendar next to the rest of the site. Only the
   look is touched here: the markup and the plugin's own class names
   (.selected/.today/.oday/.buttonpane) are what it toggles, so behaviour and
   the Done/OK wiring are untouched.
   ============================================================ */
#myModal .modal-content{
  border:0!important;border-radius:18px!important;
  box-shadow:0 24px 60px rgba(10,21,37,.28)!important;overflow:hidden;
}
#myModal .modal-body.ccdate{padding:16px 16px 14px!important;}
#myModal .modal-body > .close{
  position:absolute;top:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;margin:0;
  border:1px solid #e8eef6!important;border-radius:50%!important;
  background:#f8fafc!important;color:#0b1f3b!important;opacity:1!important;
  font-size:18px;line-height:1;text-shadow:none!important;
}
#myModal .modal-body > .close:hover{background:#f1f5f9!important;border-color:#cbd5e1!important;}
#myModal #cincouttext{
  margin:2px 34px 12px!important;
  font-size:16px!important;font-weight:800!important;color:#0b1f3b!important;letter-spacing:.2px;
}
#myModal .modal-body hr{margin:0 0 12px!important;border-color:#eef2f7!important;}

/* ---- the calendar itself ---- */
#demo2 .perfect-datetimepicker{border:0!important;background:transparent!important;}
#demo2 table.dt{
  width:100%!important;border-collapse:separate!important;border-spacing:4px!important;
  background:transparent!important;border:0!important;
}
#demo2 table.dt td{border:0!important;background:transparent!important;padding:0!important;}

/* month / year bar */
#demo2 .mainhead td{padding:2px 0 8px!important;}
#demo2 .mainhead .title{
  font-size:15px!important;font-weight:800!important;color:#0b1f3b!important;
  text-align:center;letter-spacing:.2px;
}
#demo2 .prevm,#demo2 .nextm,
#demo2 .prevy,#demo2 .nexty{width:34px;}
#demo2 .prevm i,#demo2 .nextm i,
#demo2 .prevy i,#demo2 .nexty i{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:#f1f5f9;border:1px solid #e3ebf7;color:#0b1f3b;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
#demo2 .prevm:hover i,#demo2 .nextm:hover i,
#demo2 .prevy:hover i,#demo2 .nexty:hover i{
  background:linear-gradient(135deg,#f97316,#c2410c);border-color:transparent;color:#fff;
}
#demo2 .disabled i{opacity:.3;}

/* weekday header */
#demo2 .day.name{
  font-size:11px!important;font-weight:800!important;
  letter-spacing:.5px;text-transform:uppercase;color:#94a3b8!important;
  padding:2px 0 6px!important;
}
#demo2 .day.name.weekend{color:#f97316!important;}

/* day cells */
#demo2 tbody .day{
  height:38px;border-radius:11px!important;
  font-size:13.5px!important;font-weight:700!important;color:#0b1f3b!important;
  text-align:center;vertical-align:middle;cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
#demo2 tbody .day:hover{background:#fff7ed!important;color:#c2410c!important;}
/* days from the neighbouring month are still selectable -- only .disabled is
   not, so .oday must not be painted like a dead cell */
#demo2 tbody .oday{color:#64748b!important;font-weight:600!important;}
#demo2 tbody .oday:hover{background:#fff7ed!important;color:#c2410c!important;}
#demo2 tbody .today{box-shadow:inset 0 0 0 1.5px #0b1f3b;}
/* the reset a few rules up is `#demo2 table.dt td` (1,1,2); a plain
   `#demo2 tbody .selected` (1,1,1) loses to it, so the highlight never painted */
#demo2 table.dt tbody td.selected,
#demo2 table.dt tbody td.selected:hover{
  background:linear-gradient(135deg,#f97316,#c2410c)!important;color:#fff!important;
  box-shadow:0 6px 16px rgba(249,115,22,.32)!important;
}
/* the td reset above is (1,1,2) -- match it or the grey never lands */
#demo2 table.dt tbody td.disabled,
#demo2 table.dt tbody td.disabled:hover{color:#cbd5e1!important;background:transparent!important;cursor:default;}

/* Clear / Today / OK strip.
   .buttonpane is a <tfoot>: display:flex on it collapses its <td> to 0x0 and
   the OK button disappears, so the table box stays and the cells are styled.
   The selectors clear the td reset above on specificity. */
#demo2 table tfoot.buttonpane td{
  padding:12px 2px 2px!important;
  border-top:1px solid #eef2f7!important;
  background:transparent!important;
}
#demo2 table tfoot.buttonpane td.ok,
#demo2 table tfoot.buttonpane td.clear,
#demo2 table tfoot.buttonpane td.today{
  cursor:pointer;text-align:center;vertical-align:middle;
  font-size:13px!important;font-weight:800!important;letter-spacing:.2px;
}
#demo2 table tfoot.buttonpane td.ok{
  color:#fff!important;border-radius:12px!important;
  padding:12px 10px!important;
  border-top:0!important;
  background:linear-gradient(135deg,#f97316,#c2410c)!important;
  box-shadow:0 6px 16px rgba(249,115,22,.3)!important;
}
#demo2 table tfoot.buttonpane td.ok:hover{filter:brightness(1.06);}
#demo2 table tfoot.buttonpane td.clear,
#demo2 table tfoot.buttonpane td.today{
  color:#475569!important;border-radius:10px!important;padding:10px 8px!important;
  background:#f1f5f9!important;
}
#demo2 table tfoot.buttonpane td.clear:hover,
#demo2 table tfoot.buttonpane td.today:hover{background:#e2e8f0!important;}

/* the Done button under the calendar */
#myModal .btn-danger{
  margin-top:12px!important;padding:12px 16px!important;
  border:0!important;border-radius:12px!important;
  font-size:14px!important;font-weight:800!important;letter-spacing:.3px;
  background:linear-gradient(135deg,#0b1f3b,#12325c)!important;
  box-shadow:0 8px 20px rgba(11,31,59,.24)!important;
}
#myModal .btn-danger:hover{filter:brightness(1.08);}

@media (max-width:575.98px){
  #myModal .modal-body.ccdate{padding:14px 12px 12px!important;}
  #demo2 table.dt{border-spacing:3px!important;}
  #demo2 tbody .day{height:34px;font-size:13px!important;border-radius:10px!important;}
  #demo2 .buttonpane a,#demo2 .buttonpane span{padding:8px 6px;font-size:12px;}
}

/* ---- journey date picker, second pass ----------------------------------
   Asked for: no OK / Today / Clear strip and no Done button, and the grid must
   stay inside the dialog (the 7 columns were being pushed past its edge).
   Picking a date now closes the modal, so nothing is lost by dropping Done. */
#demo2 .buttonpane,
#demo2 table tfoot.buttonpane{display:none!important;}
#myModal .btn-danger{display:none!important;}

/* keep the month grid inside the dialog at every width */
#myModal .modal-dialog{max-width:380px;margin-left:auto;margin-right:auto;}
#demo2,
#demo2 .perfect-datetimepicker{width:100%!important;max-width:100%!important;}
/* NO table-layout:fixed here: the first row of this widget is the
   prev / month-title / next header with colspan 1-5-1, and fixed layout takes
   its column widths from that row -- which collapsed the five middle columns.
   Auto layout plus an equal width on the day cells keeps all seven even. */
#demo2 table.dt{width:100%!important;border-spacing:3px!important;}
#demo2 table.dt thead tr + tr td.day.name,
#demo2 table.dt tbody td.day{width:14.28%!important;}
#demo2 table.dt td{word-break:normal;}
#demo2 tbody .day{
  height:34px;font-size:13px!important;border-radius:10px!important;
}
#demo2 .mainhead .title{font-size:14.5px!important;}
#demo2 .day.name{font-size:10.5px!important;}

@media (max-width:575.98px){
  #myModal .modal-dialog{max-width:none;margin:12px;}
  #demo2 table.dt{border-spacing:2px!important;}
  #demo2 tbody .day{height:32px;font-size:12.5px!important;}
  #demo2 .day.name{font-size:10px!important;}
}

/* ============================================================
   TOUR BOOKING DATE PICKER (Zebra, #myJDModal) — adjacent-month days
   ci-overrides.css styles .dp_not_in_month together with .dp_disabled, so the
   next month's dates were painted dead grey with cursor:default. But the widget
   is configured with select_other_months:true, so those days ARE selectable --
   Aug 1-3 only looked blocked. Split the two states: only .dp_disabled is dead.
   Selectors mirror the originals plus :not(.dp_disabled) so they win on
   specificity without touching the other file.
   ============================================================ */
#myJDModal #container_date .Zebra_DatePicker .dp_body td.dp_not_in_month:not(.dp_disabled),
#myJDModal1 #container_date .Zebra_DatePicker .dp_body td.dp_not_in_month:not(.dp_disabled),
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_body td.dp_not_in_month:not(.dp_disabled){
  color:#64748b!important;
  cursor:pointer!important;
}
#myJDModal #container_date .Zebra_DatePicker .dp_body td.dp_not_in_month:not(.dp_disabled):hover,
#myJDModal1 #container_date .Zebra_DatePicker .dp_body td.dp_not_in_month:not(.dp_disabled):hover,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_body td.dp_not_in_month:not(.dp_disabled):hover{
  background:#fff7ed!important;
  color:#c2410c!important;
}
/* an other-month day that is also a weekend keeps the weekend colour */
#myJDModal #container_date .Zebra_DatePicker .dp_daypicker td.dp_not_in_month.dp_weekend:not(.dp_disabled),
#myJDModal1 #container_date .Zebra_DatePicker .dp_daypicker td.dp_not_in_month.dp_weekend:not(.dp_disabled),
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_daypicker td.dp_not_in_month.dp_weekend:not(.dp_disabled){
  color:#fb7185!important;
}

/* ============================================================
   CANCEL-TICKET DETAILS PAGE  (/cancel-tickets/index/details)
   ------------------------------------------------------------
   1. The auto-opening T&C gate rendered as a plain white slab: its
      "Terms & Conditions" h4 computed to #fff (white on white), so the header
      band looked empty, and the dialog kept bootstrap's fade offset
      translateY(-50px) even with .show on the modal -- CI3 opens it with the
      BS4 jQuery API ($('#termsModal').modal('show')), which never runs BS5's
      transition that clears the transform. Result: the box sat 22px ABOVE the
      viewport top and was clipped.
   2. Refund Summary rows are filled by CI3 JS once seats are ticked, so before
      that every row read as a bare rupee sign. An em-dash placeholder keeps it
      honest instead of looking broken, and disappears the moment JS writes a
      value (:empty stops matching). No JS or markup is touched.
============================================================ */
#termsModal .modal-title,
#termsModal .modal-title b,
#termsModal h4{color:var(--bb-dark,#0a1525)!important;}
/* transform reset must be unconditional and must also kill the transition: CI3
   opens this gate through the BS4 jQuery API, so BS5's own transition -- the
   thing that normally clears .fade's translateY(-50px) once .show lands --
   never runs to completion and the dialog stays 50px high, clipped at the top.
   There is no entry animation worth keeping on an auto-opening gate. */
#termsModal .modal-dialog,
#termsModal.fade .modal-dialog,
#termsModal.show .modal-dialog{
  transform:none!important;transition:none!important;
  max-width:520px;margin:1.75rem auto;
  display:flex;align-items:center;min-height:calc(100% - 3.5rem);
}
#termsModal .modal-content{overflow:hidden;width:100%;}
@media (max-width:575.98px){
  /* auto side margins collapse to 0 once the dialog fills the screen, so the
     sheet ran edge to edge -- give it a gutter instead */
  #termsModal .modal-dialog,
  #termsModal.fade .modal-dialog,
  #termsModal.show .modal-dialog{margin:1.25rem 12px!important;min-height:calc(100% - 2.5rem);}
  #termsModal .modal-body{padding:14px;}
}
/* the title band is a bare .p-2.border-bottom in CI3 -- give it the sheet look */
#termsModal .modal-content > .border-bottom{
  background:#f8fafc;border-bottom:1px solid #e8eef6!important;padding:13px 16px!important;
}
#termsModal .modal-body{padding:16px;}
#termsModal .modal-body label{display:flex;gap:9px;align-items:flex-start;text-align:left;font-size:13px;line-height:1.5;}
#termsModal .modal-body label input[type="checkbox"]{margin-top:3px;flex:0 0 auto;}

.bb-mgb-refundcard-rows strong span:empty::after,
.bb-mgb-refundcard-total span:empty::after{content:"\2014";color:#94a3b8;font-weight:600;}
.bb-mgb-refundcard-note{
  margin:2px 0 10px;font-size:11.5px;font-weight:600;color:#64748b;
  display:flex;gap:6px;align-items:flex-start;line-height:1.45;
}
.bb-mgb-refundcard-note i{color:#f97316;margin-top:2px;}

/* ============================================================
   CANCELLATION CONFIRMED HERO  (.bb-tbc-hero--cancelled)
   ------------------------------------------------------------
   A cancellation is neither a success nor a failure, so it gets its own tone
   rather than borrowing --success (green, reads as "booked") or --failed (red,
   reads as "payment broke"). Slate/amber: the action completed, the trip did
   not. Same geometry as the two DNA variants, only the colours differ.
============================================================ */
.bb-tbc-hero--cancelled{background:linear-gradient(180deg,#f8fafc 0%,#fff7ed 60%,transparent 100%);}
.bb-tbc-hero--cancelled .bb-tbc-hero-icon{
  background:linear-gradient(135deg,#64748b,#334155);
  box-shadow:0 20px 50px -10px rgba(51,65,85,.45);
}
.bb-tbc-hero--cancelled .bb-tbc-hero-title{color:#0f172a;}

/* ============================================================
   TOUR CANCEL TICKET CARD — package name is the headline
   ------------------------------------------------------------
   The card was built for a bus ticket, where the route is what identifies the
   journey, so .bb-mgb-ticket-pt strong ran at 20px/800 while the package name
   sat in the 12px grey .bb-mgb-ticket-buz beside the operator. On a tour ticket
   that reads backwards -- and both stops are usually the SAME point, so two
   identical 20px lines dominated the card and said nothing.

   Scoped to .bb-mgb-ticket--pkg (stamped only by the tour view). The bus cancel
   view keeps the plain .bb-mgb-ticket, so its route stays prominent.
============================================================ */
.bb-mgb-ticket--pkg .bb-mgb-ticket-head{
  display:block;                       /* headline on its own line, meta under it */
}
.bb-mgb-ticket--pkg .bb-mgb-ticket-pkg{
  display:block;
  font-size:19px;font-weight:800;line-height:1.25;color:#0f172a;
  letter-spacing:-.2px;margin-bottom:5px;
}
.bb-mgb-ticket--pkg .bb-mgb-ticket-op,
.bb-mgb-ticket--pkg .bb-mgb-ticket-buz{
  display:inline;font-size:12.5px;font-weight:600;color:#64748b;
}
.bb-mgb-ticket--pkg .bb-mgb-ticket-op{margin-right:9px;}
.bb-mgb-ticket--pkg .bb-mgb-ticket-op i{color:#f97316;}
/* route steps back: supporting detail, not the title */
.bb-mgb-ticket--pkg .bb-mgb-ticket-pt strong{
  font-size:13.5px;font-weight:700;color:#334155;line-height:1.3;
}
.bb-mgb-ticket--pkg .bb-mgb-ticket-pt small{font-size:11px;}
.bb-mgb-ticket--pkg .bb-mgb-ticket-route{gap:12px;margin-bottom:10px;}

@media (max-width:575.98px){
  .bb-mgb-ticket--pkg .bb-mgb-ticket-pkg{font-size:16.5px;}
  .bb-mgb-ticket--pkg .bb-mgb-ticket-pt strong{font-size:12.5px;}
}

/* ============================================================
   CANCEL FLOW — round 2 of live-review fixes
============================================================ */

/* 1. WHICH SLAB APPLIES.  The meter marks the applied slab with --active
   (amber) but ALSO paints the 100% slab with --block (red), so two chips read
   as "lit" and the customer could not tell which one they were being charged.
   --active now reads as the only selected chip; --block goes back to being a
   plain warning tint, and the applied slab is additionally named in words. */
.bb-mgb-policy-step--active{
  background:linear-gradient(135deg,#f97316,#ea580c)!important;color:#fff!important;
  border-color:transparent!important;font-weight:800;
  box-shadow:0 4px 12px rgba(249,115,22,.38),0 0 0 3px rgba(249,115,22,.18)!important;
}
.bb-mgb-policy-step--active b{color:#fff;}
.bb-mgb-policy-step--block:not(.bb-mgb-policy-step--active){
  background:#fff!important;color:#b91c1c!important;border-color:#fecaca!important;
  box-shadow:none!important;transform:none!important;
}
.bb-mgb-policy-applied{
  display:flex;gap:7px;align-items:flex-start;
  margin:9px 0 4px;padding:9px 11px;border-radius:10px;
  background:#fff7ed;border:1px solid #fed7aa;
  font-size:12px;font-weight:600;color:#7c2d12;line-height:1.45;
}
.bb-mgb-policy-applied i{color:#ea580c;margin-top:2px;flex:0 0 auto;}
.bb-mgb-policy-applied b{font-weight:800;color:#9a3412;}

/* 2. ACTION CARDS — the stacked buttons had no gap at all (.bb-tbc-actions is
   a plain padded card and .bb-tbc-action is width:100%), so on the cancelled
   page "Book This Package Again" and "Go To Packages" sat glued together. */
.bb-tbc-actions{display:grid;gap:8px;}
.bb-tbc-actions .bb-tbc-actions-grid{margin-top:0;}

/* 3. TOUR bb-tbc CARD — package headline, route as supporting detail.
   Scoped to .bb-tbc-card--pkglead so the bus / irctc confirmation pages keep
   their route-first scale. */
.bb-tbc-card--pkglead .bb-tbc-trip-pkg{font-size:19px;line-height:1.25;letter-spacing:-.2px;}
.bb-tbc-card--pkglead .bb-tbc-trip-stop strong{font-size:13px;font-weight:700;color:#334155;}
.bb-tbc-card--pkglead .bb-tbc-trip-stop small{font-size:10.5px;}
@media (max-width:575.98px){
  .bb-tbc-card--pkglead .bb-tbc-trip-pkg{font-size:16.5px;}
  .bb-tbc-card--pkglead .bb-tbc-trip-stop strong{font-size:12.5px;}
}

/* 4. "CANCEL THIS TICKET?" CONFIRM SHEET */
.bb-mgb-confirm .modal-dialog{max-width:430px;}
.bb-mgb-confirm .modal-content{border:0;border-radius:18px;overflow:hidden;}
.bb-mgb-confirm-body{padding:22px 20px 18px;text-align:center;}
.bb-mgb-confirm-ico{
  width:58px;height:58px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#fee2e2,#fecaca);color:#b91c1c;font-size:24px;
}
.bb-mgb-confirm-body h4{font-size:18px;font-weight:800;color:#0f172a;margin:0 0 5px;}
.bb-mgb-confirm-body > p{font-size:12.5px;color:#64748b;margin:0 0 14px;line-height:1.5;}
.bb-mgb-confirm-sum{
  list-style:none;margin:0 0 16px;padding:11px 13px;text-align:left;
  background:#f8fafc;border:1px solid #e8eef6;border-radius:12px;
}
.bb-mgb-confirm-sum li{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:5px 0;font-size:12.5px;
}
.bb-mgb-confirm-sum li + li{border-top:1px dashed #e2e8f0;}
.bb-mgb-confirm-sum span{color:#64748b;font-weight:600;}
.bb-mgb-confirm-sum strong{color:#0f172a;font-weight:800;}
.bb-mgb-confirm-acts{display:grid;gap:8px;}
.bb-mgb-confirm-yes,.bb-mgb-confirm-no{
  width:100%;border-radius:999px;padding:11px 16px;
  font-size:13.5px;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.bb-mgb-confirm-yes{
  background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;border:0;
  box-shadow:0 8px 20px -6px rgba(185,28,28,.55);
}
.bb-mgb-confirm-yes:hover:not(:disabled){transform:translateY(-1px);}
.bb-mgb-confirm-yes:disabled{opacity:.75;cursor:default;}
.bb-mgb-confirm-no{background:#fff;color:#334155;border:1.5px solid #e3ebf7;}
.bb-mgb-confirm-no:hover{border-color:#cbd5e1;}
@media (max-width:575.98px){
  .bb-mgb-confirm .modal-dialog{margin:1.25rem 12px;}
  .bb-mgb-confirm-body{padding:18px 16px 16px;}
}
/* ============================================================
   SECTION HEADINGS GET THE ORANGE BAND  (manage-booking + bb-tbc family)
   ------------------------------------------------------------
   Matching passenger-details, which is the reference. Its section heading is
   NOT a grey strip -- the paxcard itself carries
   linear-gradient(135deg,#fb923c,#f97316) with overflow:hidden, the <header>
   sits on it transparently, and the title / icon / sub-line are white, with a
   round white-alpha badge on the right. The body below is a plain white block
   with the bottom corners rounded. (First pass used a #f1f5f9 strip -- that was
   the wrong reference.)

   Applied to the manage-booking card titles, which were bare inline headings,
   and to .bb-tbc-card-head, which was a band but on a near-white token. All
   three families now carry the same orange band so cancel / cancelled /
   print-SMS / booking-confirmation read as one system.
============================================================ */
.bb-mgb-bookcard,.bb-mgb-refundcard{overflow:hidden;}
.bb-mgb-bookcard-title,
.bb-mgb-refundcard-title,
.bb-tbc-card-head,
.bb-tbc-card--fare .bb-tbc-card-head,
.bb-tbc-card--tips .bb-tbc-card-head,
.bb-tbc-card--failed .bb-tbc-card-head{
  background:linear-gradient(135deg,#fb923c 0%,#f97316 100%)!important;
  border-bottom:none!important;
  color:#fff;
}
/* pull the manage-booking titles out to the card edges (they live inside the
   card's 16/18 padding; the bb-tbc heads are already edge to edge) */
.bb-mgb-bookcard-title,
.bb-mgb-refundcard-title{
  margin:-16px -18px 14px;padding:11px 16px;
  font-size:15px;font-weight:800;
}
/* white ink on the band -- every one of these was dark or orange before */
.bb-mgb-bookcard-title,.bb-mgb-refundcard-title,
.bb-tbc-card-head h2,.bb-tbc-card-head h3{color:#fff!important;}
.bb-mgb-bookcard-title i,.bb-mgb-refundcard-title i,
.bb-tbc-card-head h2 i,.bb-tbc-card-head h3 i{color:#fff!important;}
.bb-mgb-bookcard-title small,
.bb-tbc-card-head > small{color:rgba(255,255,255,.85)!important;font-weight:600;}

@media (max-width:575.98px){
  /* .bb-mgb-bookcard drops to padding:14px here; .bb-mgb-refundcard does not
     (the 575px rule only makes it non-sticky), so a shared -14px pull left the
     refund band 4px short of the card edge -- measured, then split. */
  .bb-mgb-bookcard-title{margin:-14px -14px 12px;padding:11px 14px;}
  .bb-mgb-refundcard-title{padding:11px 16px;}
  .bb-mgb-bookcard-title,.bb-mgb-refundcard-title{font-size:14px;}
}

/* ============================================================
   SIMPLE NAV DROPDOWNS ANCHOR TO THEIR OWN ITEM
   ------------------------------------------------------------
   style.css:18168 sets .bb-has-mega{position:static!important} so the 4-column
   megas can span the whole nav, and then right-anchors the simple panel with
   .bb-has-mega:hover .bb-mega--simple{left:auto!important;right:0!important}.
   With the <li> static that right:0 resolves against the nav, not the item --
   fine while Manage Bookings (the last item) was the only simple dropdown, but
   the moment a second one exists both pin to the same far-right slot. Measured:
   Amusement Parks sits at 760..904 while its panel opened at 1028..1268,
   exactly on top of the Manage Bookings panel.

   Give back a positioning context, but only to items that actually hold a
   simple panel -- the 4-col megas must stay static to keep spanning the nav.
   right:0 then aligns each panel to the right edge of its own item, which also
   keeps the last one inside the viewport.
============================================================ */
.bb-nav-list > li.bb-has-mega:has(> .bb-mega--simple){position:relative!important;}

/* ============================================================
   BOARDING / DROPPING PICKER — breathing room beside the time chip
   ------------------------------------------------------------
   The compact pass that shortened these sheets also pulled the row in to
   padding:8px 14px and gap:10px, which left the time chip sitting almost
   against the point name. Widen the horizontal rhythm only -- the column gap
   and the side padding -- so the vertical height the compact pass bought is
   untouched. Applies at every width; the sheet is the same component on mobile
   and desktop.
============================================================ */
#boardingsidebar .bsl-point > label.bsl-point,
#droppingsidebar .bsl-point > label.bsl-point,
#boardingsidebar label.bsl-point,
#droppingsidebar label.bsl-point{
  gap:15px!important;
  padding-left:16px!important;
  padding-right:16px!important;
}
/* a touch more room inside the chip itself so the time is not wall-to-wall */
#boardingsidebar .bsl-point-time,
#droppingsidebar .bsl-point-time{padding:4px 9px!important;}
/* keep the search box aligned with the rows it filters */
#boardingsidebar .bsl-sidepanel-search,
#droppingsidebar .bsl-sidepanel-search{padding-left:16px!important;padding-right:16px!important;}

/* ============================================================
   HOMEPAGE BANNER CAROUSEL — frame, arrows, progress indicators
   ------------------------------------------------------------
   Every slide is now an admin-uploaded image (the three hardcoded offer slides
   are gone), so the job here is to present a picture well rather than decorate
   it. Three things were wrong:
     - the image carried inline border-radius + object-fit:cover with an auto
       height, so object-fit did nothing and the radius fought the carousel's
       own overflow:hidden;
     - indicators sat ON the image in white, which disappears on the many light
       banners in this CMS;
     - no arrows at all, so on desktop the only way forward was to wait.
   Colours are the site tokens: --bb-primary #f97316, --bb-dark #0a1525.
============================================================ */
.bb-banners .carousel{
  border-radius:18px;overflow:hidden;
  border:1px solid var(--bb-border,#e5e7eb);
  box-shadow:0 10px 30px -18px rgba(10,21,37,.45);
  background:var(--bb-bg-alt,#f1f5f9);
}
/* the image sets the height -- no crop, no letterbox, no layout shift */
.bb-banners .bb-banner-img{
  display:block;width:100%;height:auto;border-radius:0;
}

/* indicators move off the picture onto their own strip under it */
.bb-banners .carousel-indicators{
  position:static;margin:14px 0 0;padding:0;
  display:flex;justify-content:center;gap:7px;
}
.bb-banners .carousel-indicators [data-bs-slide-to]{
  width:26px;height:4px;border-radius:999px;
  background:#dfe5ee;border:0;opacity:1;margin:0;
  text-indent:0;transition:background .2s,width .25s;
}
.bb-banners .carousel-indicators [data-bs-slide-to]:hover{background:#c3ccdb;}
.bb-banners .carousel-indicators .active{
  width:40px;background:var(--bb-primary,#f97316);
}

/* arrows: desktop only, quiet until you approach the banner */
.bb-banners .bb-banner-nav{
  width:44px;height:44px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--bb-dark,#0a1525);
  border:1px solid rgba(10,21,37,.10);border-radius:50%;
  box-shadow:0 6px 18px -8px rgba(10,21,37,.5);
  opacity:0;transition:opacity .2s,background .2s,transform .2s;
}
.bb-banners .bb-banner-nav.carousel-control-prev{left:14px;}
.bb-banners .bb-banner-nav.carousel-control-next{right:14px;}
.bb-banners .carousel:hover .bb-banner-nav,
.bb-banners .bb-banner-nav:focus-visible{opacity:1;}
.bb-banners .bb-banner-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06);}
.bb-banners .bb-banner-nav i{font-size:15px;}
@media (max-width:767.98px){
  /* touch swipes the carousel already; arrows would only cover the picture */
  .bb-banners .bb-banner-nav{display:none;}
  .bb-banners .carousel{border-radius:14px;}
  .bb-banners .carousel-indicators{margin-top:11px;}
  .bb-banners .carousel-indicators [data-bs-slide-to]{width:20px;height:3.5px;}
  .bb-banners .carousel-indicators .active{width:32px;}
}

/* ============================================================
   HOMEPAGE BANNERS — scroll-snap rail (supersedes the carousel block above)
   ------------------------------------------------------------
   The CMS artwork is 720x330. One full-width slide stretched it to 1151px on a
   desktop container -- a 1.6x upscale and a 1151x527 strip, which is why it
   read as a stretched bar. Two cards put each at ~560px, under the artwork's
   own width, so nothing upscales and the row reads as content. Mobile stays at
   one card, which was already fine.

   Native scroll-snap does the swiping; the inline script only drives dots,
   arrows and autoplay. Colours are site tokens.
============================================================ */
.bb-banners{padding:26px 0 30px;}
.bb-bnr{position:relative;}
.bb-bnr-rail{
  display:flex;gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;
}
.bb-bnr-rail::-webkit-scrollbar{display:none;}
.bb-bnr-card{
  flex:0 0 100%;scroll-snap-align:start;
  display:block;border-radius:16px;overflow:hidden;
  border:1px solid var(--bb-border,#e5e7eb);
  box-shadow:0 8px 24px -16px rgba(10,21,37,.45);
  background:var(--bb-bg-alt,#f1f5f9);
  transition:transform .22s ease,box-shadow .22s ease;
}
.bb-bnr-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(10,21,37,.55);}
.bb-bnr-card .bb-banner-img{display:block;width:100%;height:auto;}

/* two up from tablet, so each card lands near the artwork's native 720px */
@media (min-width:768px){
  .bb-bnr-card{flex-basis:calc(50% - 9px);}
}

/* dots: one per scroll page, built by the script */
.bb-bnr-dots{display:flex;justify-content:center;gap:7px;margin-top:14px;}
.bb-bnr-dot{
  width:26px;height:4px;border:0;padding:0;border-radius:999px;
  background:#dfe5ee;cursor:pointer;transition:background .2s,width .25s;
}
.bb-bnr-dot:hover{background:#c3ccdb;}
.bb-bnr-dot.is-on{width:40px;background:var(--bb-primary,#f97316);}

/* arrows sit just outside the rail on desktop, quiet until hover */
.bb-bnr-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;display:none;place-items:center;
  background:#fff;color:var(--bb-dark,#0a1525);
  border:1px solid rgba(10,21,37,.10);border-radius:50%;
  box-shadow:0 6px 18px -8px rgba(10,21,37,.5);
  opacity:0;transition:opacity .2s,transform .2s;cursor:pointer;z-index:2;
}
.bb-bnr-prev{left:-14px;}
.bb-bnr-next{right:-14px;}
.bb-bnr:hover .bb-bnr-nav,.bb-bnr-nav:focus-visible{opacity:1;}
.bb-bnr-nav:hover{transform:translateY(-50%) scale(1.07);}
.bb-bnr-nav i{font-size:14px;}
@media (min-width:992px){.bb-bnr-nav{display:grid;}}
/* nothing to page through -> no arrows, no dots */
.bb-bnr.is-single .bb-bnr-nav{display:none;}

@media (max-width:767.98px){
  .bb-bnr-rail{gap:12px;}
  .bb-bnr-card{border-radius:14px;}
  .bb-bnr-dots{margin-top:11px;}
  .bb-bnr-dot{width:20px;height:3.5px;}
  .bb-bnr-dot.is-on{width:32px;}
}

/* ============================================================
   "OUR SERVICES" HEADING — centred, using the site's own pattern
   ------------------------------------------------------------
   It was a 15px span pinned to the far left of a full-width row, with the
   mobile "Swipe" hint pushed to the opposite edge by space-between. On desktop
   it read as a stray label rather than a section heading.

   Restyled to the eyebrow + title + divider stack this page already uses for
   "We associate with", so it matches rather than introduces a new treatment.
   The flex row becomes a centred column; the swipe hint drops underneath where
   it belongs, instead of fighting the title for the row.
============================================================ */
.bb-quick-cats .bb-qc-head{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;gap:0;margin-bottom:18px;padding:0 12px;
}
.bb-quick-cats .bb-qc-head .bb-eyebrow{
  margin-bottom:6px;color:var(--bb-secondary,#0d9488);
}
/* no title sizing here on purpose: the heading now uses h2.bb-section-title,
   so it inherits the size, weight and brush of the section headings this page
   already carries instead of a bespoke set that would drift from them. */
.bb-quick-cats .bb-qc-head .bb-section-title{margin-bottom:0;}
/* no divider rule here: the brush underline on the h4 replaced the fixed-width
   divider site-wide, and .bb-section-divider is display:none inside any
   bb-section-head container. */
.bb-quick-cats .bb-qc-head-swipe{
  margin-top:10px;justify-content:center;
}
@media (max-width:575.98px){
  .bb-quick-cats .bb-qc-head{margin-bottom:14px;}
}

/* ============================================================
   SECTION RHYTHM — tighten the dead space between sections
   ------------------------------------------------------------
   Measured on the homepage before this change:
     desktop  .bb-section 60px top + 60px bottom = 120px between EVERY pair
     mobile   .bb-section 40px + 40px            =  80px
   plus .bb-partners at 48px, which stacked to 108px against a 60px neighbour.
   That is the "extra gap" -- nothing is empty, the sections are just held far
   apart.

   Reduced, not removed: sections still need to read as separate blocks.
     desktop 60 -> 40  => 80px between sections (was 120)
     mobile  40 -> 28  => 56px               (was 80)
     partners 48 -> 34 desktop / 24 mobile

   Note: the ~70px under the hero is NOT a gap -- it is the .bb-secnav category
   pill bar, real content. Left alone.
============================================================ */
.bb-section{padding:40px 0;}
.bb-partners{padding:34px 0;}
@media (max-width:767.98px){
  .bb-section{padding:28px 0;}
  .bb-partners{padding:24px 0;}
}

/* ============================================================
   HOTEL LIST CARD — the whole card opens the hotel
   ------------------------------------------------------------
   Only two things in the card were clickable: the photo and the "View Details"
   button. The hotel name is a plain <strong>, so the most obvious thing to
   click did nothing.

   Stretched-link pattern rather than wrapping the card in an <a>: the card
   already contains anchors, and nesting anchors is invalid HTML. The CTA keeps
   being the one real link (so it stays keyboard-focusable and screen readers
   still announce one destination) and its ::after covers the whole card. Both
   existing links point at the same URL with target="_blank", so covering the
   photo link changes nothing about where a click lands.

   .bb-htll-card-img / -times are position:relative and the logo / badge chips
   are absolute, which would sit ABOVE the overlay and swallow clicks -- they
   are decorative, so they pass clicks through instead.
============================================================ */
.bb-htll-card{position:relative;}
.bb-htll-card-cta::after{
  content:"";position:absolute;inset:0;z-index:2;
  border-radius:inherit;
}
.bb-htll-card-img,
.bb-htll-card-times,
.bb-htll-card-logo,
.bb-htll-card-badge{pointer-events:none;}
/* the photo's own <a> is now redundant (same href, covered by the overlay) but
   left in the markup; neutralise it so it cannot win the click */
.bb-htll-card-img a{pointer-events:none;}

/* the card now behaves like one big button */
.bb-htll-card{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;}
.bb-htll-card:hover{transform:translateY(-3px);}
/* and the name reads as the link people try to click */
.bb-htll-card-name{transition:color .18s;}
.bb-htll-card:hover .bb-htll-card-name{color:var(--bb-primary,#f97316);}
/* keyboard users get the same ring the mouse gets a hover for */
.bb-htll-card:focus-within{outline:2px solid var(--bb-primary,#f97316);outline-offset:3px;}
.bb-htll-card-cta:focus-visible{outline:none;}

/* ============================================================
   MOBILE DOCK -- let the item count drive the columns
   ------------------------------------------------------------
   style.css pinned .bb-mobnav to `grid-template-columns:repeat(5,1fr)`,
   which was fine while the dock had exactly five slots. The raised centre
   slot ("My Ticket") has been removed on request, so a hardcoded five would
   lay four items across five tracks and leave a dead cell on the right --
   the whole dock reads as shifted left.

   grid-auto-flow:column + grid-auto-columns:1fr sizes the tracks from
   however many children are actually rendered, so the dock stays even at
   four now and would stay even if a slot is ever added back.
   ============================================================ */
.bb-mobnav{grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:1fr!important;}

/* ============================================================
   .bb-tbc-note -- the "refund reaches you in 3-5 bank working days" line
   ------------------------------------------------------------
   CI3 carried this sentence on the IRCTC and hotel cancellation-confirmed
   pages, and it belongs with the refund figure rather than floating under the
   card. Same shape as .bb-mgb-refundcard-note (the equivalent note on the
   cancel-ticket-details refund card) so the two read as one component: muted
   slate copy, orange icon, hanging indent from the flex row.

   Slightly larger than the -mgb- one because here it sits alone at the bottom
   of a sidebar card rather than inside a dense list.
   ============================================================ */
.bb-tbc-note{
  margin:14px 0 0;padding-top:12px;border-top:1px dashed #e2e8f0;
  font-size:12px;font-weight:600;color:#64748b;
  display:flex;gap:7px;align-items:flex-start;line-height:1.5;
}
.bb-tbc-note i{color:var(--bb-primary,#f97316);margin-top:2px;flex:none;}
.bb-tbc-note strong{color:#334155;}

/* ============================================================
   CANCEL-TICKETS: bits the newly converted views need
   ------------------------------------------------------------
   Added while converting cancel-entry-ticket-details and
   cancel-irctc-ticket-details to the bb-tbc DNA. Each rule extends an
   existing bb-tbc component rather than introducing a new look.
   ============================================================ */

/* 1. The Ramoji six-point "no direct cancellation" note. It sits inside a
      .bb-tbc-card--failed, which already supplies the amber/red frame, so this
      only has to make an <ol> readable -- default list padding collapses the
      numbers against the card edge. */
.bb-tbc-notelist{margin:0;padding-left:20px;display:grid;gap:8px;}
.bb-tbc-notelist li{font-size:13px;line-height:1.55;color:#475569;}
.bb-tbc-notelist li::marker{font-weight:800;color:var(--bb-primary,#f97316);}
.bb-tbc-notelist strong{color:#0f172a;}

/* 2. Labelled selects. CI3 wrapped these in Bootstrap input-groups with an
      icon prepend; a plain label above the control is clearer and stops the
      two selects sitting at different heights on a narrow screen. */
.bb-tbc-lbl{
  display:block;margin:0 0 6px;font-size:11px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;color:#64748b;
}
.bb-req{color:#dc2626;}
.bb-tbc-select{
  height:44px;border:1.5px solid var(--bb-border,#e2e8f0);border-radius:var(--bb-radius,10px);
  font-size:14px;font-weight:600;color:#0f172a;background-color:#fff;
}
.bb-tbc-select:focus{
  border-color:var(--bb-primary,#f97316);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);outline:none;
}

/* 3. Two more .bb-tbc-action variants, same geometry as --primary, different
      intent. IRCTC offers full vs partial cancellation side by side, and they
      must not look like the same button: full is destructive (rose), partial
      is a lesser action (amber). */
.bb-tbc-action--danger{
  background:linear-gradient(135deg,#f87171,#dc2626);
  color:#fff!important;border-color:transparent;
  box-shadow:0 6px 16px -4px rgba(220,38,38,.45);
}
.bb-tbc-action--warn{
  background:linear-gradient(135deg,#fbbf24,#d97706);
  color:#fff!important;border-color:transparent;
  box-shadow:0 6px 16px -4px rgba(217,119,6,.45);
}
.bb-tbc-action--danger:hover,
.bb-tbc-action--warn:hover{transform:translateY(-1px);color:#fff!important;}
/* the "(All seats)" / "(Some seats)" qualifier rides under the label */
.bb-tbc-action--danger small,
.bb-tbc-action--warn small{opacity:.85;font-weight:700;}
/* 4. Plain paragraph inside a note card (the hotel partial-cancellation
      contact block). .bb-tbc-notelist is for numbered CI3 notes; this is the
      one-or-two-sentence variant. */
.bb-tbc-notelead{margin:0 0 8px;font-size:13px;line-height:1.55;color:#475569;}
.bb-tbc-notelead:last-child{margin-bottom:0;}
.bb-tbc-notelead strong{color:#0f172a;}
.bb-tbc-notelead a{color:var(--bb-primary,#f97316);font-weight:700;text-decoration:none;}
.bb-tbc-notelead a:hover{text-decoration:underline;}

/* ============================================================
   BUS HIRE: the date-picker modal was unclickable
   ------------------------------------------------------------
   Reported as "calendar open avvatledu, block avuthondi". The calendar did
   open -- it was just unreachable, and looked washed out because it was being
   viewed THROUGH the modal backdrop.

   Cause, and it is mine: style.css:12366 gave .bb-bhr-hero-content
   `position:relative; z-index:1`. A positioned element with a numeric z-index
   creates a STACKING CONTEXT, and CI3 renders #myModal_0 inside the hero form
   -- so the modal's z-index:1055 only ranked it against its siblings inside
   that context. To the page, the whole hero-content subtree sat at z-index 1,
   while .modal-backdrop (z-index 1050, appended straight to <body>) painted
   above all of it. elementFromPoint over a calendar cell returned
   DIV.modal-backdrop, so every click on a date hit the backdrop.

   The z-index was never needed. .bb-bhr-hero-bg is position:absolute with NO
   z-index, and .bb-bhr-hero-content follows it in DOM order -- two positioned
   elements at z-index:auto paint in DOM order, so the content already sits
   above the background image. Dropping to `auto` keeps the look and stops the
   subtree trapping the modal.

   Not fixed by relocating the modal to <body>: that pattern already caused
   drawers to leak across flows on the seat-layout pages.
   ============================================================ */
.bb-bhr-hero-content{z-index:auto;}

/* The hairline + tint that stood in for the removed trust band is gone again:
   the new .bb-tb band sits above .bb-foot-links and marks the page/footer
   boundary itself, exactly as the old navy band did, so the links area goes
   back to plain white. */

/* ==================================================================
   TRUST BAND — "Night journey" (footer top edge)
   Replaces the old four-box .bb-foot-stats band. Chosen from three
   mockup directions; kept compact on request (band ~158px desktop,
   card ~72px -- the first cut was 322/178).

   Every colour is a :root token. The band is a night sky over a
   receding road because overnight travel is the actual product; the
   spotlight tracks the pointer and the figures roll like a fare
   meter. Prefixed bb-tb-* so nothing collides with existing classes.
   ================================================================== */
/* z-index because the Aurora footer wraps this band and its .bb-af-mesh is an
   absolutely-positioned sibling that comes LATER in the DOM -- without this the
   blurred colour mesh painted straight over the band's own night sky.
   Safe here: the band contains no modals, so it traps nothing. */
.bb-tb{position:relative;z-index:3;overflow:hidden;padding:26px 0 24px;
  background:linear-gradient(180deg,#050a12 0%,var(--bb-dark,#0a1525) 45%,#102a33 100%)}
.bb-tb-sky{position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),
                   radial-gradient(1.2px 1.2px at 28% 12%,#cfe6ff,transparent),
                   radial-gradient(1.6px 1.6px at 47% 30%,#fff,transparent),
                   radial-gradient(1.2px 1.2px at 63% 16%,#bfe3ff,transparent),
                   radial-gradient(1.5px 1.5px at 81% 26%,#fff,transparent),
                   radial-gradient(1.2px 1.2px at 92% 12%,#dbeafe,transparent);
  animation:bb-tb-tw 4.5s ease-in-out infinite alternate}
@keyframes bb-tb-tw{from{opacity:.35}to{opacity:.75}}
/* --mx/--my are set by the pointermove handler in footer.php */
.bb-tb-spot{position:absolute;inset:0;pointer-events:none;transition:background .18s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),rgba(94,234,212,.16),transparent 70%)}
.bb-tb-road{position:absolute;left:-10%;right:-10%;bottom:-22px;height:92px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);
  transform:perspective(300px) rotateX(62deg);transform-origin:bottom;
  border-top:1px solid rgba(255,255,255,.12)}
.bb-tb-road::after{content:"";position:absolute;left:0;right:0;top:22px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(234,179,8,.55) 0 26px,transparent 26px 58px);
  animation:bb-tb-flow 1.1s linear infinite}
@keyframes bb-tb-flow{to{background-position:-84px 0}}

.bb-tb-in{position:relative;z-index:2}
.bb-tb-kick{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;font-size:11.5px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8ee6d8}
.bb-tb-kick i{color:var(--bb-accent,#eab308)}
.bb-tb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bb-tb-card{position:relative;padding:13px 15px;border-radius:14px;
  display:flex;gap:12px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.bb-tb-card:hover{transform:translateY(-4px);border-color:rgba(94,234,212,.45);
  box-shadow:0 14px 32px rgba(0,0,0,.45)}
.bb-tb-card i.bb-tb-i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  font-size:14px;flex:none;color:#a5f3e9;
  background:linear-gradient(135deg,rgba(94,234,212,.22),rgba(13,148,136,.18));
  border:1px solid rgba(94,234,212,.3)}
.bb-tb-body{min-width:0}
.bb-tb-top{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.bb-tb-card strong{font-size:13px;color:#fff;font-weight:700;white-space:nowrap}
/* dedicated class, never `.bb-tb-card span` -- a blanket rule would also hit
   every span inside the odometer and collapse the digit clipping boxes */
.bb-tb-card .bb-tb-cap{display:block;font-size:12px;color:#9ab0c4;line-height:1.45;margin-top:2px}

/* odometer: one column per digit, each a 0-9 strip translated to its target.
   font-size is pinned here so the strip and its clipping box are sized by the
   same value, and the box width is in rem -- `ch` would resolve against the
   inherited caption size and slice the digits in half. */
.bb-odo{display:inline-flex;align-items:baseline;gap:1px;height:1.45rem;font-size:1.2rem;line-height:1}
.bb-odo-d{position:relative;width:.8rem;height:1.45rem;overflow:hidden}
.bb-odo-s{position:absolute;top:0;left:0;transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
.bb-odo-s b{display:block;height:1.45rem;line-height:1.45rem;font-size:1.2rem;font-weight:800;
  color:#fff;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.bb-odo-sfx{font-size:.8rem;font-weight:800;color:var(--bb-accent,#eab308);margin-left:2px}
.bb-odo-sep{font-size:1.2rem;font-weight:800;color:#fff;line-height:1.45rem;letter-spacing:-.5px}
/* in-flow but invisible: gives .bb-odo-d a real baseline, without which the
   thousands comma and the suffix sat 6px below the digits */
.bb-odo-ghost{visibility:hidden;display:block;height:1.45rem;line-height:1.45rem;
  font-size:1.2rem;font-weight:800;letter-spacing:-.5px}

@media(max-width:900px){.bb-tb-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){
  .bb-tb-grid{grid-template-columns:1fr 1fr;gap:10px}
  .bb-tb-card{padding:11px 12px;gap:10px}
  .bb-tb-card i.bb-tb-i{width:30px;height:30px;font-size:12.5px;border-radius:9px}
  .bb-tb-card .bb-tb-cap{display:none}   /* must match the two-class specificity */
  .bb-tb-top{gap:6px}
  .bb-tb-card strong{font-size:12px;white-space:normal}
  .bb-odo{font-size:1.15rem;height:1.4rem}
  .bb-odo-d{width:.78rem;height:1.4rem}
  .bb-odo-s b,.bb-odo-ghost{height:1.4rem;line-height:1.4rem;font-size:1.15rem}
  .bb-odo-sep{font-size:1.15rem;line-height:1.4rem}
}
@media(prefers-reduced-motion:reduce){
  .bb-tb-sky,.bb-tb-road::after{animation:none!important}
  .bb-odo-s{transition:none!important}
}

/* ==================================================================
   MAIN FOOTER — "Aurora" (chosen from 4 mockup directions)
   Replaces the old .bb-foot-links / .bb-foot-bottom layout. A drifting
   colour-mesh gradient behind glass, one accent per column, and the
   wordmark gradient travelling through the type.

   Mobile is native <details> accordions: 5 taps instead of a 40-link
   wall. Desktop force-opens them in JS (footer.php) because <details>
   content cannot be revealed by CSS alone.

   Dropped on the owner's instruction: newsletter capture, the contact
   card, the postal address and the payment-logo strip. No footer link
   was lost -- the pipe-separated quicklinks blob is gone, its nav
   items moved into More Links and its three legal links into the
   bottom bar.
   ================================================================== */
.bb-af{position:relative;overflow:hidden;background:#0b1020!important;color:#e7edf5;padding:30px 0 0}
.bb-af-mesh{position:absolute;inset:-30% -10%;pointer-events:none;filter:blur(70px);opacity:.85;
  background:
    radial-gradient(closest-side,var(--bb-primary,#f97316),transparent) 8% 18%/46% 52% no-repeat,
    radial-gradient(closest-side,#ec4899,transparent) 42% 4%/40% 48% no-repeat,
    radial-gradient(closest-side,var(--bb-secondary,#0d9488),transparent) 72% 26%/44% 54% no-repeat,
    radial-gradient(closest-side,#6366f1,transparent) 95% 6%/38% 46% no-repeat;
  animation:bb-af-drift 18s ease-in-out infinite alternate}
@keyframes bb-af-drift{to{transform:translate3d(-4%,3%,0) scale(1.08)}}
.bb-af-in{position:relative;z-index:2}

.bb-af-head{padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.14)}
/* one row: vw-sized so the whole sentence stays on a single line from 768px up
   and simply wraps on phones */
.bb-af-wm{font-size:clamp(22px,3.35vw,42px);font-weight:900;letter-spacing:-1.1px;line-height:1.12;
  margin:0 0 10px;color:#fff}
/* only the brand half is gradient; the lead stays white */
.bb-af-wm span{background:linear-gradient(90deg,var(--bb-accent,#eab308),var(--bb-primary,#f97316) 25%,
    #ec4899 50%,#6366f1 75%,var(--bb-accent,#eab308));
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:bb-af-shift 9s linear infinite}
@keyframes bb-af-shift{to{background-position:200% 0}}
.bb-af-head p{margin:0;font-size:15px;color:#b9c6d6;line-height:1.55;max-width:none}

.bb-af-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;padding:20px 0 18px}
.bb-af-col > summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:10px;min-height:46px;position:relative;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.bb-af-col > summary::-webkit-details-marker{display:none}
.bb-af-col > summary::after{content:"";position:absolute;left:0;bottom:4px;width:26px;height:3px;
  border-radius:3px;transition:width .28s cubic-bezier(.2,.8,.2,1)}
.bb-af-col:hover > summary::after{width:100%}
.bb-af-col:nth-child(1) > summary::after{background:var(--bb-primary,#f97316)}
.bb-af-col:nth-child(2) > summary::after{background:var(--bb-secondary-light,#5eead4)}
.bb-af-col:nth-child(3) > summary::after{background:var(--bb-accent,#eab308)}
.bb-af-col:nth-child(4) > summary::after{background:#ec4899}
.bb-af-col:nth-child(5) > summary::after{background:#6366f1}
.bb-af-col .bb-af-chev{transition:transform .22s;font-size:12px;opacity:.75}
.bb-af-col[open] > summary .bb-af-chev{transform:rotate(180deg)}
.bb-af-col ul{list-style:none;margin:0;padding:0}
.bb-af-col li{margin-bottom:9px}
.bb-af-col li:last-child{margin-bottom:0}   /* nothing follows it -- dead space */
.bb-af-col a{color:#b9c6d6;font-size:13.5px;text-decoration:none;transition:.15s}
.bb-af-col a:hover{color:#fff;padding-left:3px}

.bb-af-bot{border-top:1px solid rgba(255,255,255,.14);padding:14px 0 18px;
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.bb-af-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#93a4b8;font-size:12.5px}
.bb-af-brand .bb-af-logo{color:#fff;font-weight:800;font-size:14px}
.bb-af-brand .bb-af-logo i{color:var(--bb-primary,#f97316);margin-right:5px}
.bb-af-legal{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px}
.bb-af-legal a{color:#93a4b8;text-decoration:none}
.bb-af-legal a:hover{color:#fff}
.bb-af-soc{display:flex;gap:8px}
.bb-af-soc a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;
  font-size:15px;transition:transform .18s}
.bb-af-soc a:hover{transform:translateY(-3px)}
.bb-af-soc .bb-social-wa{background:#25d366}
.bb-af-soc .bb-social-fb{background:#1877f2}
.bb-af-soc .bb-social-tw{background:#1da1f2}
.bb-af-soc .bb-social-yt{background:#ff0000}
.bb-af-soc .bb-social-ig{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888)}

@media(min-width:768px){
  .bb-af-col > summary{cursor:default;min-height:0;padding-bottom:10px}
  .bb-af-col .bb-af-chev{display:none}
}
@media(max-width:767px){
  .bb-af-cols{grid-template-columns:1fr;gap:0;padding:14px 0}
  .bb-af-col{border-bottom:1px solid rgba(255,255,255,.16);padding:2px 0}
  .bb-af-col > summary::after{display:none}
  .bb-af-col > div{padding-bottom:10px}
  .bb-af-bot{justify-content:flex-start;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .bb-af-mesh,.bb-af-wm span{animation:none!important}
}

/* ------------------------------------------------------------------
   Trust band INSIDE the Aurora footer: share one background.

   The band ships its own night scene -- sky gradient, stars, receding
   road, spotlight -- which was right when it sat on a plain page. Under
   the Aurora footer it became a second decorated dark treatment stacked
   on the first: the band's teal bottom ran straight into the aurora's
   warm orange, and the band's yellow road markings read as a stray
   dashed divider across the seam.

   So inside .bb-af the scene layers are dropped and the band keeps only
   its glass cards and kicker. The aurora mesh then flows behind the
   whole footer, band included -- one background, two zones, separated
   by a hairline instead of a colour collision.
   ------------------------------------------------------------------ */
.bb-af .bb-tb{background:none!important;padding:24px 0 20px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.bb-af .bb-tb-sky,
.bb-af .bb-tb-road,
.bb-af .bb-tb-spot{display:none!important}
/* the cards were tuned for near-black; on the mesh they need a touch more
   body so the type keeps its contrast */
.bb-af .bb-tb-card{background:linear-gradient(180deg,rgba(9,14,30,.55),rgba(9,14,30,.35));
  border-color:rgba(255,255,255,.18);backdrop-filter:blur(12px)}
.bb-af .bb-tb-card:hover{background:linear-gradient(180deg,rgba(9,14,30,.68),rgba(9,14,30,.45))}
/* the headline sits right under the band now, so it does not need its own
   top gap as well */
.bb-af .bb-tb + .container .bb-af-head,
.bb-af .bb-tb ~ .container .bb-af-head{padding-top:4px}

/* ==================================================================
   DESKTOP MEGA MENU — "Icon rail" (chosen from 3 mockup directions)

   The four .bb-mega-col columns become two panes: an icon rail on the
   left listing the groups with a count, and one panel on the right
   showing the hovered group's links. A 25-link wall becomes a choice
   of four, then a short list.

   NO PHP WAS TOUCHED. Every column, link, {{loop}} and conditional in
   header.php / seo-pages-header.php stays exactly as it was -- the rail
   is built at runtime from the existing <h6> headings (see the IIFE in
   footer.php), and the columns are simply moved into a wrapper. That
   keeps every CMS-driven mega working and makes this trivial to revert.

   Colours arrive as inline --g / --g2 / --gt from that script: four
   distinct hues per mega, and a different set per top-level item, so
   two megas opening in the same centred slot are still told apart.
   ================================================================== */
.bb-mega--4col{
  /* 288px, up from 250: at 15px the heading's text column was only 139px wide,
     which clipped even "Hyderabad Tourism" and "Ooty Tour Packages" by a few
     pixels. This buys ~38px, enough for every heading except the long hotel
     ones, and the panel still has 700px for its two columns of links. */
  grid-template-columns:288px 1fr!important;
  gap:0!important;padding:0!important;overflow:hidden;
  width:min(1000px,calc(100vw - 40px))!important;
}
.bb-mr-rail{background:linear-gradient(180deg,#f8fafc,#eef2f7);
  border-right:1px solid var(--bb-border,#e5e7eb);padding:12px}
.bb-mr-t{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;cursor:pointer;
  font-size:13.5px;font-weight:700;color:#334155;transition:background .18s,box-shadow .18s}
.bb-mr-t > i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:14px;
  color:#fff;flex:none;background:linear-gradient(135deg,var(--g),var(--g2))}
/* 15px/800, up from 13.5px/700: at the old size the rail read as a list of
   links rather than the menu's headings. The tile is 225px wide and 58px tall,
   so "Bangalore & Mysore" -- the longest of the twelve -- still sits on one
   line. The top-level nav bar is NOT enlarged with it: its six items already
   take 799px of an 822px list, leaving 23px, so a bigger label there would
   wrap or push an item off the bar. */
/* One line, ellipsis, full string on the tile's title attribute. The text
   column inside a tile is only 139px, so at 15px six of the twelve headings
   wrapped and the tiles came out 61 / 80 / 99 / 118px tall instead of a uniform
   58 -- "Andhra Pradesh Tourism (APTDC) Haritha Hotels and Resorts" ran to four
   lines and made the rail 288px against a 209px panel. Nothing is lost by
   clipping here: the panel that opens repeats the same heading in full. */
.bb-mr-t b{display:block;font-size:15px;font-weight:800;line-height:1.25;
  letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-mr-t > span{min-width:0}   /* let the ellipsis actually engage in the flex row */
.bb-mr-t small{display:block;font-weight:600;font-size:12px;color:var(--bb-text-muted,#64748b);margin-top:2px}
.bb-mr-t:hover{background:#fff}
.bb-mr-t.is-on{background:var(--gt);box-shadow:inset 3px 0 0 var(--g),0 4px 14px rgba(10,21,37,.08)}
.bb-mr-t.is-on b{color:var(--g2)}
.bb-mr-t.is-on::after{content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px;
  margin-left:auto;color:var(--g)}

.bb-mr-panels{min-width:0}
/* the existing columns become the panels -- one at a time */
.bb-mr-panels > .bb-mega-col{display:none;padding:16px 20px 18px;
  background:linear-gradient(160deg,var(--gt),#fff 62%)}
.bb-mr-panels > .bb-mega-col.is-on{display:block}
/* 13.5px, up from 11.5px, and the tracking eased from .1em to .05em -- an
   uppercase label needs less letter-spacing once it is this size, and at 11.5px
   this was the smallest text in the whole menu while being its panel heading. */
.bb-mr-panels > .bb-mega-col > h6{margin:0 0 13px!important;font-size:13.5px!important;font-weight:800!important;
  letter-spacing:.05em;text-transform:uppercase;color:var(--g2)!important;
  display:flex;align-items:center;gap:9px;border:0!important;padding:0!important}
.bb-mr-panels > .bb-mega-col > h6::after{content:"";flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--g),transparent)}
/* links: two up, no dividers, chevron in the group colour */
.bb-mr-panels > .bb-mega-col{--cols:2}
.bb-mr-panels > .bb-mega-col > a:not(.bb-mega-all){
  display:inline-flex!important;align-items:center;gap:9px;width:calc(50% - 12px);
  padding:7px 8px!important;border-radius:9px;border-bottom:0!important;font-size:13.5px}
.bb-mr-panels > .bb-mega-col > a:not(.bb-mega-all)::before{
  content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;font-size:9px;color:var(--g);flex:none}
.bb-mr-panels > .bb-mega-col > a:not(.bb-mega-all):hover{
  background:var(--gt);color:var(--g2)!important;padding-left:8px!important}
/* "View all" becomes a filled button in the group colour */
/* !important on display: the base sheet sets .bb-mega-col a{display:block}
   with !important, which stretched this button to the full panel width */
.bb-mr-panels > .bb-mega-col > .bb-mega-all{
  display:inline-block!important;margin-top:12px;padding:8px 14px!important;border-radius:10px;
  width:auto!important;
  color:#fff!important;font-weight:800!important;font-size:13px;
  background:linear-gradient(135deg,var(--g),var(--g2))}

@media(max-width:1199px){.bb-mega--4col{grid-template-columns:216px 1fr!important}}
@media(prefers-reduced-motion:reduce){.bb-mr-t{transition:none}}

/* ------------------------------------------------------------------
   Simple dropdowns (Amusement Parks, Manage Bookings): give their
   icons the same colourful tile treatment as the mega rail.

   The icons were already in the markup -- one <i> per link -- but all
   of them rendered in the same flat orange, so the dropdown looked
   plain next to the megas. Here each row's icon becomes a gradient
   tile with its own hue, and the row gets a matching hover wash.

   CSS only: no PHP, no JS. The glyphs stay exactly as the header sets
   them (four Wonderla rows legitimately share fa-water -- the colour
   is what tells them apart now).
   ------------------------------------------------------------------ */
.bb-mega--simple > a{--g:#f97316;--g2:#c2410c}
.bb-mega--simple > a:nth-child(1){--g:#f97316;--g2:#c2410c}
.bb-mega--simple > a:nth-child(2){--g:#0ea5e9;--g2:#0369a1}
.bb-mega--simple > a:nth-child(3){--g:#14b8a6;--g2:#0f766e}
.bb-mega--simple > a:nth-child(4){--g:#8b5cf6;--g2:#6d28d9}
.bb-mega--simple > a:nth-child(5){--g:#ec4899;--g2:#be185d}
.bb-mega--simple > a:nth-child(6){--g:#eab308;--g2:#a16207}

.bb-mega--simple > a{
  align-items:center!important;gap:11px!important;
  padding:9px 11px!important;border-radius:10px;border-bottom:0!important;
  transition:background .16s,color .16s}
.bb-mega--simple > a > i{
  width:30px!important;height:30px;border-radius:9px;flex:none;
  display:inline-flex!important;align-items:center;justify-content:center;
  font-size:12.5px;color:#fff!important;
  background:linear-gradient(135deg,var(--g),var(--g2));
  box-shadow:0 3px 9px rgba(10,21,37,.14)}
.bb-mega--simple > a:hover{background:var(--bb-bg-alt,#f1f5f9)}
.bb-mega--simple > a:hover > i{transform:scale(1.06)}
.bb-mega--simple > a > i{transition:transform .16s}
@media(prefers-reduced-motion:reduce){
  .bb-mega--simple > a,.bb-mega--simple > a > i{transition:none}
}
/* "Wonderla Bhubaneswar" wrapped to two lines and made its row taller than the
   rest. Let the panel size to its longest label instead of forcing the text to
   fold, with a floor so short menus (Manage Bookings) do not look pinched. */
.bb-mega--simple{width:max-content!important;min-width:236px;max-width:min(320px,calc(100vw - 40px))}
.bb-mega--simple > a{white-space:nowrap}
/* leading icon on each top-level nav item (injected in footer.php) */
.bb-nav-ic{font-size:14px;margin-right:7px;flex:none;transition:transform .16s}
.bb-nav-list > li:hover > .bb-nav-link .bb-nav-ic{transform:scale(1.12)}

/* ------------------------------------------------------------------
   Nav icons were rendering at 9px, not the 14px set for them: the base
   sheet has `.bb-nav-link i{font-size:9px;opacity:.65}` for the chevron,
   and that selector (class + type) outranks a bare `.bb-nav-ic`, so it
   caught the leading icons too -- and its opacity was dulling the
   colours. Scoped tighter here to win, and opacity back to 1.

   The bar only had 32px of slack, and going 9px -> 17px on six icons
   needs 48px, so the link padding gives some back. Verified the six
   items still sit on one row.
   ------------------------------------------------------------------ */
.bb-nav-list > li > .bb-nav-link > i.bb-nav-ic{
  font-size:15px!important;opacity:1!important;margin-right:5px}
/* the chevron stays small and quiet -- only the leading icon grows */
.bb-nav-list > li > .bb-nav-link > i.fa-chevron-down{font-size:9px;opacity:.6}

/* ------------------------------------------------------------------
   Top-level labels: 15px/700, up from 13.6px/500.

   This needs paying for. Measured at 992px BEFORE any change, the six
   items already wanted 799px against a 598px list -- they spilled past
   it on both sides and every one of the six labels was wrapping onto a
   second line. So the space comes from three places: the link padding
   9px -> 6px, the leading icon 17px -> 15px, and nowrap so a label can
   never take a second line again.

   And below 1200px the bar simply cannot hold six 15px labels on one
   row, so the drawer takes over there instead of a cramped desktop nav.
   That is not a loss: the drawer carries the same destinations, cloned
   from these very megas. Above 1200px the nav is unchanged in layout,
   only bigger and bolder.
   ------------------------------------------------------------------ */
.bb-nav-list > li > .bb-nav-link{
  font-size:15px!important;font-weight:700!important;
  padding-left:6px!important;padding-right:6px!important;
  white-space:nowrap}

/* At 15px/700 the six items need 870px. The list cannot grow to meet that on
   its own: .bb-header > .container is capped at max-width:1200px, so at 1440px
   and at 1600px alike the list measures the same 822px and the items overflow
   it by 48px, spilling 24px over the logo and the phone button. Raising the cap
   is what actually buys the room -- 1320px gives the list about 966px. */
@media(min-width:1360px){
  .bb-header > .container{max-width:1320px!important}
}

/* Between 1200 and 1359 the container stays at 1200 and 48px is still missing,
   so the leading icons stand down for that band only -- they are worth about
   120px across the six. Labels keep their size, which is what was asked for. */
@media(min-width:1200px) and (max-width:1359.98px){
  .bb-nav-list > li > .bb-nav-link > i.bb-nav-ic{display:none!important}
}

/* Below 1200 the bar cannot hold six 15px labels at all, so the drawer takes
   over. Not a loss: it carries the same destinations, cloned from these megas. */
@media(max-width:1199.98px){
  .bb-header .bb-nav-list{display:none!important}
  .bb-header .bb-hamburger{display:inline-flex!important}
}

/* ------------------------------------------------------------------
   Active tab

   The base sheet gave hover and active the SAME treatment -- both
   `color:primary; background:primary-soft` -- so the bar never told you
   which page you were on, and the current section carried no more weight
   than whatever the cursor happened to be over. They are two different
   kinds of feedback and should not look alike:

     hover   a soft wash that arrives and leaves with the cursor
     active  where you ARE: the icon lights up, the label gets heavier
             and darker, and a full-width gradient rule sits under it

   The lit icon is the site's own language for "selected" -- the mega
   rail's is-on tile and the drawer's Explore rows both use exactly this
   white-glyph-on-gradient chip.

   The underline also had to be re-cut: the base rule insets it 14px each
   side, which matched the old 9px padding but not the 6px it has now, so
   it was sitting narrower than the word it belongs to.
   ------------------------------------------------------------------ */
/* Hover and active are now the SAME state, top to bottom: same label colour and
   weight, same lit chip, same mark. Nothing about the bar changes between "the
   cursor is here" and "this is the page you are on" -- which is what was asked
   for, and it also means the six items behave identically.

   The chip box is reserved in EVERY state, lit or not. Sizing it only when lit
   would widen that item by 9px on hover and shove its neighbours along, so the
   22x22 box is always there and only its fill changes. That also fixes an
   inconsistency from the last pass: the mark's 39px left inset assumed a chip,
   so on the five unlit items it was sitting 9px right of where their label
   actually started. */
.bb-nav-list > li > .bb-nav-link > i.bb-nav-ic{
  width:20px;height:20px;border-radius:7px;flex:none;
  display:inline-flex!important;align-items:center;justify-content:center;
  font-size:12px!important;margin-right:2px;
  background:transparent;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.bb-nav-list > li:hover > .bb-nav-link,
.bb-nav-list > li > .bb-nav-link.is-active{
  background:transparent!important;
  color:var(--bb-primary-dark,#c2410c)!important;
  font-weight:800!important}
/* the chip lights up -- !important on the colour because navicons.js paints each
   glyph its own hue inline, and an inline style outranks a class otherwise */
.bb-nav-list > li:hover > .bb-nav-link > i.bb-nav-ic,
.bb-nav-list > li > .bb-nav-link.is-active > i.bb-nav-ic{
  color:#fff!important;
  background:linear-gradient(135deg,var(--bb-primary,#f97316),var(--bb-primary-dark,#c2410c));
  box-shadow:0 4px 10px rgba(194,65,12,.32)}
@media(prefers-reduced-motion:reduce){
  .bb-nav-list > li > .bb-nav-link > i.bb-nav-ic{transition:none}}
/* ONE mark, drawn identically for hover and for the active tab.

   Two things were wrong with the earlier version, both measured on the live
   active item:

   1. It was not under the label, it was under the header. The link box is 66px
      tall, the label text runs 22-41px inside it, and the bar sat at 66px --
      25px clear of the word and 3px BELOW the header's own bottom edge, hanging
      over the page. That is a strip on the header's rim, not an underline. It
      now sits at bottom:16px, which puts its top at 47px: six pixels under the
      text, inside the bar, where an underline belongs.

   2. Hover and active drew different marks -- 2px flat against 3px gradient. The
      same gesture should look the same wherever it appears, so there is a single
      rule now: hover scales it in from the centre, the active tab simply has it.
      What still separates them is the lit chip and the label's colour and
      weight, which is the right place for that difference.

   Width is the label's, not the link's: 6px padding + 22px chip + 7px chip
   margin + 4px flex gap = 39 on the left; 6px padding + 8px chevron + 4px gap =
   18 on the right for the five items carrying a mega, 6px for the one that is
   not.

   The gradient runs the brand's three hues -- orange, pink, teal -- not two
   shades of the one colour, which read as flat. It is 4px rather than 3 so the
   three actually register, and the stops are placed hard (36% / 72%) instead of
   spread evenly, so each hue holds its own stretch instead of blurring into the
   next across 110px. Ends still taper: transparent for the first and last 7%. */
/* Kill the OLD hover line. The base sheet gives every link a 2.67px
   border-bottom in transparent and then paints it in on hover:
   `.bb-nav-link:hover,.bb-nav-link.active{border-bottom-color:var(--mz-sc)
   !important}`. With the mark below that meant two lines under a hovered item,
   the old thin one and the new gradient. The colour is forced transparent in
   every state rather than the border removed, because the border still occupies
   2.67px of the link's height -- dropping it would lift the label. */
.bb-nav-list > li > .bb-nav-link,
.bb-nav-list > li:hover > .bb-nav-link,
.bb-nav-list > li > .bb-nav-link:hover,
.bb-nav-list > li > .bb-nav-link.is-active,
.bb-nav-list > li > .bb-nav-link.active{border-bottom-color:transparent!important}

.bb-nav-list > li > .bb-nav-link{position:relative}
.bb-nav-list > li > .bb-nav-link::after{
  content:""!important;position:absolute!important;
  left:39px!important;right:6px!important;bottom:15px!important;
  height:4px!important;border-radius:4px!important;
  background:linear-gradient(90deg,
             transparent 0,
             var(--bb-primary,#f97316) 7%,
             var(--bb-primary,#f97316) 36%,
             #ec4899 54%,
             var(--bb-secondary,#0d9488) 72%,
             var(--bb-secondary,#0d9488) 93%,
             transparent 100%)!important;
  box-shadow:0 2px 7px rgba(236,72,153,.28);
  opacity:1!important;
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .26s cubic-bezier(.32,.72,0,1)}
.bb-nav-list > li.bb-has-mega > .bb-nav-link::after{right:18px!important}
/* hover and active are the same mark */
.bb-nav-list > li:hover > .bb-nav-link::after,
.bb-nav-list > li > .bb-nav-link.is-active::after{transform:scaleX(1)}
/* no chip in the 1200-1359 band, so the label starts at the padding edge */
@media(min-width:1200px) and (max-width:1359.98px){
  .bb-nav-list > li > .bb-nav-link::after{left:6px!important}
}
@media(prefers-reduced-motion:reduce){
  .bb-nav-list > li > .bb-nav-link::after{transition:none}}

/* In the 1200-1359 band the leading icons are hidden to buy width, and the chip
   rule above is specific enough to survive that -- which left ONE lit chip
   floating beside five icon-less labels. That reads as a mistake rather than a
   marker, so it stands down there too; the deep colour, the heavier weight and
   the gradient rule under the label carry the active state on their own.
   This has to come after the chip rule to win, hence its own query. */
@media(min-width:1200px) and (max-width:1359.98px){
  .bb-nav-list > li > .bb-nav-link.is-active > i.bb-nav-ic{display:none!important}
}

/* the tiled icons read fine but a touch larger balances the bigger nav icons */
.bb-mr-t > i{font-size:15px!important}
.bb-mega--simple > a > i{font-size:14px!important}

/* ==================================================================
   HEADER BACKGROUND — a whisper of the footer's aurora

   Was flat white. Now three things, all deliberately faint:

   1. the same four hues the Aurora footer uses, as very low-alpha
      radial gradients over white -- so the page opens and closes on
      the same palette instead of white at the top and colour at the
      bottom;
   2. a translucent surface plus backdrop blur. The header is sticky,
      so content now frosts as it scrolls under it rather than hitting
      an opaque band;
   3. a 2px gradient hairline along the bottom in place of the flat
      shadow edge.

   The gradients are drawn as background-image, NOT a blurred pseudo-
   element: a blur would bleed past the header, and the fix for that is
   overflow:hidden, which would clip the megas -- they are children of
   this element and hang below it.
   ================================================================== */
.bb-header{
  background-color:rgba(255,255,255,.86)!important;
  /* deeper than the first pass, which read as plain white. Roughly 2.5x the
     alpha, and the layer now drifts like the footer mesh so the bar is alive
     rather than a static wash. Sized 200% wide so the drift has somewhere to go. */
  background-image:
    radial-gradient(520px 190px at 6% 0%,   rgba(249,115,22,.26), transparent 72%),
    radial-gradient(460px 180px at 30% 100%,rgba(236,72,153,.20), transparent 72%),
    radial-gradient(520px 190px at 58% 0%,  rgba(13,148,136,.24), transparent 72%),
    radial-gradient(480px 190px at 86% 100%,rgba(99,102,241,.22), transparent 72%),
    radial-gradient(420px 170px at 100% 0%, rgba(234,179,8,.18),  transparent 72%)!important;
  background-size:200% 100%!important;background-repeat:no-repeat!important;
  animation:bb-hdr-drift 26s ease-in-out infinite alternate;
  -webkit-backdrop-filter:saturate(150%) blur(12px);
          backdrop-filter:saturate(150%) blur(12px);
  position:sticky;   /* unchanged -- restated so the intent is obvious */
}
/* the bottom edge: a colour hairline instead of only a grey shadow */
@keyframes bb-hdr-drift{from{background-position:0 0}to{background-position:100% 0}}
.bb-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,
    var(--bb-primary,#f97316), #ec4899 28%, var(--bb-secondary,#0d9488) 58%, #6366f1 82%, transparent);
  opacity:.7}
/* Keep the bar's own content above the tinted surface -- and above the page.
   z-index:1 was enough to clear the header's own gradient, but it also made
   this container a stacking context sitting at level 1 in the root, which
   capped everything inside it, the open mega included. So on the tour-details
   page the sticky trip bar (.bb-tpd-pkgbar, z-index:100) painted straight over
   the menu: the mega's own z-index:105 only ever competed inside this container,
   never against the page. Same for any other page furniture above level 1.

   160, and the number is not arbitrary. It has to clear the page's own bars
   (the trip bar at 100 is the highest of them) while staying BELOW everything
   that is supposed to cover the header: .bb-drawer 201, .bb-citybar 250,
   .bb-modal 300, the fare and date sheets 1020-1060, toasts 1000, the loading
   overlay 9999. Sweeping the sheets for sticky and fixed rules, nothing at all
   sits between 101 and 200, so 160 is in clear air. 300 was the first attempt
   and it was wrong: it ties with .bb-modal.

   This alone was NOT enough, and the reason is the header itself: it carries
   backdrop-filter: saturate(1.5) blur(12px), and a backdrop-filter makes an
   element a stacking context whatever its position. On the details page
   style.css:18013 forces .bb-page-tpd .bb-header{position:static!important} to
   stop it sticking -- and a static element ignores z-index -- so that stacking
   context sat at LEVEL 0 and trapped everything inside it, this container and
   the mega included. A trip bar at 100 in the root then painted over the whole
   header no matter what number went on the container. See the rule below. */
.bb-header > .container{position:relative;z-index:160}

/* Give the header's own stacking context a real level.

   position:relative, not sticky: the details page deliberately makes the header
   non-sticky and relative keeps that -- it only supplies the level that
   backdrop-filter's stacking context otherwise takes from nowhere. Applied to
   the sticky pages too, because there the header sat at z-index:100, a dead tie
   with page bars at 100, which the later element in the document wins.

   Two pages force the header static, and both need the override: the details
   page (style.css:18013) and the booking pages (style.css:18777) -- which is
   the second half of what you reported. */
.bb-header{z-index:160!important}
.bb-page-tpd .bb-header,
.bb-page-booking .bb-header{position:relative!important}
@media(prefers-reduced-motion:reduce){.bb-header{backdrop-filter:none;animation:none}}

/* ==================================================================
   CATEGORY CARD — "Stack"   (.bb-tour-card, 4 views incl. the homepage)

   Chosen from six mockup directions. A category is a folder of packages, so
   the card is drawn as one: the sheets under it ARE the count. They are
   box-shadows, not extra elements -- the markup comes from four different
   views and none of them was touched.

   Depth buckets are the real median of the 63 live categories: 10+ / 3-9 /
   2 or fewer splits them 21 / 20 / 22. The obvious 25+ / 10-24 / under-10
   split was measured first and thrown out -- it put 42 of 63 in one bucket,
   so two thirds of the grid drew the same stack.

   --h / --h2 arrive inline from bb-cards.js, one hue per card, cycling six.
   ================================================================== */
/* transform only. The sheets are structure, not a hover effect, and having
   box-shadow in the transition list is what let a restarted transition leave
   the stack half-drawn -- the layer count differs between depths, so mid-flight
   the extra layers interpolate from transparent zero. */
.bb-tour-card{position:relative;overflow:visible!important;
  transition-property:transform!important;
  transition-duration:.28s!important;
  transition-timing-function:cubic-bezier(.32,.72,0,1)!important}
/* the sheets: a narrower rounded rect pushed below the card, once or twice */
/* !important: an earlier block in this same sheet already pins
   .bb-tour-card{box-shadow:...!important}, and without it that flat rule beats
   these more specific ones and no sheets ever draw.
   --hs1 / --hs2 are pre-blended in bb-cards.js: color-mix() was tried in this
   project and resolved on only the first element, so the tints are computed. */
.bb-tour-card[data-depth="1"]{box-shadow:0 5px 16px rgba(10,21,37,.1)!important}
.bb-tour-card[data-depth="2"]{box-shadow:0 5px 16px rgba(10,21,37,.1),
  0 17px 0 -8px var(--hs1)!important}
.bb-tour-card[data-depth="3"]{box-shadow:0 5px 16px rgba(10,21,37,.1),
  0 17px 0 -8px var(--hs1),
  0 30px 0 -18px var(--hs2)!important}
.bb-tour-card:hover{transform:translateY(-3px)}

/* the photograph keeps its size; it gains the fare and a hue wash */
.bb-tour-img{position:relative;overflow:hidden}
.bb-tour-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,transparent 46%,var(--h2));opacity:.34}

/* the fare, moved out of the foot and stamped on the photograph. Postage, not
   a circle: a circle's usable width shrinks away from its centre line, so the
   longest real fare (&#8377;1,26,820) would have had to be set half the size of
   &#8377;250. This takes its width from the text, so every fare stays one size. */
.bb-cs-tag{position:absolute;right:9px;bottom:10px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 13px 9px;border-radius:11px;line-height:1;
  transform:rotate(-2deg);
  background:linear-gradient(135deg,var(--h),var(--h2));
  box-shadow:0 10px 22px rgba(10,21,37,.32)}
.bb-cs-tag::before{content:"";position:absolute;inset:3px;border-radius:8px;
  border:1.5px dashed rgba(255,255,255,.6);pointer-events:none}
.bb-cs-tag small{display:block!important;font-size:8.5px!important;font-weight:800;
  letter-spacing:.14em!important;text-transform:uppercase;
  color:rgba(255,255,255,.82)!important;margin:0!important}
.bb-cs-tag strong{font-size:20px!important;font-weight:800;letter-spacing:-.6px;
  color:#fff!important;white-space:nowrap}
.bb-cs-tag strong i{font-size:15px!important;margin-right:1px}

/* body: the count leads, the operators follow, the CTA fills the width */
.bb-tour-name{font-size:17px!important;line-height:1.24!important;letter-spacing:-.3px}
.bb-tour-stats{display:flex!important;flex-wrap:wrap;gap:8px!important;margin-top:8px!important}
.bb-tour-stats > span{display:inline-flex!important;align-items:center;gap:6px;
  font-size:11.5px!important;font-weight:800!important;letter-spacing:.02em}
.bb-tour-stats > span:first-child{color:var(--h2)!important;background:#f6f8fb;
  padding:4px 9px;border-radius:6px}
.bb-tour-stats > span:first-child i{color:var(--h2)!important}
.bb-tour-foot{display:block!important;padding-top:10px!important}
.bb-tour-cta{display:flex!important;align-items:center;justify-content:center;gap:8px;
  width:100%;font-size:13.5px!important;font-weight:800;color:#fff!important;
  padding:12px!important;border-radius:12px;
  background:linear-gradient(135deg,var(--h),var(--h2))!important;
  box-shadow:0 8px 18px rgba(10,21,37,.2)}
@media(prefers-reduced-motion:reduce){.bb-tour-card{transition:none}
  .bb-tour-card:hover{transform:none}}

/* ==================================================================
   TYPE CARD — "Poster"   (.bb-tp-type-card, "Tour Packages By Type")

   This grid carries no price, and that is the whole reason the Ticket
   direction was wrong here: a perforated stub exists to hold a fare, so
   filling it with counts instead turned 38% of a 255px card into a colour
   slab with a white button sitting inside it, eighteen times over.

   Poster is the one direction that loses nothing without a price -- its only
   price element was the glass pill. So the photograph takes the whole tile,
   the name sits on a veil over it, and the view's own
   "91 Packages · 91 Operators" line follows on one line. Nothing is built in
   JS: the markup is the view's, lifted onto the photograph by these rules.

   Fixed height, so all eighteen tiles line up. They previously came out at
   255, 272, 305 and 338 depending on how the name wrapped, which is the other
   half of why the bottoms looked wrong.
   ================================================================== */
.bb-tp-type-card{position:relative;display:block!important;height:186px;
  border-radius:16px;overflow:hidden!important;
  box-shadow:0 5px 16px rgba(10,21,37,.12)!important;
  transition-property:transform!important;transition-duration:.3s!important;
  transition-timing-function:cubic-bezier(.32,.72,0,1)!important}
.bb-tp-type-card:hover{transform:translateY(-3px)}

/* the photograph is the tile */
.bb-tp-type-img{position:absolute!important;inset:0;height:100%!important;
  aspect-ratio:auto!important;border-radius:0;overflow:hidden}
.bb-tp-type-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.32,.72,0,1)}
.bb-tp-type-card:hover .bb-tp-type-img img{transform:scale(1.06)}
/* the veil: dark enough at the foot for white type on any photograph, with a
   bloom of the tile's own hue coming in from the corner */
.bb-tp-type-img::after{content:""!important;position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,12,24,.92) 0%,rgba(6,12,24,.34) 44%,transparent 68%),
             linear-gradient(158deg,var(--h) 0%,transparent 48%)!important;
  opacity:1!important;mix-blend-mode:normal!important}

/* the type's icon, top left, in its hue */
.bb-tp-type-ico{position:absolute!important;top:10px!important;left:10px!important;
  right:auto!important;bottom:auto!important;z-index:3;
  width:30px!important;height:30px!important;border-radius:9px!important;
  display:grid!important;place-items:center;font-size:12px!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--h),var(--h2))!important;
  box-shadow:0 6px 14px rgba(10,21,37,.3)!important}

/* name, counts and the View link, all on the veil */
.bb-tp-type-body{position:absolute!important;left:11px;right:11px;bottom:10px;z-index:3;
  padding:0!important;text-align:left!important;background:none!important}
.bb-tp-type-card h6{font-size:13.5px!important;font-weight:800!important;
  line-height:1.24!important;letter-spacing:-.2px;margin:0!important;
  color:#fff!important;text-shadow:0 2px 8px rgba(6,12,24,.6);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bb-tp-type-card small{display:block!important;margin-top:5px;
  font-size:10px!important;font-weight:800!important;letter-spacing:.05em;
  color:rgba(255,255,255,.84)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Two-up on a phone the tile is 160px wide and "91 packages · 91 operators"
   needs about 140px at this size -- measured wrapping onto a second line and
   crowding the veil. Packages is the number that matters on a browse tile, so
   the operators half waits for a wider tile. */
@media(max-width:575.98px){.bb-tw-o{display:none}}
/* a link, not a filled button: a box inside a 160px tile is what made the old
   stub feel heavy */
.bb-tw-go{display:inline-flex;align-items:center;gap:6px;margin-top:7px;
  font-size:11.5px;font-weight:800;color:#fff;
  border-bottom:2px solid rgba(255,255,255,.6);padding-bottom:1px}
.bb-tw-go i{font-size:10px;transition:transform .25s cubic-bezier(.32,.72,0,1)}
.bb-tp-type-card:hover .bb-tw-go i{transform:translateX(3px)}

@media(prefers-reduced-motion:reduce){
  .bb-tp-type-card,.bb-tp-type-img img,.bb-tw-go i{transition:none!important}
  .bb-tp-type-card:hover{transform:none}
  .bb-tp-type-card:hover .bb-tp-type-img img{transform:none}}

/* ==================================================================
   PACKAGE CARD — "Route v2"   (.bb-pkg-card, 9 views incl. 4 AJAX)

   The journey is drawn, because every one of these rows IS one and the card
   never showed it. Origin, stops and via come out of the package NAME, which
   is where this database keeps the itinerary: of 685 packages 372 carry
   "from <city>", 133 "with <stop-list>", 44 "via <cities>" -- and 377 names
   run past 60 characters, 108 past 90, the worst at 151, precisely because of
   it. bb-cards.js redistributes those clauses into the slots below and clamps
   what is left to two lines; the untouched string stays on title=.

   The photograph is left at the size it already had (208px at 390px wide) --
   it was only small in the mockup. The band is trimmed to pay for the route
   row so the card does not grow.
   ================================================================== */
.bb-pkg-card{position:relative;padding-left:6px}
.bb-pkg-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;z-index:3;
  background:linear-gradient(180deg,var(--h),var(--h2))}
/* 16/6.9, not the original 16/10: the route row and the amenity labels cost
   height, and this pays for them out of the photograph so the card lands back
   where it started (426px before, 424px after, measured at 390px). */
.bb-pkg-img{aspect-ratio:16/6.9!important;position:relative}
.bb-pkg-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,12,24,.5),transparent 58%),
             linear-gradient(120deg,var(--h2) 0%,transparent 44%);
  mix-blend-mode:multiply}
/* Duration and PID, moved onto the photograph. Top LEFT for the duration: the
   views already print .bb-pkg-vbadge ("Bus Package") at top:14px right:14px,
   and putting the duration there too overlapped it by 62px. */
.bb-cr-dur{position:absolute;top:10px;left:11px;right:auto;z-index:3;
  font-size:11px;font-weight:800;color:#0a1525;background:rgba(255,255,255,.93);
  padding:5px 10px;border-radius:999px;letter-spacing:.02em}
.bb-cr-pid{position:absolute;bottom:9px;right:11px;z-index:3;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;
  color:rgba(255,255,255,.85);letter-spacing:.08em}
.bb-pkg-meta .bb-cr-moved{display:none!important}
.bb-pkg-meta:empty,.bb-pkg-meta:not(:has(span:not(.bb-cr-moved))){display:none!important}

/* two lines, always -- measured against the 151-character worst case */
.bb-pkg-name{font-size:15.5px!important;line-height:1.3!important;letter-spacing:-.2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bb-cr-with{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:5px;font-size:11.5px;font-weight:600;line-height:1.4;
  color:var(--bb-text-muted,#64748b)}

/* The journey, drawn. The floor has to clear the "Departs / Bangalore" block,
   which is anchored to the bottom: on this site's looser line-height it came
   out 31.8px, not the 24.7px it measured in the mockup, so 30px of padding left
   the labels 1.2px off the pins. Tightened to 1.15 here and given 34px, which
   measures ~8px of daylight. */
.bb-cr-route{position:relative;margin:11px 2px 0;padding-bottom:34px}
.bb-cr-line{position:relative;height:20px}
.bb-cr-line::before{content:"";position:absolute;left:7px;right:7px;top:8px;height:0;
  border-top:2px dotted var(--h);opacity:.75}
.bb-cr-pin{position:absolute;top:2px;width:15px;height:15px;border-radius:50%;
  background:var(--h);border:3px solid #fff;box-shadow:0 0 0 2px var(--h);z-index:2}
.bb-cr-pin--a{left:0}
.bb-cr-pin--b{right:0;background:var(--h2);box-shadow:0 0 0 2px var(--h2)}
.bb-cr-stops{position:absolute;left:50%;top:-4px;transform:translateX(-50%);z-index:3;
  max-width:64%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--h2);background:#fff;padding:2px 9px;border-radius:999px;
  border:1px solid var(--bb-border,#e5e7eb)}
.bb-cr-ends{position:absolute;left:0;right:0;bottom:0;display:flex;
  justify-content:space-between;gap:10px;font-size:11.5px;font-weight:700;
  line-height:1.15;color:var(--bb-text,#334155)}
.bb-cr-ends > span{min-width:0;max-width:48%;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.bb-cr-ends > span:last-child{text-align:right}
/* only one end is known -- let it use the full width instead of being squeezed
   into 48% for a label that was never rendered */
.bb-cr-ends--one > span{max-width:100%;text-align:left!important}
.bb-cr-ends em{display:block;font-style:normal;font-size:9px;font-weight:800;
  line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8}

/* amenities become the words already sitting in their title attributes */
.bb-pkg-amen{display:flex!important;flex-wrap:wrap;gap:5px!important;margin-top:10px!important}
.bb-pkg-amen > li{width:auto!important;height:auto!important;
  display:inline-flex!important;align-items:center;gap:5px;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;
  padding:4px 8px!important;border-radius:6px!important}
.bb-pkg-amen > li i{font-size:10px!important}
.bb-cr-amlab{white-space:nowrap}
.bb-pkg-amen > li.is-bus{color:#c2410c!important;background:#fff2e8!important}
.bb-pkg-amen > li.is-hotel{color:#6d28d9!important;background:#f3eeff!important}
.bb-pkg-amen > li.is-food{color:#a16207!important;background:#fdf6e3!important}
.bb-pkg-amen > li.is-see{color:#0f766e!important;background:#e6faf7!important}
.bb-pkg-amen > li.is-guide{color:#1d4ed8!important;background:#eaf1ff!important}
.bb-pkg-amen > li.is-car{color:#be185d!important;background:#fdeef5!important}
.bb-pkg-amen > li.is-train{color:#4338ca!important;background:#eef0ff!important}
.bb-pkg-amen > li i,.bb-pkg-amen > li.is-bus i,.bb-pkg-amen > li.is-hotel i,
.bb-pkg-amen > li.is-food i,.bb-pkg-amen > li.is-see i,.bb-pkg-amen > li.is-guide i,
.bb-pkg-amen > li.is-car i,.bb-pkg-amen > li.is-train i{color:inherit!important}

/* the fare as an editorial numeral, and a real button beside it */
.bb-pkg-foot{border-top:1px solid var(--bb-border,#e5e7eb);margin-top:11px;padding-top:11px!important}
.bb-pkg-foot small{font-size:9.5px!important;letter-spacing:.08em!important;color:#94a3b8!important}
.bb-pkg-foot strong{font-size:27px!important;letter-spacing:-1.1px;
  color:var(--bb-text,#0a1525)!important;line-height:1}
.bb-pkg-foot strong i{font-size:14px!important;color:var(--h2)!important;
  vertical-align:9px;margin-right:1px}
.bb-pkg-cta{display:inline-flex!important;align-items:center;gap:7px;
  font-size:13px!important;font-weight:800;color:#fff!important;
  padding:11px 16px!important;border-radius:12px;
  background:linear-gradient(135deg,var(--h),var(--h2))!important;
  box-shadow:0 8px 16px rgba(10,21,37,.2)}

/* ==================================================================
   MOBILE DRAWER — colour, an aurora head, and the desktop megas

   The phone menu had six tiles and a flat list of top-level links, so
   Tour Packages / Hotels / City Tours were a dead end: their 76 sub
   destinations existed only on desktop. The drawer now carries the
   SAME content, cloned from the megas at runtime (see footer.php), in
   two levels of native <details>: section -> group -> links. One tap
   opens a section, one more a group, and opening one closes its
   siblings -- so a 76-link menu never arrives all at once.

   Colour is the wayfinding here: every section and every group owns a
   hue, carried through its icon tile, its wash and its rule, matching
   the desktop rail. Tap targets are >= 46px and the head is sticky so
   Close is always in reach.
   ================================================================== */
.bb-drawer{background:#fff!important}
/* aurora head, same palette as the site header and footer */
.bb-drawer .bb-drawer-head{
  position:sticky;top:0;z-index:5;
  background-color:rgba(255,255,255,.9);
  background-image:
    radial-gradient(300px 120px at 8% 0%,   rgba(249,115,22,.28), transparent 72%),
    radial-gradient(260px 110px at 52% 100%,rgba(236,72,153,.20), transparent 72%),
    radial-gradient(300px 120px at 96% 0%,  rgba(13,148,136,.24), transparent 72%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(10,21,37,.08)}

/* quick tiles: coloured glyphs become gradient tiles */
.bb-drawer-tiles a i{
  width:42px;height:42px;border-radius:13px;
  display:inline-flex!important;align-items:center;justify-content:center;
  font-size:16px!important;color:#fff!important;
  box-shadow:0 5px 14px rgba(10,21,37,.16)}
.bb-drawer-tiles a:nth-child(1) i{background:linear-gradient(135deg,#fb923c,#c2410c)}
.bb-drawer-tiles a:nth-child(2) i{background:linear-gradient(135deg,#2dd4bf,#0f766e)}
.bb-drawer-tiles a:nth-child(3) i{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}
.bb-drawer-tiles a:nth-child(4) i{background:linear-gradient(135deg,#a78bfa,#6d28d9)}
.bb-drawer-tiles a:nth-child(5) i{background:linear-gradient(135deg,#fcd34d,#b45309)}
.bb-drawer-tiles a:nth-child(6) i{background:linear-gradient(135deg,#34d399,#047857)}

/* ---- Explore: sections cloned from the desktop megas ----
   20px sides: the drawer's own gutter, the one the quick tiles (16px 20px),
   the labels and the Navigate links all sit on. Without it the section cards
   ran edge to edge and looked glued to the drawer's border. The label carries
   that gutter itself, so it gives its own back here rather than double-inset. */
.bb-dw-explore{padding:2px 20px 6px}
.bb-dw-lbl{padding-left:0!important;padding-right:0!important}
.bb-dw-sec{border:1px solid var(--bb-border,#e5e7eb);border-radius:14px;overflow:hidden;margin-bottom:9px;
  background:#fff}
.bb-dw-sec[open]{border-color:var(--g);box-shadow:0 8px 22px rgba(10,21,37,.08)}
.bb-dw-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  min-height:58px;padding:9px 13px}          /* 58px: comfortable thumb target */
.bb-dw-sum::-webkit-details-marker{display:none}
.bb-dw-sec[open] .bb-dw-sum{background:var(--gt)}
/* !important, and line-height:1 with it: Font Awesome's own sheet loads AFTER
   this one and sets .fas{display:inline-block} at the same specificity, which
   dropped the glyph to the tile's top-left corner instead of its centre. The
   quick-tile rule above needed the same guard. */
.bb-dw-ic{width:40px;height:40px;border-radius:12px;flex:none;
  display:inline-flex!important;align-items:center;justify-content:center;
  font-size:15px;line-height:1;color:#fff;
  background:linear-gradient(135deg,var(--g),var(--g2));box-shadow:0 5px 13px rgba(10,21,37,.16)}
.bb-dw-tx{flex:1;min-width:0}
.bb-dw-tx b{display:block;font-size:15px;font-weight:700;color:var(--bb-text,#1a202c);line-height:1.25}
.bb-dw-tx small{display:block;font-size:12px;color:var(--bb-text-muted,#64748b);margin-top:1px}
.bb-dw-sec[open] .bb-dw-tx b{color:var(--g2)}
.bb-dw-cv{font-size:12px;color:var(--bb-text-light,#94a3b8);transition:transform .22s;flex:none}
.bb-dw-sec[open] > .bb-dw-sum .bb-dw-cv{transform:rotate(180deg);color:var(--g)}
.bb-dw-body{padding:4px 10px 10px}

.bb-dw-grp{border-top:1px solid var(--bb-border-light,#f1f5f9)}
.bb-dw-grp:first-child{border-top:0}
.bb-dw-gsum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  min-height:46px;padding:6px 4px;font-size:13.5px;font-weight:700;color:#334155}
.bb-dw-gsum::-webkit-details-marker{display:none}
.bb-dw-dot{width:10px;height:10px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--g),var(--g2))}
.bb-dw-gsum b{flex:1;min-width:0;font-weight:700}
.bb-dw-gsum em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--g2);
  background:var(--gt);border-radius:999px;padding:2px 8px;flex:none}
.bb-dw-grp[open] > .bb-dw-gsum .bb-dw-cv{transform:rotate(180deg);color:var(--g)}
.bb-dw-links{padding:2px 0 8px 17px}
/* 42px rows read as a gappy list against 13.5px labels -- these sit inside an
   already-opened group, so the whole row is the target and 35px is still a
   comfortable thumb hit while showing a couple more destinations per screen. */
.bb-dw-links a{display:flex!important;align-items:center;gap:9px;
  min-height:32px;padding:3px 8px!important;border-radius:9px;border-bottom:0!important;
  font-size:13.5px;line-height:1.35;color:#475569!important;text-decoration:none}
/* a dotted hairline between siblings: it separates the destinations without
   the weight of a solid rule, so the rows can sit tight and still read apart */
.bb-dw-links a + a{border-top:1px dotted rgba(15,23,42,.18)!important;border-radius:0}
.bb-dw-links a::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;background:var(--g);opacity:.55}
.bb-dw-links a:active{background:var(--gt)}
.bb-dw-links a.bb-mega-all{min-height:40px;font-weight:800;color:#fff!important;justify-content:center;
  background:linear-gradient(135deg,var(--g),var(--g2));margin-top:8px;
  border-top:0!important;border-radius:9px}      /* a button, not one more row */
.bb-dw-links a.bb-mega-all::before{display:none}
.bb-dw-links--flat{padding-left:4px}

/* ---- app motion ----
   The drawer should move like an app sheet, not a page. Three things do it:
   the panel glides open on an ease-out curve rather than snapping, its rows
   cascade in a beat behind it, and every target answers the thumb on press.

   The height/padding transition is what footer.php drives -- it sets the two
   in pixels, so the curve lives here and the measuring lives there. overflow
   is clipped only while animating, so an open panel can still show a focus
   ring or a shadow that spills past its box. */
.bb-dw-body,.bb-dw-links{
  transition:height .28s cubic-bezier(.32,.72,0,1),padding .28s cubic-bezier(.32,.72,0,1)}
.bb-dw-sec.is-animating > .bb-dw-body,
.bb-dw-grp.is-animating > .bb-dw-links{overflow:hidden}

/* rows cascade in; --i is the child's index, stamped on at build time */
@keyframes bb-dw-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.bb-dw-sec[open] > .bb-dw-body > .bb-dw-grp{
  animation:bb-dw-in .34s cubic-bezier(.32,.72,0,1) both;
  animation-delay:calc(var(--i,0) * 40ms)}
.bb-dw-grp[open] > .bb-dw-links > a,
.bb-dw-sec[open] > .bb-dw-body > .bb-dw-links > a{
  animation:bb-dw-in .3s cubic-bezier(.32,.72,0,1) both;
  animation-delay:calc(var(--i,0) * 26ms)}

/* press feedback: the tile lifts a touch, the row sinks, and the flat grey
   flash Android paints over a tapped link is suppressed for our own tint */
.bb-dw-sum,.bb-dw-gsum,.bb-dw-links a{-webkit-tap-highlight-color:transparent}
.bb-dw-sum,.bb-dw-gsum{transition:background .22s ease,transform .13s ease}
.bb-dw-sum:active,.bb-dw-gsum:active{transform:scale(.985)}
.bb-dw-gsum:active{background:var(--gt)}
.bb-dw-ic{transition:transform .28s cubic-bezier(.32,.72,0,1),box-shadow .28s ease}
.bb-dw-sec[open] .bb-dw-ic{transform:scale(1.06);box-shadow:0 8px 18px rgba(10,21,37,.24)}
.bb-dw-sum:active .bb-dw-ic{transform:scale(.94)}
.bb-dw-links a{transition:background .18s ease,transform .13s ease}
.bb-dw-links a:active{transform:scale(.985)}
.bb-dw-cv{transition:transform .28s cubic-bezier(.32,.72,0,1),color .2s ease}

/* sheet manners: momentum scrolling, and the page behind must not scroll
   when the drawer's own list hits its end */
.bb-drawer{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

@media(prefers-reduced-motion:reduce){
  .bb-dw-cv,.bb-dw-ic,.bb-dw-sum,.bb-dw-gsum,.bb-dw-links a,
  .bb-dw-body,.bb-dw-links{transition:none;animation:none}
  .bb-dw-sec[open] .bb-dw-ic{transform:none}}

/* ==================================================================
   VEHICLE HIRE DROPDOWN  (.svh-vhmega)

   Replaces the .bb-mega--simple list for this one item. Three things
   were wrong with that panel, all measured at 1366px:

   1. Position. style.css:18182 right-anchors every simple panel
      (left:auto;right:0). The item sits at 518..656, the panel opened
      at 336..656 -- visually under "Tour Packages", not under its own
      label. Centred on the item here instead.
   2. Content. Five rows of "<X> Hiring in Hyderabad" with the same
      fa-shuttle-van glyph on each. Nothing told them apart except the
      tile colour, and nothing said which one to pick.
   3. Rhythm. 337px tall for six rows of plain text, one column.

   The seats / bags / per-km figures are already on the rows the
   header's Get_vehicle_hiring_for_header() returns -- no extra query.

   This deliberately drops bb-mega--simple, so none of the older simple
   rules apply and nothing else that uses them is affected.
   ================================================================== */
.bb-nav-list > li.bb-has-mega:has(> .svh-vhmega){position:relative!important}

.svh-vhmega{
  /* centred on the item; the nav is desktop-only above 1200px, where a
     620px panel centred on any of the six items stays inside the page */
  left:50%!important;right:auto!important;
  transform:translateX(-50%) translateY(8px)!important;
  width:min(620px,calc(100vw - 40px))!important;
  padding:0!important;overflow:hidden;
}
.bb-has-mega:hover > .svh-vhmega,
.bb-has-mega:focus-within > .svh-vhmega,
.svh-force > .svh-vhmega{transform:translateX(-50%) translateY(0)!important}

/* header band */
.svh-vhm-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  background:linear-gradient(135deg,#fff7ed,#f0fdfa);
  border-bottom:1px solid var(--bb-border-light,#e9edf3);
}
.svh-vhm-head-ic{
  width:38px;height:38px;border-radius:11px;flex:none;
  display:grid;place-items:center;color:#fff;font-size:15px;
  background:linear-gradient(135deg,#f97316,#c2410c);
  box-shadow:0 4px 12px rgba(194,65,12,.28);
}
.svh-vhm-head-tx{min-width:0}
.svh-vhm-head-tx b{display:block;font-size:15px;font-weight:800;color:var(--bb-text,#1a202c);line-height:1.25}
.svh-vhm-head-tx small{display:block;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--bb-text-muted,#64748b)}

/* two-up card grid */
.svh-vhm-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;padding:12px;
}
/* the odd cell is filled by the quote tile instead of stretching a vehicle */
.svh-vhmega .svh-vhm-item--ask{
  border-style:dashed!important;border-color:#cbd5e1!important;
  background:linear-gradient(135deg,#fff7ed,#f8fafc)!important;
}
.svh-vhmega .svh-vhm-item--ask:hover{border-style:solid!important;border-color:#f97316!important}
.svh-vhmega .svh-vhm-item--ask .svh-vhm-ic{background:linear-gradient(135deg,#f97316,#c2410c)}
.svh-vhmega .svh-vhm-item--ask:hover .svh-vhm-tx b{color:#c2410c}

.svh-vhm-item{
  --g:#f97316;--g2:#c2410c;
  display:flex!important;align-items:center;gap:10px;
  padding:9px 10px;border-radius:12px;
  border:1px solid transparent!important;
  background:#fff;
  transition:background .16s,border-color .16s,transform .16s;
}
.svh-vhm-item--1{--g:#f97316;--g2:#c2410c}
.svh-vhm-item--2{--g:#0ea5e9;--g2:#0369a1}
.svh-vhm-item--3{--g:#14b8a6;--g2:#0f766e}
.svh-vhm-item--4{--g:#8b5cf6;--g2:#6d28d9}
.svh-vhm-item--5{--g:#ec4899;--g2:#be185d}

.svh-vhm-ic{
  width:36px;height:36px;border-radius:10px;flex:none;
  display:grid;place-items:center;color:#fff!important;font-size:14px;
  background:linear-gradient(135deg,var(--g),var(--g2));
  box-shadow:0 3px 10px rgba(10,21,37,.16);
  transition:transform .16s;
}
.svh-vhm-ic i{color:#fff!important;width:auto!important;font-size:14px!important;opacity:1!important}
.svh-vhm-tx{min-width:0;flex:1}
.svh-vhm-tx b{
  display:block;font-size:13.5px;font-weight:800;line-height:1.25;
  color:var(--bb-text,#1a202c);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.svh-vhm-tx small{display:block;margin-top:1px;font-size:11px;font-weight:600;color:var(--bb-text-muted,#64748b)}
.svh-vhm-rate{
  flex:none;font-size:13.5px;font-weight:800;color:var(--g2);
  padding:4px 8px;border-radius:8px;background:rgba(15,23,42,.04);
  line-height:1.1;white-space:nowrap;
}
.svh-vhm-rate i{font-style:normal;font-size:10px;font-weight:700;opacity:.7}

.svh-vhm-item:hover{
  background:linear-gradient(135deg,rgba(255,255,255,0),rgba(255,255,255,0)),#fff;
  border-color:var(--g)!important;
  transform:translateY(-1px);
}
.svh-vhm-item:hover .svh-vhm-ic{transform:scale(1.06)}
.svh-vhm-item:hover .svh-vhm-tx b{color:var(--g2)}

/* footer row */
.svh-vhm-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;
  background:var(--bb-bg-alt,#f8fafc);
  border-top:1px solid var(--bb-border-light,#e9edf3);
}
/* .bb-mega-all forces the primary colour with !important in style.css:317 */
.svh-vhm-foot > .svh-vhm-btn{
  display:inline-flex!important;align-items:center;gap:8px;
  padding:8px 14px!important;border-radius:10px;
  font-size:13px!important;font-weight:800!important;
  color:#fff!important;border:0!important;
  background:linear-gradient(135deg,#f97316,#c2410c);
  box-shadow:0 4px 12px rgba(194,65,12,.26);
  transition:filter .16s,transform .16s;
}
.svh-vhm-foot > .svh-vhm-btn:hover{filter:brightness(1.06);transform:translateY(-1px);padding-left:14px!important}
.svh-vhm-btn i{font-size:11px!important;color:#fff!important;opacity:1!important;width:auto!important}
.svh-vhm-call{
  display:inline-flex!important;align-items:center;gap:7px;
  font-size:13px;font-weight:800;color:var(--bb-text,#1a202c)!important;
  border:0!important;padding:0!important;
}
.svh-vhm-call i{color:#16a34a!important;font-size:12px!important;width:auto!important;opacity:1!important}
.svh-vhm-call:hover{color:#c2410c!important}

@media (prefers-reduced-motion:reduce){
  .svh-vhm-item,.svh-vhm-ic,.svh-vhm-btn{transition:none}
}

/* ==================================================================
   VEHICLE HIRE PURPOSE PAGES  (/vehicle-hiring/for/...)

   A CMS page per reason someone hires a vehicle. Three pieces:
     .svh-pp-*  the hub grid and the block on the landing page
     .svh-pd-*  the detail page - fleet table, FAQ accordion, related strip
   Colours rotate through the same six-hue set the mega rail uses, so a
   purpose keeps its colour wherever it appears.
   ================================================================== */
.svh-pp-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
/* auto-fit gave four 276px columns in a 1152px container, which left the
   six cards as 4 + 2 with two empty cells and a cramped line length.
   Three up is 2 clean rows and ~100px more width per card. */
@media (min-width:992px){
  .svh-pp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.svh-pp-card{
  --g:#f97316;--g2:#c2410c;--gt:#fff7ed;
  display:flex!important;flex-direction:column;
  padding:22px 20px 18px;border-radius:16px;
  background:#fff;border:1px solid var(--bb-border-light,#e9edf3);
  box-shadow:0 2px 10px rgba(10,21,37,.05);
  text-decoration:none!important;position:relative;overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.svh-pp-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--g),var(--g2))}
.svh-pp-card--1{--g:#f97316;--g2:#c2410c;--gt:#fff7ed}
.svh-pp-card--2{--g:#0ea5e9;--g2:#0369a1;--gt:#f0f9ff}
.svh-pp-card--3{--g:#14b8a6;--g2:#0f766e;--gt:#f0fdfa}
.svh-pp-card--4{--g:#8b5cf6;--g2:#6d28d9;--gt:#f5f3ff}
.svh-pp-card--5{--g:#ec4899;--g2:#be185d;--gt:#fdf2f8}
.svh-pp-card--6{--g:#eab308;--g2:#a16207;--gt:#fefce8}
.svh-pp-card:hover{transform:translateY(-3px);border-color:var(--g);
  box-shadow:0 12px 28px rgba(10,21,37,.10)}

.svh-pp-ic{
  width:52px;height:52px;border-radius:14px;margin-bottom:14px;
  display:grid;place-items:center;color:#fff;font-size:20px;
  background:linear-gradient(135deg,var(--g),var(--g2));
  box-shadow:0 6px 16px rgba(10,21,37,.18);
  transition:transform .18s;
}
.svh-pp-card:hover .svh-pp-ic{transform:scale(1.06) rotate(-3deg)}
.svh-pp-name{margin:0 0 8px;font-size:17px;font-weight:800;line-height:1.3;
  color:var(--bb-text,#1a202c)}
.svh-pp-sub{margin:0 0 16px;font-size:13.5px;line-height:1.65;
  color:var(--bb-text-muted,#64748b);flex:1}
.svh-pp-cta{display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:800;color:var(--g2)}
.svh-pp-cta i{font-size:11px;transition:transform .18s}
.svh-pp-card:hover .svh-pp-cta i{transform:translateX(3px)}

.svh-pp-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px;margin-top:28px;
}
.svh-pp-btn{display:inline-flex!important;align-items:center;gap:9px;
  text-decoration:none!important;padding:12px 22px!important}
.svh-pp-call{display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:800;color:var(--bb-text,#1a202c)!important;
  text-decoration:none!important}
.svh-pp-call i{color:#16a34a}

/* ---- detail page ---- */
.svh-pd-lede{font-size:16px;line-height:1.75;font-weight:600;
  color:var(--bb-text,#1a202c);margin:0 0 18px;
  padding-left:14px;border-left:3px solid #f97316}
.svh-pd-body h2{font-size:21px;font-weight:800;margin:26px 0 10px;
  color:var(--bb-text,#1a202c)}
.svh-pd-body h2:first-child{margin-top:0}
.svh-pd-body h3{font-size:16.5px;font-weight:800;margin:20px 0 8px;
  color:var(--bb-text,#1a202c)}
.svh-pd-body p{font-size:14.5px;line-height:1.8;color:var(--bb-text-muted,#4b5563);margin:0 0 12px}
.svh-pd-body ul,.svh-pd-body ol{margin:0 0 14px;padding-left:20px}
.svh-pd-body li{font-size:14.5px;line-height:1.8;color:var(--bb-text-muted,#4b5563);margin-bottom:6px}
.svh-pd-body a{color:#c2410c;font-weight:700;text-decoration:underline}
.svh-pd-body strong{color:var(--bb-text,#1a202c)}

.svh-pd-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.svh-pd-head-ic{width:36px;height:36px;border-radius:10px;flex:none;
  display:grid;place-items:center;color:#fff;font-size:14px;
  background:linear-gradient(135deg,#f97316,#c2410c);
  box-shadow:0 4px 12px rgba(194,65,12,.26)}
.svh-pd-head h2{margin:0;font-size:19px;font-weight:800;color:var(--bb-text,#1a202c)}

.svh-pd-fleet{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.svh-pd-fl{--g:#f97316;--g2:#c2410c;
  display:flex!important;align-items:center;gap:11px;
  padding:10px 12px;border-radius:12px;text-decoration:none!important;
  border:1px solid var(--bb-border-light,#e9edf3);background:#fff;
  transition:border-color .16s,transform .16s}
.svh-pd-fl--1{--g:#f97316;--g2:#c2410c}
.svh-pd-fl--2{--g:#0ea5e9;--g2:#0369a1}
.svh-pd-fl--3{--g:#14b8a6;--g2:#0f766e}
.svh-pd-fl--4{--g:#8b5cf6;--g2:#6d28d9}
.svh-pd-fl--5{--g:#ec4899;--g2:#be185d}
.svh-pd-fl:hover{border-color:var(--g);transform:translateY(-1px)}
.svh-pd-fl-ic{width:36px;height:36px;border-radius:10px;flex:none;
  display:grid;place-items:center;color:#fff!important;font-size:14px;
  background:linear-gradient(135deg,var(--g),var(--g2));
  box-shadow:0 3px 10px rgba(10,21,37,.16)}
.svh-pd-fl-tx{min-width:0;flex:1}
.svh-pd-fl-tx b{display:block;font-size:13.5px;font-weight:800;line-height:1.25;
  color:var(--bb-text,#1a202c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svh-pd-fl-tx small{display:block;margin-top:1px;font-size:11px;font-weight:600;
  color:var(--bb-text-muted,#64748b)}
.svh-pd-fl-rate{flex:none;font-size:13.5px;font-weight:800;color:var(--g2);
  padding:4px 8px;border-radius:8px;background:rgba(15,23,42,.04);white-space:nowrap}
.svh-pd-fl-rate i{font-style:normal;font-size:10px;font-weight:700;opacity:.7}

/* FAQ accordion. <details>/<summary> so it works with JS off and the answer
   text is in the DOM for the FAQPage markup that points at it. */
.svh-pd-faq{display:grid;gap:8px}
.svh-pd-q{border:1px solid var(--bb-border-light,#e9edf3);border-radius:12px;
  background:#fff;overflow:hidden}
.svh-pd-q > summary{
  display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:13px 15px;transition:background .16s}
.svh-pd-q > summary::-webkit-details-marker{display:none}
.svh-pd-q > summary:hover{background:var(--bb-bg-alt,#f8fafc)}
.svh-pd-q > summary > h3{margin:0;flex:1;font-size:14.5px;font-weight:700;
  line-height:1.45;color:var(--bb-text,#1a202c)}
.svh-pd-q > summary > i{flex:none;font-size:12px;color:#f97316;transition:transform .2s}
.svh-pd-q[open] > summary{background:#fff7ed}
.svh-pd-q[open] > summary > i{transform:rotate(180deg)}
.svh-pd-a{padding:0 15px 14px}
.svh-pd-a p{margin:0;font-size:14px;line-height:1.75;color:var(--bb-text-muted,#4b5563)}

.svh-pd-rel{margin-top:34px}
.svh-pd-rel > h2{font-size:19px;font-weight:800;margin:0 0 14px;color:var(--bb-text,#1a202c)}
.svh-pd-rel-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.svh-pd-rl{--g:#f97316;--g2:#c2410c;
  display:flex!important;align-items:center;gap:10px;
  padding:11px 13px;border-radius:12px;text-decoration:none!important;
  background:#fff;border:1px solid var(--bb-border-light,#e9edf3);
  transition:border-color .16s,transform .16s}
.svh-pd-rl--1{--g:#f97316;--g2:#c2410c}
.svh-pd-rl--2{--g:#0ea5e9;--g2:#0369a1}
.svh-pd-rl--3{--g:#14b8a6;--g2:#0f766e}
.svh-pd-rl--4{--g:#8b5cf6;--g2:#6d28d9}
.svh-pd-rl--5{--g:#ec4899;--g2:#be185d}
.svh-pd-rl--6{--g:#eab308;--g2:#a16207}
.svh-pd-rl:hover{border-color:var(--g);transform:translateY(-1px)}
.svh-pd-rl-ic{width:32px;height:32px;border-radius:9px;flex:none;
  display:grid;place-items:center;color:#fff!important;font-size:13px;
  background:linear-gradient(135deg,var(--g),var(--g2))}
.svh-pd-rl b{font-size:13.5px;font-weight:800;line-height:1.3;color:var(--bb-text,#1a202c)}

@media (max-width:575.98px){
  .svh-pp-card{padding:18px 16px 15px}
  .svh-pp-ic{width:46px;height:46px;font-size:18px}
  .svh-pp-name{font-size:16px}
  .svh-pd-lede{font-size:15px}
  .svh-pd-body h2{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .svh-pp-card,.svh-pp-ic,.svh-pd-fl,.svh-pd-rl,.svh-pd-q > summary > i{transition:none}
}

/* ---- purpose chips inside the Vehicle Hire dropdown ---------------- */
.svh-vhm-purp{
  padding:0 12px 12px;border-top:1px dashed var(--bb-border,#e2e8f0);margin-top:2px;padding-top:11px;
}
.svh-vhm-purp-lbl{
  display:block;margin-bottom:8px;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bb-text-muted,#64748b);
}
.svh-vhm-purp-row{display:flex;flex-wrap:wrap;gap:6px}
.svh-vhm-purp-chip{
  --g:#f97316;--g2:#c2410c;--gt:#fff7ed;
  display:inline-flex!important;align-items:center;gap:6px;
  padding:6px 11px;border-radius:999px;
  font-size:12px;font-weight:700;line-height:1.2;
  color:var(--g2)!important;background:var(--gt);
  border:1px solid transparent!important;text-decoration:none!important;
  transition:border-color .16s,transform .16s;
}
.svh-vhm-purp-chip--1{--g:#f97316;--g2:#c2410c;--gt:#fff7ed}
.svh-vhm-purp-chip--2{--g:#0ea5e9;--g2:#0369a1;--gt:#f0f9ff}
.svh-vhm-purp-chip--3{--g:#14b8a6;--g2:#0f766e;--gt:#f0fdfa}
.svh-vhm-purp-chip--4{--g:#8b5cf6;--g2:#6d28d9;--gt:#f5f3ff}
.svh-vhm-purp-chip--5{--g:#ec4899;--g2:#be185d;--gt:#fdf2f8}
.svh-vhm-purp-chip--6{--g:#eab308;--g2:#a16207;--gt:#fefce8}
.svh-vhm-purp-chip:hover{border-color:var(--g)!important;transform:translateY(-1px)}
.svh-vhm-purp-chip > i{font-size:11px!important;color:var(--g)!important;width:auto!important;opacity:1!important}
@media (prefers-reduced-motion:reduce){.svh-vhm-purp-chip{transition:none}}

/* ==================================================================
   FORM FIELDS — one label-to-input gap for the whole site

   Every form on the site put a bigger gap under its labels than the
   design needs, and the checkout put TWO spacing mechanisms on the same
   pair: .bb-tpx-field is a flex column with gap:6px (style.css:19813)
   AND .bb-tpx-label carries margin-bottom:5px (style.css:4749). They
   stack, so the measured gap was 11px before the label's own leading
   (a 12.5px label in a 19.4px line box adds ~3.4px under the glyphs) --
   about 14px of visible air between a label and the control it names.

   One mechanism, one value. --svh-lbl-gap is the single knob; the
   duplicate margins are zeroed so nothing adds to it. Applied to all
   four label vocabularies in use:
     .bb-tpx-field / .bb-tpx-label   booking, quote, package enquiry
     .bb-contact-form                contact us
     .svh-q-f                        vehicle-hire quote extras
     .form-group                     anything left on the old theme
   ================================================================== */
:root{--svh-lbl-gap:5px}

/* checkout / booking / quote / enquiry */
.bb-tpx-field{gap:var(--svh-lbl-gap)!important}
.bb-tpx-field > .bb-tpx-label,
.bb-tpx-field > label{margin-bottom:0!important}
/* a .bb-tpx-label used OUTSIDE a flex .bb-tpx-field still needs its own
   spacing - there the margin is the only mechanism, so it is set, not zeroed */
.bb-tpx-label{margin-bottom:var(--svh-lbl-gap)}

/* contact us */
.bb-contact-form label{margin-bottom:var(--svh-lbl-gap)!important}

/* the old GoTrip form groups, wherever they survive */
.form-group > label{margin-bottom:var(--svh-lbl-gap)}

/* the hint under a field belongs to that field, not to the next one */
.bb-tpx-hint{margin-top:2px}

/* ==================================================================
   TERMS & CONDITIONS TICK — moved above Proceed to Payment

   It used to sit at the foot of the left column. The columns stack on a
   phone, so the tick landed above the entire fare summary and the button
   it gates was a full card below it: the consent and the action were
   never on screen together, and a visitor who missed the tick got a
   native "please check this box" pointing somewhere off screen.

   It is now the last thing before the button, in the summary card, and
   styled as the gate it is rather than the 10.5px centred footnote the
   old slot called for.
   ================================================================== */
.bb-tpx-summary .bb-tpx-tos{
  display:flex;align-items:flex-start;gap:10px;
  margin:14px 0 10px;padding:11px 12px;
  border-radius:12px;
  background:var(--bb-bg-alt,#f8fafc);
  border:1px solid var(--bb-border-light,#e9edf3);
  font-size:12.5px;line-height:1.55;text-align:left;
  color:var(--bb-text,#1a202c);
  cursor:pointer;
}
.bb-tpx-summary .bb-tpx-tos input[type="checkbox"]{
  flex:none;width:17px;height:17px;margin:1px 0 0;
  accent-color:#f97316;cursor:pointer;
}
.bb-tpx-summary .bb-tpx-tos > span{min-width:0}
.bb-tpx-summary .bb-tpx-tos a{
  color:#c2410c!important;font-weight:700;text-decoration:underline;
}
/* the button no longer needs its own top margin - the tick above it
   supplies the gap, and 14px on top of 10px read as a stray break */
.bb-tpx-summary .bb-tpx-paynow{margin-top:0!important}

/* ==================================================================
   TRIP BAR — a 2-item meta list must stay on ONE line

   The mobile rules above were written for the 4-item trip bar (vehicle,
   date, pax, itinerary link): li:nth-child(2) and (4) are given
   flex:1 1 100% so the two LONG rows get a line each and the two short
   ones pair up. The booking page's bar has only two items - date and
   duration - so nth-child(2) matched "1 day" and pushed it onto a line
   of its own under the date, for no reason.

   Only force a full-width row when there is actually a third item after
   it. :has() is not needed - :last-child says the same thing here.
   ================================================================== */
@media (max-width:767.98px){
  .bb-tpx-tripbar-meta > li:nth-child(2):last-child{
    order:1!important;flex:0 1 auto!important;
  }
}

/* ==================================================================
   PROCEED TO PAYMENT — the button was 32px wider than its card

   style.css:4953 sizes .bb-tpx-paynow as `width:calc(100% - 32px)` with
   `margin:14px 16px 12px`: it insets ITSELF, for a card with no padding
   of its own. The markup then set width:100% inline, which wins over the
   calc but leaves the 16px side margins in place - so the button drew
   100% of the box PLUS 32px and spilled past both card edges (measured
   on the summary card at 390px: card 456px, button 456px starting 16px
   in, 16px over the right edge).

   The summary body has its own padding, so here the button is simply
   full width with no margin of its own, border-box so the 14px padding
   is inside that width rather than added to it.
   ================================================================== */
.bb-tpx-summary .bb-tpx-paynow{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
}
/* the other instance - the mobile card body - has no padding either side,
   so it keeps the inset, but border-box so padding cannot overflow it */
.bb-tpx-paynow{box-sizing:border-box}

/* ==================================================================
   BOTTOM DOCK CLEARANCE — the footer was running under the dock

   The fixed Call / WhatsApp dock is 66px tall (10px + a 46px button +
   10px, plus the safe-area inset on a notched phone). header.php
   reserves 74px of body padding for it, and the package page's own bar
   reserves 80px -- but style.css carries

       @media (max-width:991.98px){ body{ padding-bottom:64px !important } }

   and !important beat both. 64px under a 66px bar meant the last line of
   the footer address sat 2px BEHIND the dock with no gap at all.

   Reserved here instead, once, with the dock's real height plus a
   deliberate gap, and the safe-area inset added rather than assumed.
   ================================================================== */
@media (max-width:767.98px){
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
  /* the address block sat flush on the footer's own bottom edge too, so
     even with clearance the text had nothing under it */
  .bb-af-bottom{padding-bottom:18px!important}
}
/* 768-991.98px has no dock at all (.svh-dock and .bb-tpd-mobcta are both
   display:none above 767.98), so the 64px style.css reserves there is
   dead space at the foot of every tablet page. */
@media (min-width:768px) and (max-width:991.98px){
  body{padding-bottom:0!important}
}

/* ==================================================================
   CONTACT FORM — card header band

   .bb-contact-form now wears the same .bb-tpx-paxcard.bb-ucv1cqg shell
   as the booking, enquiry and quote cards, so its heading is the orange
   band with the icon badge rather than a bare <h2>.

   The shell paints the gradient and the body paints the white, so the
   card itself must not keep the 26px padding inner-pages.css gives
   .bb-contact-form - that padding would show as an orange frame all the
   way round the white body.
   ================================================================== */
.bb-contact-form.bb-ucv1cqg{padding:0!important}
.bb-contact-form.bb-ucv1cqg > .bb-tpx-paxcard-body{padding:18px 16px 20px!important}
@media (min-width:768px){
  .bb-contact-form.bb-ucv1cqg > .bb-tpx-paxcard-body{padding:22px 22px 24px!important}
}
/* the heading inside the band is the <strong>, so the old title/sub pair
   must not re-assert the dark section-title colour on it */
.bb-contact-form .bb-u1kkfjds .bb-uub6xeu{font-size:15px;font-weight:800;color:#fff}

/* ------------------------------------------------------------------
   Contact form: field-to-field rhythm, matched to the rest of the site

   Two spacing mechanisms again - the Bootstrap row is `g-3`, which puts
   16px of gutter above every column, AND .bb-contact-form-group carries
   margin-bottom:14px (inner-pages.css:332). They stack, so the gap from
   one input to the next label measured 40px at 390px, against 25px on
   the booking, quote and enquiry forms.

   The grid gutter is the mechanism that belongs to a grid, so the
   group's own margin goes and the gutter is left to do the work:
   40px -> 26px, in step with every other form.
   ------------------------------------------------------------------ */
.bb-contact-form .bb-contact-form-group{margin-bottom:0!important}

/* ------------------------------------------------------------------
   Field-to-field rhythm, second pass: tighter still, and one value for
   every form.

   After removing the duplicate margins the gap from an input to the next
   label was 26px on contact and 25px on booking / quote / enquiry.
   Still loose for a stacked phone form, so the row rhythm drops to 8px,
   which lands both at ~18px measured (the rest is the label's own
   leading, which is type, not spacing).

   row-gap only on .bb-tpx-row: its `gap` is also the COLUMN gap between
   two fields sitting side by side on desktop, and that one should stay
   at 14px.
   ------------------------------------------------------------------ */
.bb-tpx-row{row-gap:8px!important}
.bb-contact-form .row{--bs-gutter-y:8px}

/* ------------------------------------------------------------------
   reCAPTCHA widget: Google renders it at a fixed 304px, which is wider
   than the contact card's content box on a phone (301px at 390px, ~233px
   at 320px), so the badge and the "reCAPTCHA" wordmark were sliced off
   at the card edge. Scaled down from the left edge below 576px - the
   widget itself cannot be resized, only transformed.
   ------------------------------------------------------------------ */
@media (max-width:575.98px){
  .bb-contact-form #html_element{
    transform:scale(.88);transform-origin:0 0;
    height:70px;   /* 78px * .88 - a transform does not shrink the box */
  }
}
@media (max-width:359.98px){
  .bb-contact-form #html_element{transform:scale(.76);height:60px}
}

/* ==================================================================
   CONTACT CARDS — the value line is the headline, not small print

   inner-pages.css:328 styles every <span> in a .bb-static-card the
   same: 13px, muted grey. Each card holds two of them - the value
   (the phone number, the email, the area) and a one-word note
   ("Every day", "Quick replies") - so the number someone came for
   looked exactly like the footnote under it.

   The value now carries the card's weight and the brand colour; the
   note stays small and quiet. Card, icon and hover are untouched.
   ================================================================== */
.bb-static-card .bb-static-card-val{
  font-size:16px!important;
  font-weight:800!important;
  line-height:1.3!important;
  color:#c2410c!important;
  letter-spacing:-.1px;
  margin:2px 0 4px;
  /* a long value must wrap inside the card, never widen it */
  min-width:0;overflow-wrap:anywhere;
}
/* the note under it is deliberately the quieter of the two */
.bb-static-card .bb-static-card-val + span{
  font-size:12px!important;color:var(--bb-text-muted,#64748b)!important;
}
/* the email is 27 characters - at 16px it broke mid-word across three
   lines and made that card taller than the other three */
.bb-static-card .bb-static-card-val--mail{font-size:13.5px!important;letter-spacing:-.2px}
.bb-static-card .bb-static-card-val--addr{font-size:14.5px!important}

@media (max-width:575.98px){
  .bb-static-card .bb-static-card-val{font-size:15px!important}
  .bb-static-card .bb-static-card-val--mail{font-size:12.5px!important}
  .bb-static-card .bb-static-card-val--addr{font-size:13.5px!important}
}