/* ============================================================
   CI-specific overrides for converted (Bootstrap 5.3 / my-hz) pages.
   Loaded after style.css + inner-pages.css on $mhz_v2 pages.
   Place CI3-only tweaks here so the design source CSS stays untouched.
============================================================ */

/* Bus-hire quote form: the CI3 form internals are kept verbatim (AJAX getajaxtrip
   swaps #bushireformdiv), so its raw native <select>s (#title time pickers etc.)
   can't take the DNA markup — skin them via CSS to match the DNA input look. */
#bushireformdiv select,.bb-bhr-hero select{
  height:44px;padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:10px;
  background:#fff;color:#0f172a;font-size:14px;font-weight:600;outline:none;
}
#bushireformdiv select:focus,.bb-bhr-hero select:focus{border-color:#f97316;box-shadow:0 0 0 4px rgba(249,115,22,.12);}

/* Hotel-detail tabs (About Hotel / Room Types / Amenities / Hotel Policy) — the
   .nav-tabs.bdrtour has an extra .tt2 wrapper <div> inside the <ul>; its horizontal
   layout lived in the old custom.css (not loaded here) so the tabs stacked vertically.
   Force the wrapper + list items back into a horizontal scroll strip. */
.nav-tabs.bdrtour{flex-wrap:nowrap!important;overflow-x:auto!important;border-bottom:1px solid #e5e7eb;}
.nav-tabs.bdrtour .tt2,.nav-tabs.bdrtour>li{display:flex!important;flex-wrap:nowrap!important;width:auto;}
.nav-tabs.bdrtour .nav-item{flex:0 0 auto;list-style:none;}
.nav-tabs.bdrtour .nav-link{white-space:nowrap;}

/* Footer payment icons — constrain size (were rendering at natural/full size) */
.bb-foot-pay{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:0;
  margin:14px 0 4px;
}
.bb-foot-pay li{ margin:0; }
.bb-foot-pay img{
  height:28px;
  width:auto;
  background:#fff;
  border-radius:5px;
  padding:3px 7px;
  display:block;
  object-fit:contain;
}
@media (max-width:575.98px){
  .bb-foot-pay{ justify-content:center; }
  .bb-foot-pay img{ height:24px; }
}

/* ================================================================
   tour-packages/booking — my-hz skin for the CI3 booking core.
   Pure CSS overlay scoped to .bb-tbr-corecol (+ booking modal ids).
   No markup/JS is touched, so every date option, tab, popup and
   AJAX-injected panel behaves EXACTLY as the old design — only the
   look is brought in line with the my-hz design tokens.
   ================================================================ */

/* ---- date-selector strip ---- */
.bb-tbr-corecol .mbtp{
  background:var(--bb-card,#fff)!important;
  border:1px solid var(--bb-border-light,#f1f5f9);
  border-radius:var(--bb-radius,12px);
  box-shadow:var(--bb-shadow-md,0 8px 22px rgba(10,21,37,.10));
  padding:14px 12px;margin-bottom:18px!important;
}
.bb-tbr-corecol .mbtp .bg-light{background:transparent!important;}
.bb-tbr-corecol .green{
  color:var(--bb-dark,#0a1525);font-weight:800;font-size:14px;
  font-family:'Plus Jakarta Sans',sans-serif;display:inline-block;margin-bottom:10px;
}
.bb-tbr-corecol .datenav .overflowdiv,.bb-tbr-corecol .overflowdiv#date_nav{
  display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:4px 2px;scrollbar-width:thin;
}
.bb-tbr-corecol .layout64{
  flex:0 0 auto;border:1.5px solid var(--bb-border,#e5e7eb)!important;
  border-radius:var(--bb-radius-sm,8px)!important;padding:7px 12px!important;margin:0!important;
  background:#fff!important;color:var(--bb-dark,#0a1525)!important;font-weight:700;font-size:12px;
  line-height:1.25;white-space:nowrap;box-shadow:none!important;transition:.15s;
}
.bb-tbr-corecol .layout64:hover{border-color:var(--bb-primary,#f97316)!important;color:var(--bb-primary,#f97316)!important;}
.bb-tbr-corecol .layout64.active{background:var(--bb-primary,#f97316)!important;color:#fff!important;border-color:var(--bb-primary,#f97316)!important;}
/* DNA date pills (bb-tbr-date): CI3 addclassdate() toggles .active (not the DNA's .is-active) — paint both the same */
.bb-tbr-date.active{background:var(--bb-primary,#f97316);border-color:var(--bb-primary,#f97316);}
.bb-tbr-date.active strong,.bb-tbr-date.active small{color:#fff;}
.bb-tbr-corecol .bdrtpl1.bdrtpr1{align-items:center;}
.bb-tbr-corecol .arrows{
  display:flex!important;align-items:center;justify-content:center;height:40px!important;
  background:var(--bb-bg-alt,#f1f5f9);border-radius:var(--bb-radius-sm,8px);color:var(--bb-primary,#f97316)!important;border:0!important;
}

/* ---- hide the duplicate old stepper (bb-tbr-steps at top already shows progress) ---- */
.bb-tbr-corecol .stepwizard{display:none!important;}

/* ---- transportation tabs (Bus Transportation / Entry Tickets) ---- */
.bb-tbr-corecol .nav-pills.outstation{gap:10px;justify-content:center;margin:2px 0 16px;border:0;}
.bb-tbr-corecol .nav-pills.outstation .nav-link{
  border:1.5px solid var(--bb-border,#e5e7eb)!important;border-radius:var(--bb-radius-pill,999px)!important;
  color:var(--bb-dark,#0a1525)!important;font-weight:700;padding:8px 20px!important;background:#fff!important;
}
.bb-tbr-corecol .nav-pills.outstation .nav-link.active{background:var(--bb-primary,#f97316)!important;border-color:var(--bb-primary,#f97316)!important;color:#fff!important;}

/* ---- empty state — "Oops! No Buses found" ---- */
.bb-tbr-corecol .tour-search23{
  display:inline-block;color:var(--bb-danger,#ef4444)!important;font-weight:800;font-size:18px;
  font-family:'Plus Jakarta Sans',sans-serif;animation:none!important;
}
.bb-tbr-corecol .successeffect{max-width:110px;height:auto;margin:6px auto;display:block;opacity:.95;}

/* ---- "Change Date" + core action buttons -> my-hz primary pill ---- */
.bb-tbr-corecol a[onclick*="journeydatemodel"]{
  background:var(--bb-primary,#f97316)!important;border:0!important;color:#fff!important;
  border-radius:var(--bb-radius-pill,999px)!important;font-weight:700;padding:9px 22px!important;display:inline-block;
}
.bb-tbr-corecol a[onclick*="journeydatemodel"]:hover{background:var(--bb-primary-dark,#c2410c)!important;}

/* ---- booking modals (journey-date / seat-layout / vehicle / advance-payment) ---- */
#select-busseats .modal-content,#select-bus-direct-agent .modal-content,#advance_payment .modal-content{
  border:0!important;border-radius:var(--bb-radius-lg,16px)!important;
  box-shadow:var(--bb-shadow-lg,0 16px 36px rgba(10,21,37,.14));
}
/* journey-date modal (#myJDModal): a Bootstrap-4 modal opened via $().modal('show')
   inside the now-BS5 page. Diagnosed live: (a) BS5 leaves .modal-dialog stuck at the
   entering transform translateY(-50px) → dialog sits off-screen (top:-22); (b) the inline
   Zebra calendar renders position:absolute → its #container_date collapses to height:0.
   Fix both: reset the dialog transform + center it, and force the calendar back in-flow. */
#myJDModal.show .modal-dialog,#myJDModal .modal-dialog,
#myJDModal1.show .modal-dialog,#myJDModal1 .modal-dialog{
  transform:none!important;margin:34px auto!important;max-width:540px!important;
}
#myJDModal .modal-content,#myJDModal .modal-content.layout22,
#myJDModal1 .modal-content,#myJDModal1 .modal-content.layout22{
  border:0!important;border-radius:var(--bb-radius-lg,16px)!important;
  box-shadow:var(--bb-shadow-lg,0 16px 36px rgba(10,21,37,.14));
  height:auto!important;max-height:none!important;overflow:visible!important;
}
#myJDModal .Zebra_DatePicker,
#myJDModal1 .Zebra_DatePicker{
  position:relative!important;width:100%!important;left:auto!important;top:auto!important;margin:0 auto!important;
}
#myJDModal #cincouttext,
#myJDModal1 #cincouttext{color:var(--bb-dark,#0a1525)!important;font-weight:800!important;}
/* full Zebra calendar my-hz theme — #container_date (2 ids) beats the CI3 inline #004F9E !important rules */
#myJDModal #container_date .Zebra_DatePicker,
#myJDModal1 #container_date .Zebra_DatePicker,
#myJDModal1 #container_date1 .Zebra_DatePicker{border:0!important;box-shadow:none!important;background:#fff!important;font-family:'Plus Jakarta Sans',sans-serif;padding:0!important;}
#myJDModal #container_date .Zebra_DatePicker table,
#myJDModal1 #container_date .Zebra_DatePicker table,
#myJDModal1 #container_date1 .Zebra_DatePicker table{width:100%!important;table-layout:fixed;border-collapse:separate;border-spacing:3px;}
/* month nav: circular ghost buttons; caption is tappable (Zebra opens the month/year view) */
#myJDModal #container_date .Zebra_DatePicker .dp_header,
#myJDModal1 #container_date .Zebra_DatePicker .dp_header,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_header{background:#fff!important;padding:2px 0 6px!important;}
#myJDModal #container_date .Zebra_DatePicker .dp_header td,
#myJDModal1 #container_date .Zebra_DatePicker .dp_header td,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_header td{background:#fff!important;border:0!important;padding:4px 0!important;}
#myJDModal #container_date .Zebra_DatePicker .dp_header .dp_caption,
#myJDModal1 #container_date .Zebra_DatePicker .dp_header .dp_caption,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_header .dp_caption{color:var(--bb-dark,#0a1525)!important;font-weight:800!important;font-size:16px!important;cursor:pointer;}
#myJDModal #container_date .Zebra_DatePicker .dp_header .dp_previous,
#myJDModal #container_date .Zebra_DatePicker .dp_header .dp_next,
#myJDModal1 #container_date .Zebra_DatePicker .dp_header .dp_next,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_header .dp_next{width:44px!important;color:transparent!important;font-size:0!important;background:#fff!important;position:relative;cursor:pointer;}
#myJDModal #container_date .Zebra_DatePicker .dp_header .dp_previous::after,
#myJDModal #container_date .Zebra_DatePicker .dp_header .dp_next::after,
#myJDModal1 #container_date .Zebra_DatePicker .dp_header .dp_next::after,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_header .dp_next::after{content:"";display:inline-block;width:36px;height:36px;border-radius:50%;border:1px solid #ffe2cc;background-color:var(--bb-primary-soft,#fff7ed);background-repeat:no-repeat;background-position:center;background-size:9px 14px;}
#myJDModal #container_date .Zebra_DatePicker .dp_header .dp_previous::after,
#myJDModal1 #container_date .Zebra_DatePicker .dp_header .dp_previous::after,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_header .dp_previous::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M8 1L2 7l6 6' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
#myJDModal #container_date .Zebra_DatePicker .dp_header .dp_next::after,
#myJDModal1 #container_date .Zebra_DatePicker .dp_header .dp_next::after,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_header .dp_next::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
#myJDModal #container_date .Zebra_DatePicker .dp_header .dp_previous:active::after,
#myJDModal #container_date .Zebra_DatePicker .dp_header .dp_next:active::after,
#myJDModal1 #container_date .Zebra_DatePicker .dp_header .dp_next:active::after,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_header .dp_next:active::after{background-color:#ffedd5;}
/* weekday strip: quiet label row, not a solid orange bar */
#myJDModal #container_date .Zebra_DatePicker .dp_body th,
#myJDModal1 #container_date .Zebra_DatePicker .dp_body th,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_body th{background:#fff!important;color:#8b95a5!important;font-size:11px!important;font-weight:700!important;letter-spacing:.6px;text-transform:uppercase;padding:6px 0 2px!important;border:0!important;}
/* Day cells. The semantics were inverted: bookable days carried a grey fill
   (reads as "disabled") while unavailable days were plain. Bookable is now a
   white chip with an availability dot; unavailable is flat and muted.
   NB: table cells ignore aspect-ratio, so the 44px tap target is a hard height. */
#myJDModal #container_date .Zebra_DatePicker .dp_daypicker td,
#myJDModal1 #container_date .Zebra_DatePicker .dp_daypicker td,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_daypicker td{height:46px!important;padding:0!important;border:0!important;border-radius:11px!important;font-size:14px;font-weight:600;color:var(--bb-dark,#0a1525)!important;background:#fff!important;box-shadow:inset 0 0 0 1px #edf0f4;text-align:center;vertical-align:middle;position:relative;cursor:pointer;transition:transform .12s,box-shadow .12s;}
#myJDModal #container_date .Zebra_DatePicker .dp_daypicker td:not(.dp_disabled):active,
#myJDModal1 #container_date .Zebra_DatePicker .dp_daypicker td:not(.dp_disabled):active,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_daypicker td:not(.dp_disabled):active{transform:scale(.94);}
#myJDModal #container_date .Zebra_DatePicker .dp_daypicker td.dp_weekend:not(.dp_disabled),
#myJDModal1 #container_date .Zebra_DatePicker .dp_daypicker td.dp_weekend:not(.dp_disabled),
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_daypicker td.dp_weekend:not(.dp_disabled){color:#e11d48!important;}
#myJDModal #container_date .Zebra_DatePicker .dp_body td.dp_hover,
#myJDModal1 #container_date .Zebra_DatePicker .dp_body td.dp_hover,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_body td.dp_hover{background:var(--bb-primary-soft,#fff7ed)!important;color:var(--bb-primary,#f97316)!important;box-shadow:inset 0 0 0 1px #fdba74!important;}
#myJDModal #container_date .Zebra_DatePicker .dp_body td.dp_selected,
#myJDModal1 #container_date .Zebra_DatePicker .dp_body td.dp_selected,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_body td.dp_selected{background:var(--bb-primary,#f97316)!important;color:#fff!important;font-weight:800!important;box-shadow:0 6px 16px rgba(249,115,22,.36)!important;}
#myJDModal #container_date .Zebra_DatePicker .dp_body td.dp_current,
#myJDModal1 #container_date .Zebra_DatePicker .dp_body td.dp_current,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_body td.dp_current{box-shadow:inset 0 0 0 2px var(--bb-primary,#f97316)!important;color:var(--bb-primary,#f97316)!important;font-weight:800!important;}
#myJDModal #container_date .Zebra_DatePicker .dp_body td.dp_disabled,
#myJDModal #container_date .Zebra_DatePicker .dp_body td.dp_not_in_month,
#myJDModal1 #container_date .Zebra_DatePicker .dp_body td.dp_disabled,
#myJDModal1 #container_date .Zebra_DatePicker .dp_body td.dp_not_in_month,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_body td.dp_disabled,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_body td.dp_not_in_month{color:#c8d0da!important;background:transparent!important;box-shadow:none!important;cursor:default;}
#myJDModal #container_date .Zebra_DatePicker .dp_body td.dp_disabled::after,
#myJDModal1 #container_date .Zebra_DatePicker .dp_body td.dp_disabled::after,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_body td.dp_disabled::after{display:none!important;}
/* month / year quick-jump views inherit the same chip language */
#myJDModal #container_date .Zebra_DatePicker .dp_monthpicker td,
#myJDModal #container_date .Zebra_DatePicker .dp_yearpicker td,
#myJDModal1 #container_date .Zebra_DatePicker .dp_yearpicker td,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_yearpicker td{padding:12px 0!important;border:0!important;border-radius:11px!important;background:#fff!important;box-shadow:inset 0 0 0 1px #edf0f4;font-weight:600;font-size:13px;color:var(--bb-dark,#0a1525)!important;}
#myJDModal #container_date .Zebra_DatePicker .dp_footer td,
#myJDModal1 #container_date .Zebra_DatePicker .dp_footer td,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_footer td{border:0!important;background:#fff!important;color:#8b95a5!important;font-size:12.5px;padding:8px 0!important;}
.modal-header.bestb11{background:var(--bb-dark,#0a1525)!important;border:0!important;}
.modal-header.bestb11 .modal-title{color:#fff!important;}

/* ---- shared booking-core elements across ALL booking pages ----
   booking + entry sit inside .bb-tbr-corecol (styled above); car + irctc reuse the
   same .datenav/.layout64/.stepwizard/.outstation classes OUTSIDE it (car carries an
   inline old-blue #004F9E active). These higher-specificity globals bring every
   booking page's date-strip / stepper / tabs in line with the my-hz design.
   All 4 booking pages carry the styled top bb-tbr-steps wizard, so hiding the
   duplicate old .stepwizard is safe. (datenav/layout64/stepwizard/outstation are
   booking-only classes — verified absent from listing/details/home views.) */
.datenav a.layout64, .datenav .layout64{
  border:1.5px solid var(--bb-border,#e5e7eb)!important;border-radius:var(--bb-radius-sm,8px)!important;
  font-weight:700;color:var(--bb-dark,#0a1525);box-shadow:none!important;
}
.datenav a.layout64.active, .datenav .layout64.active, .datenav a.active{
  background:var(--bb-primary,#f97316)!important;color:#fff!important;border-color:var(--bb-primary,#f97316)!important;
}
.stepwizard{display:none!important;}
.nav-pills.outstation .nav-link.active{
  background:var(--bb-primary,#f97316)!important;border-color:var(--bb-primary,#f97316)!important;color:#fff!important;
}

/* ================================================================
   tour-packages/booking — LAYOUT FIX (my-hz two-column booking).
   The CI3 core (#content) opened a wrapper <div> that was never closed
   in the source; the view now closes it so .bb-tbr-corecol (col-lg-8)
   balances and .bb-tbr-summary (col-lg-4) sits beside it (sticky right).
   The rules below finish the job in CSS only — no markup/JS touched.
   ================================================================ */

/* ---- slide-up drawer panels (#accordion1 = boarding/dropping/cancellation,
   #accordionab = itinerary/inclusions/exclusions/terms). These are the CI3
   ".seat5" fixed-bottom drawers whose positioning/hiding lived in the OLD
   custom.css (not loaded on my-hz pages) — so they were rendering in-flow at
   the bottom, overlapping the footer and reserving a tall empty gap.
   Restore the intended behaviour: hidden by default + fixed overlay when open.
   The toggles are jQuery slideToggle()/.show() which write an inline
   display:block when opening, so they override display:none here and still work
   EXACTLY as before — only the resting (closed) state is corrected. ---- */
#accordion1.seat5,#accordionab.seat5,
.bb-tbr-corecol #accordion1,.bb-tbr-corecol #accordionab{
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;max-width:820px!important;margin:0 auto!important;
  max-height:88vh!important;overflow-y:auto!important;
  z-index:1055!important;background:var(--bb-card,#fff)!important;
  border-top-left-radius:var(--bb-radius-lg,16px)!important;
  border-top-right-radius:var(--bb-radius-lg,16px)!important;
  box-shadow:var(--bb-shadow-lg,0 -16px 36px rgba(10,21,37,.18))!important;
  display:none;   /* jQuery slideToggle/.show writes inline display when opened → overrides this */
  height:auto!important;
}
/* the dark page dim behind an open drawer (JS toggles inline display:none/block) */
.bb-tbr-corecol #shadowbg{z-index:1050!important;}
/* the drawer "collapse arrow" bars sit inside the fixed panel */
.bb-tbr-corecol #top_bar,.bb-tbr-corecol #top_bar1{margin-top:0!important;}
.bb-tbr-corecol #chatboxx.seat7,.bb-tbr-corecol .scrollpackages{max-height:70vh!important;overflow-y:auto!important;}
/* Boarding/Dropping/Itinerary drawer CONTENT fix — verified live:
   the inner BS4 .panel-collapse (#chatboxx) was stuck at height:0 in the BS5 page, so the
   drawer opened but showed only its tabs (no boarding/dropping/cancellation/itinerary list).
   Force the collapse + its active tab-pane to natural height so the loaded content shows
   (the drawer itself keeps its max-height + scroll from the rule above). */
#accordion1 .panel-collapse,#accordion1 #chatboxx,
#accordionab .panel-collapse,#accordionab [id^="chatboxx"]{
  height:auto!important;max-height:none!important;display:block!important;overflow:visible!important;
}
#accordion1 .tab-content,#accordion1 .tab-pane.active,
#accordionab .tab-content,#accordionab .tab-pane.active{height:auto!important;display:block!important;}
/* drawer tab bar (Boarding/Dropping/Cancellation · Itinerary/Inclusions/…) → my-hz:
   underlined orange active tab instead of Bootstrap's blue-link nav-tabs. */
#accordion1 .nav-tabs,#accordionab .nav-tabs{border-bottom:1px solid var(--bb-border,#e5e7eb)!important;margin-bottom:6px!important;}
#accordion1 .nav-tabs .nav-link,#accordionab .nav-tabs .nav-link{
  color:var(--bb-dark,#0a1525)!important;font-weight:700!important;border:0!important;
  border-bottom:2.5px solid transparent!important;background:transparent!important;border-radius:0!important;padding:10px 14px!important;
}
#accordion1 .nav-tabs .nav-link.active,#accordionab .nav-tabs .nav-link.active{
  color:var(--bb-primary,#f97316)!important;border-bottom-color:var(--bb-primary,#f97316)!important;background:transparent!important;
}
/* ---- Inline boarding/dropping/itinerary panels (design DNA) --------------------
   bb-inline-panels.js relocates the CI3 drawer (#accordion1 / #accordionab) to render
   INLINE under the clicked vehicle card. These rules un-fix it into a clean card panel
   and hide the now-redundant drawer chrome (package title #more_abt + the Boarding/
   Dropping/Cancellation tab bar — the card's own toggles switch those). The itinerary
   drawer keeps its Itinerary/Inclusions/Exclusions/Terms sub-tabs (still functional). */
#accordion1.bb-tbr-inlinepanel,#accordionab.bb-tbr-inlinepanel{
  position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;width:auto!important;max-width:100%!important;height:auto!important;
  /* no max-height: the DNA panel expands in place. A 60vh cap put a nested
     scrollbar inside the card, which the boarding/dropping list never has. */
  max-height:none!important;
  /* DNA .bb-tbr-vcard-panels.is-open: tinted --bb-bg panel, light border,
     2px under the toggles -- it now lives inside .bb-tbr-vcard-body */
  margin:2px 0 0!important;padding:14px 16px!important;overflow-y:visible!important;z-index:auto!important;
  display:block!important;background:var(--bb-bg,#f7f9fc)!important;border:1px solid var(--bb-border-light,#f1f5f9)!important;
  border-radius:var(--bb-radius,12px)!important;box-shadow:none!important;
}
#accordion1.bb-tbr-inlinepanel .nav-tabs,
#accordion1.bb-tbr-inlinepanel #more_abt,#accordionab.bb-tbr-inlinepanel #more_abt{display:none!important;}
.bb-tbr-vcard .bb-inline-tog-active{background:var(--bb-primary,#f97316)!important;border-color:var(--bb-primary,#f97316)!important;}
.bb-tbr-vcard .bb-inline-tog-active,.bb-tbr-vcard .bb-inline-tog-active *{color:#fff!important;}
/* NOTE: #shadowbg is NOT globally hidden — passenger-details uses it for its mobile
   panels. On the booking page bb-inline-panels.js hides it after each panel click. */
/* Book Now passenger modal: dialog is taller than the viewport; with
   .modal-dialog-centered (flex center) the overflowing TOP was cut off and
   unreachable. Top-align it — the .modal itself scrolls (BS5 overflow-y:auto). */
#select-bus-direct-agent .modal-dialog-centered{align-items:flex-start!important;}
/* …and its navy summary header was display:grid, which strangled the .modal-title
   (Bootstrap .col-10 is inert inside a grid) down to ~30px so every WORD wrapped to
   its own line. Make it a flex row: title takes the space (its inner .layout1 divs
   already stack bus / type / date / package), close button pinned top-right. */
#select-bus-direct-agent .bb-tbr-modal-vsum{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:16px 18px!important;}
#select-bus-direct-agent .bb-tbr-modal-vsum .modal-title{flex:1 1 auto!important;width:auto!important;max-width:none!important;min-width:0!important;}
/* ---- Book Now modal design pass (verified in real Chrome) --------------------
   1) Passenger row rendered ZIGZAG: an EMPTY col-sm-12 (agent-only slot) ate the
      first grid cell pushing Adults right / Child to the next row, and the tiny
      icon .input-group-prepend chips wrapped ABOVE the selects. Clean 2-col grid:
      Adults + Child side by side, child-rules note full-width below. */
#select-bus-direct-agent .bb-tent-modal-pax{display:grid!important;grid-template-columns:1fr 1fr;gap:4px 16px;margin:0!important;padding:8px 6px 2px!important;}
#select-bus-direct-agent .bb-tent-modal-pax>[class*="col-"]{width:auto!important;max-width:none!important;flex:none!important;padding:6px 0!important;margin:0!important;}
#select-bus-direct-agent .bb-tent-modal-pax>.col-sm-12{grid-column:1/-1;}
/* kills the stray empty .col-sm-12 cells CI3 emits. The total + next-step
   blocks are text-only so they matched too -- exempt them. */
#select-bus-direct-agent .bb-tent-modal-pax>.col-sm-12:not(.bb-tent-modal-childrules):not(.bb-tbr-modal-total):not(.bb-tbr-modal-next):not(.bb-tbr-modal-farenote):not(:has(select,input:not([type="hidden"]),a,button,img,label)){display:none!important;}
/* ...the fare-rule notes (party size / base fare / extra-head fare) are text
   only too, so the rule above ate them: the modal simply lost its pricing
   explanation. Exempted by class above, laid out as chips here. */
#select-bus-direct-agent .bb-tent-modal-pax>.col-sm-12.bb-tbr-modal-farenote{grid-column:1/-1;display:block!important;}
/* Original CI3 Note 1/2/3 sentences, re-housed in one amber panel with a
   numbered badge per line -- reads as a small "how pricing works" card instead
   of three lines of red warning text. */
.bb-farerules{
  display:flex;flex-direction:column;gap:7px;
  margin:2px 0 6px;padding:10px 12px;
  background:#fffbeb;border:1px solid #fde68a;border-left:3px solid #f59e0b;
  border-radius:10px;
}
.bb-farerule{
  display:flex;align-items:flex-start;gap:8px;
  color:#78350f;font-size:12px;font-weight:600;line-height:1.45;
}
.bb-farerule-no{
  flex:0 0 18px;height:18px;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#f59e0b;color:#fff;border-radius:50%;
  font-size:10.5px;font-weight:800;line-height:1;
}
.bb-farerule b{font-weight:800;color:#7c2d12;}
/* the per-extra-head charge is the one that moves the total, so tint it */
.bb-farerule--extra{color:#9f1239;}
.bb-farerule--extra .bb-farerule-no{background:#e11d48;}
.bb-farerule--extra b{color:#be123c;}
@media (max-width:575.98px){
  .bb-farerules{padding:9px 10px;gap:6px;}
  .bb-farerule{font-size:11.5px;}
}
#select-bus-direct-agent .bb-tent-modal-pax .input-group-prepend{display:none!important;}
#select-bus-direct-agent .bb-tent-modal-pax select.custom-select{width:100%!important;border-radius:10px!important;}
/* 2) "Boarding & Dropping Points" was a full-width position:fixed BOTTOM SHEET
      escaping the modal (looked like a stuck overlay). Make it a normal section
      inside the modal; its info links become my-hz pill chips; loaded content
      (#chatboxx61) scrolls within. CI3 onclick loaders untouched. */
#select-bus-direct-agent #accordion2.bbus40{position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;max-width:none!important;margin:4px 16px 16px!important;padding:10px 12px!important;background:#fff!important;border:1px solid var(--bb-border,#e5e7eb)!important;border-radius:14px!important;box-shadow:none!important;z-index:auto!important;}
#select-bus-direct-agent #accordion2 .panel{border:0!important;box-shadow:none!important;margin:0!important;background:transparent!important;}
#select-bus-direct-agent #accordion2 .close{display:none!important;}
/* the 4 info rows are obfuscated-class DIVs (legacy scraped CSS), not <a>:
   DIV._18kz…(.bpoints/.dpoints/.c_policy/.t_conditions1) > SPAN. → pill chips. */
#select-bus-direct-agent #accordion2 .feedback1 .col-xs-12{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;padding:6px 4px!important;}
#select-bus-direct-agent #accordion2 [class*="_18kz"]{display:inline-flex!important;align-items:center;margin:4px 3px!important;padding:8px 16px!important;border:1.5px solid var(--bb-border,#e5e7eb)!important;border-radius:var(--bb-radius-pill,999px)!important;background:#fff!important;cursor:pointer;}
#select-bus-direct-agent #accordion2 [class*="_18kz"] span{color:var(--bb-dark,#0a1525)!important;font-weight:700!important;font-size:13px!important;}
#select-bus-direct-agent #accordion2 [class*="_18kz"]:hover{border-color:var(--bb-primary,#f97316)!important;}
#select-bus-direct-agent #accordion2 [class*="_18kz"]:hover span{color:var(--bb-primary,#f97316)!important;}
#select-bus-direct-agent #accordion2 [class*="_18kz"].active{border-color:var(--bb-primary,#f97316)!important;background:#fff7ed!important;}
#select-bus-direct-agent #accordion2 [class*="_18kz"].active span{color:var(--bb-primary,#f97316)!important;}
/* section title + stray green up-arrow icon */
#select-bus-direct-agent #accordion2 ._2yQO6nJzegm2eXoksaqccn{font-weight:800!important;color:var(--bb-dark,#0a1525)!important;font-size:14.5px!important;margin:0 0 6px!important;}
#select-bus-direct-agent #accordion2 .arrowdouble{display:none!important;}
/* BS4 'collapse in' = open, but BS5 CSS is .collapse:not(.show){display:none} → the
   info content rendered height:0. Map .in to shown WITHOUT !important so the CI3
   jQuery slideToggle (openNav61/closebdpoints61) can still animate/hide via inline
   styles. Height stays natural; long content scrolls. */
#select-bus-direct-agent #accordion2 .collapse.in{display:block;}
#select-bus-direct-agent #accordion2 #chatboxx61{height:auto!important;max-height:45vh!important;overflow-y:auto!important;}
/* info-content typography was huge (H4 24px titles, H3 28px point names) — compact
   my-hz point-list look: small green time, 15px names, muted landmarks. */
#select-bus-direct-agent #chatboxx61 .section-header{margin:0 0 6px!important;}
#select-bus-direct-agent #chatboxx61 h4{font-size:15.5px!important;font-weight:800!important;margin:2px 0 6px!important;}
#select-bus-direct-agent #chatboxx61 .line{display:none!important;}
#select-bus-direct-agent #chatboxx61 .row{align-items:center!important;margin:0!important;padding:7px 4px!important;border-bottom:1px dashed var(--bb-border,#e5e7eb);}
#select-bus-direct-agent #chatboxx61 .layout11{font-weight:800!important;font-size:12.5px!important;color:#166534!important;}
#select-bus-direct-agent #chatboxx61 h3{font-size:15px!important;font-weight:700!important;margin:0 0 2px!important;}
#select-bus-direct-agent #chatboxx61 li{font-size:12.5px!important;color:var(--bb-muted,#64748b)!important;}
/* after passengers are picked, CI3 shows two viewport-fixed bottom bars (#pricedata:
   fare summary + blue blinking "Select Boarding Point"). Pull them INTO the modal
   as its footer: light fare strip + solid orange CTA. */
#select-bus-direct-agent #pricedata .round-trip-fare.fixed-bottom{position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;max-width:none!important;z-index:auto!important;margin:8px 16px 0!important;box-shadow:none!important;}
#select-bus-direct-agent #pricedata .round-trip-fare.bg-light{background:#f8fafc!important;border:1px solid var(--bb-border,#e5e7eb)!important;border-radius:12px!important;padding:10px 16px!important;}
#select-bus-direct-agent #pricedata .round-trip-fare.bg-light span,
#select-bus-direct-agent #pricedata .round-trip-fare.bg-light b,
#select-bus-direct-agent #pricedata .round-trip-fare.bg-light a{color:var(--bb-dark,#0a1525)!important;}
#select-bus-direct-agent #pricedata .round-trip-fare.bg-blue{background:linear-gradient(135deg,var(--bb-primary,#f97316),#c2410c)!important;border-radius:12px!important;margin-bottom:14px!important;padding:13px 16px!important;cursor:pointer;}
#select-bus-direct-agent #pricedata .round-trip-fare.bg-blue *{color:#fff!important;}
#select-bus-direct-agent #pricedata .round-trip-fare.bg-blue .blink{animation:none!important;}
/* boarding/dropping point sidebars — TIMELINE of selectable point cards.
   bb-modal-enhance.js rebuilds each .radio label into: time badge + name +
   landmark + check indicator (the radio input is kept, hidden, still functional).
   Selected row = label.pointactive (set by CI3 changebPoint/changedPoint). */
/* Boarding/Dropping slide-outs live INSIDE #select-bus-direct-agent whose .modal-content
   has overflow:hidden (rounded corners) — force them fixed + above the modal so they slide
   over the viewport and are NOT clipped (fix: "boarding/dropping not appearing after pax").
   IMPORTANT: the base .sidenavv geometry (width/left/transition) lived in the OLD theme's
   custom.css, which is NOT loaded on the tour-packages booking page — so the panel had
   width:auto/left:auto and never slid in as a proper 360px drawer. Restore that geometry
   here (ci-overrides IS loaded). `left` is left WITHOUT !important so the existing
   openboardingsidebar()/close…() JS (which set inline style.left) still drives the slide. */
/* Provide ONLY the frame (position/height/z-index/skin/transition). width + left are
   left NON-important so the CI3 open/close functions — which set inline left+width on
   BOTH panels every time (openboardingsidebar: boarding left:0/width:360 + dropping
   left:-360/width:0, and vice-versa) — remain the single source of truth. That inline
   mechanism already enforces mutual exclusion (only one panel open at a time); an earlier
   attempt here forced width:360!important + an .is-open rule, which DEFEATED the width:0
   collapse and left BOTH drawers stuck open side-by-side. width:360/left:-360 below are
   just the initial closed state (matching the old theme's custom.css .sidenavv). */
/* These CI3 drawers carry BOTH class `sidenavv` (CI3, left-based open/close) AND
   `bsl-sidepanel` (my-hz DNA, which is right:0 + transform:translateX(100%) to hide).
   The two positioning systems FIGHT: my left:-360 hides the box off-screen-left, but the
   DNA transform:translateX(100%) then shoves it +360px back to left:0 → the drawer showed
   itself uninvited (e.g. "dropping opens on Book Now"). Neutralise the DNA transform/right
   so the CI3 left mechanism (inline style.left, driven by openboardingsidebar/opendropping)
   is the sole source of truth in BOTH the seat-layout and Book-Now(direct-agent) flows. */
#boardingsidebar,#droppingsidebar{position:fixed!important;top:0!important;height:100%!important;width:360px;left:-360px;right:auto!important;transform:none!important;background:#fff!important;overflow-x:hidden!important;z-index:1080!important;border-radius:0 20px 20px 0!important;box-shadow:0 0 60px rgba(10,21,37,.4)!important;transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)!important;}
#boardingsidebar .bsl-sidepanel-head,#droppingsidebar .bsl-sidepanel-head,#boardingsidebar .modal-header.modalheader1,#droppingsidebar .modal-header.modalheader1{background:linear-gradient(135deg,var(--bb-secondary-dark,#0d9488),var(--bb-secondary,#14b8a6))!important;padding:16px 20px!important;}
/* Point rows are now rebuilt as DNA .bsl-point (bb-modal-enhance.js) — the base
   .bsl-point/.bsl-point-time/.bsl-point-name CSS in style.css does the styling.
   These adapt the CI3 wrapper: hide the raw radio, remove the .radio double border,
   and map CI3's .pointactive selected-class onto the DNA .is-selected look. */
#boardingsidebar .bsl-point input[type=radio],#droppingsidebar .bsl-point input[type=radio]{position:absolute!important;opacity:0!important;width:0!important;height:0!important;margin:0!important;}
#boardingsidebar .radio:not(.bsl-point),#droppingsidebar .radio:not(.bsl-point){border:0!important;}
#boardingsidebar .bsl-point.pointactive,#droppingsidebar .bsl-point.pointactive{background:linear-gradient(90deg,#fff7ed,transparent)!important;border-left:3px solid var(--bb-primary,#f97316)!important;padding-left:17px!important;}
#boardingsidebar .bsl-point.pointactive .bsl-point-radio,#droppingsidebar .bsl-point.pointactive .bsl-point-radio{background:var(--bb-primary,#f97316)!important;border-color:var(--bb-primary,#f97316)!important;box-shadow:inset 0 0 0 4px #fff!important;}
#boardingsidebar .bsl-sidepanel-head b,#droppingsidebar .bsl-sidepanel-head b,#boardingsidebar .modalheader1 b,#droppingsidebar .modalheader1 b{font-size:14.5px!important;letter-spacing:.02em;color:#fff!important;}
#boardingsidebar .modal-body,#droppingsidebar .modal-body,#boardingsidebar .bsl-sidepanel-body,#droppingsidebar .bsl-sidepanel-body{padding:0!important;}
/* NB :not(.bsl-point) -- the DNA row carries BOTH classes (class="radio bsl-point")
   and display:block killed its 56px/1fr/auto grid, stacking time, name and radio
   into a 108px column. This rule is for the older .bb-pt-label variant only. */
#boardingsidebar .radio:not(.bsl-point),#droppingsidebar .radio:not(.bsl-point){display:block!important;margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid #f1f5f9!important;}
#boardingsidebar .bsl-point,#droppingsidebar .bsl-point{border-bottom:1px solid #f1f5f9;}
#boardingsidebar .radio label.bb-pt-label,#droppingsidebar .radio label.bb-pt-label{display:flex!important;align-items:center!important;gap:11px!important;padding:13px 14px!important;margin:0!important;width:100%!important;max-width:none!important;cursor:pointer;font-weight:400!important;}
#boardingsidebar .radio label.bb-pt-label:hover,#droppingsidebar .radio label.bb-pt-label:hover{background:#fff7ed;}
#boardingsidebar .bb-pt-label input[type="radio"],#droppingsidebar .bb-pt-label input[type="radio"]{position:absolute!important;opacity:0!important;width:0!important;height:0!important;margin:0!important;}
#boardingsidebar .bb-pt-time,#droppingsidebar .bb-pt-time{flex:0 0 auto!important;width:64px!important;text-align:center;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;font-weight:800;font-size:11px;border-radius:9px;padding:6px 3px;line-height:1.25;}
#boardingsidebar .bb-pt-info,#droppingsidebar .bb-pt-info{flex:1 1 auto!important;min-width:0!important;display:flex;flex-direction:column;gap:1px;}
#boardingsidebar .bb-pt-name,#droppingsidebar .bb-pt-name{font-weight:700;font-size:13.5px;color:#0a1525;line-height:1.3;}
#boardingsidebar .bb-pt-land,#droppingsidebar .bb-pt-land{font-size:11.5px;color:#94a3b8;line-height:1.3;}
#boardingsidebar .bb-pt-check,#droppingsidebar .bb-pt-check{flex:0 0 auto!important;width:22px;height:22px;border-radius:50%;border:2px solid #cbd5e1;position:relative;transition:.12s;}
#boardingsidebar .bb-pt-label.pointactive,#droppingsidebar .bb-pt-label.pointactive{background:#fff7ed;}
#boardingsidebar .bb-pt-label.pointactive .bb-pt-check,#droppingsidebar .bb-pt-label.pointactive .bb-pt-check{border-color:#f97316;background:#f97316;}
#boardingsidebar .bb-pt-label.pointactive .bb-pt-check::after,#droppingsidebar .bb-pt-label.pointactive .bb-pt-check::after{content:'\f00c';font-family:'Font Awesome 5 Free';font-weight:900;font-size:10px;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
/* the AJAX dropping-points partial arrives wrapped in .bb-tbr-vcard-panel (design-hidden by default) */
#boardingsidebar .bb-tbr-vcard-panel,#droppingsidebar .bb-tbr-vcard-panel{display:block!important;}
#boardingsidebar hr.azc992,#droppingsidebar hr.azc992{display:none!important;}

/* Boarding/Dropping sidebar FOOTER buttons — were red (btn-danger), dark
   (btn-dark), square (rounded-0) and BLINKING (.blink). Header + points are
   already themed; re-theme the footer to the my-hz button system. */
#boardingsidebar .modalfooter1,#droppingsidebar .modalfooter1{
  display:flex!important;gap:10px!important;padding:12px 14px!important;
  background:#fff!important;border-top:1px solid #eef2f7!important;box-shadow:0 -6px 18px -10px rgba(10,21,37,.18);}
#boardingsidebar .modalfooter1 .btn,#droppingsidebar .modalfooter1 .btn{
  float:none!important;border:0!important;border-radius:12px!important;
  padding:13px 16px!important;font-weight:800!important;font-size:14px!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s;}
#boardingsidebar .modalfooter1 .btn:hover,#droppingsidebar .modalfooter1 .btn:hover{transform:translateY(-2px);}
/* The Bitla-flow footer wrapper is .modalfooter (not .modalfooter1) and its NEXT
   is a raw square red .btn-danger.rounded-0 — give it the full my-hz treatment
   (orange gradient, rounded, no blink) so the primary proceed button matches. */
#boardingsidebar .modalfooter .btn,#droppingsidebar .modalfooter .btn,
#boardingsidebar .modalfooter1 .btn-danger,#droppingsidebar .modalfooter1 .btn-danger,
#boardingsidebar .modalfooter .btn-danger,#droppingsidebar .modalfooter .btn-danger{
  float:none!important;border:0!important;border-radius:12px!important;
  background:linear-gradient(135deg,var(--bb-primary,#f97316),var(--bb-primary-dark,#c2410c))!important;
  color:#fff!important;font-weight:800!important;font-size:14px!important;padding:13px 18px!important;
  box-shadow:0 8px 18px -6px rgba(249,115,22,.5)!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  animation:none!important;}
#boardingsidebar .modalfooter,#droppingsidebar .modalfooter{
  display:flex!important;gap:10px!important;padding:12px 14px!important;
  background:#fff!important;border-top:1px solid #eef2f7!important;float:none!important;
  box-shadow:0 -6px 18px -10px rgba(10,21,37,.18)!important;}
/* NEXT / Continue to Booking → orange primary (grows to fill) */
#boardingsidebar .modalfooter1 .btn-danger,#droppingsidebar .modalfooter1 .btn-danger{
  flex:1 1 auto!important;
  background:linear-gradient(135deg,var(--bb-primary),var(--bb-primary-dark))!important;
  color:#fff!important;box-shadow:0 8px 18px -6px rgba(249,115,22,.5)!important;}
/* PREVIOUS → muted secondary (fixed width) */
#droppingsidebar .modalfooter1 .btn-dark{
  flex:0 0 auto!important;min-width:118px;
  background:#eef2f7!important;color:#0a1525!important;}
/* Kill the cheap blinking in the sidebars + seat modal (button label, arrow,
   and the "Select Boarding Point" trigger bar) */
#boardingsidebar .blink,#droppingsidebar .blink,#select-busseats .blink{animation:none!important;}

/* ---- fixed bottom action bar (only on entry_status==2 packages) ---- */
.bb-tbr-corecol .fixedfooterabc{
  position:fixed!important;left:0!important;bottom:0!important;width:100%!important;z-index:1000!important;
  background:var(--bb-dark,#0a1525)!important;border-top:1px solid var(--bb-border,#e5e7eb)!important;
}

/* ---- date-strip chips: rounded my-hz cards (match tour-booking-regular date selector) ---- */
.bb-tbr-corecol .layout64{
  min-width:96px;text-align:center;padding:9px 14px!important;font-size:12.5px;
  border-radius:var(--bb-radius,12px)!important;border:1.5px solid var(--bb-border,#e5e7eb)!important;
  box-shadow:var(--bb-shadow-sm,0 2px 6px rgba(10,21,37,.06))!important;
}
.bb-tbr-corecol .layout64.active{
  box-shadow:0 6px 16px rgba(249,115,22,.28)!important;transform:translateY(-1px);
}
.bb-tbr-corecol .datenav .overflowdiv{padding:6px 2px;}

/* ---- transportation tabs (Bus Transportation / Entry Tickets): force my-hz
   orange active state (was inheriting Bootstrap-primary / old #004F9E blue).
   Scoped so only these booking pill-tabs are affected. ---- */
.bb-tbr-corecol .nav-pills.outstation .nav-link.active,
.bb-tbr-corecol #pillsmyTab .nav-link.active,
.bb-tbr-corecol #pillsmyTab .nav-link.show.active,
#pillsmyTab .nav-link.active.bestbus103{
  background:var(--bb-primary,#f97316)!important;border-color:var(--bb-primary,#f97316)!important;
  color:#fff!important;
}
.bb-tbr-corecol #pillsmyTab .nav-link .fontentry{color:inherit!important;}

/* ---- collapse the empty right column / avoid a tall gap when content is short:
   the summary is sticky; let the row height follow the taller column naturally ---- */
.bb-tbr-main .row.g-4{align-items:flex-start;}
.bb-tbr-main aside.col-lg-4 .bb-tbr-summary{position:sticky;top:88px;}

/* ================================================================
   USER PREFERENCE: full-width vehicle list, NO right-side summary tab.
   Hide the summary aside; the vehicle core spans the full width. The
   journey date is changed via the top pagehead date pill (below), so the
   summary card (which held "change date") is redundant.
   ================================================================ */
.bb-tbr-main .row.g-4 > aside.col-lg-4,
.bb-tbr-main .bb-tbr-summary{display:none!important;}
.bb-tbr-main .row.g-4 > .col-lg-8.bb-tbr-corecol,
.bb-tbr-main .row.g-4 > .bb-tbr-corecol{flex:0 0 100%!important;max-width:100%!important;width:100%!important;}
/* EXCEPTION: the CAR-packages booking page reuses .bb-tbr-main, but its aside
   is the ONLY holder of the live Fare Break-up (#fare_breakup) and the
   "Proceed To Next" submit -- hiding it dead-ended the booking (no submit at
   any width). Keep it visible; on mobile it stacks below the form, exactly
   like the CI3 original. */
.bb-tbr-main .row.g-4 > aside.col-lg-4.bb-tcar-aside{display:block!important;}

/* ---- top journey-date = a clear my-hz "change date" pill that opens the calendar
   popup on click (onclick="journeydatemodel()" is preserved; JS shadowing now fixed) ---- */
.bb-tbr-pagehead-jdate{margin-top:14px;}
.bb-tbr-pagehead-jdate .col-md-4,.bb-tbr-pagehead-jdate .col-12{padding:0!important;max-width:none!important;flex:0 0 auto!important;width:auto!important;}
.bb-tbr-pagehead-jdate a#mstartdate_0{
  display:inline-flex!important;align-items:center;gap:8px;
  background:var(--bb-primary,#f97316)!important;
  padding:9px 18px!important;border-radius:var(--bb-radius-pill,999px)!important;
  font-weight:700!important;text-decoration:none!important;cursor:pointer;
  box-shadow:0 6px 16px rgba(249,115,22,.28)!important;animation:none!important;
}
.bb-tbr-pagehead-jdate a#mstartdate_0,
.bb-tbr-pagehead-jdate a#mstartdate_0 *{color:#fff!important;}
.bb-tbr-pagehead-jdate a#mstartdate_0:hover{background:var(--bb-primary-dark,#c2410c)!important;}

/* ============================================================================
   PASSENGER-DETAILS (tours) — my-hz v2 re-theme (.bb-tpx-page scope)
   Markup is the CI3 original (all ids/names/onclicks/parsley intact); the view
   only adds this scope class + a gated pkgbar/wizard. Everything visual here.
============================================================================ */
/* pkgbar timer chip (session countdown lives in the dark bar on v2) */
.bb-tpx-timerchip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:var(--bb-radius-pill,999px);padding:5px 13px;font-weight:800;font-size:12.5px;margin-right:10px;}
.bb-tpx-timerchip i{font-size:12px;}
/* old inline step-wizard replaced by the v2 wizard section */
.bb-tpx-page .stepwizard{display:none!important;}

/* ---- cards ---- */
.bb-tpx-page .confirm-details,.bb-tpx-page .bestbus104{background:#fff!important;border:1px solid var(--bb-border,#e5e7eb)!important;border-radius:14px!important;box-shadow:none!important;padding:16px 16px 12px!important;}
.bb-tpx-page .section-header{margin:0 0 12px!important;padding-bottom:10px;border-bottom:1px solid var(--bb-border,#e5e7eb);}
.bb-tpx-page .section-header h4{text-align:left!important;font-size:15.5px!important;font-weight:800!important;color:var(--bb-dark,#0a1525)!important;margin:0!important;}
.bb-tpx-page .section-header .line{display:none!important;}
.bb-tpx-page .headdingcolor{color:var(--bb-dark,#0a1525)!important;}
.bb-tpx-page .bestbuscolor{color:var(--bb-primary,#f97316)!important;}

/* ---- notes / alerts ---- */
.bb-tpx-page .alert-danger{background:#fff7ed!important;border:1px dashed #fdba74!important;color:#7c2d12!important;border-radius:12px!important;font-size:13px!important;padding:10px 14px!important;}
.bb-tpx-page .alert-info,.bb-tpx-page .alert-success{background:#eff6ff!important;border:1px dashed #93c5fd!important;color:#1e3a8a!important;border-radius:12px!important;font-size:13px!important;padding:10px 14px!important;}

/* ---- inputs: BS4 .input-group-prepend inside a BS5 page (prepend class is inert
        in BS5 → would stack/misalign). Rebuild the group as flex + my-hz skin. ---- */
.bb-tpx-page .input-group{display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;}
/* parsley's error <ul> is a flex SIBLING inside the group — its width:100%!important
   (view CSS) was eating the row and squeezing the input to ~27px. Send it to its own
   full-width line under the field; prepend+input stay one line via their flex sizes. */
.bb-tpx-page .input-group .parsley-errors-list{flex:0 0 100%!important;order:10;margin:0!important;}
.bb-tpx-page .input-group>.input-group-prepend{flex:0 0 auto!important;}
.bb-tpx-page .input-group-prepend{display:flex!important;margin:0!important;}
.bb-tpx-page .input-group-text{display:flex;align-items:center;background:#f8fafc!important;border:2px solid #e2e8f0!important;border-right:0!important;border-radius:10px 0 0 10px!important;padding:8px 12px!important;color:var(--bb-muted,#64748b)!important;font-size:13px!important;}
.bb-tpx-page .input-group>.form-control,.bb-tpx-page .input-group>.custom-select{flex:1 1 auto!important;width:1%!important;min-width:0!important;}
.bb-tpx-page .form-control,.bb-tpx-page .custom-select{border:2px solid #e2e8f0!important;border-radius:10px;height:44px!important;font-size:13.5px!important;color:var(--bb-dark,#0a1525)!important;background-color:#fff!important;padding:8px 12px!important;}
.bb-tpx-page .input-group>.form-control:not(:first-child),.bb-tpx-page .input-group>.custom-select:not(:first-child){border-radius:0 10px 10px 0!important;}
/* ...but `display:flex!important` above outranks a NON-important inline style,
   which is how CI3 hides things: #pick_up_location_home / _not_home (and the
   drop-off pair) ship as style="display:none" and get_pick_up_location_types()
   toggles them with jQuery .show()/.hide(). The !important pinned them both
   open, so Home/Hotel's Google-autocomplete box and the station <select> showed
   at the same time -- the pick-up-type concept was dead. Re-assert hidden at
   higher specificity so CI3 keeps control. Matches the server-rendered
   "display:none" and jQuery's "display: none"; .show() clears the attribute, so
   the flex skin applies again. */
.bb-tpx-page .input-group[style*="display:none"],
.bb-tpx-page .input-group[style*="display: none"],
.bb-tpx-page .input-group-prepend[style*="display:none"],
.bb-tpx-page .input-group-prepend[style*="display: none"]{display:none!important;}
.bb-tpx-page .form-control:focus,.bb-tpx-page .custom-select:focus{border-color:var(--bb-primary,#f97316)!important;box-shadow:none!important;outline:none!important;}
.bb-tpx-page .form-group{margin-bottom:12px!important;}
.bb-tpx-page .parsley-errors-list{color:#dc2626;font-size:12px;list-style:none;padding:2px 0 0;margin:0;}

/* ---- gender segmented pills (Male | Female) ---- */
.bb-tpx-page .nav-pills .nav-link{border:2px solid #e2e8f0!important;color:var(--bb-dark,#0a1525)!important;font-weight:700!important;padding:9px 18px!important;background:#fff!important;font-size:13px!important;line-height:1.4!important;}
.bb-tpx-page .nav-pills .nav-link.bdrtpl1{border-radius:10px 0 0 10px!important;}
.bb-tpx-page .nav-pills .nav-link.bdrtpr1{border-radius:0 10px 10px 0!important;border-left:0!important;}
.bb-tpx-page .nav-pills .nav-link.active{background:var(--bb-primary,#f97316)!important;border-color:var(--bb-primary,#f97316)!important;color:#fff!important;}

/* ---- passenger cards + "Adult 1 / Child 1" ribbon → floating orange badge ---- */
.bb-tpx-page .bestbus104a{position:relative;background:#fff!important;border:1px solid var(--bb-border,#e5e7eb)!important;border-radius:14px!important;box-shadow:none!important;padding:24px 14px 6px!important;}
.bb-tpx-page .bestbus104a .input-group{position:static!important;}
.bb-tpx-page .tour-search3{position:absolute;top:-13px;left:16px;background:linear-gradient(135deg,var(--bb-primary,#f97316),#c2410c);color:#fff;border-radius:var(--bb-radius-pill,999px);padding:4px 15px;font-size:12px;line-height:1.4;z-index:2;}
.bb-tpx-page .tour-search3 .tour-search4,.bb-tpx-page .tour-search3 b{color:#fff!important;}
.bb-tpx-page .triangle-topleft{display:none!important;}

/* ---- side panel: coupon + fare ---- */
.bb-tpx-page aside .promcod.bdrtpl1{border-radius:10px 0 0 10px!important;}
.bb-tpx-page aside a.btn-secondary{background:var(--bb-dark,#0a1525)!important;border:0!important;color:#fff!important;border-radius:0 10px 10px 0!important;font-weight:800!important;display:flex;align-items:center;justify-content:center;height:44px;}
.bb-tpx-page .promo-code{list-style:none;padding:0;margin:10px 0 0;}
.bb-tpx-page .promo-code li{border:1px dashed #fdba74;background:#fff7ed;border-radius:10px;padding:8px 12px;margin-bottom:8px;font-size:12.5px;color:#7c2d12;}
.bb-tpx-page #fare_breakup li{font-size:13.5px;color:var(--bb-dark,#0a1525);}
.bb-tpx-page .bg-light-4{background:#fff7ed!important;border-radius:10px!important;font-weight:800!important;}
.bb-tpx-page #proceed_to_payment_desktop{background:linear-gradient(135deg,var(--bb-primary,#f97316),#c2410c)!important;border:0!important;border-radius:12px!important;padding:13px 16px!important;font-weight:800!important;font-size:14.5px!important;color:#fff!important;width:100%;}
.bb-tpx-page .blink,.bb-tpx-page .blinker{animation:none!important;text-decoration:none!important;}
#flip .blink,#panel .blink,#btmflip .blinker,#btmflip1 .blinker,#btmpanel .blinker,#btmpanel1 .blinker{animation:none!important;}

/* ---- terms checkbox row (BS4 custom-control classes are inert in BS5) ---- */
.bb-tpx-page .custom-control{display:flex;gap:8px;align-items:flex-start;}
.bb-tpx-page .custom-control-label{font-size:13px;color:var(--bb-dark,#0a1525);}

/* ---- auto-open T&C accept modal + Only-UPI modal ---- */
#termsModal .modal-content,#onlyUpiModal .modal-content{border-radius:16px!important;border:0!important;}
#termsModal .modal-title,#onlyUpiModal .modal-title{font-weight:800;font-size:16.5px;color:var(--bb-dark,#0a1525);}
#onlyUpiModal .bg-secondary{background:linear-gradient(135deg,var(--bb-dark,#0a1525),#1a2f4a)!important;border-radius:16px 16px 0 0;}
#termsModal .btn-success,#onlyUpiModal .btn-success{background:linear-gradient(135deg,var(--bb-primary,#f97316),#c2410c)!important;border:0!important;border-radius:var(--bb-radius-pill,999px)!important;font-weight:800!important;padding:10px 28px!important;color:#fff!important;}
#onlyUpiModal .main_vtab_radio{border:2px solid var(--bb-border,#e5e7eb)!important;border-radius:12px!important;}

/* mobile sticky package strip */
#flip{background:#fff!important;box-shadow:0 2px 12px rgba(15,23,42,.10)!important;}
/* this page's bootstrap build lacks col-sm-* (md/lg only) → passenger & contact rows
   stacked full-width. Minimal sm grid + BS4 .form-row, scoped to the page. */
@media (min-width:576px){
  .bb-tpx-page .row>.col-sm-3,.bb-tpx-page .form-row>.col-sm-3{flex:0 0 auto;width:25%;}
  .bb-tpx-page .row>.col-sm-4,.bb-tpx-page .form-row>.col-sm-4{flex:0 0 auto;width:33.3333%;}
  .bb-tpx-page .row>.col-sm-6,.bb-tpx-page .form-row>.col-sm-6{flex:0 0 auto;width:50%;}
  .bb-tpx-page .row>.col-sm-12,.bb-tpx-page .form-row>.col-sm-12{flex:0 0 auto;width:100%;}
}
.bb-tpx-page .form-row{display:flex;flex-wrap:wrap;}
.bb-tpx-page .form-row>[class*="col-"]{padding-right:8px;padding-left:8px;}
/* gender Male|Female segmented pair — keep on one line */
.bb-tpx-page .nav-pills{display:flex;flex-wrap:nowrap;padding-left:0;margin-bottom:0;list-style:none;}

/* ---- vehicle-card operator avatar: the .bb-tbr-vcard-num was an unstyled naked
   number ("1") next to the operator name. Style it as the design's avatar square
   (orange, bus icon). Icon (not the loop number) since each mode-section restarts
   its counter — two "1"s read as a bug. */
.bb-tbr-corecol .bb-tbr-vcard-op{align-items:center!important;gap:12px!important;}
.bb-tbr-corecol .bb-tbr-vcard-num{
  flex:0 0 auto!important;width:46px!important;height:46px!important;
  display:flex!important;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bb-primary,#f97316),#c2410c)!important;
  border-radius:12px!important;box-shadow:0 4px 10px rgba(249,115,22,.28);
  font-size:0!important;overflow:hidden;
}
.bb-tbr-corecol .bb-tbr-vcard-num::before{
  content:'\f207';font-family:'Font Awesome 5 Free';font-weight:900;font-size:19px;color:#fff;
}
/* fare band: add the design's "Adult fare" caption after the price figures */
.bb-tbr-corecol .bb-tbr-vcard-fares-wrap .price::after{
  content:'Adult fare';display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--bb-muted,#64748b);margin-top:1px;
}

/* ============================================================================
   BOOK-NOW PASSENGER MODAL — innovative redesign (#select-bus-direct-agent)
   Modern booking-app look: avatar trip-summary header, +/- passenger STEPPERS
   (bb-modal-enhance.js overlays them on the CI3 <select>s, syncing value+change
   so fare calc still runs), timeline points, clean fare + CTA. CI3 markup/logic
   untouched.
============================================================================ */
#select-bus-direct-agent .modal-dialog{max-width:580px!important;}
#select-bus-direct-agent .modal-content{border-radius:22px!important;overflow:hidden!important;border:0!important;box-shadow:0 30px 80px rgba(10,21,37,.42)!important;}
/* header */
#select-bus-direct-agent .bb-tbr-modal-vsum{background:radial-gradient(130% 150% at 100% 0,#1e3a5f 0,#0a1525 58%)!important;padding:18px 20px!important;display:flex!important;align-items:center!important;gap:14px!important;}
#select-bus-direct-agent .bb-tbr-modal-vsum::before{content:none!important;display:none!important;} /* real .bb-tbr-modal-vsum-ico div ships in the DNA markup - the old CSS icon doubled it */
#select-bus-direct-agent .bb-tbr-modal-vsum .modal-title{flex:1 1 auto!important;min-width:0!important;text-align:left!important;color:#fff!important;font-size:18px!important;font-weight:800!important;line-height:1.25!important;display:flex;flex-direction:column;gap:3px;}
#select-bus-direct-agent .bb-tbr-modal-vsum .layout1{font-size:12px!important;font-weight:600!important;color:rgba(255,255,255,.72)!important;line-height:1.35;}
#select-bus-direct-agent .bb-tbr-modal-vsum .layout1 .green{color:#fbbf24!important;font-weight:700!important;}
#select-bus-direct-agent .bb-tbr-modal-vsum .close,#select-bus-direct-agent .bb-tbr-modal-vsum button.close{position:absolute;top:14px;right:16px;color:#fff!important;opacity:.9;background:rgba(255,255,255,.16)!important;border-radius:50%!important;width:30px;height:30px;border:0!important;font-size:16px;text-shadow:none;}
/* pax title */
#select-bus-direct-agent .bb-tent-modal-paxtitle{text-align:left!important;font-size:14px!important;font-weight:800!important;color:#0a1525!important;border:0!important;margin:2px 0 12px!important;padding:0 0 0 12px!important;position:relative;}
#select-bus-direct-agent .bb-tent-modal-paxtitle::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:3px;background:linear-gradient(#f97316,#c2410c);}
/* pax steppers */
#select-bus-direct-agent .bb-tent-modal-pax{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important;padding:0!important;margin:0 0 8px!important;}
#select-bus-direct-agent .bb-tent-modal-pax>[class*="col-"]{width:auto!important;max-width:none!important;flex:none!important;padding:0!important;margin:0!important;}
#select-bus-direct-agent .bb-tent-modal-pax>.col-sm-12.bb-tent-modal-childrules{grid-column:1/-1;}
#select-bus-direct-agent .bb-tent-modal-pax .input-group-prepend{display:none!important;}
#select-bus-direct-agent .bb-hidden-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
#select-bus-direct-agent .bb-paxcard{display:flex;align-items:center;gap:10px;border:1.5px solid #e8edf3;border-radius:14px;padding:11px 12px;background:linear-gradient(#fff,#fbfcfe);}
#select-bus-direct-agent .bb-paxcard .bb-paxico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:#fff7ed;color:#f97316;display:flex;align-items:center;justify-content:center;font-size:16px;}
#select-bus-direct-agent .bb-paxcard .bb-paxlbl{flex:1;min-width:0;}
#select-bus-direct-agent .bb-paxcard .bb-paxlbl b{display:block;font-size:13px;color:#0a1525;font-weight:800;}
#select-bus-direct-agent .bb-paxcard .bb-paxlbl small{font-size:10.5px;color:#94a3b8;}
#select-bus-direct-agent .bb-stepper{display:inline-flex;align-items:center;border:1.5px solid #e8edf3;border-radius:11px;overflow:hidden;background:#fff;}
#select-bus-direct-agent .bb-stepper-btn{width:32px;height:34px;border:0;background:#f8fafc;color:#0a1525;font-size:18px;font-weight:800;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:.12s;}
#select-bus-direct-agent .bb-stepper-btn:hover{background:#fff7ed;color:#f97316;}
#select-bus-direct-agent .bb-stepper-val{min-width:34px;text-align:center;font-weight:800;font-size:15px;color:#0a1525;}
/* note */
#select-bus-direct-agent .bb-tent-modal-childrules{background:#fffbeb!important;border:1px dashed #fcd34d!important;border-radius:12px!important;padding:9px 13px!important;font-size:11.5px!important;color:#92400e!important;margin-top:2px!important;}
/* tabs + timeline */
#select-bus-direct-agent #accordion2 .feedback1 .col-xs-12{gap:7px!important;}
#select-bus-direct-agent #accordion2 [class*="_18kz"]{padding:8px 15px!important;border-radius:999px!important;}
#select-bus-direct-agent #chatboxx61 h3,#select-bus-direct-agent #chatboxx61 h4{font-size:14px!important;}
#select-bus-direct-agent #chatboxx61 .row{display:flex!important;align-items:flex-start!important;gap:12px!important;margin:0!important;padding:11px 4px!important;border-bottom:1px dashed #eef2f7;}
#select-bus-direct-agent #chatboxx61 .layout11{flex:0 0 72px!important;max-width:72px!important;padding:5px 4px!important;text-align:center!important;background:#f0fdf4!important;border:1px solid #bbf7d0;border-radius:9px!important;color:#166534!important;font-weight:800!important;font-size:11.5px!important;}
#select-bus-direct-agent #chatboxx61 .col-8{flex:1 1 auto!important;max-width:none!important;padding:0!important;}
/* fare + CTA */
/* NB: this used to display:none the .layout52 chevron. It is not decoration --
   it is CI3's price-breakup toggle (priceacc() shows/hides #pricedemo), so
   hiding it left the fare breakdown unreachable. Styled as a chip instead. */
#select-bus-direct-agent #pricedata .layout52{display:block!important;position:relative;z-index:2;}
#select-bus-direct-agent #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-bus-direct-agent #pricedata a#priceaccid::before{content:"Fare break-up";}
#select-bus-direct-agent #pricedata a#priceaccid .arrowdouble{font-size:12px;}
#select-bus-direct-agent #pricedata a#priceaccid:active{background:var(--bb-primary-soft,#fff7ed);}
#select-bus-direct-agent #pricedemo.collapse.show{
  display:block!important;background:#fff;border:1px solid var(--bb-border-light,#f1f5f9);
  border-radius:12px;padding:10px 14px;margin:10px 18px 0;
}
#select-bus-direct-agent #pricedata .round-trip-fare.bg-light{background:linear-gradient(#f8fafc,#f1f5f9)!important;border:1px solid #e8edf3!important;border-radius:14px!important;padding:13px 16px!important;margin:8px 18px 0!important;}
#select-bus-direct-agent #pricedata .round-trip-fare.bg-light .seat-layout-1{font-weight:800!important;font-size:15px!important;color:#0a1525!important;}
#select-bus-direct-agent #pricedata .round-trip-fare.bg-blue{margin:12px 18px 18px!important;padding:15px 16px!important;border-radius:14px!important;box-shadow:0 10px 24px rgba(249,115,22,.32)!important;font-size:15px!important;letter-spacing:.02em;}

/* ============================================================================
   BOOKING-CONFIRMATION (tours · Step 3) — my-hz v2 re-theme (.bb-tbc-page scope)
   CI3 markup/tokens kept verbatim (resendTicketConfirmation, ticket_status
   branches, passenger loop); success.gif → FA check hero, clean cards, green
   AMOUNT-PAID banner, orange CTA.
============================================================================ */
.bb-tbc-page{background:#f6f8fb;}
.bb-tbc-page .col-lg-2{display:none!important;}
.bb-tbc-page .col-lg-8{flex:0 0 100%!important;max-width:780px!important;margin:0 auto!important;}
.bb-tbc-page .confirm-details{background:#fff!important;border:1px solid #e8edf3!important;border-radius:22px!important;box-shadow:0 24px 60px rgba(10,21,37,.10)!important;padding:0 24px 26px!important;overflow:hidden;margin:26px auto!important;position:relative;}
.bb-tbc-page .confirm-details.abcd{border-top:5px solid #16a34a!important;}
.bb-tbc-page .confirm-details.abcd1{border-top:5px solid #ef4444!important;}
.bb-tbc-page img[src*="success.gif"],.bb-tbc-page img[src*="wrong.gif"]{display:none!important;}
.bb-tbc-page .tour-search16{display:flex!important;flex-direction:column;align-items:center;gap:8px;margin:26px 0 6px!important;font-size:24px!important;font-weight:800!important;color:#16a34a!important;animation:none!important;}
.bb-tbc-page .tour-search16::before{content:'\f058';font-family:'Font Awesome 5 Free';font-weight:900;font-size:56px;color:#16a34a;line-height:1;}
.bb-tbc-page .tour-search23{display:flex!important;flex-direction:column;align-items:center;gap:8px;margin:26px 0 6px!important;font-size:24px!important;font-weight:800!important;color:#ef4444!important;animation:none!important;}
.bb-tbc-page .tour-search23::before{content:'\f057';font-family:'Font Awesome 5 Free';font-weight:900;font-size:56px;color:#ef4444;}
.bb-tbc-page .tour-search30{width:0!important;height:0!important;opacity:0!important;}
.bb-tbc-page #send-sms-email{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff7ed;border:1px solid #fed7aa;color:#f97316;margin-left:6px;position:relative;}
.bb-tbc-page #send-sms-email::before{font-family:'Font Awesome 5 Free';font-weight:900;font-size:15px;}
.bb-tbc-page #send-sms-email[onclick*="'0'"]::before{content:'\f7cd';}
.bb-tbc-page #send-sms-email[onclick*="'1'"]::before{content:'\f0e0';}
.bb-tbc-page h4.text-center{font-size:20px!important;font-weight:800!important;color:#0a1525!important;margin:4px 0 8px!important;}
.bb-tbc-page .tour-search29{display:inline-flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a!important;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;}
.bb-tbc-page h6.text-center{font-size:14px!important;color:#334155!important;margin:8px 0!important;}
.bb-tbc-page .green{color:#16a34a!important;font-weight:800!important;}
.bb-tbc-page .red{color:#ef4444!important;}
.bb-tbc-page .brouts1{background:#f8fafc;border:1px solid #eef2f7;border-radius:14px;margin:14px 0!important;padding:14px 6px!important;}
.bb-tbc-page .tour-search9{font-size:11px!important;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8!important;font-weight:700;}
.bb-tbc-page .tour-search15{font-size:13.5px!important;color:#0a1525!important;font-weight:700;}
.bb-tbc-page .border-right1{border-right:1px solid #e8edf3!important;}
.bb-tbc-page .bg-light-4{background:#0a1525!important;color:#fff!important;}
.bb-tbc-page .bg-light-4.brouts1{background:#0a1525!important;color:#fff!important;border:0!important;border-radius:12px 12px 0 0!important;font-size:12px!important;padding:12px 6px!important;margin:14px 0 0!important;}
.bb-tbc-page .bg-light-4.brouts1 b{color:#fff!important;}
.bb-tbc-page .row.text-center:not(.brouts1){padding:9px 6px!important;border-bottom:1px dashed #eef2f7;font-size:13px!important;color:#0a1525!important;}
.bb-tbc-page .bg-light-4.font-weight-600{background:linear-gradient(135deg,#16a34a,#15803d)!important;color:#fff!important;border-radius:14px!important;margin:14px 0!important;padding:16px!important;font-size:15px!important;}
.bb-tbc-page .bg-light-4.font-weight-600 *{color:#fff!important;}
.bb-tbc-page .bg-light-4.font-weight-600 .text-5{font-size:22px!important;font-weight:800!important;}
.bb-tbc-page .tour-search19{background:linear-gradient(135deg,#f97316,#c2410c)!important;border:0!important;border-radius:12px!important;padding:13px 26px!important;font-weight:800!important;color:#fff!important;box-shadow:0 10px 24px rgba(249,115,22,.3);}

/* ============================================================================
   SEAT-LAYOUT "View Seats" flow (#select-busseats modal) — my-hz re-theme.
   Covers all 4 seat-layout partials (bitla / bitla-new / kstdc / tstdc) since
   they all AJAX-inject into this one modal. jquery-seat-charts classes; CI3
   seat logic untouched (selection/fare still fire). Selected = green to match
   the existing on-screen legend; steering-wheel img (.layout19) was 225px.
============================================================================ */
#select-busseats .modal-dialog{max-width:620px!important;}
#select-busseats .modal-content{border-radius:20px!important;overflow:hidden!important;border:0!important;box-shadow:0 30px 80px rgba(10,21,37,.4)!important;}
#select-busseats .modal-header{background:radial-gradient(130% 150% at 100% 0,#1e3a5f 0,#0a1525 60%)!important;padding:15px 18px!important;display:block!important;text-align:center;position:relative;}
#select-busseats .modal-header,#select-busseats .modal-header *{color:#fff!important;}
#select-busseats .modal-header .modal-title,#select-busseats .modal-header b,#select-busseats .modal-header h4{font-size:16px!important;font-weight:800!important;}
#select-busseats .modal-header .close,#select-busseats .modal-header button.close{position:absolute;top:12px;right:14px;color:#fff!important;opacity:.9;background:rgba(255,255,255,.16)!important;border-radius:50%!important;width:30px;height:30px;border:0!important;font-size:15px;}
#select-busseats .layout19{width:36px!important;height:36px!important;opacity:.5!important;}
/* ---- Seat grid: bridge Bitla's seatCharts-* markup onto the my-hz DNA
   .bb-seat look (tour-booking-seat-layout.html): 40x40 rounded square, #d1d5db
   border, ORANGE #f97316 selected, solid-gray #9ca3af booked, pink ladies,
   portrait sleeper. Keeps all CI3 book_ticket logic untouched. ---- */
#select-busseats .seatCharts-container{margin:0 auto!important;}
#select-busseats .seatCharts-cell{width:40px!important;height:40px!important;line-height:37px!important;font-size:11px!important;font-weight:700!important;border-radius:8px!important;margin:4px!important;transition:all .15s!important;box-shadow:none!important;}
#select-busseats .seatCharts-cell.available{background:#fff!important;border:1.5px solid #d1d5db!important;color:#374151!important;cursor:pointer!important;}
#select-busseats .seatCharts-cell.available:hover{border-color:#f97316!important;color:#f97316!important;background:#fff7ed!important;transform:scale(1.06);}
/* Reserved for ladies (available) — pink outline */
#select-busseats .seatCharts-cell.available.ladies{background:#fff!important;border:1.5px solid #ec4899!important;color:#ec4899!important;}
#select-busseats .seatCharts-cell.available.ladies:hover{border-color:#db2777!important;color:#be185d!important;background:#fdf2f8!important;}
/* Booked (unavailable) — solid gray, not selectable */
#select-busseats .seatCharts-cell.unavailable{background:#9ca3af!important;color:#fff!important;border:1.5px solid #9ca3af!important;cursor:not-allowed!important;}
/* Booked by a lady */
#select-busseats .seatCharts-cell.unavailable.ladies{background:#fbcfe8!important;color:#be185d!important;border:1.5px solid #db2777!important;}
/* Sleeper berths — portrait tall */
#select-busseats .seatCharts-cell.sleeper{height:62px!important;line-height:59px!important;border-radius:8px!important;}
/* Selected — orange, wins over every state above */
#select-busseats .seatCharts-cell.selected,#select-busseats .seatCharts-cell.available.selected{background:#f97316!important;color:#fff!important;border:1.5px solid #ea580c!important;}
#select-busseats .seatCharts-cell.seatCharts-space{background:transparent!important;border:0!important;box-shadow:none!important;}
/* Mobile: the CI3 FRONT/steering bar has a fixed desktop width — cap it (and the
   whole seat area) to the modal so the seat sheet never overflows a phone screen. */
@media (max-width:575.98px){
  #select-busseats .front-indicator{width:auto!important;max-width:100%!important;}
  #select-busseats .modal-body,#select-busseats .modal-content{max-width:100vw!important;overflow-x:hidden!important;}
}
#select-busseats .layout13,#select-busseats [class*="legend"]{background:#f8fafc!important;border:1px solid #e8edf3!important;border-radius:12px!important;padding:10px 12px!important;font-size:11.5px!important;}
#select-busseats [class*="_18kz"]{display:inline-flex!important;align-items:center;margin:3px!important;padding:7px 14px!important;border:1.5px solid #e5e7eb!important;border-radius:999px!important;background:#fff!important;cursor:pointer;}
#select-busseats [class*="_18kz"] span{color:#0a1525!important;font-weight:700!important;font-size:12.5px!important;}
#select-busseats [class*="_18kz"].active{border-color:#f97316!important;background:#fff7ed!important;}
#select-busseats [class*="_18kz"].active span{color:#f97316!important;}
#select-busseats .btn-success,#select-busseats .btn-danger,#select-busseats [onclick*="book"],#select-busseats [onclick*="proceed"]{background:linear-gradient(135deg,#f97316,#c2410c)!important;border:0!important;border-radius:12px!important;font-weight:800!important;color:#fff!important;box-shadow:0 8px 20px rgba(249,115,22,.3)!important;}

/* ============================================================
   LEGAL / POLICY PAGES  (privacy-policy, cancellation-policy,
   terms-conditions) — scope: .bb-legal-hero (page-header) +
   .bb-legal-page (#content). Static content, PHP echoes/tokens
   preserved verbatim; presentation-only re-theme.
   ============================================================ */
.page-header.bb-legal-hero{position:static!important;background:linear-gradient(120deg,#0a1525 0%,#132338 100%)!important;padding:36px 0 32px!important;margin:0 0 26px!important;border-bottom:3px solid var(--bb-primary,#f97316);box-shadow:none!important;}
.bb-legal-hero .container{max-width:1140px;}
.bb-legal-hero .headert,.bb-legal-hero h1,.bb-legal-hero h2,.bb-legal-hero .fnsz{color:#fff!important;font-weight:800!important;font-size:27px!important;margin:0!important;letter-spacing:.2px;}
.bb-legal-hero .breadcrumb{background:transparent!important;padding:8px 0 0!important;margin:0!important;}
.bb-legal-hero .breadcrumb li,.bb-legal-hero .breadcrumb li a{color:rgba(255,255,255,.82)!important;font-size:13px!important;text-decoration:none!important;}
.bb-legal-hero .breadcrumb li+li::before{content:"\f105";font-family:"Font Awesome 5 Free";font-weight:900;color:rgba(255,255,255,.45);padding:0 9px;}
.bb-legal-hero .breadcrumb li.active{color:var(--bb-primary,#f97316)!important;font-weight:600;}

#content.bb-legal-page{background:#f6f8fb!important;padding-bottom:44px!important;}
.bb-legal-page .container{max-width:1000px;}
.bb-legal-page .bestbus104a{background:#fff!important;border:1px solid #eef2f7!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(10,21,37,.06)!important;padding:32px 36px!important;margin-top:0!important;}
.bb-legal-page .section-header{margin-bottom:24px!important;border:0!important;}
.bb-legal-page .section-header h4,.bb-legal-page .headdingcolor{color:#0a1525!important;font-weight:800!important;font-size:23px!important;letter-spacing:.2px;}
.bb-legal-page .section-header .line.lined{display:inline-block!important;width:66px!important;height:3px!important;background:var(--bb-primary,#f97316)!important;border-radius:2px!important;margin:12px auto 8px!important;float:none!important;}
.bb-legal-page .section-header .carsfont{color:#64748b!important;font-size:13.5px!important;}

/* CMS body content (privacy/cancellation description + terms accordion bodies) */
.bb-legal-page .company-1,.bb-legal-page .card-body{color:#334155!important;font-size:15px!important;line-height:1.85!important;}
.bb-legal-page .company-1 p,.bb-legal-page .card-body p{margin-bottom:14px!important;}
.bb-legal-page .company-1 h1,.bb-legal-page .company-1 h2,.bb-legal-page .company-1 h3,.bb-legal-page .company-1 h4,.bb-legal-page .company-1 h5,.bb-legal-page .card-body h1,.bb-legal-page .card-body h2,.bb-legal-page .card-body h3,.bb-legal-page .card-body h4{color:#0a1525!important;font-weight:700!important;margin:20px 0 10px!important;font-size:17px!important;}
.bb-legal-page .company-1 ul,.bb-legal-page .company-1 ol,.bb-legal-page .card-body ul,.bb-legal-page .card-body ol{padding-left:22px!important;margin-bottom:14px!important;}
.bb-legal-page .company-1 li,.bb-legal-page .card-body li{margin-bottom:7px!important;}
.bb-legal-page .company-1 a,.bb-legal-page .card-body a{color:var(--bb-primary-dark,#c2410c)!important;font-weight:600;}
.bb-legal-page .company-1 table,.bb-legal-page .card-body table{width:100%!important;border-collapse:collapse!important;margin:8px 0 16px!important;}
.bb-legal-page .company-1 td,.bb-legal-page .company-1 th,.bb-legal-page .card-body td,.bb-legal-page .card-body th{border:1px solid #e6ebf1!important;padding:9px 12px!important;font-size:14px!important;}
.bb-legal-page .company-1 th,.bb-legal-page .card-body th{background:#f8fafc!important;color:#0a1525!important;}
.bb-legal-page hr{border-color:#eef2f7!important;margin:26px 0!important;}

/* Contact-care CTA */
.bb-legal-page .text-4{color:#0a1525!important;font-weight:600!important;}
.bb-legal-page .btn-success,.bb-legal-page .btn-primary{background:linear-gradient(135deg,#f97316,#c2410c)!important;border:0!important;border-radius:999px!important;font-weight:700!important;color:#fff!important;padding:12px 28px!important;box-shadow:0 8px 20px rgba(249,115,22,.28)!important;transition:.15s;}
.bb-legal-page .btn-success:hover,.bb-legal-page .btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);}

/* terms-conditions accordion */
.bb-legal-page #accordion .card,.bb-legal-page .card{border:1px solid #eef2f7!important;border-radius:12px!important;margin-bottom:12px!important;overflow:hidden!important;box-shadow:none!important;}
.bb-legal-page .card-header{background:#f8fafc!important;border:0!important;padding:0!important;border-bottom:1px solid #eef2f7!important;}
.bb-legal-page .card-header h5,.bb-legal-page .card-header .mb-0{margin:0!important;}
.bb-legal-page .card-header a{display:block!important;padding:15px 46px 15px 18px!important;color:#0a1525!important;font-weight:700!important;font-size:15px!important;text-decoration:none!important;position:relative;}
.bb-legal-page .card-header a::after{content:"\f107";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--bb-primary,#f97316);transition:.2s;}
.bb-legal-page .card-header a[aria-expanded="true"]::after{transform:translateY(-50%) rotate(180deg);}
.bb-legal-page .card-body{background:#fff!important;padding:16px 18px!important;}

/* content-page forms (contact-us, careers) */
.bb-legal-page .form-control,.bb-legal-page .custom-select,.bb-legal-page textarea{border:1.5px solid #e6ebf1!important;border-radius:10px!important;padding:11px 14px!important;font-size:14.5px!important;color:#0a1525!important;background:#fff!important;box-shadow:none!important;transition:.15s;height:auto!important;}
.bb-legal-page .form-control::placeholder,.bb-legal-page textarea::placeholder{color:#94a3b8!important;}
.bb-legal-page .form-control:focus,.bb-legal-page .custom-select:focus,.bb-legal-page textarea:focus{border-color:var(--bb-primary,#f97316)!important;box-shadow:0 0 0 3px rgba(249,115,22,.12)!important;outline:0!important;}
.bb-legal-page textarea,.bb-legal-page textarea.textare2{min-height:110px!important;resize:vertical;}
.bb-legal-page .form-group{margin-bottom:16px!important;}
.bb-legal-page input[type="file"]{border:1.5px dashed #cbd5e1!important;border-radius:10px!important;padding:10px 12px!important;width:100%;background:#f8fafc!important;font-size:13.5px;}
.bb-legal-page .btn-block{display:block!important;width:100%!important;}
.bb-legal-page h3{color:#0a1525!important;font-weight:700!important;font-size:16.5px!important;margin:16px 0 6px!important;}

/* ============================================================
   BUSES-LIST (bus search results) — my-hz skin for the CI3
   bus search-results core. Scope roots: .bb-bl-hero (sticky top
   From→To/date/filter summary bar) + #content.bb-bl-page
   (date-strip, availability bar, bus cards, empty state). The
   slide-out filter panels (#filtersidebar/#myNav/#myNav1-3), the
   mobile filter bar (.fixbtnbottom) and the modals (#modify_search,
   #myJDModal, #via_cities, #safety-carona) live OUTSIDE both roots,
   so they are themed by their own ids. Presentation-only: no id,
   onclick, name, data-* or PHP is touched. #select-busseats is left
   to its existing seat-layout theme above.
   ============================================================ */

/* ---- this bootstrap build lacks col-sm-* (md/lg only). The bus
   card + empty-state rows rely on col-sm-6/3 (with col-xs-* fallbacks)
   — define the needed sm widths, scoped to the page. ---- */
@media (min-width:576px),
/* ============================================================
   BUSES-LIST (bus search results) — my-hz skin for the CI3
   bus search-results core. Scope roots: .bb-bl-hero (sticky top
   From→To/date/filter summary bar) + #content.bb-bl-page
   (date-strip, availability bar, bus cards, empty state). The
   slide-out filter panels (#filtersidebar/#myNav/#myNav1-3), the
   mobile filter bar (.fixbtnbottom) and the modals (#modify_search,
   #myJDModal1, #via_cities, #safety-carona) live OUTSIDE both roots,
   so they are themed by their own ids. Presentation-only: no id,
   onclick, name, data-* or PHP is touched. #select-busseats is left
   to its existing seat-layout theme above.
   ============================================================ */

/* ---- this bootstrap build lacks col-sm-* (md/lg only). The bus
   card + empty-state rows rely on col-sm-6/3 (with col-xs-* fallbacks)
   — define the needed sm widths, scoped to the page. ---- */
@media (min-width:576px){
  .bb-bl-page .row>.col-sm-3{flex:0 0 auto;width:25%;max-width:25%;}
  .bb-bl-page .row>.col-sm-6{flex:0 0 auto;width:50%;max-width:50%;}
  .bb-bl-page .row>.col-sm-12{flex:0 0 auto;width:100%;max-width:100%;}
}

/* ================= sticky top summary bar (.bb-bl-hero) ================= */
.page-header.bb-bl-hero,section.bb-bl-hero{
  background:linear-gradient(120deg,#0a1525 0%,#132338 100%)!important;
  padding:12px 0!important;margin:0!important;border:0!important;
  border-bottom:2px solid var(--bb-primary,#f97316)!important;
  box-shadow:0 6px 20px rgba(10,21,37,.18)!important;
}
.bb-bl-hero .vma-17{align-items:center!important;}
.bb-bl-hero a.white,.bb-bl-hero .white,.bb-bl-hero a.vma-18{color:#fff!important;text-decoration:none!important;}
.bb-bl-hero a.vma-18 b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800!important;font-size:15px!important;letter-spacing:.2px;}
.bb-bl-hero a.vma-18 .fa,.bb-bl-hero a.vma-18 i{color:var(--bb-primary,#f97316)!important;}
.bb-bl-hero .editclr-v{color:rgba(255,255,255,.7)!important;font-size:12px!important;margin-left:4px;}
.bb-bl-hero #journey_date_display{font-weight:700!important;}
/* FILTER (orange primary) + N Buses (subtle outline) — both were red bus3 */
.bb-bl-hero .btn.bus3{
  border-radius:var(--bb-radius-pill,999px)!important;font-weight:800!important;
  font-size:12.5px!important;padding:8px 14px!important;height:auto!important;
  box-shadow:none!important;transition:.15s;text-transform:none!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
}
.bb-bl-hero .btn.bus3[onclick*="openNav"]{
  background:linear-gradient(135deg,#f97316,#c2410c)!important;border:0!important;color:#fff!important;
  box-shadow:0 6px 16px rgba(249,115,22,.3)!important;margin-right:6px;
}
.bb-bl-hero .btn.bus3[onclick*="openNav"]:hover{filter:brightness(1.06);}
.bb-bl-hero .btn.bus3:not([onclick]){
  background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.28)!important;color:#fff!important;
}
.bb-bl-hero .btn.bus3 .available_buses{font-weight:800!important;color:var(--bb-primary,#f97316)!important;}

/* ===================== page body (#content.bb-bl-page) ===================== */
#content.bb-bl-page{background:#f6f8fb!important;padding-bottom:34px!important;}
.bb-bl-page .container{max-width:1140px;}

/* ---- date-strip nav (#date_nav / .datenav / .arrows) ---- */
.bb-bl-page .mbtp{
  background:#fff!important;border:1px solid #eef2f7!important;
  border-radius:var(--bb-radius-lg,16px)!important;
  box-shadow:0 10px 30px rgba(10,21,37,.06)!important;
  padding:10px 8px!important;margin-top:18px!important;margin-bottom:14px!important;overflow:hidden;
}
.bb-bl-page .mbtp .bg-light,.bb-bl-page .mbtp .container{background:transparent!important;padding-left:0!important;padding-right:0!important;}
.bb-bl-page .mbtp .bdrtpl1.bdrtpr1{align-items:center!important;margin:0!important;}
.bb-bl-page #date_nav,.bb-bl-page .datenav .overflowdiv{
  display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px;
  padding:4px 2px!important;scrollbar-width:thin;border:0!important;
}
.bb-bl-page .datenav .layout64,.bb-bl-page #date_nav a.layout64{
  flex:0 0 auto!important;border:1.5px solid #e5e7eb!important;
  border-radius:var(--bb-radius-sm,8px)!important;padding:7px 12px!important;margin:0!important;
  background:#fff!important;color:var(--bb-dark,#0a1525)!important;font-weight:700!important;
  font-size:12px!important;line-height:1.25;white-space:nowrap;box-shadow:none!important;transition:.15s;
}
.bb-bl-page .datenav .layout64:hover,.bb-bl-page #date_nav a.layout64:hover{border-color:var(--bb-primary,#f97316)!important;color:var(--bb-primary,#f97316)!important;}
.bb-bl-page .datenav .layout64.active,.bb-bl-page #date_nav a.layout64.active{
  background:linear-gradient(135deg,#f97316,#c2410c)!important;color:#fff!important;border-color:var(--bb-primary,#f97316)!important;box-shadow:0 6px 14px rgba(249,115,22,.28)!important;
}
.bb-bl-page .arrows{
  display:flex!important;align-items:center;justify-content:center;height:38px!important;margin:0!important;
  background:#f1f5f9!important;border-radius:var(--bb-radius-sm,8px)!important;
  color:var(--bb-primary,#f97316)!important;border:0!important;
}

/* ---- availability + sort bar (seats available / Sort By Dep Time / Bus Fare) ---- */
.bb-bl-page .availabletab{
  background:#0a1525!important;border-radius:12px!important;border:0!important;
  padding:10px 6px!important;margin:0 0 14px!important;
}
.bb-bl-page .availabletab .vma-12{margin:0!important;align-items:center!important;}
.bb-bl-page .availabletab .vma-11,.bb-bl-page .availabletab .vma-11 b{color:#fff!important;font-size:13.5px!important;font-weight:700!important;}
.bb-bl-page .availabletab .available_seats,.bb-bl-page .availabletab .available_buses{color:var(--bb-primary,#f97316)!important;font-weight:800!important;}
.bb-bl-page .availabletab a.vma-13,.bb-bl-page .availabletab a.white{color:rgba(255,255,255,.9)!important;font-size:12.5px!important;font-weight:700!important;text-decoration:none!important;}
.bb-bl-page .availabletab a.vma-13:hover{color:var(--bb-primary,#f97316)!important;}
.bb-bl-page .availabletab a.vma-13 i{color:var(--bb-primary,#f97316)!important;}

/* =========================== BUS CARDS =========================== */
.bb-bl-page .layout61{
  background:#fff!important;border:1px solid #eef2f7!important;
  border-radius:var(--bb-radius-lg,16px)!important;
  box-shadow:0 10px 30px rgba(10,21,37,.06)!important;
  margin-top:16px!important;overflow:hidden;transition:box-shadow .18s,transform .18s;
}
.bb-bl-page .layout61:hover{box-shadow:0 16px 40px rgba(10,21,37,.10)!important;transform:translateY(-2px);}
.bb-bl-page .layout61 .layout71{padding:16px 18px!important;}
.bb-bl-page .layout61 .border-rightbus{border-right:1px solid #eef2f7!important;}
.bb-bl-page .layout61 .border-rightbus1{border-right:1px solid #eef2f7!important;}
@media (max-width:575.98px){
  .bb-bl-page .layout61 .border-rightbus,.bb-bl-page .layout61 .border-rightbus1{border-right:0!important;}
  .bb-bl-page .layout61 .layout71{padding:14px!important;}
}
/* hide the decorative shadow png under each card (looked stray on white bg) */
.bb-bl-page .avbus{display:none!important;}

/* number badge (bus-type_option1 + triangle) → tidy orange pill */
.bb-bl-page .bus-type-block1{position:relative;display:inline-block;margin-bottom:2px;}
.bb-bl-page .bus-type_option1{
  display:inline-flex!important;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px!important;
  background:var(--bb-primary-soft,#fff7ed)!important;color:var(--bb-primary-dark,#c2410c)!important;
  font-weight:800!important;font-size:11px!important;line-height:1;border:1px solid #ffd9b8;
}
.bb-bl-page .triangle-topleft{display:none!important;}

/* operator name + Via Cities pill */
.bb-bl-page .operator-name{font-family:'Plus Jakarta Sans',sans-serif;}
.bb-bl-page .operator-name b{color:var(--bb-dark,#0a1525)!important;font-weight:800!important;font-size:15px!important;}
.bb-bl-page .operator-name .fa-bus{color:var(--bb-primary,#f97316)!important;}
.bb-bl-page .viarouts-1{
  display:inline-block;margin-top:4px;padding:2px 10px!important;border-radius:999px!important;
  background:var(--bb-primary-soft,#fff7ed)!important;border:1px solid #ffe1c4!important;
}
.bb-bl-page .viarouts-1 b{color:var(--bb-primary-dark,#c2410c)!important;font-weight:700!important;font-size:11px!important;}

/* bus type + service no (muted small) */
.bb-bl-page .layout61 .text-1.text-muted,.bb-bl-page .layout61 .bbest-1{color:#64748b!important;font-size:11.5px!important;line-height:1.5!important;}
.bb-bl-page .vr-1{max-width:60px;height:auto;opacity:.5;}

/* time-info — dark bold times, muted duration */
.bb-bl-page .time-info .text-3.black,.bb-bl-page .time-info .text-2.black{color:var(--bb-dark,#0a1525)!important;font-weight:800!important;font-size:15px!important;}
.bb-bl-page .time-info small,.bb-bl-page .time-info .text-muted{color:#94a3b8!important;font-size:11px!important;}
.bb-bl-page .time-info .duration{color:#64748b!important;}

/* Safe-T Bus / Social distancing chips */
.bb-bl-page .social-d a,.bb-bl-page .social-d1{
  display:inline-block;margin-top:6px;padding:3px 10px!important;border-radius:999px!important;
  background:#f1f5f9!important;color:#475569!important;font-size:10.5px!important;font-weight:700!important;
  border:1px solid #e6ebf1!important;text-decoration:none!important;line-height:1.4;
}
.bb-bl-page .social-d a .fa,.bb-bl-page .social-d1 .fa{color:#16a34a!important;}

/* point links (Boarding / Dropping points / Cancellation Charges) */
.bb-bl-page .layout74{
  color:var(--bb-primary-dark,#c2410c)!important;font-size:12px!important;font-weight:700!important;
  text-decoration:none!important;display:inline-block;padding:2px 0;transition:.12s;
}
.bb-bl-page .layout74:hover{color:var(--bb-primary,#f97316)!important;text-decoration:underline!important;}
.bb-bl-page .bbestbdc-1{margin-bottom:4px!important;}

/* price block — strike original muted + green live fare */
.bb-bl-page .busamt .bbest-4{color:#94a3b8!important;font-size:12.5px!important;font-weight:600!important;}
.bb-bl-page .busamt strike{color:#94a3b8!important;}
.bb-bl-page .busamt .green.fontmon-16,.bb-bl-page .busamt .green.fontmon-16 b{color:#16a34a!important;font-weight:800!important;font-size:19px!important;}

/* View Seats buttons (both .bbest-5 and .bookview.vs1) → orange gradient pill */
.bb-bl-page a.busbtn1-600.bbest-5,.bb-bl-page a.busbtn1-600.bookview,.bb-bl-page a.busbtn1-600.vs1{
  display:inline-block!important;background:linear-gradient(135deg,#f97316,#c2410c)!important;border:0!important;
  border-radius:999px!important;color:#fff!important;font-weight:800!important;font-size:13px!important;
  padding:9px 22px!important;box-shadow:0 8px 20px rgba(249,115,22,.3)!important;transition:.15s;text-decoration:none!important;
}
.bb-bl-page a.busbtn1-600 .bookview,.bb-bl-page a.busbtn1-600 b,.bb-bl-page a.busbtn1-600 span{color:#fff!important;}
.bb-bl-page a.busbtn1-600:hover{filter:brightness(1.06);transform:translateY(-1px);}
/* Soldout / disabled → muted grey */
.bb-bl-page .layout61 .btn-danger.disabled,.bb-bl-page .layout61 .btn-danger[disabled]{
  background:#eef2f7!important;border:0!important;color:#94a3b8!important;border-radius:999px!important;
  font-weight:700!important;padding:8px 20px!important;box-shadow:none!important;opacity:1!important;
}
.bb-bl-page .busamt .bold.red{color:#ef4444!important;font-size:13px!important;}

/* "N seats available" (small green) */
.bb-bl-page .desktop-seats,.bb-bl-page .desktop-seats.black{color:#16a34a!important;font-size:11.5px!important;font-weight:700!important;display:inline-block;margin-top:8px;}

/* ---- empty state ("No Buses found" + route suggestion tables) ---- */
.bb-bl-page .tour-search23{color:#ef4444!important;font-weight:800!important;font-size:18px!important;animation:none!important;font-family:'Plus Jakarta Sans',sans-serif;}
.bb-bl-page .abcd,.bb-bl-page .bestbus104a{background:#fff!important;border:1px solid #eef2f7!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(10,21,37,.06)!important;}
.bb-bl-page .successeffect,.bb-bl-page .vspl{max-width:120px;height:auto;margin:6px auto;display:block;opacity:.9;}
.bb-bl-page .headdingcolor{color:var(--bb-dark,#0a1525)!important;font-weight:800!important;}
.bb-bl-page .lined{display:inline-block!important;width:60px!important;height:3px!important;background:var(--bb-primary,#f97316)!important;border-radius:2px!important;margin:8px auto!important;float:none!important;}
.bb-bl-page .busbtnv-600{
  display:inline-block!important;background:linear-gradient(135deg,#f97316,#c2410c)!important;border:0!important;
  border-radius:999px!important;color:#fff!important;font-weight:700!important;padding:8px 18px!important;text-decoration:none!important;box-shadow:0 6px 16px rgba(249,115,22,.28)!important;
}
.bb-bl-page .busbtnv-600 *{color:#fff!important;}

/* mobile sticky "Sort & Filter" bar */
.fixbtnbottom{z-index:1045;}
.fixbtnbottom .bfixed.applyfilter{
  display:block;background:linear-gradient(135deg,#f97316,#c2410c)!important;color:#fff!important;
  padding:12px!important;font-weight:800!important;border:0!important;box-shadow:0 -6px 18px rgba(10,21,37,.14);
}
.fixbtnbottom .bfixed.applyfilter .blink,.fixbtnbottom .bfixed.applyfilter .fa{color:#fff!important;animation:none!important;}

/* ============ slide-out filter panels (.sidenavv: #filtersidebar + #myNav[1-3]) ============ */
#filtersidebar.sidenavv,#myNav.sidenavv,#myNav1.sidenavv,#myNav2.sidenavv,#myNav3.sidenavv{background:#fff!important;box-shadow:0 0 40px rgba(10,21,37,.18)!important;}
#filtersidebar .deal-4,#myNav .modalheader1,#myNav .deal-4{
  background:linear-gradient(120deg,#0a1525,#132338)!important;color:#fff!important;padding:16px 18px!important;border:0!important;
}
#filtersidebar .deal-4 b,#filtersidebar .deal-4 i,#myNav .modalheader1 b,#myNav .modalheader1 i,#myNav .modalheader1 a{color:#fff!important;}
#myNav .recent-1 b,#filtersidebar .recent-1 b{color:var(--bb-dark,#0a1525)!important;}
#myNav .modal-body b,#myNav .modal-body .mb-10 b{color:var(--bb-dark,#0a1525)!important;}
#myNav .modal-body .fa,#myNav .mb-10 .fa{color:var(--bb-primary,#f97316)!important;}
#myNav .custom-control-label,#filtersidebar label,#filtersidebar .select_city{color:#334155!important;}
#myNav .custom-control-input:checked~.custom-control-label::before{background:var(--bb-primary,#f97316)!important;border-color:var(--bb-primary,#f97316)!important;}
#filtersidebar .select_city{color:var(--bb-primary-dark,#c2410c)!important;text-decoration:none!important;font-weight:600;}
#filtersidebar .nav-pills .nav-link{border:1px solid #e5e7eb!important;border-radius:999px!important;color:var(--bb-dark,#0a1525)!important;font-weight:700;margin:2px;padding:6px 14px!important;background:#fff!important;}
#filtersidebar .nav-pills .nav-link.active{background:var(--bb-primary,#f97316)!important;border-color:var(--bb-primary,#f97316)!important;color:#fff!important;}
#filtersidebar .form-control,#myNav .form-control{border:1.5px solid #e5e7eb!important;border-radius:10px!important;}
#filtersidebar .form-control:focus,#myNav .form-control:focus{border-color:var(--bb-primary,#f97316)!important;box-shadow:0 0 0 3px rgba(249,115,22,.12)!important;}
/* footer RESET / APPLY buttons */
#myNav .applyfilter.btn-dark{background:#e2e8f0!important;color:#0a1525!important;border:0!important;font-weight:800!important;}
#myNav .applyfilter.btn-danger{background:linear-gradient(135deg,#f97316,#c2410c)!important;border:0!important;color:#fff!important;font-weight:800!important;}

/* ==================== modals (#modify_search / #via_cities / #safety-carona) ==================== */
#modify_search .modal-content,#via_cities .modal-content,#safety-carona .modal-content{
  border:0!important;border-radius:var(--bb-radius-lg,16px)!important;overflow:hidden;
  box-shadow:0 16px 36px rgba(10,21,37,.14)!important;
}
#modify_search .modal-header,#via_cities .modal-header,#safety-carona .modal-header,
#modify_search .model-height,#via_cities .modelh{background:linear-gradient(120deg,#0a1525,#132338)!important;border:0!important;}
#modify_search .modal-title,#via_cities .modal-title,#safety-carona .modal-title,
#modify_search .modal-header .white,#via_cities .viar,#modify_search .modal-header .close,#via_cities .close,#safety-carona .close{color:#fff!important;}
#modify_search .modal-body .form-control{border:1.5px solid #e5e7eb!important;border-radius:10px!important;padding:11px 14px 11px 36px!important;}
#modify_search .modal-body .form-control:focus{border-color:var(--bb-primary,#f97316)!important;box-shadow:0 0 0 3px rgba(249,115,22,.12)!important;}
#modify_search .icon-inside{color:var(--bb-primary,#f97316)!important;}
#modify_search .btn-primary.button{background:linear-gradient(135deg,#f97316,#c2410c)!important;border:0!important;border-radius:999px!important;font-weight:800!important;padding:12px!important;box-shadow:0 8px 20px rgba(249,115,22,.3)!important;}
#modify_search .btn-primary.button:hover{filter:brightness(1.06);}

/* ============================================================
   RAMOJI-FILM-CITY + WONDERLA blog modules — my-hz skin.
   Two views per module share the generic content-page theme:
   - ARTICLE view (…/details/<slug>): fits .bb-legal-hero (navy
     page-header) + .bb-legal-page (.bestbus104a cards, CMS type,
     owl carousel, sidebar). Only light carousel/sidebar tweaks
     added below, scoped under .bb-legal-page.
   - LISTING view (index): a links/grid layout (NO page-header,
     NO .bestbus104a). Scoped under .bb-blog-list (which also
     carries .bb-legal-page so the shared section-header + CMS
     type theme applies). Blog-card grid + Popular/Highlights
     sidebar get their own rules here.
   Presentation only — no id/onclick/name/data-*/PHP touched.
   ============================================================ */

/* ---- ARTICLE view: rounded owl-carousel banner images + tidy sidebar ---- */
.bb-legal-page .owl-carousel .item img.banhight,
.bb-legal-page img.image-radius-15{
  border-radius:var(--bb-radius-lg,16px)!important;width:100%!important;height:auto!important;
  object-fit:cover;box-shadow:0 10px 30px rgba(10,21,37,.08)!important;
}
.bb-legal-page .owl-carousel{border-radius:var(--bb-radius-lg,16px)!important;overflow:hidden;}
/* hide the stray decorative shadow PNGs the CMS sprinkles around */
.bb-legal-page img.blogshadow,.bb-legal-page img.blogshadow1,.bb-legal-page img.blogshadowander,
.bb-legal-page img.bus4,.bb-legal-page img.shadow-7,.bb-legal-page img.vspl,
.bb-legal-page img.vspl9,.bb-legal-page img.newtour91a,.bb-legal-page img.newtour91,
.bb-legal-page img.newtour1l{display:none!important;}
/* sidebar cards (Post Highlights / Related Packages) — white rounded like bestbus104a */
.bb-legal-page .bestbus104{
  background:#fff!important;border:1px solid #eef2f7!important;border-radius:var(--bb-radius-lg,16px)!important;
  box-shadow:0 10px 30px rgba(10,21,37,.06)!important;padding:22px 20px!important;
}
.bb-legal-page .bestbus104 .headdingcolor{color:var(--bb-dark,#0a1525)!important;font-weight:800!important;font-size:18px!important;}
.bb-legal-page .bestbus104 .line{display:inline-block!important;width:60px!important;height:3px!important;background:var(--bb-primary,#f97316)!important;border-radius:2px!important;margin:8px auto!important;float:none!important;}
/* Post Highlights nav list — pill rows, active = orange soft */
.bb-legal-page ul.list-unstyled li.high_nav,.bb-legal-page ul.list-unstyled li.mb-2{list-style:none!important;}
.bb-legal-page .high_nav a.subplacess,.bb-legal-page a.subplacess{
  color:#334155!important;font-weight:600!important;font-size:14px!important;text-decoration:none!important;transition:.12s;
}
.bb-legal-page .high_nav.back-ht a.subplacess,.bb-legal-page .high_nav:hover a.subplacess,
.bb-legal-page a.subplacess:hover{color:var(--bb-primary-dark,#c2410c)!important;}
.bb-legal-page .hr12,.bb-legal-page .bestbus104 hr{border-color:#eef2f7!important;margin:8px 0!important;}
/* Related-package mini card in sidebar */
.bb-legal-page .layout43blog{background:var(--bb-primary,#f97316)!important;color:#fff!important;border-radius:0 0 10px 0!important;font-size:11px!important;font-weight:800!important;padding:3px 9px!important;}
.bb-legal-page .amtbus{color:#16a34a!important;font-weight:800!important;}
.bb-legal-page .footer-btn{background:linear-gradient(135deg,#f97316,#c2410c)!important;color:#fff!important;border-radius:999px!important;font-weight:800!important;box-shadow:0 8px 20px rgba(249,115,22,.3)!important;}

/* ================= LISTING view (.bb-blog-list) ================= */
/* intro + category section-header title + subtitle */
.bb-blog-list .section-header .headdingcolor{color:var(--bb-dark,#0a1525)!important;font-weight:800!important;font-size:23px!important;letter-spacing:.2px;}
.bb-blog-list .section-header .line{display:inline-block!important;width:66px!important;height:3px!important;background:var(--bb-primary,#f97316)!important;border-radius:2px!important;margin:12px auto 8px!important;float:none!important;}
.bb-blog-list .section-header .carsfont{color:#64748b!important;font-size:13.5px!important;}
/* drop the section-level grey card shell CI3 gives each category block */
.bb-blog-list.section{background:transparent!important;box-shadow:none!important;padding:14px 0!important;}
/* ---- blog card grid (.card.abcd) ---- */
.bb-blog-list .item.bbus15 .card.abcd,.bb-blog-list .card.rounded.abcd{
  background:#fff!important;border:1px solid #eef2f7!important;border-radius:var(--bb-radius-lg,16px)!important;
  box-shadow:0 10px 30px rgba(10,21,37,.06)!important;overflow:hidden!important;transition:box-shadow .18s,transform .18s;height:100%;
}
.bb-blog-list a:hover .card.abcd{box-shadow:0 16px 40px rgba(10,21,37,.10)!important;transform:translateY(-3px);}
.bb-blog-list .card.abcd .card-img-top.imground{border-radius:0!important;width:100%!important;height:208px!important;object-fit:cover!important;}
.bb-blog-list .card.abcd .card-body{padding:16px 18px!important;background:#fff!important;}
.bb-blog-list .card.abcd .card-body h5{color:var(--bb-dark,#0a1525)!important;font-weight:800!important;font-size:15.5px!important;line-height:1.4!important;margin:0 0 12px!important;min-height:44px;}
/* View More button → orange pill */
.bb-blog-list .btn.cabbtn1-600.viewmoreb1,.bb-blog-list .btn.cabbtn1-600{
  display:inline-block!important;background:linear-gradient(135deg,#f97316,#c2410c)!important;border:0!important;
  border-radius:999px!important;color:#fff!important;font-weight:700!important;font-size:13px!important;
  padding:8px 20px!important;box-shadow:0 6px 16px rgba(249,115,22,.28)!important;transition:.15s;
}
.bb-blog-list .btn.cabbtn1-600 span{color:#fff!important;}
.bb-blog-list .btn.cabbtn1-600:hover{filter:brightness(1.06);transform:translateY(-1px);}
/* card link should not underline the whole card */
.bb-blog-list a{text-decoration:none!important;}

/* ===== SEO-landing LISTING link-lists (popular-cities / travel-operators /
   bus-routes index): A-Z letter filter pills + city/route/operator sitemap
   links + thin separators. Scoped to .bb-legal-page (the listing #content
   carries .bb-legal-page + .bb-blog-list; the single-* detail pages carry
   .bb-legal-page and reuse a.sitemap_link, so both get themed here). Base
   design: navy pills (custom.css a.letter_wise_link) + blue links — retheme
   to the my-hz navy/orange system. ===== */
.bb-legal-page .atozheight{line-height:2.4!important;}
.bb-legal-page a.letter_wise_link.radiusatoz,
.bb-legal-page a.letter_wise_link{
  display:inline-block!important;background:#0a1525!important;color:#fff!important;
  border:0!important;border-radius:999px!important;font-weight:700!important;
  font-size:13px!important;padding:6px 13px!important;margin:3px!important;
  line-height:1.2!important;box-shadow:0 4px 12px rgba(10,21,37,.14)!important;transition:.15s;
}
.bb-legal-page a.letter_wise_link.radiusatoz:hover,
.bb-legal-page a.letter_wise_link:hover,
.bb-legal-page a.letter_wise_link.active{
  background:linear-gradient(135deg,#f97316,#c2410c)!important;color:#fff!important;
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(249,115,22,.28)!important;
}
.bb-legal-page a.sitemap_link{
  color:#0a1525!important;font-weight:600!important;font-size:15px!important;
  text-decoration:none!important;transition:.12s;
}
.bb-legal-page a.sitemap_link:hover{color:var(--bb-primary-dark,#c2410c)!important;}
.bb-legal-page hr.citiestopbtm{border-color:#eef2f7!important;margin:6px 0!important;}

/* ================================================================
   Tour-details fare-card inline panel (#tpd-incl-* / .bb-tbr-vcard-panel)
   content was raw CMS HTML: oversized itinerary <h3> headings + bare
   <ul><li> inclusion/exclusion lists with no icons — looked unstyled.
   Style it to the my-hz look (calm headings, tidy lists, per-item
   green-check / red-cross icons matching the .bb-incl-list DNA).
   ================================================================ */
.bb-tbr-vcard-panel{padding:14px 16px!important;background:#fff;border-radius:12px;border:1px solid var(--bb-border-light,#eef2f7);margin-top:8px;}
.bb-tbr-vcard-panel .row.g-3>[class*=col-]{margin-bottom:6px;}
.bb-tbr-vcard-panel h6{font-size:13.5px!important;font-weight:800!important;margin:0 0 10px!important;display:flex;align-items:center;gap:8px;}
.bb-tbr-vcard-panel h6:first-child{margin-top:0!important;}
.bb-tbr-vcard-panel h3,.bb-tbr-vcard-panel .text-2{font-size:13.5px!important;font-weight:800!important;color:var(--bb-text,#0a1525)!important;margin:8px 0 4px!important;}
.bb-tbr-vcard-panel ul{list-style:none!important;padding:0!important;margin:0 0 8px!important;}
.bb-tbr-vcard-panel ul:not(.bb-tbr-pt-list) li{position:relative;padding:5px 0 5px 22px!important;font-size:13px;line-height:1.5;color:var(--bb-text,#0a1525);border:0!important;}
.bb-tbr-vcard-panel ul:not(.bb-tbr-pt-list) li::before{content:'\f105';font-family:'Font Awesome 5 Free';font-weight:900;position:absolute;left:2px;top:6px;font-size:11px;color:var(--bb-primary,#f97316);}
/* Inclusions column → green ticks · Exclusions column → red crosses */
.bb-tbr-vcard-panel .col-md-6:has(.text-success) ul:not(.bb-tbr-pt-list) li::before{content:'\f058';color:var(--bb-success,#16a34a);}
.bb-tbr-vcard-panel .col-md-6:has(.text-danger) ul:not(.bb-tbr-pt-list) li::before{content:'\f057';color:var(--bb-danger,#dc2626);}
.bb-tbr-vcard-panel .col-md-6:has(.text-success),.bb-tbr-vcard-panel .col-md-6:has(.text-danger){background:#f8fafc;border-radius:10px;padding:10px 14px;}

/* ============ DNA parity: booking pages (tour regular / seat-layout / car) ============ */
/* Overlay must paint BELOW the Bootstrap modal (z 1055): the CI3 drawers live INSIDE
   the modal's stacking context, so a body-level overlay set above the modal ends up
   covering the drawer and swallowing its taps (mobile bug: "boarding point covered by
   a layer, closes on tap"). Below-modal it still dims the page behind. */
#bslSidepanelOverlay.is-open{z-index:1052;}
/* Seat-layout modal chrome: DNA .bb-seat-modal-body is a flex grid on the reference page;
   inside the CI3 fragment keep the designed surface (bg/padding) but let the original
   block flow of .bus-details/tab panes stand. */
.bb-bsl .bb-seat-modal-body{display:block;}
/* DNA utility defusals scoped to the CI3 seat fragment (tokens keep their design meaning
   in the reference layout; here they must not fight the CI3 inline geometry). */
.bb-bsl .bb-seat-pts-list{max-height:none;}
.bb-bsl .bb-u1qrbbcg.bb-u1qrbbcg.bb-u1qrbbcg{display:inline-block;margin-bottom:0;font-size:1.05rem;vertical-align:middle;}
.bb-bsl .bb-seat-selected-list{min-height:0;}
/* Seat-fragment legend: DNA dots win over the scoped legacy swatch box */
.bb-bsl .bb-seat-legend-item .bb-sl-dot{width:14px;height:14px;border-radius:50%;}
/* White header text inside the dark DNA seat-modal header */
.bb-bsl .bb-seat-modal-hdr .modal-title{color:#fff;}
.bb-bsl .bb-seat-modal-hdr .modal-title .layout1{color:rgba(255,255,255,.75);}
.bb-bsl .bb-seat-modal-hdr .close .close-1,.bb-bsl .bb-seat-modal-hdr .close{color:#fff;opacity:1;}
/* DNA front-bar inside the CI3 fragment: keep FRONT + wheel, retire the legacy steering img */
.bb-bsl .bb-seat-front-bar img{display:none;}
.bb-bsl .bb-seat-front-bar{margin:0 auto .5rem;max-width:320px;}
/* Vehicle-confirm modal: DNA count cards sit on the CI3 .row grid — full-width rows */
#select-bus-direct-agent .bb-tbr-modal-count{flex:1 1 100%;margin-left:15px;margin-right:15px;}
#select-bus-direct-agent .bb-tbr-modal-counts{display:flex;}
#select-bus-direct-agent .bb-tbr-modal-vsum .close{z-index:5;}
/* Drawer bodies carry DNA .bb-seat-pts-list; the CI3 drawers size via inline height —
   the DNA 340px cap is for the in-modal reference layout only. */
#boardingsidebar .bb-seat-pts-list,#droppingsidebar .bb-seat-pts-list{max-height:none;}

/* ============================================================================
   BUS SEAT LAYOUT DNA chrome (bsl-seat-enhance.js) — scoped to #select-busseats.
   The DNA .bsl-* CSS in style.css was written for a full-page 1180px modal;
   the CI3 seat modal is 620px, so the two-column .bsl-body collapses to the
   DNA's own tablet layout (single column, static side rail) and the bus wrap
   is capped to the DNA deck width. Drawer geometry rules above are untouched.
============================================================================ */
#select-busseats .bsl-body{display:block;padding:0;}
#select-busseats .bsl-side{position:static;width:auto;margin:14px 2px 4px;}
#select-busseats .bsl-bus-wrap{max-width:560px;margin:0 auto;}
#select-busseats .bsl-deck-tabs,#select-busseats .bsl-filter-chips{max-width:560px;margin-left:auto;margin-right:auto;}
#select-busseats .bsl-filter-chips{justify-content:center;}
#select-busseats .bsl-filter-chips .bsl-quick-pick{margin-left:4px;}
/* chip filtering dims (never removes) non-matching seats — grid geometry intact */
#select-busseats .seatCharts-seat.bsl-dim{opacity:.18!important;pointer-events:none!important;}
/* DNA rows on narrow phones: let the sides shrink to content so the 620px-modal
   grid (100px / aisle / 216px) never clips seats behind the overflow-x guard */
@media (max-width:575.98px){
  #select-busseats .bsl-row{grid-template-columns:auto 1fr auto;}
}
/* host page safety: bsl-page is added to the buses-list <body> only while the
   seat modal shows a layout — keep the DNA bg but drop its 90px page padding
   (that padding clears the DNA standalone page's fixed pricebar, which on the
   CI3 page is #pricedata and overlays the locked, modal-open body anyway) */
body.bsl-page{padding-bottom:0;}
/* Car-package DNA vehicle cards: picked-state ring (enhancer-driven, mirrors the
   selected value of the untouched #service_id) */
.bb-tcar-veh.is-picked{border-color:var(--bb-primary,#f97316);box-shadow:0 0 0 3px rgba(249,115,22,.15);}
.bb-tcar-veh{cursor:pointer;}

/* ============================================================================
   MOBILE-RESPONSIVE REPAIR (real-phone audit) — counter-blocks restoring the
   DNA mobile behaviour where the CI3 skin above (desktop-tuned !important
   geometry) or the CI3 markup itself fights style.css's own @media rules.
   Desktop rules above are NOT deleted — each is countered below inside a
   max-width guard (METHOD b), so desktop stays pixel-identical.
============================================================================ */

/* ---- 1) HEADER: style.css `img{height:auto}` (l.82) defeats the logo's
   height="44" attribute → logo renders at its intrinsic 167x59 and shoves the
   phone-CTA + hamburger past the right edge on <=375px phones ("menu bar cut
   off"). Pin the logo height and let it shrink, never push. ---- */
@media (max-width:991.98px){
  .bb-logo-img{height:44px!important;width:auto!important;max-width:48vw;object-fit:contain;object-position:left center;}
  .bb-logo{flex-shrink:1;min-width:0;}
  .bb-nav-actions{flex-shrink:0;}
}
@media (max-width:575.98px){
  .bb-logo-img{height:34px!important;}
  .bb-phone-cta--sm{padding:7px 9px!important;}
}
@media (max-width:359.98px){
  /* tiny phones: icon-only call chip so logo + CTA + hamburger always fit */
  .bb-phone-cta--sm strong{display:none!important;}
  .bb-phone-cta--sm{width:38px;height:38px;justify-content:center;padding:0!important;border-radius:50%!important;}
}

/* ---- 2) TOUR-DETAILS FARES CARDS (.bb-tbr-vcard on details + booking pages):
   .bb-tbr-vcard-body is display:grid with NO explicit track → the implicit
   column takes the min-content width of .bb-tbr-vcard-priceaction, whose
   non-wrapping fares flex (min-width:auto cells) resolves to ~310-336px inside
   a ~290px card → every row inside the card is CLIPPED at the right (card is
   overflow:hidden). Shrink-guards are safe at all widths. ---- */
.bb-tbr-vcard{min-width:0;}
.bb-tbr-vcard-body{grid-template-columns:minmax(0,1fr);}
.bb-tbr-vcard-priceaction{min-width:0;}
.bb-tbr-vcard-fares-wrap,.bb-tbr-vcard-fares,.bb-tbr-fare-cell,.bb-tbr-vcard-toggles{min-width:0;}
@media (max-width:767.98px){
  .bb-tbr-vcard-priceaction{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding:12px!important;}
  .bb-tbr-vcard-fares{flex-wrap:wrap!important;gap:8px 16px!important;}
  .bb-tbr-fare-cell{flex-wrap:wrap;}
  .bb-tbr-vcard-book{width:100%!important;justify-content:center!important;}
  .bb-tbr-vcard-badges{margin-left:0!important;}
}

/* ---- 3) JOURNEY-DATE MODAL (#myJDModal): desktop rule above pins
   margin:34px auto + max-width:540px. On phones it becomes a bottom sheet —
   full width (the old margin:14px 10px + width:100% put 10px of the dialog
   off the right edge), thumb-reachable, with 48px day-cell touch targets. ---- */
@media (max-width:575.98px),
/* ---- 3) JOURNEY-DATE MODAL (#myJDModal1): desktop rule above pins
   margin:34px auto + max-width:540px. On phones it becomes a bottom sheet —
   full width (the old margin:14px 10px + width:100% put 10px of the dialog
   off the right edge), thumb-reachable, with 48px day-cell touch targets. ---- */
@media (max-width:575.98px){
#myJDModal.show .modal-dialog,#myJDModal .modal-dialog,
#myJDModal1.show .modal-dialog,#myJDModal1 .modal-dialog{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;margin:0!important;max-width:none!important;width:100%!important;}
#myJDModal .modal-content,#myJDModal .modal-content.layout22,
#myJDModal1 .modal-content,#myJDModal1 .modal-content.layout22{border-radius:22px 22px 0 0!important;}
#myJDModal #container_date .Zebra_DatePicker .dp_daypicker td,
#myJDModal1 #container_date .Zebra_DatePicker .dp_daypicker td,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_daypicker td{height:48px!important;font-size:15px;border-radius:12px!important;}
#myJDModal #container_date .Zebra_DatePicker .dp_body th,
#myJDModal1 #container_date .Zebra_DatePicker .dp_body th,
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_body th{padding:8px 0 2px!important;font-size:11px;}
}

/* ---- 4) BOOKING SERVICES LIST: the CI3 core nests a SECOND .container inside
   .bb-tbr-corecol (container 20px + col 12px + container 20px + col 12px =
   64px lost per side → 280px cards on a 360px phone). Flatten the inner
   gutters on phones; the outer .container keeps the design's 20px inset. ---- */
@media (max-width:575.98px){
  .bb-tbr-corecol{padding-left:8px!important;padding-right:8px!important;}
  .bb-tbr-corecol #content .container{padding-left:0!important;padding-right:0!important;}
  .bb-tbr-corecol #content .container>.row{margin-left:0!important;margin-right:0!important;}
  .bb-tbr-corecol #content .container>.row>[class*="col-"]{padding-left:0!important;padding-right:0!important;}
  .bb-tbr-corecol .mbtp{padding:12px 8px;}
  /* empty spacer row (.htmob-100) sits directly under #main-wrapper with .row
     negative margins and no container → 12px page overflow each side */
  #main-wrapper>.row.d-block.d-sm-none{margin-left:0!important;margin-right:0!important;}
}

/* ---- 5) BOOK NOW MODAL (#select-bus-direct-agent) pax area: the 1fr 1fr
   count grid can't shrink (min-width:auto + the 15px count-card margins from
   the DNA-parity rules above) → columns resolve to 220px+233px and the CHILD
   card is clipped outside the modal. Stack single-column on phones. ---- */
/* same BS4-modal-in-BS5-page bug as #myJDModal (l.121): .show never clears the
   entering translateY(-50px) → the dialog's top 40-50px sit ABOVE the viewport
   and can't be scrolled to (modal scrollTop 0 is the ceiling). All widths. */
#select-bus-direct-agent.show .modal-dialog,#select-bus-direct-agent .modal-dialog,
/* ---- 5) BOOK NOW MODAL (#select-bus-direct-agent) pax area: the 1fr 1fr
   count grid can't shrink (min-width:auto + the 15px count-card margins from
   the DNA-parity rules above) → columns resolve to 220px+233px and the CHILD
   card is clipped outside the modal. Stack single-column on phones. ---- */
/* same BS4-modal-in-BS5-page bug as #myJDModal1 (l.121): .show never clears the
   entering translateY(-50px) → the dialog's top 40-50px sit ABOVE the viewport
   and can't be scrolled to (modal scrollTop 0 is the ceiling). All widths. */
#select-bus-direct-agent.show .modal-dialog,#select-bus-direct-agent .modal-dialog{transform:none!important;}
@media (max-width:575.98px){
  #select-bus-direct-agent .modal-dialog{margin:10px 8px!important;max-width:none!important;}
  #select-bus-direct-agent .bb-tent-modal-pax{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
  #select-bus-direct-agent .bb-tbr-modal-count{margin-left:0!important;margin-right:0!important;min-width:0;}
  #select-bus-direct-agent .bb-tbr-modal-count select.custom-select,
  #select-bus-direct-agent .bb-tent-modal-pax select.custom-select{width:100%!important;min-width:0!important;height:44px;}
  #select-bus-direct-agent .bb-tbr-modal-vsum{padding:14px 16px!important;}
  #select-bus-direct-agent .bb-tbr-modal-vsum .modal-title{font-size:16px!important;}
  #select-bus-direct-agent #accordion2.bbus40{margin:4px 10px 14px!important;padding:10px!important;}
  #select-bus-direct-agent #pricedata .round-trip-fare.bg-light{margin:8px 10px 0!important;padding:10px 12px!important;}
  #select-bus-direct-agent #pricedata .round-trip-fare.bg-blue{margin:12px 10px 14px!important;}
}

/* ---- 6) BOARDING/DROPPING DRAWERS: geometry stays CI3-inline-driven
   (left/width set by open/close JS — do NOT touch). Only cap them to the
   viewport (inline width:360px overflows 320-359px phones) + square corners. */
@media (max-width:575.98px){
  #boardingsidebar,#droppingsidebar{max-width:100vw!important;border-radius:0!important;}
  #droppingsidebar .modalfooter1 .btn-dark{min-width:96px;}
}

/* ============ Book-Now modal header: mobile-safe vsum layout ============ */
/* Rate block is a tight column (small over strong were colliding); title never
   under-laps the rate/close; on phones everything stays inside the header row. */
#select-bus-direct-agent .bb-tbr-modal-vsum-rate{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;line-height:1.25;flex:0 0 auto;margin-left:auto;padding-right:46px;}
#select-bus-direct-agent .bb-tbr-modal-vsum-rate small{font-size:10px;opacity:.85;}
#select-bus-direct-agent .bb-tbr-modal-vsum-rate strong{font-size:16px;}
#select-bus-direct-agent .bb-tbr-modal-vsum .close{position:absolute;top:10px;right:10px;}
#select-bus-direct-agent .bb-tbr-modal-vsum{position:relative;}
@media (max-width:575.98px){
  #select-bus-direct-agent .bb-tbr-modal-vsum{padding:12px 14px!important;gap:8px!important;}
  #select-bus-direct-agent .bb-tbr-modal-vsum .modal-title{font-size:14px;}
  #select-bus-direct-agent .bb-tbr-modal-vsum .modal-title .layout1{font-size:11.5px;line-height:1.35;}
}

/* ============================================================================
   PROACTIVE MOBILE SWEEP (375px audit) — homepage
============================================================================ */
/* Footer quick-links row: inline links wrapped MID-PHRASE ("Terms of / Use")
   on 375px. Keep each link an unbreakable unit; the row itself still wraps. */
.bb-foot-quicklinks a{white-space:nowrap;display:inline-block;}
/* Hamburger-drawer tap targets under 40px (login link 16px, close 36px,
   My Bookings 30px). Drawer is mobile-only UI. */
.bb-drawer-login-link{display:inline-flex;align-items:center;min-height:40px;}
.bb-drawer-x{min-width:40px;min-height:40px;}
.bb-drawer-mb{min-height:40px;display:inline-flex;align-items:center;}
@media (max-width:991.98px){
  /* Hero quick links (Tomorrow / Day After / route chips): 16-26px tall taps */
  .bb-idx-qlink,.bb-idx-route-chip{display:inline-flex;align-items:center;min-height:34px;padding-top:4px;padding-bottom:4px;}
  #tomorrowindex,a[id=tomorrowindex]{display:inline-flex;align-items:center;min-height:32px;}
}
@media (max-width:767.98px){
  /* sub-11px text bumps (readability): operator rank/avatar chips + fare small */
  .bb-op-rank{font-size:11px!important;}
  .bb-op-avatar{font-size:11px!important;}
  .bb-op-card small,small.bb-u-sf,.bb-idx-hero small{font-size:11px!important;}
}
@media (max-width:767.98px){
  .bb-tour-foot small{font-size:11px!important;}
  .bb-idx-dest-badge{font-size:11px!important;}
}
/* Tour-details reviews modal (#review_modal) — and every other BS4-JS modal on
   this BS5-CSS page — keeps the entering translateY(-50px) in its shown state
   (same bug as #myJDModal / #select-bus-direct-agent, fixed per-modal above):
   dialog top sits ~42px ABOVE the viewport and cannot be scrolled to.
   Generalize Bootstrap's own shown-state rule (.modal.show .modal-dialog,
/* Tour-details reviews modal (#review_modal) — and every other BS4-JS modal on
   this BS5-CSS page — keeps the entering translateY(-50px) in its shown state
   (same bug as #myJDModal1 / #select-bus-direct-agent, fixed per-modal above):
   dialog top sits ~42px ABOVE the viewport and cannot be scrolled to.
   Generalize Bootstrap's own shown-state rule (.modal.show .modal-dialog{transform:none}) so ALL modals land inside the viewport. */
.modal.show .modal-dialog{transform:none!important;}
@media (max-width:767.98px){
  /* modal close buttons: 31px tap box → 40px (icon stays centered) */
  .modal .btn-close{min-width:40px;min-height:40px;box-sizing:border-box;}
}
/* Boarding/Dropping drawers: the absolute bottom footer (.modalfooter1, 72px,
   Back/NEXT) overlays the scrollable points list, which has NO bottom padding —
   the LAST boarding/dropping point is permanently hidden under the footer even
   at full scroll. Reserve a tail gap (list padding only; drawer geometry and
   inline left/width mechanics untouched). */
#boardingsidebar .bsl-sidepanel-body,#droppingsidebar .bsl-sidepanel-body,
#boardingsidebar .bb-seat-pts-list,#droppingsidebar .bb-seat-pts-list{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;}
/* Step-2 passenger page: mobile fixed fare bar's "Proceed Payment" (btn-sm,
   31px tall) is the page's PRIMARY action — give it a >=40px touch target.
   Bar is d-xl-none, so guard to the same range. */
@media (max-width:1199.98px){
  #proceed_to_payment_mobile{min-height:40px;padding-top:8px;padding-bottom:8px;}
}
/* Hotels search (mobile): the real #checkindate/#checkoutdate inputs are
   display:none (the visible UI is the .bdrdate1 anchor -> checkoutmodal()),
   so Zebra anchors both calendar icon buttons to the hidden inputs' 0,0
   offset — two stray 16px icons painted at page 15,17 behind the header.
   The icons are unusable there; the anchor UI opens #myModal instead. */
@media (max-width:991.98px){
  .bdrdate .Zebra_DatePicker_Icon,.Zebra_DatePicker_Icon.bdrdate2{display:none!important;}
}
/* Hotel-details mobile stickybar: style.css lifts it bottom:58px to clear the
   bottom mobile-nav, but .bb-mobnav actually renders 67px tall -> the bar's
   bottom 9px sits ON the nav icons (z 95 over 90). Match the real nav height
   and grow the dependent page/WA-float clearances by the same 9px. */
@media (max-width:991.98px){
  .bb-htl-stickybar{bottom:67px;}
  body:has(.bb-htl-stickybar){padding-bottom:129px;}
  body:has(.bb-htl-stickybar) .bb-wa-float{bottom:133px;}
}
/* Similar-packages compact cards (tour-details strip) have NO .bb-pkg-img, so
   the absolute top-right .bb-pkg-vbadge (designed to overlay the card IMAGE)
   lands on the title row and the package name runs UNDER the Bus/Car chip
   (all widths). Clear the chip only on image-less cards. */
.bb-pkg-card:not(:has(.bb-pkg-img)) .bb-pkg-name{padding-right:80px;}
/* Desktop shows the SAME stray pair (checkindate/checkoutdate are hidden at all
   widths on the hotels view; the anchor+modal UI is used everywhere, and
   .bdrdate2 exists only on that view) — hide the orphan icons at all widths. */
.Zebra_DatePicker_Icon.bdrdate2{display:none!important;}

/* ============================================================
   MOBILE SWEEP PART A — booking-family pages (entry/car/irctc/
   listing/enquiry/cancel/reschedule/all-links/bookings-login)
============================================================ */
/* Entry-booking (booking_entry) mobile stickybar: .bb-tent-stickybar is
   fixed bottom:0 z-60 while .bb-mobnav (bottom nav, z-90, ~67px tall,
   d-lg-none) sits on top of it -> the whole "Proceed to Payment" button
   row is UNDER the nav and untappable. Lift the bar above the nav and
   give the page enough bottom clearance to scroll content clear
   (bar ~153px tall at 375px + 67px nav). */
@media (max-width:991.98px){
  .bb-tent-stickybar{bottom:67px;}
  /* !important to outrank style.css's `body{padding-bottom:64px!important}` */
  body:has(.bb-tent-stickybar){padding-bottom:236px!important;}
  body:has(.bb-tent-stickybar) .bb-wa-float{bottom:240px;}
}
/* Entry package-card actions render 34-35px tall on mobile (tap target
   <40px). Grow them without touching desktop. */
@media (max-width:991.98px){
  .bb-tent-pkg-select,.bb-tent-pkg-incl{min-height:40px;}
  #termsModal .btn{min-height:40px;} /* footer Close sits in .text-center.p-2, not .modal-footer */
}
/* Bottom mobile-nav labels compute to 10.88px (.68rem!important in
   style.css) — sub-11px text on primary nav buttons. */
.bb-mobnav-item{font-size:11px!important;}
/* Car-package booking (car_package_booking) mobile:
   1) the absolute "10% OFF" ribbon (.bb-tcar-veh-pop, top:-1 left:54px)
      lands ON the operator name in .bb-tcar-veh-meta (name row starts
      ~13px from the top; badge is 17px tall) — pad the meta head down
      only when a badge exists so the name clears it;
   2) "Book Now" renders 32px and the Boarding/Dropping/Cancellation
      toggles 28px tall — grow tap targets;
   3) boarding/dropping selects (.bb-tbi-field-select inside the compact
      .bb-tcar-fields rows) are a 19px-tall tap area — grow them. */
@media (max-width:991.98px){
  .bb-tcar-veh-meta:has(.bb-tcar-veh-pop){padding-top:24px;}
  .bb-tcar-veh-book{min-height:40px;}
  .bb-tcar-veh-infobtn{min-height:36px;}
  .bb-tbi-field .bb-tbi-field-select{min-height:26px;}
  .bb-tcar-modal-foot .bb-tbr-cancel-btn{min-height:40px;}
}
/* Tour-packages listing (nation/category/type/search) mobile: the
   "Filter Packages By" opener renders 29px tall, and the drawer's
   APPLY/RESET anchors 18/23px — grow all three to proper tap targets
   (anchors need flex for min-height to bite). */
@media (max-width:991.98px){
  .bb-tpc-filter-btn{min-height:40px;}
  #filtersidebar1 .bb-tpc-filter-apply,
  #filtersidebar1 .bb-tpc-filter-reset{
    min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  }
}
/* Search results (search1, bb-tps) mobile: "Filters" opener 34px, drawer
   Apply 35px / Reset 20px, sort select 34px — grow tap targets. */
@media (max-width:991.98px){
  .bb-tps-mob-filterbtn,.bb-tps-filter-apply,#bbTpsSort{min-height:40px;}
  .bb-tps-filter-reset{min-height:36px;}
}
/* Enquiry-sent success page (bb-tbes) mobile: "Go To Home Page" /
   "WhatsApp Us" CTAs are 18px-tall anchors — grow to real buttons. */
@media (max-width:991.98px){
  .bb-tbes-btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;}
}
/* All-links ticket-search results (bb-mgb) mobile: service tabs 37px,
   status sub-tabs 30px, per-ticket "View" links 32px — grow tap targets. */
@media (max-width:991.98px){
  .bb-mgb-svctab{min-height:40px;}
  .bb-mgb-substabs button{min-height:40px;}
  .bb-mgb-main a.red{min-height:36px;display:inline-flex;align-items:center;}
}
/* Reschedule-details / cancel-otp fixed "Confirm Cancel" bar
   (.round-trip-fare.fixed-bottom with .submitab, z-1030) parks ON the
   bottom mobile-nav (z-90, ~67px) hiding it entirely — lift the bar
   above the nav like every other mobile stickybar on the site, and give
   the page scroll clearance (bar ~126px + 67px nav). Scoped via
   :has(.submitab) so bus seat-layout fare bars are untouched. */
@media (max-width:991.98px){
  .round-trip-fare.fixed-bottom:has(.submitab){bottom:67px;}
  body:has(.round-trip-fare.fixed-bottom .submitab){padding-bottom:200px!important;}
  /* grow its 35-37px actions while we're here */
  .round-trip-fare.fixed-bottom .btn:has(.submitab){min-height:40px;}
  .bb-mgb-bus-btn{min-height:40px;}
}

/* The check-out picker mounts in #myJDModal1 / #container_date1. When the
   month-nav rules were extended to it, the multi-line selector list lost its
   .dp_previous arm (only .dp_next carried over), so the left chevron kept the
   stock 25px look. Restore it explicitly. */
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_header .dp_previous,
#myJDModal1 #container_date .Zebra_DatePicker .dp_header .dp_previous{
  width:44px!important;color:transparent!important;font-size:0!important;background:#fff!important;position:relative;cursor:pointer;
}
#myJDModal1 #container_date1 .Zebra_DatePicker .dp_header .dp_previous::after,
#myJDModal1 #container_date .Zebra_DatePicker .dp_header .dp_previous::after{
  content:"";display:inline-block;width:36px;height:36px;border-radius:50%;
  border:1px solid #ffe2cc;background-color:var(--bb-primary-soft,#fff7ed);
  background-repeat:no-repeat;background-position:center;background-size:9px 14px;
}