/* =====================================================================
   Beyond Journey - cabs (/cabs, /cabs/search, /cab-booking)
   ---------------------------------------------------------------------
   2026-10-28, the designer: "jaise flight, hotels, experiences ka bna h
   ab cabs ka page starting search to last payment", MakeMyTrip Cabs as
   the reference. The banner, the strip, the steps, the FAQ and the
   closing card are /hotels' own (css/bj-hotel-search.css, linked by the
   landing view); the booking steps wear the experience checkout
   (css/bj-exp-booking.css, .bjeb-*). This file holds what is new:

     .bjcs-       the search card (Pages/_CabSearch.cshtml)
     .bjcab-cal   its calendar - the hotels calendar, value for value
     .bjcab-      the landing page's own sections (routes, the cars)
     .bjcr-       the results page
     .bjcb-       what the booking steps add to the experience checkout

   Navy #17233e, orange #f5761a, Poppins 400/500/600 only (the site's
   type scale); phones get their own, smaller sizes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. The search card
   --------------------------------------------------------------------- */
.bjcs {
  position: relative; z-index: 3; width: min(1110px, 100%); margin: 0 auto; padding: 18px 20px 14px;
  background: #fff; border: 1px solid rgba(255, 255, 255, .95); border-radius: 18px;
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(23, 35, 62, .35), 0 40px 80px -30px rgba(0, 0, 0, .6);
  font-family: inherit; text-align: left;
}
.bjcs__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.bjcs__title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 600; color: #17233e; text-transform: none; letter-spacing: 0; }
.bjcs__title i, .bjcs__title svg { color: #f5761a; }

/* the four kinds of trip: one segmented control (tabs, not a dropdown - the
   designer, 2026-10-29: "dropdown wala nahi do") */
.bjcs__tabs { display: inline-flex; gap: 4px; padding: 4px; background: #f1f3f7; border-radius: 999px; }
.bjcs__tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 0; border-radius: 999px;
  background: transparent; color: #56607a; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.bjcs__tab i, .bjcs__tab svg { font-size: 12px; color: #8b93a5; }
.bjcs__tab:hover { color: #17233e; }
.bjcs__tab.is-on { background: #fff; color: #17233e; box-shadow: 0 1px 2px rgba(23, 35, 62, .08), 0 4px 12px -6px rgba(23, 35, 62, .3); }
.bjcs__tab.is-on i, .bjcs__tab.is-on svg { color: #f5761a; }
.bjcs__tab:focus-visible { outline: 2px solid #f5761a; outline-offset: 2px; }
.bjcs__tab-short { display: none; }
.bjcs--bar .bjcs__head { justify-content: flex-start; }

/* airport: which way */
.bjcs__dir { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.bjcs__dirbtn {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid #e3e7ee; border-radius: 999px;
  background: #fff; color: #56607a; font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.bjcs__dirbtn i, .bjcs__dirbtn svg { color: #8b93a5; font-size: 12px; }
.bjcs__dirbtn.is-on { border-color: #f5761a; background: #fff5ec; color: #17233e; }
.bjcs__dirbtn.is-on i, .bjcs__dirbtn.is-on svg { color: #f5761a; }
.bjcs__new { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 999px; background: #e2483d; color: #fff; font-size: 8.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.bjcs__new { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 999px; background: #e2483d; color: #fff; font-size: 8.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }

/* + ADD STOPS: the cell reads as a link until a stop is added; the popover
   under it takes a city and lists the ones added */
.bjcs__f--stops { flex-grow: .9; }
.bjcs__ddbtn--stops.is-empty { color: #f5761a; font-weight: 600; }
.bjcs__stops {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 300px; padding: 14px 14px 12px;
  background: #fff; border: 1px solid #e6e9f0; border-radius: 12px; cursor: default;
  box-shadow: 0 2px 6px rgba(23, 35, 62, .06), 0 24px 50px -20px rgba(23, 35, 62, .4);
}
.bjcs__stops[hidden] { display: none; }
.bjcs__stops-k { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 500; color: #f5761a; }
.bjcs__stops-in, #bjcs .bjcs__stops-in.bjty-input {
  display: block; width: 100%; padding: 8px 10px !important; border: 1px solid #d5dbe5 !important; border-radius: 8px !important;
  background: #fff !important; font-family: inherit; font-size: 13.5px !important; font-weight: 500 !important; color: #17233e !important; outline: none;
}
#bjcs .bjcs__stops-in.bjty-input:focus { border-color: #f5761a !important; box-shadow: 0 0 0 3px rgba(245, 118, 26, .15) !important; }
#bjcs .bjcs__stops-in.bjty-input::placeholder { font-weight: 400; }
.bjcs__stops .bjty { top: calc(100% + 4px); }
.bjcs__stops-list { margin: 8px 0 0; padding: 0; list-style: none; }
.bjcs__stops-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #eef0f4; font-size: 13px; color: #17233e; }
.bjcs__stops-list li:first-child { border-top: 0; }
.bjcs__stops-list b { font-weight: 600; }
.bjcs__stops-list small { flex: 1 1 auto; font-size: 11.5px; color: #5a6377; }
.bjcs__stops-n { flex: 0 0 18px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #17233e; color: #fff; font-size: 10px; font-weight: 600; }
.bjcs__stops-rm { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #f3f5f9; color: #56607a; font-size: 10px; cursor: pointer; }
.bjcs__stops-rm:hover { background: #fde7d6; color: #dd660f; }
.bjcs__stops-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: #5a6377; }
.bjcs__stops-done { display: inline-flex; margin-top: 10px; padding: 7px 16px; border: 0; border-radius: 999px; background: #17233e; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* the fields: one bordered row, hairlines between */
.bjcs__row { display: flex; align-items: stretch; border: 1px solid #e3e7ee; border-radius: 14px; background: #fff; }
.bjcs__pair { display: contents; }
.bjcs__pair[hidden] { display: none !important; }
.bjcs__f {
  position: relative; flex: 1 1 0; min-width: 0; padding: 10px 16px 9px; border-left: 1px solid #e3e7ee;
  cursor: pointer; transition: background-color .25s ease, box-shadow .25s ease;
}
.bjcs__row > .bjcs__f:first-child, .bjcs__pair:first-child > .bjcs__f:first-child { border-left: 0; border-radius: 14px 0 0 14px; }
.bjcs__f:hover, .bjcs__f:focus-within, .bjcs__f.is-open { background: #fff5ec; box-shadow: inset 0 0 0 1px rgba(245, 118, 26, .28); z-index: 1; }
.bjcs__f--place { flex-grow: 1.25; }
.bjcs__k { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: 11px; font-weight: 500; color: #f5761a; line-height: 1.3; white-space: nowrap; cursor: pointer; }
.bjcs__k i, .bjcs__k svg { font-size: 11px; }
.bjcs__v {
  display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: none; outline: none; box-shadow: none;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.35; color: #17233e; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.bjcs__in { cursor: text; }
/* the area box (no type-ahead) still met the template's input box: reset it as bj-typeahead.css resets the others */
#bjcs input.bjcs__in { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; }
.bjcs__in::placeholder { color: #a7aebf; font-weight: 500; }
.bjcs__v.is-empty { color: #a7aebf; font-weight: 500; }
.bjcs__s { display: block; margin-top: 2px; font-size: 11.5px; color: #5a6377; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bjcs__s.is-warn { color: #d9480f; font-weight: 500; white-space: normal; }
/* the calendar's own input lies over the whole field, so a tap anywhere opens it */
.bjcs__pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: pointer; }

/* swap: a round button on the hairline between From and To */
.bjcs__swap {
  position: relative; z-index: 2; flex: 0 0 30px; align-self: center; width: 30px; height: 30px; margin: 0 -15px; padding: 0;
  display: grid; place-items: center; border: 1px solid #e3e7ee; border-radius: 50%; background: #fff; color: #17233e;
  font-size: 11px; cursor: pointer; box-shadow: 0 2px 8px -4px rgba(23, 35, 62, .35); transition: color .2s ease, border-color .2s ease, transform .3s ease;
}
@media (hover: hover) { .bjcs__swap:hover { color: #f5761a; border-color: #f5761a; transform: rotate(180deg); } }   /* not on touch: a tap left it orange and turned */
/* room for the disc: the From cell's words stop short of it and the To
   cell's start past it (the designer, 2026-10-30: "swapping wali cheez
   bahut congested lag rahi hai"); on a phone the disc sits at the right
   edge instead, so the cells keep their padding there */
@media (min-width: 576px) {
  .bjcs__pair .bjcs__f:first-child { padding-right: 28px; }
  .bjcs__pair .bjcs__f + .bjcs__f, .bjcs__pair .bjcs__swap + .bjcs__f { padding-left: 32px; }
}

/* dropdowns: package and time */
.bjcs__list {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 100%; max-height: 260px; margin: 0; padding: 6px;
  overflow-y: auto; list-style: none; background: #fff; border: 1px solid #e6e9f0; border-radius: 12px;
  box-shadow: 0 2px 6px rgba(23, 35, 62, .06), 0 24px 50px -20px rgba(23, 35, 62, .4);
}
.bjcs__list li {
  display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #17233e;
  white-space: nowrap; cursor: pointer; outline: none;
}
.bjcs__list li b { display: block; font-weight: 600; }
.bjcs__list li small { display: block; font-size: 11.5px; font-weight: 400; color: #5a6377; }
.bjcs__list li:hover, .bjcs__list li:focus { background: #f5f7fb; }
.bjcs__list li[aria-selected="true"] { background: #fff5ec; color: #f5761a; }
.bjcs__list li[aria-disabled="true"] { color: #c3c9d4; cursor: not-allowed; background: none; }
.bjcs__list--time { width: 150px; min-width: 150px; }
#bjcsPkgF .bjcs__list { width: 260px; }

/* SEARCH, in the row */
.bjcs__go {
  flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 46px; margin: 8px 8px 8px 12px; padding: 0 26px;
  border: 0; border-radius: 999px; background: linear-gradient(90deg, #f5761a 0%, #dd660f 100%); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; cursor: pointer;
  box-shadow: 0 10px 20px -10px rgba(245, 118, 26, .9); transition: transform .2s ease, box-shadow .2s ease;
}
.bjcs__go:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -10px rgba(245, 118, 26, .95); }
.bjcs__go i, .bjcs__go svg { font-size: 13px; }
.bjcs__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bjcs__note { display: flex; align-items: flex-start; gap: 7px; margin: 10px 2px 0; font-size: 12px; line-height: 1.5; color: #5a6377; }
.bjcs__note i, .bjcs__note svg { flex: 0 0 auto; margin-top: 3px; color: #f5761a; font-size: 11px; }

/* a tap on the locked SEARCH flashes what is missing */
.bjcs__f.is-nudge { animation: bjcsNudge .7s ease; box-shadow: inset 0 0 0 2px #f5761a; background: #fff5ec; z-index: 2; }
@keyframes bjcsNudge { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* the type-ahead hangs from the field; its input keeps the field's dark words
   (bj-typeahead.css resets inputs, and the typed city came out light - the
   designer, 2026-10-28: "ye light h dark kro") */
.bjcs .bjty { top: calc(100% + 6px); }
#bjcs .bjty-input { font-size: 16px !important; font-weight: 600 !important; color: #17233e !important; line-height: 1.35 !important; }
#bjcs .bjty-input::placeholder { color: #a7aebf; font-weight: 500; }

/* results page: the same card, quieter, in the summary band */
.bjcs--bar { width: 100%; padding: 14px 16px 12px; box-shadow: 0 10px 30px -18px rgba(23, 35, 62, .35); border-color: #e6e9f0; }
.bjcs--bar .bjcs__head { margin-bottom: 12px; }
.bjcs--bar .bjcs__go { height: 42px; padding: 0 22px; font-size: 13.5px; }
.bjcs--bar .bjcs__note { display: none; }

/* laptop, narrower: fields tighten */
@media (max-width: 1199.98px) {
  .bjcs__f { padding: 10px 12px 9px; }
  .bjcs__v { font-size: 15px; }
  #bjcs .bjty-input { font-size: 15px !important; }
  .bjcs__tab { padding: 8px 12px; font-size: 12.5px; }
}

/* tablet: the tabs under the title, the fields two to a row, SEARCH beside the last */
@media (max-width: 991.98px) {
  .bjcs { padding: 16px; }
  /* two cells to a row: the box keeps its right and bottom edges, each cell
     draws its own top and left, so hidden cells never leave a gap in the lines */
  .bjcs__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bjcs__tabs { align-self: stretch; justify-content: space-between; }
  .bjcs__tab { flex: 1 1 0; justify-content: center; }
  .bjcs__tab-long { display: none; }
  .bjcs__tab-short { display: inline; }
  .bjcs__row { display: grid; grid-template-columns: 1fr 1fr; border-top: 0; border-left: 0; border-radius: 0 14px 14px 0; }
  .bjcs__pair { display: contents; }
  .bjcs__f { border-left: 1px solid #e3e7ee; border-top: 1px solid #e3e7ee; border-radius: 0 !important; }
  .bjcs__f.is-first { border-radius: 14px 0 0 0 !important; }
  .bjcs__f.is-second { border-radius: 0 14px 0 0 !important; }
  .bjcs__stops { width: 100%; }
  .bjcs__swap { position: absolute; left: 50%; top: 18px; margin: 0 0 0 -15px; }
  .bjcs__row { position: relative; }
  .bjcs__go { justify-self: center; align-self: center; margin: 10px; }
  /* rental: City is alone on its row, so the package sits beside it */
}

/* phone: everything stacked, the tabs short, SEARCH under the fields */
@media (max-width: 575.98px) {
  .bjcs { padding: 12px; border-radius: 16px; }
  .bjcs__title { font-size: 14px; }
  .bjcs__tabs { padding: 3px; gap: 2px; }
  .bjcs__tab { padding: 7px 4px; font-size: 11.5px; gap: 5px; }
  .bjcs__tab i, .bjcs__tab svg { display: none; }
  .bjcs__dir { gap: 6px; margin: -2px 0 10px; }
  .bjcs__dirbtn { padding: 5px 10px; font-size: 11.5px; }
  /* the form in ONE screen (the designer, 2026-11-02: "mob view mein user ko
     poora form ek hi view mein dikh jaaye"): two cells to a row, as the tablet
     lays it out - From | To with the swap on the seam, Stops | Date, Time |
     Search. js/bj-cab-search.js marks the right-column cells (.is-right) and
     whether Search gets a row of its own (.is-even, an even count of cells).
     The popovers - clock, stops, the lists - hang under their own cell and
     span both columns, leftwards from a right-column cell. */
  .bjcs__row { display: grid; grid-template-columns: 1fr 1fr; position: relative; border: 1px solid #e3e7ee; border-radius: 12px; }
  .bjcs__pair { display: contents; }
  .bjcs__pair[hidden] { display: none !important; }
  .bjcs__f { position: relative; border-left: 1px solid #e3e7ee !important; border-top: 1px solid #e3e7ee; padding: 8px 12px; min-height: 66px; }
  .bjcs__f:not(.is-right) { border-left: 0 !important; }
  .bjcs__f.is-first, .bjcs__f.is-second { border-top: 0; }
  .bjcs__f.is-first { border-radius: 12px 0 0 0 !important; }
  .bjcs__f.is-second { border-radius: 0 12px 0 0 !important; }
  .bjcs__stops, .bjcs__list, .bjcs__f--place .bjty { left: 0; right: auto; width: calc(200% + 1px); min-width: 0; }
  .bjcs__f.is-right .bjcs__stops, .bjcs__f.is-right .bjcs__list, .bjcs__f.is-right .bjty { left: auto; right: 0; }
  .bjcs__k { font-size: 10.5px; margin-bottom: 1px; }
  .bjcs__v { font-size: 14.5px; }
  #bjcs .bjty-input { font-size: 14.5px !important; }
  .bjcs__s { font-size: 11px; }
  /* the swap on the seam between From and To, the first row's middle */
  .bjcs__pair .bjcs__swap { position: absolute; left: 50%; right: auto; top: 33px; margin: -15px 0 0 -15px; transform: none; z-index: 5; }   /* above a nudged / open cell (z 2) */
  @media (hover: hover) { .bjcs__pair .bjcs__swap:hover { transform: rotate(180deg); } }
  /* room for the disc on the seam: To's words start clear of it, From's stop short
     (the designer, 2026-11-02: the disc sat over "To / Mumbai" - "swap button sahi karo") */
  #bjcsToF { padding-left: 30px; }
  #bjcsFromF { padding-right: 20px; }
  /* beside the last cell the button keeps to the left of its half, clear of
     the floating call / WhatsApp / Bey discs at the screen's right edge */
  .bjcs__go { grid-column: auto; align-self: center; justify-self: start; height: 38px; margin: 0 0 0 8px; padding: 0 22px; font-size: 13px; }
  .bjcs__row.is-even .bjcs__go { grid-column: 1 / -1; justify-self: center; margin: 10px 0; }
  .bjcs__list { max-height: 220px; }
  .bjcs__note { margin-top: 8px; font-size: 11px; }
  .bjcs--bar { padding: 10px; }
}

/* ---------------------------------------------------------------------
   B. The calendar - .bjhs-cal / .bjta-cal, value for value
   --------------------------------------------------------------------- */
.flatpickr-calendar.bjcab-cal {
  box-sizing: content-box; padding: 14px 18px 0; margin-top: 8px;
  border: 1px solid #e6e9f0 !important; border-radius: 18px !important;
  box-shadow: 0 2px 6px rgba(23, 35, 62, .06), 0 28px 60px -22px rgba(23, 35, 62, .38) !important;
  font-family: inherit;
}
.flatpickr-calendar.bjcab-cal::before, .flatpickr-calendar.bjcab-cal::after { display: none; }
.bjcab-cal__title { margin: 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8b93a5; text-align: left; }
.bjcab-cal .flatpickr-months { align-items: center; margin-bottom: 8px; }
.bjcab-cal .flatpickr-months .flatpickr-month { height: 38px; color: #17233e; fill: #17233e; }
.bjcab-cal .flatpickr-current-month { padding-top: 9px; font-size: 15px; font-weight: 600; }
.bjcab-cal .flatpickr-current-month span.cur-month { margin-left: 0; font-weight: 600; color: #17233e; }
.bjcab-cal .flatpickr-current-month span.cur-month:hover { background: none; }
.bjcab-cal .flatpickr-current-month .numInputWrapper { width: 6ch; }
.bjcab-cal .flatpickr-current-month input.cur-year { font-weight: 600; color: #17233e; pointer-events: none; }
.bjcab-cal .numInputWrapper span { display: none; }
.bjcab-cal .flatpickr-months .flatpickr-prev-month, .bjcab-cal .flatpickr-months .flatpickr-next-month {
  top: 34px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid #e6e9f0; background: #fff; color: #17233e; fill: #17233e;
  transition: background-color .2s ease, border-color .2s ease;
}
.flatpickr-calendar.bjcab-cal .flatpickr-months .flatpickr-prev-month { left: 18px; }
.flatpickr-calendar.bjcab-cal .flatpickr-months .flatpickr-next-month { right: 18px; }
.bjcab-cal .flatpickr-months .flatpickr-prev-month svg, .bjcab-cal .flatpickr-months .flatpickr-next-month svg { width: 11px; height: 11px; }
.bjcab-cal .flatpickr-months .flatpickr-prev-month:hover, .bjcab-cal .flatpickr-months .flatpickr-next-month:hover { background: #f5f7fb; border-color: #cfd5e0; }
.bjcab-cal .flatpickr-months .flatpickr-prev-month:hover svg, .bjcab-cal .flatpickr-months .flatpickr-next-month:hover svg { fill: #f5761a; }
.bjcab-cal .flatpickr-months .flatpickr-disabled { opacity: .3; cursor: default; }
.bjcab-cal .flatpickr-weekdays { height: 30px; }
.bjcab-cal span.flatpickr-weekday { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #8b93a5; }
.bjcab-cal .flatpickr-day { border: 0; font-size: 13.5px; font-weight: 500; color: #17233e; transition: background-color .15s ease, color .15s ease; }
.bjcab-cal .flatpickr-day:hover, .bjcab-cal .flatpickr-day:focus { background: #f0f3f8; border: 0; }
.bjcab-cal .flatpickr-day.today { border: 1.5px solid #f5761a; color: #f5761a; font-weight: 600; }
.bjcab-cal .flatpickr-day.prevMonthDay, .bjcab-cal .flatpickr-day.nextMonthDay { color: #c3c9d4; }
.bjcab-cal .flatpickr-day.flatpickr-disabled, .bjcab-cal .flatpickr-day.flatpickr-disabled:hover { color: #cdd2db; background: none; text-decoration: line-through; text-decoration-color: rgba(205, 210, 219, .7); }
.bjcab-cal .flatpickr-day.selected, .bjcab-cal .flatpickr-day.selected:hover {
  background: #f5761a !important; border-color: #f5761a !important; color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px -6px rgba(245, 118, 26, .8) !important;
}
.bjcab-cal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px -18px 0; padding: 12px 18px; border-top: 1px solid #eef0f4; border-radius: 0 0 18px 18px; background: #fafbfc;
}
.bjcab-cal__words { font-size: 12.5px; font-weight: 500; color: #17233e; text-align: left; }
.bjcab-cal__done {
  flex: 0 0 auto; padding: 8px 18px; border: 0; border-radius: 999px; background: #17233e; color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .2s ease;
}
.bjcab-cal__done:hover { background: #22335a; }
@media (max-width: 575.98px) {
  .flatpickr-calendar.bjcab-cal { padding: 12px 10px 0; }
  .flatpickr-calendar.bjcab-cal .flatpickr-months .flatpickr-prev-month { left: 10px; }
  .flatpickr-calendar.bjcab-cal .flatpickr-months .flatpickr-next-month { right: 10px; }
  .bjcab-cal__foot { margin: 10px -10px 0; padding: 10px 12px; }
  .bjcab-cal__words { font-size: 11.5px; }
  .bjcab-cal__done { padding: 7px 16px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------------
   C. The landing page
   --------------------------------------------------------------------- */
.bjcab-hero .hotel-hero__bg { background-position: center 38%; }
.bjcab-hero__search { position: relative; z-index: 3; }

/* popular routes: a card each, the route drawn, no photograph */
.bjcab-routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bjcab-route {
  display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid #e6e9f0; border-radius: 16px; background: #fff;
  color: #17233e; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bjcab-route:hover { transform: translateY(-3px); border-color: #f3d2b8; box-shadow: 0 18px 36px -22px rgba(23, 35, 62, .45); color: #17233e; }
.bjcab-route__line { display: flex; align-items: center; gap: 10px; }
.bjcab-route__city { display: flex; flex-direction: column; min-width: 0; }
.bjcab-route__city b { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.bjcab-route__city small { font-size: 11.5px; color: #5a6377; }
.bjcab-route__city--to { text-align: right; margin-left: auto; }
.bjcab-route__road { position: relative; flex: 1 1 auto; min-width: 34px; height: 2px; border-top: 2px dashed #d5dbe5; }
.bjcab-route__road::before, .bjcab-route__road::after { content: ""; position: absolute; top: -6px; width: 9px; height: 9px; border-radius: 50%; }
.bjcab-route__road::before { left: -2px; background: #17233e; }
.bjcab-route__road::after { right: -2px; border: 2px solid #f5761a; background: #fff; width: 10px; height: 10px; top: -7px; }
.bjcab-route__road i, .bjcab-route__road svg { position: absolute; left: 50%; top: -9px; margin-left: -8px; font-size: 13px; color: #f5761a; background: #fff; padding: 0 3px; width: 16px !important; }
.bjcab-route__facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: #5a6377; }
.bjcab-route__facts span { display: inline-flex; align-items: center; gap: 6px; }
.bjcab-route__facts i, .bjcab-route__facts svg { color: #8b93a5; font-size: 11px; }
.bjcab-route__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed #e6e9f0; }
.bjcab-route__price small { display: block; font-size: 11px; color: #5a6377; }
.bjcab-route__price b { font-size: 18px; font-weight: 600; color: #17233e; }
.bjcab-route__go {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid rgba(245, 118, 26, .6); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: #f5761a; white-space: nowrap; transition: background-color .2s ease, color .2s ease;
}
.bjcab-route:hover .bjcab-route__go { background: #f5761a; color: #fff; }
.bjcab-routes__more { margin-top: 26px; text-align: center; font-size: 13px; color: #5a6377; }

/* the car photos (img/cabs, 4:3, used whole) wherever a car is shown */
.bjcab-photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Her three cut-out cars under the promises (2026-10-30, "ye lo img", then
   "iske peeche ka background remove karoge aur gaadi upar jaayegi"): no band
   of their own - the promises strip itself runs on below its words and the
   cars stand on that, pulled up over it, their wheels reaching down over the
   page. Three quiet hotspots over the cars choose the class on the search
   card - nothing shows on hover (her word, the same day). */
/* her sketch, then "strip toh itni hi rakho, car ke peeche remove karo"
   (2026-10-30): the strip stays its own height - the words and nothing
   more - and the cars hang off its lower edge, only the roof line tucked
   under it; the rest stands on the page */
.bjhs-strip.bjhs-strip--cars { padding-bottom: 34px; }
.bjcab-show { position: relative; z-index: 2; margin: -70px 0 -48px; }   /* the routes title close under the wheels ("kaafi space hai, remove karo") */
.bjcab-show__pic { position: relative; max-width: 900px; margin: 0 auto; }
.bjcab-show__pic img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .35)); }
.bjcab-show__spot { position: absolute; top: 0; bottom: 0; display: block; color: #fff; text-decoration: none; }
.bjcab-show__spot:focus-visible { outline: 2px solid rgba(245, 118, 26, .7); outline-offset: 2px; border-radius: 12px; }
@media (max-width: 991.98px) {
  .bjhs-strip.bjhs-strip--cars { padding-bottom: 30px; }
  .bjcab-show { margin: -56px 0 -40px; }
  .bjcab-show__pic { max-width: 720px; }
}
@media (max-width: 575.98px) {
  .bjhs-strip.bjhs-strip--cars { padding-bottom: 20px; }
  .bjcab-show { margin: -36px 0 -22px; }
}

/* choose your ride: the five cars */
.bjcab-fleet { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.bjcab-car-card {
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e6e9f0; border-radius: 16px; background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bjcab-car-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(23, 35, 62, .45); }
.bjcab-car-card__pic { aspect-ratio: 4 / 3; overflow: hidden; background: #eef1f6; }
.bjcab-car { display: block; width: 100%; max-width: 230px; height: auto; }
.bjcab-car-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px; }
.bjcab-car-card__tag { font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #f5761a; }
.bjcab-car-card__name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: #17233e; text-transform: none; letter-spacing: 0; }
/* two lines reserved, so every card's facts and rate sit on the same line */
.bjcab-car-card__models { margin: 0; min-height: calc(1.45em * 2); font-size: 12px; line-height: 1.45; color: #5a6377; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bjcab-car-card__facts { display: flex; flex-wrap: nowrap; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 11.5px; color: #17233e; white-space: nowrap; }
.bjcab-car-card__facts li { display: inline-flex; align-items: center; gap: 5px; }
.bjcab-car-card__facts i, .bjcab-car-card__facts svg { color: #f5761a; font-size: 11px; }
.bjcab-car-card__rate { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px dashed #e6e9f0; }
.bjcab-car-card__price { display: flex; flex-direction: column; line-height: 1.2; }
.bjcab-car-card__price small { font-size: 10.5px; color: #5a6377; }
.bjcab-car-card__price b { margin-top: 2px; font-size: 16px; font-weight: 600; color: #17233e; font-variant-numeric: tabular-nums; }
.bjcab-car-card__price b i { font-style: normal; font-size: 11.5px; font-weight: 500; color: #5a6377; }
.bjcab-car-card__go { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid rgba(245, 118, 26, .6); border-radius: 999px; font-size: 12px; font-weight: 600; color: #f5761a; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.bjcab-car-card__go i, .bjcab-car-card__go svg { font-size: 9px; }
.bjcab-car-card:hover .bjcab-car-card__go, .bjcab-car-card__go:hover { background: #f5761a; color: #fff; }

/* cabs from your city: the cities as tabs, one panel under them - the city at
   the head, its places as tiles with the distance and the Sedan fare */
.bjcab-hubs__lead { max-width: 560px; margin: 10px auto 0; font-size: 13.5px; line-height: 1.7; color: #5a6377; }
.bjcab-hubtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 14px; }
.bjcab-hubtab {
  padding: 7px 15px; border: 1px solid #e3e7ee; border-radius: 999px; background: #fff; color: #56607a;
  font-family: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.bjcab-hubtab:hover { border-color: #c9d0dc; color: #17233e; }
.bjcab-hubtab.is-on { border-color: #17233e; background: #17233e; color: #fff; }
.bjcab-hubtab:focus-visible { outline: 2px solid #f5761a; outline-offset: 2px; }
.bjcab-hubpanel { background: #fff; border: 1px solid #e6e9f0; border-radius: 16px; box-shadow: 0 2px 4px rgba(23, 35, 62, .04); overflow: hidden; }
.bjcab-hubpanel__head { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #eef0f4; background: linear-gradient(180deg, #fff 0%, #f8f9fc 100%); }
.bjcab-hubpanel__pic { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #eef1f6; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #f3d2b8; }
.bjcab-hubpanel__words { flex: 1 1 auto; min-width: 0; }
.bjcab-hubpanel__h { margin: 0 0 2px; font-size: 16px; font-weight: 600; line-height: 1.3; color: #17233e; text-transform: none; letter-spacing: 0; }
.bjcab-hubpanel__sub { display: block; font-size: 11.5px; color: #5a6377; }
.bjcab-hubpanel__sub i, .bjcab-hubpanel__sub svg { color: #f5761a; font-size: 10px; margin-right: 2px; }
.bjcab-hubpanel__all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #f5761a; text-decoration: none; white-space: nowrap; }
.bjcab-hubpanel__all:hover { color: #dd660f; text-decoration: underline; text-underline-offset: 2px; }
.bjcab-hubpanel__all i, .bjcab-hubpanel__all svg { font-size: 10px; }
.bjcab-hubtiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 18px; }   /* six places a city (2026-11-02) */
.bjcab-hubtile {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid #e6e9f0; border-radius: 12px; background: #fff;
  color: #17233e; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bjcab-hubtile:hover { border-color: #f3d2b8; box-shadow: 0 12px 24px -16px rgba(23, 35, 62, .4); transform: translateY(-2px); color: #17233e; }
.bjcab-hubtile__to { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.bjcab-hubtile__km { font-size: 11px; color: #5a6377; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bjcab-hubtile__fare { margin-top: 8px; font-size: 15px; font-weight: 600; color: #17233e; font-variant-numeric: tabular-nums; }
.bjcab-hubtile__fare small { font-size: 11px; font-weight: 400; color: #5a6377; }
.bjcab-hubtile__go { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: #f5761a; }
.bjcab-hubtile__go i, .bjcab-hubtile__go svg { font-size: 9px; transition: transform .15s ease; }
.bjcab-hubtile:hover .bjcab-hubtile__go i, .bjcab-hubtile:hover .bjcab-hubtile__go svg { transform: translateX(2px); }

@media (max-width: 1199.98px) {
  .bjcab-fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .bjcab-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .bjcab-hubtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 16px 16px; }
  .bjcab-hubpanel__head { flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  /* two cards a screen, sideways, dots under (js/bj-mobrail.js) */
  .bjcab-routes, .bjcab-fleet {
    display: flex; gap: 12px; margin: 0 -12px; padding: 2px 12px 8px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .bjcab-routes::-webkit-scrollbar, .bjcab-fleet::-webkit-scrollbar { display: none; }
  .bjcab-routes > *, .bjcab-fleet > * { flex: 0 0 calc(50% - 6px); min-width: 0; scroll-snap-align: start; }
  /* two cards exactly, no peek (the owner's rail rule): the car card's nowrap
     facts line set a min-content width wider than its half and pushed the
     second card off the edge (the phone pass, 2026-11-02) */
  .bjcab-car-card__facts { flex-wrap: wrap; white-space: normal; gap: 4px 8px; }
  .bjcab-route { padding: 12px; gap: 8px; border-radius: 14px; }
  /* the route as one line - "Delhi -> Agra" with the states under each name -
     instead of two bulleted lines that did not read as a route (the designer,
     2026-11-02: "samajh hi nahi aa raha"). A grid with the city spans
     dissolved (display: contents) so names sit on row 1 and states on row 2. */
  .bjcab-route__line { display: grid; grid-template-columns: auto auto 1fr; column-gap: 7px; align-items: baseline; }
  .bjcab-route__city { display: contents; }
  .bjcab-route__city b { grid-row: 1; grid-column: 1; font-size: 13.5px; }
  .bjcab-route__city small { grid-row: 2; grid-column: 1; font-size: 10.5px; line-height: 1.3; }
  .bjcab-route__city--to b { grid-column: 3; }
  .bjcab-route__city--to small { grid-column: 3; }
  .bjcab-route__city--to { margin-left: 0; text-align: left; }
  .bjcab-route__road { display: block; grid-row: 1; grid-column: 2; position: static; flex: none; min-width: 0; width: auto; height: auto; border: 0; }
  /* the little car between the names, as the laptop's road carries it
     (the designer, 2026-11-02: "arrow ki jagah car bana do") */
  .bjcab-route__road::before, .bjcab-route__road::after { display: none; }
  .bjcab-route__road i, .bjcab-route__road svg { position: static; display: inline-block; margin: 0; padding: 0; width: 18px !important; height: 14px; font-size: 14px; color: #f5761a; background: none; vertical-align: -1px; }
  .bjcab-route__facts { font-size: 10.5px; gap: 2px 8px; }
  .bjcab-route__foot { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 8px; }
  .bjcab-route__price b { font-size: 15px; }
  .bjcab-route__price small { font-size: 10px; }
  .bjcab-route__go { padding: 5px 10px; font-size: 11px; }
  .bjcab-car-card__body { padding: 10px 12px 12px; gap: 3px; }
  .bjcab-car-card__tag { font-size: 9.5px; }
  .bjcab-car-card__name { font-size: 13.5px; }
  .bjcab-car-card__models { font-size: 11px; }
  .bjcab-car-card__facts { font-size: 10.5px; gap: 7px; }
  .bjcab-car-card__rate { padding-top: 8px; }
  .bjcab-car-card__price small { font-size: 9.5px; }
  .bjcab-car-card__price b { font-size: 13.5px; }
  .bjcab-car-card__go { padding: 4px 9px; font-size: 10.5px; }
  /* the city tabs scroll sideways in one line; the tiles two to a row */
  /* every city in view, the pills wrapping into rows - the sideways row cut
     the last names off the edge (the designer, 2026-11-02: "sahi karo isko") */
  .bjcab-hubtabs { flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 12px; padding: 0; overflow: visible; }
  .bjcab-hubtab { padding: 6px 11px; font-size: 11.5px; }
  .bjcab-hubpanel { border-radius: 14px; }
  .bjcab-hubpanel__head { gap: 10px; padding: 12px 14px; }
  .bjcab-hubpanel__words { flex: 1 1 0; }   /* beside the photograph, not under it */
  .bjcab-hubpanel__pic { flex-basis: 44px; width: 44px; height: 44px; }
  .bjcab-hubpanel__h { font-size: 14.5px; }
  .bjcab-hubpanel__sub { font-size: 10.5px; white-space: normal; }
  .bjcab-hubpanel__all { flex-basis: 100%; margin-top: 4px; font-size: 12px; }
  .bjcab-hubtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 12px 14px; }
  .bjcab-hubtile { padding: 10px 12px; }
  .bjcab-hubtile__to { font-size: 13px; }
  .bjcab-hubtile__km { font-size: 10.5px; }
  .bjcab-hubtile__fare { font-size: 13.5px; margin-top: 6px; }
  .bjcab-hubtile__go { font-size: 11px; }
}

/* ---------------------------------------------------------------------
   D. The results page (/cabs/search)
   --------------------------------------------------------------------- */
.bjcr { background: #f5f7fb; padding-bottom: 64px; }
.bjcr-top { padding: 24px 0 0; background: #fff; }   /* (no longer in the markup, 2026-11-02) */
/* padding, not a margin: a margin fell through the section's edge and opened a
   grey seam between the title and the search (2026-10-29, "ye toh galat hai") */
.bjcr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 16px; padding: 0; }
.bjcr-head__txt { min-width: 0; }
/* the count and the sort pills beside the title on laptops; the copy over the
   list is for phones, where the head is hidden (2026-11-02) */
.bjcr-tools--top { flex: 0 1 auto; margin: 0 0 2px; justify-content: flex-end; }
@media (min-width: 576px) { .bjcr-main > .bjcr-tools { display: none; } }
/* the search sticks under the header all the way down the list
   (js/bj-cab-results.js sets is-stuck once the page has scrolled past it) */
.bjcr-band { position: sticky; top: var(--bjh-pinned, 60px); z-index: 30; padding: 22px 0 18px; background: #fff; border-bottom: 1px solid #e6e9f0; transition: box-shadow .28s ease, padding .2s ease; }
.bjcr.is-stuck .bjcr-band { padding: 10px 0; box-shadow: 0 10px 24px -16px rgba(23, 35, 62, .35); }
@media (prefers-reduced-motion: reduce) { .bjcr-band { transition: none; } }
.bjcr-title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; color: #17233e; text-transform: none; letter-spacing: -.01em; }
.bjcr-sub { margin: 4px 0 0; font-size: 13px; color: #5a6377; }
.bjcr-bar { display: none; }
.bjcr-body { padding-top: 22px; }
.bjcr-noscript { padding: 16px; background: #fff; border-radius: 12px; }

/* the trip across the top */
.bjcr-trip {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 6px 28px; margin-bottom: 22px;
  padding: 16px 22px; background: #fff; border: 1px solid #e6e9f0; border-radius: 16px;
}
.bjcr-trip__kind { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #f5761a; }
.bjcr-trip__route { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bjcr-trip__place { display: flex; flex-direction: column; min-width: 0; }
.bjcr-trip__place b { font-size: 18px; font-weight: 600; color: #17233e; line-height: 1.3; overflow-wrap: anywhere; }
.bjcr-trip__place small { font-size: 12px; color: #5a6377; }
.bjcr-trip__place.is-to { text-align: right; }
.bjcr-trip__road { position: relative; flex: 1 1 auto; min-width: 60px; height: 0; border-top: 2px dashed #d5dbe5; }
.bjcr-trip__road::before, .bjcr-trip__road::after { content: ""; position: absolute; top: -6px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
.bjcr-trip__road::before { left: -3px; background: #17233e; }
.bjcr-trip__road::after { right: -3px; border: 2px solid #f5761a; background: #fff; }
.bjcr-trip__road i, .bjcr-trip__road svg { position: absolute; left: 50%; top: -10px; width: 26px !important; margin-left: -13px; padding: 0 5px; background: #fff; color: #f5761a; font-size: 15px; }
.bjcr-trip__facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: #17233e; }
.bjcr-trip__facts li { display: inline-flex; align-items: center; gap: 7px; }
.bjcr-trip__facts i, .bjcr-trip__facts svg { color: #8b93a5; font-size: 12px; }

.bjcr-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 22px; }

/* filters: the flight results' rail (css/bj-booking.css .bjb-filters), in
   this page's own classes - sticky white card, a "Filters" row with Clear
   all, popular tiles two to a row, groups that fold at their heading with
   a count pill, boxes with the fare behind them, a fare slider, and
   Reset all / Back to top at the foot */
/* under the sticky search band (its height is --bjcr-band, set by the script) */
.bjcr-rail { position: sticky; top: calc(var(--bjh-pinned, 60px) + var(--bjcr-band, 150px) + 14px); }
.bjcr-rail__card {
  max-height: calc(100vh - var(--bjh-pinned, 60px) - var(--bjcr-band, 150px) - 28px); overflow-y: auto; background: #fff; border: 1px solid #e6e9f0; border-radius: 16px;
  box-shadow: 0 2px 4px rgba(23, 35, 62, .05), 0 6px 16px -8px rgba(23, 35, 62, .18); scrollbar-width: thin;
}
.bjcr-rail__sheethead, .bjcr-rail__sheetfoot { display: none; }
.bjcr-rail__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #f0efea; }
.bjcr-rail__top h2 { margin: 0; font-size: 15px; font-weight: 600; color: #17233e; text-transform: none; letter-spacing: 0; }
.bjcr-linkbtn { padding: 0; border: 0; background: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #f5761a; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.bjcr-linkbtn:hover { color: #dd660f; }
.bjcr-rail__sheetacts { display: inline-flex; align-items: center; gap: 14px; }
.bjcr-fgroup { padding: 0 18px; border-bottom: 1px solid #f0efea; }
.bjcr-fgroup:last-of-type { border-bottom: 0; }
.bjcr-fgroup__head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 0; border: 0; background: none;
  font-family: inherit; text-align: left; cursor: pointer;
}
.bjcr-fgroup__head h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: #17233e; text-transform: none; letter-spacing: .2px; }
.bjcr-fgroup__head:hover h3 { color: #dd660f; }
.bjcr-fgroup__n { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #f5761a; color: #fff; font-size: 10.5px; font-weight: 600; vertical-align: 1px; }
.bjcr-fgroup__chev { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: #8a93a8; transition: transform .25s ease, color .2s ease; }
.bjcr-fgroup__head:hover .bjcr-fgroup__chev { color: #f5761a; }
.bjcr-fgroup.is-open .bjcr-fgroup__chev { transform: rotate(180deg); }
.bjcr-fgroup__body { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows .28s ease, opacity .2s ease, padding-bottom .28s ease; }
.bjcr-fgroup__body > * { min-height: 0; }
.bjcr-fgroup.is-open .bjcr-fgroup__body { grid-template-rows: 1fr; opacity: 1; padding-bottom: 12px; }
@supports not (grid-template-rows: 0fr) {
  .bjcr-fgroup__body { display: none; opacity: 1; }
  .bjcr-fgroup.is-open .bjcr-fgroup__body { display: block; padding-bottom: 12px; }
}
.bjcr-check { display: flex; align-items: center; gap: 8px; padding: 4px 0; margin-bottom: 4px; font-size: 13.5px; color: #56607a; cursor: pointer; transition: color .2s ease; }
.bjcr-check:hover { color: #17233e; }
.bjcr-check input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: #f5761a; cursor: pointer; }
.bjcr-check__lbl { flex: 1 1 auto; min-width: 0; }
.bjcr-check__fare { font-size: 12px; font-weight: 600; color: #17233e; font-variant-numeric: tabular-nums; }
.bjcr-check__n { min-width: 14px; font-size: 12px; color: #8a93a8; text-align: right; }
.bjcr-check.is-empty { opacity: .45; cursor: default; }
/* popular: a box wearing a tile - a fixed two-line box so the four match */
.bjcr-popgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bjcr-pop { display: flex; cursor: pointer; }
.bjcr-pop input { position: absolute; opacity: 0; width: 0; height: 0; }
.bjcr-pop > span {
  flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 7px 9px;
  border: 1px solid #e6e9f0; border-radius: 10px; background: #fff; transition: border-color .18s ease, background-color .18s ease;
}
.bjcr-pop b { display: block; font-size: 12px; font-weight: 600; color: #17233e; }
.bjcr-pop small { display: block; font-size: 11px; color: #56607a; }
.bjcr-pop > span:hover { border-color: rgba(245, 118, 26, .5); }
.bjcr-pop input:checked + span { border-color: #f5761a; background: #fff5ec; }
.bjcr-pop input:checked + span b { color: #dd660f; }
.bjcr-pop input:focus-visible + span { outline: 2px solid #f5761a; outline-offset: 2px; }
/* the fare slider */
.bjcr-rangeval { font-size: 11.5px; color: #56607a; }
.bjcr-rangeval strong { color: #17233e; font-weight: 600; font-variant-numeric: tabular-nums; }
.bjcr-range { display: block; width: 100%; margin: 4px 0 0; accent-color: #f5761a; cursor: pointer; }
.bjcr-rangeout { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11px; color: #8a93a8; font-variant-numeric: tabular-nums; }
/* the foot */
.bjcr-rail__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px; border-top: 1px solid #f0efea; }
.bjcr-foot-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; border: 1px solid #e3e7ee; border-radius: 10px;
  background: #fff; color: #56607a; font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.bjcr-foot-btn i, .bjcr-foot-btn svg { font-size: 11px; }
.bjcr-foot-btn:hover { border-color: #f5761a; color: #f5761a; background: #fff5ec; }
.bjcr-foot-btn .n { padding: 1px 6px; border-radius: 999px; background: #f5761a; color: #fff; font-size: 10.5px; font-weight: 600; }
/* With carrier / Without carrier: the same buttons, two to a row at the
   foot of the Car type and Cab model groups; the chosen one stays orange */
.bjcr-fgroup__btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
/* the 260px rail cannot hold "Without carrier" on one line beside its
   twin: the words wrap inside the button rather than widen the rail (a
   wider rail clipped the fare figures beside the boxes) */
.bjcr-fgroup__btns .bjcr-foot-btn { min-width: 0; padding: 8px 6px; font-size: 12px; line-height: 1.25; white-space: normal; text-align: center; }
.bjcr-foot-btn.is-on { border-color: #f5761a; color: #f5761a; background: #fff5ec; }

/* count and sort */
.bjcr-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bjcr-count { margin: 0; font-size: 16px; font-weight: 600; color: #17233e; text-transform: none; letter-spacing: 0; }
.bjcr-tools__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bjcr-filterbtn {
  display: none; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid #d5dbe5; border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: #17233e; cursor: pointer;
}
.bjcr-filterbtn b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #f5761a; color: #fff; font-size: 10.5px; font-weight: 600; }
.bjcr-sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bjcr-sort__k { margin-right: 2px; font-size: 12.5px; color: #5a6377; }
.bjcr-sort__chip {
  padding: 6px 13px; border: 1px solid #e3e7ee; border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: #56607a; cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.bjcr-sort__chip:hover { color: #17233e; border-color: #c9d0dc; }
.bjcr-sort__chip.is-on { border-color: #17233e; background: #17233e; color: #fff; }

/* a card per car */
.bjcr-list { display: flex; flex-direction: column; gap: 16px; }
.bjcr-card {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 210px; overflow: hidden; background: #fff; border: 1px solid #e6e9f0; border-radius: 16px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.bjcr-card:hover { border-color: #dfe4ec; box-shadow: 0 18px 36px -24px rgba(23, 35, 62, .45); }
.bjcr-card__pic { overflow: hidden; background: #eef1f6; }
.bjcr-card__pic .bjcab-car { max-width: 196px; }
/* the card's gallery: the car, then its seats, luggage space and roof
   carrier (the designer, 2026-10-29: "3 se 4 img dikhani hai") - the
   tour galleries' round arrows on the photo (her word over a thumb strip:
   "arrow system de do"), a label chip bottom-left, dots bottom-right */
.bjcr-gal { position: relative; height: 100%; }
.bjcr-gal__main { position: relative; height: 100%; min-height: 150px; background: #eef1f6; overflow: hidden; }
.bjcr-gal__main .bjcab-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.bjcr-gal__main .bjcab-car { position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-50%); }
.bjcr-gal__lbl { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(23, 35, 62, .72); color: #fff; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; pointer-events: none; }
.bjcr-gal__dots { position: absolute; right: 10px; bottom: 14px; display: flex; gap: 4px; pointer-events: none; }
.bjcr-gal__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(23, 35, 62, .25); }
.bjcr-gal__dots i.is-on { background: #fff; }
.bjcr-gal__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center; padding: 0;
  width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: #17233e; font-size: 11px; cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(11, 17, 32, .45);
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bjcr-gal__nav:hover { background: #f5761a; border-color: #f5761a; color: #fff; transform: translateY(-50%) scale(1.06); box-shadow: 0 8px 20px -6px rgba(245, 118, 26, .55); }
.bjcr-gal__nav:focus { outline: none; border-radius: 50%; }
.bjcr-gal__nav:focus-visible { outline: 2px solid rgba(245, 118, 26, .6); outline-offset: 3px; }
.bjcr-gal__nav--prev { left: 8px; }
.bjcr-gal__nav--next { right: 8px; }
.bjcr-gal--one .bjcr-gal__nav, .bjcr-gal--one .bjcr-gal__lbl, .bjcr-gal--one .bjcr-gal__dots { display: none; }
.bjcr-card__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 16px 20px; }
.bjcr-card__tag { font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #f5761a; }
.bjcr-card__name { margin: 0; font-size: 17px; font-weight: 600; color: #17233e; text-transform: none; letter-spacing: 0; }
.bjcr-card__models { margin: 0; font-size: 12.5px; color: #5a6377; }
.bjcr-card__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 2px; padding: 0; list-style: none; font-size: 12.5px; color: #17233e; }
.bjcr-card__facts li { display: inline-flex; align-items: center; gap: 6px; }
.bjcr-card__facts i, .bjcr-card__facts svg { color: #f5761a; font-size: 11.5px; }
/* the roof carrier stands out from the other facts (the designer,
   2026-10-30: "roof carrier pe focus karna hai"): a tinted tag that also
   turns the gallery to the carrier photo */
.bjcr-carrier {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid #f9c89a; border-radius: 999px;
  background: #fff5ec; color: #c2410c; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.bjcr-carrier:hover { background: #f5761a; border-color: #f5761a; color: #fff; }
.bjcr-carrier:hover i, .bjcr-carrier:hover svg { color: #fff; }
.bjcr-carrier:focus-visible { outline: 2px solid rgba(245, 118, 26, .6); outline-offset: 2px; }
/* the booking page's policy card ends with the results panel's two boxes -
   What's included, Not included - side by side, one under the other on a phone */
.bjcb-fareboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.bjcb-fareboxes .bjcr-fare__box { background: #f7f8fb; border-color: #e9ecf2; }
@media (max-width: 767.98px) {
  .bjcb-fareboxes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* the booking page asks for the carrier in the same tint, under the addresses */
.bjcb-carrier { margin-top: 14px; padding: 12px 14px; border: 1px solid #f9c89a; border-radius: 12px; background: #fff5ec; }
.bjcb-carrier .bjeb-check { margin: 0; }
.bjcb-carrier b { display: block; font-weight: 600; color: #17233e; }
.bjcb-carrier b i, .bjcb-carrier b svg { color: #f5761a; margin-right: 2px; }
.bjcb-carrier small { display: block; margin-top: 2px; font-size: 12px; color: #5a6377; }

/* the "verified" word beside the email on the confirmation (the field itself is js/bj-email-verify.js) */
.bjcb-verified { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: #157a47; font-size: 11.5px; font-weight: 600; }
.bjcb-verified i, .bjcb-verified svg { font-size: 11px; color: #1a8f4c; }
@media (max-width: 575.98px) {
}
.bjcr-card__ticks { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: #3d4760; }
.bjcr-card__ticks li { display: flex; align-items: flex-start; gap: 8px; }
.bjcr-card__ticks i, .bjcr-card__ticks svg { flex: 0 0 auto; width: 13px !important; margin-top: 3px; color: #8b93a5; font-size: 11.5px; }
.bjcr-card__ticks li.is-ok { color: #157a47; font-weight: 500; }
.bjcr-card__ticks li.is-ok i, .bjcr-card__ticks li.is-ok svg { color: #1a8f4c; }
.bjcr-card__buy { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; padding: 16px 20px; border-left: 1px dashed #e3e7ee; text-align: right; }
.bjcr-card__price b { display: block; font-size: 22px; font-weight: 600; line-height: 1.2; color: #17233e; }
.bjcr-card__price small { display: block; font-size: 11.5px; color: #5a6377; }
.bjcr-card__more { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12.5px; font-weight: 500; color: #17233e; cursor: pointer; }
.bjcr-card__more i, .bjcr-card__more svg { font-size: 10px; color: #f5761a; transition: transform .2s ease; }
.bjcr-card__more.is-open i, .bjcr-card__more.is-open svg { transform: rotate(180deg); }
/* Fare details: three white boxes on a grey ground - the breakdown with
   its total strip, What's included with green tick discs, Not included
   with grey cross discs and the "settled with the driver" note (the
   designer, 2026-10-30: "ye cheezein achhe se banao") */
.bjcr-card__fare { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; padding: 16px 20px 18px; border-top: 1px solid #eef0f4; background: #f4f6fa; }
.bjcr-card__fare[hidden] { display: none; }
.bjcr-fare__box { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid #e6e9f0; border-radius: 12px; background: #fff; }
.bjcr-fare__box h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: #17233e; text-transform: none; letter-spacing: 0; }
.bjcr-fare__box h4 i, .bjcr-fare__box h4 svg { width: 13px !important; font-size: 12px; color: #f5761a; }
.bjcr-fare__box--incl h4 i, .bjcr-fare__box--incl h4 svg { color: #1a8f4c; }
.bjcr-fare__box--excl h4 i, .bjcr-fare__box--excl h4 svg { color: #8b93a5; }
.bjcr-fare__rows { display: flex; flex-direction: column; gap: 7px; }
.bjcr-fare__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 13px; color: #17233e; }
.bjcr-fare__row span small { display: block; font-size: 11.5px; color: #5a6377; }
.bjcr-fare__row b { font-weight: 500; white-space: nowrap; }
.bjcr-fare__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px -16px -14px; padding: 11px 16px; border-top: 1px solid #ffe3c8; border-radius: 0 0 12px 12px; background: #fff5ec; font-size: 13.5px; font-weight: 600; color: #17233e; }
.bjcr-fare__total span small { display: block; font-size: 11px; font-weight: 400; color: #5a6377; }
.bjcr-fare__total b { font-size: 18px; font-weight: 600; color: #c2410c; white-space: nowrap; }
.bjcr-incl, .bjcr-excl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: #3d4760; }
.bjcr-incl li, .bjcr-excl li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.4; }
.bjcr-fare__dot { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; font-style: normal; }
.bjcr-fare__dot i, .bjcr-fare__dot svg { width: 9px !important; font-size: 9px; }
.bjcr-incl .bjcr-fare__dot { background: #e6f6ec; color: #1a8f4c; }
.bjcr-excl .bjcr-fare__dot { background: #eef0f4; color: #8b93a5; }
.bjcr-fare__note { display: flex; gap: 6px; margin: auto 0 0; padding-top: 10px; font-size: 11.5px; color: #5a6377; }
@media (max-width: 767.98px) {
  .bjcr-card__fare { grid-template-columns: minmax(0, 1fr); }
}

/* buttons: as wide as their words (the owner's rule) */
.bjcr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 20px; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #f5761a 0%, #dd660f 100%); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600;
  line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: 0 8px 18px -10px rgba(245, 118, 26, .9);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bjcr-btn:hover { color: #fff; transform: translateY(-1px); }
.bjcr-btn--ghost { background: #fff; color: #f5761a; border: 1px solid rgba(245, 118, 26, .6); box-shadow: none; }
.bjcr-btn--ghost:hover { background: #f5761a; color: #fff; }
.bjcr-btn--navy { background: #17233e; box-shadow: none; }

.bjcr-empty, .bjcr-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px; background: #fff; border: 1px solid #e6e9f0;
  border-radius: 16px; text-align: center; color: #17233e;
}
.bjcr-empty > i, .bjcr-empty > svg { font-size: 22px; color: #f5761a; }
.bjcr-empty b { font-size: 15px; font-weight: 600; }
.bjcr-empty p { margin: 0 0 6px; font-size: 13px; color: #5a6377; }
.bjcr-state .bjb-bey { margin: 0 auto; }
.bjcr-state__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.bjcr.is-stopped .bjcr-grid { grid-template-columns: minmax(0, 1fr); }

.bjcr-help { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 18px; background: #fff; border: 1px solid #e6e9f0; border-radius: 16px; }
.bjcr-help[hidden] { display: none; }
.bjcr-help__ico { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff5ec; color: #f5761a; }
.bjcr-help__txt { flex: 1 1 auto; display: flex; flex-direction: column; font-size: 12.5px; color: #5a6377; }
.bjcr-help__txt b { font-size: 13.5px; font-weight: 600; color: #17233e; }
.bjcr-help .bjcr-btn { flex: 0 0 auto; }

/* laptop, narrower */
@media (max-width: 1199.98px) {
  .bjcr-grid { grid-template-columns: 230px minmax(0, 1fr); }
  .bjcr-card { grid-template-columns: 180px minmax(0, 1fr) 190px; }
}

/* tablet: one column, the filters behind a button */
@media (max-width: 991.98px) {
  .bjcr-trip { grid-template-columns: minmax(0, 1fr); }
  .bjcr-trip__facts { justify-content: flex-start; }
  .bjcr-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* below a laptop the rail is a card over the list, opened by the Filters
     button: a head with a close, the groups, and Reset / Show N cabs at the foot */
  .bjcr-rail { position: static; display: none; margin-bottom: 16px; }
  .bjcr-rail.is-open { display: block; }
  .bjcr-rail__card { max-height: none; overflow: visible; }
  .bjcr-rail__top, .bjcr-rail__foot { display: none; }
  .bjcr-rail__sheethead { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid #f0efea; }
  .bjcr-rail__sheethead h2 { margin: 0; font-size: 15px; font-weight: 600; color: #17233e; text-transform: none; letter-spacing: 0; }
  .bjcr-rail__close { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e3e7ee; border-radius: 50%; background: #fff; color: #17233e; font-size: 12px; cursor: pointer; }
  .bjcr-rail__sheetfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid #f0efea; }
  .bjcr-rail__sheetfoot .bjcr-foot-btn { padding: 8px 12px; }
  .bjcr-rail__sheetfoot .bjcr-foot-btn--up { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; margin-left: auto; }
  .bjcr-rail__sheetfoot .bjcr-foot-btn--up i, .bjcr-rail__sheetfoot .bjcr-foot-btn--up svg { font-size: 12px; }
  .bjcr-popgrid { grid-template-columns: repeat(4, 1fr); }
  .bjcr-filterbtn { display: inline-flex; }
  .bjcr-card { grid-template-columns: 200px minmax(0, 1fr); }
  .bjcr-card__buy { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 20px 16px; border-left: 0; text-align: left; }
  .bjcr-card__price { margin-right: auto; }
  .bjcr-card__more { order: 3; flex-basis: 100%; }
}

/* phone */
@media (max-width: 575.98px) {
  .bjcr-top { padding: 12px 0 0; }
  .bjcr-band { padding: 12px 0; }
  .bjcr.is-stuck .bjcr-band { padding: 8px 0; }
  .bjcr-head { display: none; }
  .bjcr-tools--top { display: none; }
  .bjcr-bar {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid #e6e9f0; border-radius: 14px;
    background: #fff; font-family: inherit; text-align: left; cursor: pointer; box-shadow: 0 6px 18px -14px rgba(23, 35, 62, .4);
  }
  .bjcr-bar__pin { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff5ec; color: #f5761a; font-size: 14px; }
  .bjcr-bar__words { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
  .bjcr-bar__words b { font-size: 13.5px; font-weight: 600; color: #17233e; overflow-wrap: anywhere; }
  .bjcr-bar__words small { font-size: 11.5px; color: #5a6377; }
  .bjcr-bar__edit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid #d5dbe5; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: #17233e; }
  .bjcr-bar__edit i, .bjcr-bar__edit svg { font-size: 10px; color: #f5761a; }
  .bjcr-modify { display: none; margin-top: 10px; }
  .bjcr.is-editing .bjcr-modify { display: block; }
  .bjcr-body { padding-top: 14px; }
  .bjcr-trip { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; gap: 8px; }
  .bjcr-trip__kind { font-size: 9.5px; }
  .bjcr-trip__place b { font-size: 14px; }
  .bjcr-trip__place small { font-size: 10.5px; }
  .bjcr-trip__road { min-width: 30px; }
  .bjcr-trip__facts { gap: 4px 12px; font-size: 11.5px; }
  .bjcr-tools { gap: 8px; margin-bottom: 10px; }
  .bjcr-count { font-size: 14px; }
  .bjcr-tools__right { flex: 1 1 100%; justify-content: space-between; gap: 8px; }
  .bjcr-sort__k { display: none; }
  .bjcr-sort { gap: 4px; }
  .bjcr-sort__chip { padding: 5px 9px; font-size: 11px; }
  .bjcr-filterbtn { padding: 5px 10px; font-size: 11px; }
  .bjcr-list { gap: 12px; }
  .bjcr-card { grid-template-columns: 112px minmax(0, 1fr); border-radius: 14px; }
  .bjcr-card__pic { align-self: start; aspect-ratio: 4 / 3; margin: 12px 0 0 12px; border-radius: 10px; }
  /* the 112px photo: smaller arrows at its edges, dots along the foot, no
     room for the label chip */
  .bjcr-gal__main { min-height: 0; }
  .bjcr-gal__lbl { display: none; }
  .bjcr-gal__dots { left: 0; right: 0; bottom: 5px; justify-content: center; }
  .bjcr-gal__nav { width: 22px; height: 22px; font-size: 9px; }
  .bjcr-gal__nav--prev { left: 3px; }
  .bjcr-gal__nav--next { right: 3px; }
  .bjcr-card__body { padding: 12px 12px 8px 4px; gap: 3px; }
  .bjcr-card__tag { font-size: 9.5px; }
  .bjcr-card__name { font-size: 15px; }
  .bjcr-card__models { font-size: 11px; }
  .bjcr-card__facts { gap: 2px 10px; font-size: 11px; }
  .bjcr-carrier { padding: 2px 8px 2px 7px; font-size: 10.5px; }
  .bjcr-card__ticks { font-size: 11px; gap: 3px; }
  /* price and button face to face, across the card's foot */
  .bjcr-card__buy { grid-column: 1 / -1; padding: 10px 12px 12px; border-top: 1px dashed #e3e7ee; gap: 6px 10px; }
  .bjcr-card__price b { font-size: 17px; }
  .bjcr-card__price small { font-size: 10.5px; }
  .bjcr-card__buy .bjcr-btn { padding: 7px 14px; font-size: 12px; }
  .bjcr-card__more { font-size: 11.5px; }
  .bjcr-card__fare { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
  .bjcr-fare__box { padding: 12px 14px; }
  .bjcr-fare__total { margin: 10px -14px -12px; padding: 10px 14px; }
  .bjcr-fare__total b { font-size: 16px; }
  .bjcr-fare__row { font-size: 12px; }
  .bjcr-incl, .bjcr-excl { font-size: 11.5px; }
  .bjcr-help { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .bjcr-help__txt { flex-basis: calc(100% - 54px); font-size: 11.5px; }
  .bjcr-help__txt b { font-size: 12.5px; }
  .bjcr-help .bjcr-btn { margin: 0 auto; padding: 7px 14px; font-size: 12px; }
  .bjcr-popgrid { grid-template-columns: 1fr 1fr; }
  .bjcr-fgroup { padding: 0 14px; }
  .bjcr-rail__sheethead { padding: 10px 14px; }
  /* the foot keeps clear of the floating dock's lane on the right (the call /
     WhatsApp column, 52px): Show N cabs sat under the call button at 360 */
  .bjcr-rail__sheetfoot { padding: 10px 46px 10px 12px; gap: 8px; }
  .bjcr-rail__sheetfoot .bjcr-foot-btn { padding: 8px 10px; }
  .bjcr-check { font-size: 12.5px; }
}

/* ---------------------------------------------------------------------
   E. The booking steps (/cab-booking) - on the experience checkout's
   css/bj-exp-booking.css; only what a cab needs instead of a ticket
   --------------------------------------------------------------------- */
.bjcb-trip__car { flex: none; width: 150px; height: 112px; overflow: hidden; border-radius: 10px; background: #eef1f6; }
.bjcb-trip__car .bjcab-car { max-width: none; }
.bjcb-trip__name { text-transform: none; }
.bjcb-trip__via { display: inline-block; margin-left: 6px; font-size: 12.5px; font-weight: 500; color: #5a6377; }
.bjcb-trip .bjeb-trip__opt b { font-weight: 600; color: #17233e; }
/* the car's facts under its name: AC, seats, bags, the carrier - icon beside the words */
.bjcb-trip__facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; font-size: 12.5px; color: #5a6377; }
.bjcb-trip__facts > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bjcb-trip__facts i, .bjcb-trip__facts svg { font-size: 11px; color: #f5761a; }
.bjcb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bjcb-mini__car { flex: none; width: 72px; height: 54px; overflow: hidden; border-radius: 10px; background: #f3f5f9; }
.bjcb-addr { min-height: 58px; resize: vertical; }
.bjeb-fld__k small { font-weight: 400; color: #8b93a5; }

/* the voucher stub: the car, the booking ID, paid */
.bjcb-voucher__stub { gap: 8px; }
.bjcb-voucher__car { display: block; width: 136px; height: 102px; overflow: hidden; border-radius: 10px; }
.bjcb-voucher__ref b { font-size: 18px; letter-spacing: .06em; }
.bjcb-voucher__paid { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #157a47; }
.bjcb-voucher__paid i, .bjcb-voucher__paid svg { color: #1a8f4c; }
.bjcb-voucher__words { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
/* "Passenger and pickup": plain label / value rows with hairlines - the
   site's base table rules (style.css: a grid of cell borders, 10px padding,
   vertical-align sub) are undone here - and the value column wraps: the
   shared table keeps values on one line, and a pickup address ran the card
   437px wide on a 360 phone (2026-11-02, the confirmation pass) */
.bjcb .bjeb-names { table-layout: fixed; }
.bjcb .bjeb-names > tbody > tr > td { padding: 9px 0; border: 0; border-bottom: 1px solid #eef0f4; vertical-align: top !important; }
.bjcb .bjeb-names > tbody > tr:nth-child(even) { background: none; }
.bjcb .bjeb-names > tbody > tr:last-child > td { border-bottom: 0; }
.bjcb .bjeb-names td:first-child { width: 36%; font-weight: 500; color: #5a6377; }
.bjcb .bjeb-names td:last-child { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; font-weight: 500; color: #17233e; }
.bjeb-ticket__cell--wide { grid-column: 1 / -1; }

.bjcb-driver__row { display: flex; align-items: flex-start; gap: 14px; }
.bjcb-driver__ico { flex: 0 0 42px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff5ec; color: #f5761a; font-size: 17px; }
.bjcb-driver__row b { display: block; font-size: 14px; font-weight: 600; color: #17233e; }
.bjcb-driver__row p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: #5a6377; }

@media (max-width: 767.98px) {
  .bjcb-trip__car { width: 110px; height: 82px; }
  .bjcb-voucher__car { width: 110px; height: 82px; }
  /* the traveller form two fields a row on phones too - Full name | Gender,
     Mobile | Alternate - so it sits in one screen, with a tighter rhythm
     (the designer, 2026-11-02, at the stacked fields: "sahi se banao");
     js/bj-cab-booking.js gives the half-wide +91 fields short placeholders */
  .bjcb .bjeb-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
  .bjcb .bjcb-two--name { grid-template-columns: minmax(0, 1fr) 170px; }
  .bjcb .bjeb-fld { margin-bottom: 12px; }
  .bjcb .bjeb-tel__cc { width: 44px; font-size: 13px; }
  .bjcb .bjeb-tel .bjeb-in { padding: 0 10px; }
  .bjcb .bjeb-info { margin: 10px 0 14px !important; }
}
@media (max-width: 575.98px) {
  /* The trip card on a phone (the designer, 2026-11-02, at the review step:
     "iss page ko ache se banao"): the kicker on its own line with Change at
     its right, the car beside its name and models, the facts in one row
     under both, and the foot as plain lines - the free-cancellation line
     and the inclusions two to a row - under a dashed hairline. The words
     wrapper is display: contents so the grid places its children. */
  .bjcb-trip .bjeb-trip__top { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; }
  .bjcb-trip .bjeb-trip__words { display: contents; }
  .bjcb-trip .bjeb-trip__kicker { grid-column: 1 / 3; grid-row: 1; margin-bottom: 10px; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
  .bjcb-trip .bjeb-trip__change { grid-column: 3; grid-row: 1; font-size: 12.5px; }
  .bjcb-trip .bjcb-trip__car { grid-column: 1; grid-row: 2 / 4; width: 96px; height: 72px; }
  .bjcb-trip .bjeb-trip__name { grid-column: 2 / 4; grid-row: 2; margin: 0 0 3px; font-size: 17px; line-height: 1.3; }
  .bjcb-trip .bjeb-trip__opt { grid-column: 2 / 4; grid-row: 3; font-size: 12.5px; line-height: 1.45; }
  .bjcb-trip .bjcb-trip__facts { grid-column: 1 / 4; grid-row: 4; margin-top: 12px; gap: 4px 12px; font-size: 12px; }
  /* the strip: one fact a row, lines between; the Cab row is the card's head already */
  .bjcb-strip { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .bjcb-strip .bjeb-strip__cell { border-left: 0; border-top: 0; }
  .bjcb-strip .bjeb-strip__cell + .bjeb-strip__cell { border-top: 1px solid var(--bjeb-line); }
  .bjcb-strip .bjcb-strip__cab { display: none; }
  .bjcb-trip .bjeb-trip__foot { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e3e7ee; }
  .bjcb-trip .bjeb-trip__foot .bjeb-pill { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 0; border-radius: 0; background: none; font-size: 12.5px; font-weight: 500; line-height: 1.45; }
  .bjcb-trip .bjeb-trip__foot .bjeb-pill i, .bjcb-trip .bjeb-trip__foot .bjeb-pill svg { margin-top: 3px; font-size: 12px; }
  /* one inclusion a line: two to a row wrapped ragged ("Fuel charges (Diesel, / CNG or Hybrid)") */
  .bjcb-trip .bjeb-incl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bjcb-trip .bjeb-incl li { align-items: flex-start; font-size: 12px; line-height: 1.4; }
  .bjcb-trip .bjeb-incl li i, .bjcb-trip .bjeb-incl li svg { margin-top: 4px; }
  /* The page lighter (the designer, 2026-11-02: "poora page sahi se bana
     do, bhara bhara sa na lage"): the inclusions named once - in the policy
     card's fold, not in the trip card's foot as well; the blue note boxes
     as plain lines; the four promises one quiet card of rows, icon beside
     the words, instead of four tiles; What's included / Not included behind
     one fold (js/bj-cab-booking.js policyCard draws the <details> on phones). */
  .bjcb-trip .bjeb-incl { display: none; }
  .bjcb-trip .bjeb-trip__foot .bjeb-pill { margin: 0; }
  .bjcb .bjeb-info { margin: 8px 0 14px !important; padding: 0; background: none; color: #5a6377; }
  .bjcb .bjeb-info i, .bjcb .bjeb-info svg { color: #f5761a; }
  .bjcb .bjeb-trust { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 0 16px; padding: 2px 16px; border: 1px solid #eceef2; border-radius: 12px; background: #fff; }
  .bjcb .bjeb-trust__item { padding: 11px 0; border: 0; border-top: 1px solid #eef0f4; border-radius: 0; background: none; }
  .bjcb .bjeb-trust__item:first-child { border-top: 0; }
  .bjcb-carrier { padding: 10px 12px; }
  .bjcb-fold { margin-top: 14px; border-top: 1px solid #eef0f4; }
  .bjcb-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 2px; list-style: none; font-size: 14px; font-weight: 600; color: #17233e; cursor: pointer; }
  .bjcb-fold > summary::-webkit-details-marker { display: none; }
  .bjcb-fold > summary i, .bjcb-fold > summary svg { font-size: 11px; color: #5a6377; transition: transform .2s ease; }
  .bjcb-fold[open] > summary i, .bjcb-fold[open] > summary svg { transform: rotate(180deg); }
  .bjcb-fold .bjcb-fareboxes { margin-top: 12px; }
  /* Gender beside Full name: just the word and the chevron at a phone's width */
  .bjcb .bjcb-two--name { grid-template-columns: minmax(0, 1fr) 118px; }

  /* The confirmation on a phone (the designer, 2026-11-02, two screenshots:
     "in buttons ko proper banao, iss poore card ko sahi se banao").
     The band's booking ID: label over the ID, Copy a bordered pill at the
     right. The status card: the three facts as label / value rows with
     hairlines, then the actions as a grid - Download voucher across, filled
     orange, Add to calendar | WhatsApp us under it, equal halves. The
     voucher: the car on its own line under the route, the address a cell
     across the grid, the stub a row - the car's photo beside the booking
     ID and the paid line, not a tall centred column. */
  .bjcb .bjeb-done__ref { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 14px; }
  .bjcb .bjeb-done__ref > span { grid-column: 1; grid-row: 1; }
  .bjcb .bjeb-done__ref strong { grid-column: 1; grid-row: 2; font-size: 19px; }
  .bjcb .bjeb-done__copy { grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; color: #fff; font-size: 12px; }
  .bjcb .bjeb-status { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 16px 16px; }
  .bjcb .bjeb-status > div:not(.bjeb-status__acts) { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef0f4; }
  .bjcb .bjeb-status small { font-size: 12.5px; }
  .bjcb .bjeb-status b { font-size: 13px; }
  .bjcb .bjeb-status .bjeb-pill { align-self: center; }
  .bjcb .bjeb-status__acts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin: 14px 0 0; padding: 0; border: 0; }
  .bjcb .bjeb-status__acts > * { width: 100%; min-height: 42px; margin: 0; padding: 0 10px; font-size: 13px; white-space: nowrap; justify-content: center; }
  .bjcb .bjeb-status__acts > :first-child { grid-column: 1 / -1; background: #f5761a; border-color: #f5761a; color: #fff; }
  .bjcb .bjeb-status__acts > :first-child:hover { background: #e2690f; border-color: #e2690f; color: #fff; }
  .bjcb-voucher__sep { display: none; }
  .bjcb-voucher__carw { display: block; }
  .bjcb .bjeb-ticket__rules li { align-items: flex-start; }
  .bjcb .bjeb-ticket__rules li i, .bjcb .bjeb-ticket__rules li svg { margin-top: 3px; }
  .bjcb .bjcb-voucher__stub { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 14px 16px; text-align: left; }
  .bjcb .bjcb-voucher__car { flex: none; width: 96px; height: 72px; }
  .bjcb .bjcb-voucher__words { align-items: flex-start; gap: 2px; }
  .bjcb .bjeb-ticket__ref { align-items: flex-start; }
  /* "Passenger and pickup" airy on a phone (the designer, 2026-11-02:
     "bahut congested lag raha hai"): each fact a row, the label small over
     the value, hairlines between, no table grid */
  .bjcb .bjeb-names, .bjcb .bjeb-names > tbody, .bjcb .bjeb-names > tbody > tr, .bjcb .bjeb-names > tbody > tr > td { display: block; width: auto; }
  .bjcb .bjeb-names { margin-top: 4px; }
  .bjcb .bjeb-names > tbody > tr { padding: 11px 0; border-bottom: 1px solid #eef0f4; }
  .bjcb .bjeb-names > tbody > tr:last-child { border-bottom: 0; }
  .bjcb .bjeb-names > tbody > tr > td { padding: 0; border: 0; }
  .bjcb .bjeb-names td:first-child { margin-bottom: 3px; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #8b93a5; }
  .bjcb .bjeb-names td:last-child { font-size: 13.5px; line-height: 1.5; }
  .bjcb-voucher__ref b { font-size: 16px; }
}

/* ---------------------------------------------------------------------
   F. The clock (2026-10-29, "yahan toh watch banao"): the time big at the
   top with AM / PM beside it, a dial of twelve numbers, a hand to the one
   chosen; the hour first, then the minutes
   --------------------------------------------------------------------- */
.bjcs__clock {
  position: absolute; left: 50%; top: calc(100% + 6px); z-index: 30; width: 300px; margin-left: -150px; padding: 14px 16px 12px;
  background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; cursor: default; text-align: center;
  box-shadow: 0 2px 6px rgba(23, 35, 62, .06), 0 24px 50px -20px rgba(23, 35, 62, .4);
}
.bjcs__clock[hidden] { display: none; }
#bjcsTimeF, #bjcsRtimeF { position: relative; }
/* six cells on a round trip: the dates and times give a little */
.bjcs[data-trip="round"] .bjcs__f--date .bjcs__v, .bjcs[data-trip="round"] .bjcs__f--time .bjcs__v { font-size: 14.5px; }
.bjcs[data-trip="round"] .bjcs__f--date, .bjcs[data-trip="round"] .bjcs__f--time { flex-grow: .8; }
.bjcs__clock-head { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 12px; }
.bjcs__clock-seg {
  min-width: 58px; padding: 4px 8px; border: 0; border-radius: 10px; background: #f3f5f9; color: #17233e;
  font-family: inherit; font-size: 30px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.bjcs__clock-seg.is-on { background: #fff5ec; color: #f5761a; }
.bjcs__clock-colon { font-size: 28px; font-weight: 600; color: #17233e; line-height: 1; }
.bjcs__clock-ap { display: flex; flex-direction: column; gap: 4px; margin-left: 10px; }
.bjcs__clock-apbtn {
  width: 44px; padding: 4px 0; border: 1px solid #e3e7ee; border-radius: 8px; background: #fff; color: #56607a;
  font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.bjcs__clock-apbtn.is-on { border-color: #f5761a; background: #f5761a; color: #fff; }
.bjcs__clock-apbtn:disabled { border-color: #eef0f4; background: #f7f8fa; color: #c3c9d4; cursor: not-allowed; }
.bjcs__dial { position: relative; width: 240px; height: 240px; margin: 0 auto; border-radius: 50%; background: #f3f5f9; }
.bjcs__dial-n {
  position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #17233e; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 38px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.bjcs__dial-n:hover { background: #e6e9f0; }
.bjcs__dial-n.is-on { background: #f5761a; color: #fff; font-weight: 600; }
.bjcs__dial-n:disabled { color: #c3c9d4; cursor: not-allowed; background: transparent; }
.bjcs__dial-n:focus-visible { outline: 2px solid #f5761a; outline-offset: 2px; }
/* the hand: a line from the centre, turned to the chosen number */
.bjcs__dial-hand {
  position: absolute; left: 50%; top: calc(50% - 78px); width: 2px; height: 78px; margin-left: -1px; border-radius: 2px;
  background: #f5761a; transform-origin: 50% 100%; transition: transform .25s ease;
}
.bjcs__dial-pin { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #f5761a; }
.bjcs__clock-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.bjcs__clock-note { font-size: 11.5px; color: #5a6377; text-align: left; }
.bjcs__clock-done { flex: 0 0 auto; padding: 7px 16px; border: 0; border-radius: 999px; background: #17233e; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bjcs__clock-done:hover { background: #22335a; }
/* Done with AM / PM untouched: the reminder as a card over the dial (2026-10-30) */
.bjcs__clock-pop {
  position: absolute; left: 14px; right: 14px; top: 50%; z-index: 3; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid #ffd9b8; border-radius: 14px; background: #fff;
  box-shadow: 0 18px 40px -16px rgba(23, 35, 62, .45), 0 0 0 6px rgba(255, 255, 255, .7);
}
.bjcs__clock-ask { font-size: 13px; line-height: 1.45; color: #17233e; text-align: center; }
.bjcs__clock-ask b { font-weight: 600; }
/* two buttons of one size, side by side, the words wrapping inside them
   (the designer, 2026-11-02: "ye buttons proper nahi hain") */
.bjcs__clock-askbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bjcs__clock-askbtns > button { width: 100%; min-height: 40px; padding: 7px 10px; font-size: 12.5px; line-height: 1.25; white-space: normal; }
.bjcs__clock-keep { flex: 0 0 auto; padding: 7px 14px; border: 1px solid #d9dee8; border-radius: 999px; background: #fff; color: #17233e; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bjcs__clock-keep:hover { border-color: #17233e; }
.bjcs__clock-done[disabled] { opacity: .5; cursor: default; }
.bjcs__clock-done[disabled]:hover { background: #17233e; }
/* the foot's Done, asleep while the card is up: greyed, not merely faded */
.bjcs__clock-foot .bjcs__clock-done[disabled] { background: #c9cfdb; color: #fff; opacity: 1; }
@media (max-width: 575.98px) {
  /* the clock as a SHEET in the middle of the screen on phones, over a dimmed
     page - as the calendar opens (the designer, 2026-11-02: "mob view mein
     neeche aa raha hai, main chahti hoon screen pe hi pop-up type mein aaye");
     Done, the reminder card and a tap outside work as before */
  .bjcs__clock, .bjcs__f.is-right .bjcs__clock {
    position: fixed; left: 50%; right: auto; top: 50%; width: min(320px, calc(100vw - 24px)); margin: 0;
    transform: translate(-50%, -50%); z-index: 9999; max-height: calc(100vh - 24px); overflow: auto;
    box-shadow: 0 2px 6px rgba(23, 35, 62, .06), 0 28px 60px -22px rgba(23, 35, 62, .38), 0 0 0 100vmax rgba(23, 35, 62, .45);
  }
  /* the open Time cell must not be a stacking context (the generic open-cell
     rule gives it z-index 1), or the sheet inside it sits under the swap
     disc and the floating dock */
  .bjcs__f--time.is-open, .bjcs__f--time:focus-within, .bjcs__f--time.is-nudge { z-index: auto; }
  /* the floating dock steps aside while the clock sheet is up (js/bj-cab-search.js clockOpen) */
  html.bjcs-sheet .bjx { visibility: hidden; }
}

/* the address fields on the booking: "Use my location" beside the label,
   suggestions under the box while typing, a line that says what was found */
.bjcb-fld--addr { position: relative; }
.bjcb-addr__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bjcb-addr__head .bjeb-fld__k { margin-bottom: 0; }
.bjcb-locate {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 4px 10px; border: 1px solid rgba(245, 118, 26, .5); border-radius: 999px;
  background: #fff; color: #f5761a; font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.bjcb-locate:hover:not(:disabled) { background: #f5761a; color: #fff; }
.bjcb-locate:disabled { opacity: .7; cursor: progress; }
.bjcb-locate i, .bjcb-locate svg { font-size: 11px; }
.bjcb-sugg {
  position: absolute; left: 0; right: 0; top: calc(100% - 18px); z-index: 20; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid #e6e9f0; border-radius: 12px; box-shadow: 0 2px 6px rgba(23, 35, 62, .06), 0 24px 50px -20px rgba(23, 35, 62, .4);
}
.bjcb-sugg[hidden] { display: none; }
.bjcb-sugg li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #17233e; cursor: pointer; }
.bjcb-sugg li:hover, .bjcb-sugg li:focus { background: #fff5ec; outline: none; }
.bjcb-sugg li i, .bjcb-sugg li svg { flex: 0 0 auto; margin-top: 3px; color: #f5761a; font-size: 12px; }
.bjcb-sugg li b { display: block; font-weight: 600; }
.bjcb-sugg li small { display: block; font-size: 11.5px; color: #5a6377; line-height: 1.4; }
.bjcb-sugg__credit, .bjcb-sugg li.bjcb-sugg__credit { padding: 4px 10px 2px; font-size: 10px; color: #8b93a5; cursor: default; }
.bjcb-sugg li.bjcb-sugg__credit:hover { background: none; }
.bjcb-addr__hint { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: #157a47; }
.bjcb-addr__hint.is-warn { color: #d9480f; }
@media (max-width: 575.98px) {
  .bjcb-locate { padding: 3px 9px; font-size: 11px; }
  /* the label on its own line, the two buttons in a row under it (the phone
     pass, 2026-11-02: they had stacked at the right beside the label) */
  .bjcb-addr__head { flex-wrap: wrap; gap: 6px 10px; }
  .bjcb-addr__acts { flex: 1 1 100%; justify-content: flex-start; }
  .bjcb-sugg li { font-size: 12.5px; }
}

/* "Pick on map": a map with the pin fixed at its centre, a search box over it,
   the address under the pin in the foot (Leaflet + OpenStreetMap) */
.bjcb-addr__acts { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bjcb-map { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(23, 35, 62, .55); }
.bjcb-map__card { display: flex; flex-direction: column; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }
.bjcb-map__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eef0f4; }
.bjcb-map__head h2 { margin: 0; font-size: 15.5px; font-weight: 600; color: #17233e; text-transform: none; letter-spacing: 0; }
.bjcb-map__close { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e3e7ee; border-radius: 50%; background: #fff; color: #17233e; font-size: 12px; cursor: pointer; }
.bjcb-map__search { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #eef0f4; }
.bjcb-map__search > i, .bjcb-map__search > svg { color: #f5761a; font-size: 13px; }
.bjcb-map__search input { flex: 1 1 auto; min-width: 0; padding: 8px 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font-family: inherit; font-size: 14px !important; font-weight: 500 !important; color: #17233e !important; height: auto !important; }
.bjcb-map__search input::placeholder { color: #a7aebf; font-weight: 400; }
.bjcb-map__results { position: absolute; left: 18px; right: 18px; top: calc(100% - 4px); z-index: 1200; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #e6e9f0; border-radius: 12px; box-shadow: 0 2px 6px rgba(23, 35, 62, .06), 0 24px 50px -20px rgba(23, 35, 62, .4); }
.bjcb-map__results[hidden] { display: none; }
.bjcb-map__results li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #17233e; cursor: pointer; }
.bjcb-map__results li:hover { background: #fff5ec; }
.bjcb-map__results li i, .bjcb-map__results li svg { flex: 0 0 auto; margin-top: 3px; color: #f5761a; font-size: 12px; }
.bjcb-map__results li b { display: block; font-weight: 600; }
.bjcb-map__results li small { display: block; font-size: 11.5px; color: #5a6377; line-height: 1.4; }
.bjcb-map__results li.bjcb-map__none { color: #5a6377; cursor: default; }
.bjcb-map__canvas { position: relative; flex: 1 1 auto; min-height: 0; }
.bjcb-map__el { width: 100%; height: 380px; background: #eef1f6; }
.bjcb-map__pin { position: absolute; left: 50%; top: 50%; z-index: 1000; transform: translate(-50%, -100%); font-size: 38px; line-height: 1; color: #f5761a; filter: drop-shadow(0 4px 6px rgba(23, 35, 62, .35)); pointer-events: none; }
.bjcb-map__pin::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 12px; height: 5px; margin-left: -6px; border-radius: 50%; background: rgba(23, 35, 62, .3); }
.bjcb-map__gps { position: absolute; right: 12px; bottom: 44px; z-index: 1000; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #e3e7ee; border-radius: 50%; background: #fff; color: #17233e; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px -2px rgba(23, 35, 62, .35); }
.bjcb-map__gps:hover { color: #f5761a; }
.bjcb-map__hint { position: absolute; left: 50%; top: 12px; z-index: 1000; margin: 0; padding: 5px 12px; transform: translateX(-50%); border-radius: 999px; background: rgba(23, 35, 62, .82); color: #fff; font-size: 11.5px; font-weight: 500; white-space: nowrap; pointer-events: none; }
.bjcb-map__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; border-top: 1px solid #eef0f4; background: #fafbfc; }
.bjcb-map__addr { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.45; color: #17233e; }
.bjcb-map__addr i, .bjcb-map__addr svg { flex: 0 0 auto; margin-top: 3px; color: #f5761a; font-size: 12px; }
/* the modal lives outside main.bjeb, so the checkout's button rules do not reach it */
.bjcb-map__foot .bjeb-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #f5761a 0%, #dd660f 100%); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; box-shadow: 0 8px 18px -10px rgba(245, 118, 26, .9); transition: transform .2s ease, opacity .2s ease;
}
.bjcb-map__foot .bjeb-btn:hover:not(:disabled) { transform: translateY(-1px); }
.bjcb-map__foot .bjeb-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
html.bjcb-map-open { overflow: hidden; }
/* Leaflet's controls under our pin and search, and its attribution small */
.bjcb-map .leaflet-control-container { z-index: 900; }
.bjcb-map .leaflet-control-attribution { font-size: 9.5px; }
@media (max-width: 767.98px) {
  .bjcb-map { padding: 0; align-items: stretch; }
  .bjcb-map__card { width: 100%; max-height: none; border-radius: 0; }
  .bjcb-map__head { padding: 12px 14px; }
  .bjcb-map__search { padding: 8px 14px; }
  .bjcb-map__results { left: 14px; right: 14px; }
  .bjcb-map__el { height: calc(100vh - 230px); min-height: 260px; }
  .bjcb-map__foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px; }
  .bjcb-map__foot .bjeb-btn { align-self: center; }
  .bjcb-map__pin { font-size: 34px; }
  .bjcb-addr__acts { gap: 4px; }
}

/* the car chosen on the landing page: named on the search card, and first
   on the results with a "Your pick" mark (2026-10-29, "ache se linking") */
/* (bjcs__pick is the calendar's invisible input - this pill is bjcs__carpick) */
.bjcs__carpick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 2px 0; padding: 8px 12px; border: 1px solid #f3d2b8; border-radius: 10px; background: #fff5ec; font-size: 12.5px; color: #17233e; }
.bjcs__carpick[hidden] { display: none; }
.bjcs__carpick > i, .bjcs__carpick > svg { color: #f5761a; }
.bjcs__carpick b { font-weight: 600; }
.bjcs__carpick-x { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; color: #56607a; font-size: 10px; cursor: pointer; }
.bjcs__carpick-x:hover { color: #dd660f; }
.bjcs.is-flash { animation: bjcsFlash 1.1s ease; }
@keyframes bjcsFlash { 0% { box-shadow: 0 0 0 0 rgba(245, 118, 26, .55); } 60% { box-shadow: 0 0 0 10px rgba(245, 118, 26, 0); } 100% { box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(23, 35, 62, .35), 0 40px 80px -30px rgba(0, 0, 0, .6); } }
.bjcr-card.is-pick { border-color: #f5761a; box-shadow: 0 0 0 1px #f5761a, 0 18px 36px -24px rgba(245, 118, 26, .5); }
.bjcr-card__pick { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: #f5761a; color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 575.98px) {
  .bjcs__carpick { font-size: 11.5px; padding: 7px 10px; }
}

/* the bar's tabs moved on to another kind of trip: what is below is the search
   that ran, said so in a line and dimmed until SEARCH runs again */
.bjcr-stale { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #f3d2b8; border-radius: 12px; background: #fff5ec; font-size: 13px; line-height: 1.5; color: #17233e; }
.bjcr-stale[hidden] { display: none; }
.bjcr-stale i, .bjcr-stale svg { flex: 0 0 auto; margin-top: 3px; color: #f5761a; }
.bjcr.is-stale .bjcr-trip, .bjcr.is-stale .bjcr-grid { opacity: .55; }

/* ---------------------------------------------------------------------
   The results card on a phone: the photo on top, full width, the words
   under it - the owner's card rule (photo on top, white panel below) and
   her ask of 2026-11-02 ("mob view mein ye cards sahi karo"): the small
   photo beside a narrow column of wrapping lines read badly. The gallery
   arrows and dots stay on the photo; the foot is the figure at the left
   and Select cab at the right, Fare details under both.
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .bjcr-card { grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  /* a shorter photo band (2:1), so a card is one screen's worth, not more */
  .bjcr-card__pic { align-self: stretch; aspect-ratio: 2 / 1; margin: 0; border-radius: 14px 14px 0 0; }
  .bjcr-gal__main { min-height: 0; height: 100%; }
  .bjcr-gal__nav { width: 30px; height: 30px; font-size: 11px; }
  .bjcr-gal__nav--prev { left: 10px; }
  .bjcr-gal__nav--next { right: 10px; }
  .bjcr-gal__dots { bottom: 10px; }
  .bjcr-card__body { padding: 14px 16px 10px; gap: 4px; }
  .bjcr-card__tag { font-size: 10px; letter-spacing: .08em; }
  .bjcr-card__name { font-size: 17px; line-height: 1.25; }
  .bjcr-card__models { font-size: 12.5px; }
  .bjcr-card__facts { font-size: 12.5px; gap: 3px 14px; margin-top: 6px; }
  /* the promises set apart from the facts by a hairline */
  .bjcr-card__ticks { margin-top: 8px; padding-top: 10px; border-top: 1px dashed #e9edf3; font-size: 12px; gap: 5px; }
  /* the foot as its own strip: the figure at the left, the button at the right */
  .bjcr-card__buy { grid-column: 1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 12px 16px; border-left: 0; border-top: 1px solid #eef0f4; background: #f8f9fc; text-align: left; }
  .bjcr-card__price { margin-right: auto; }
  .bjcr-card__price b { font-size: 21px; }
  .bjcr-card__more { order: 3; flex-basis: 100%; margin-top: 2px; }
}