/**
 * The seat map on a bus listing.
 *
 * Drawn as the vehicle: a driver at the front, rows of four with a gangway
 * down the middle, and the summary alongside so the running total is visible
 * while seats are being picked rather than below the fold.
 *
 * The three seat states have to be told apart at a glance and without relying
 * on colour alone, so a taken seat is also dimmed and struck through by its
 * cursor, and a chosen one carries a tick.
 */

.bus-seating {
  display: block;
}

.bus-seating__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 30px;
  align-items: start;
}

.bus-seating__deck {
  position: relative;
  padding: 24px 20px 20px;
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: #f7f9fd;
  /* The deck is a vehicle seen from above, so it reads better narrow than
     stretched across a desktop column. */
  max-width: 420px;
  margin-inline: auto;
}

.bus-seating__front {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 2px dashed #d4dcea;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.bus-seating__wheel {
  width: 26px;
  height: 26px;
  border: 3px solid #9aa8bf;
  border-radius: 50%;
}

.bus-seating__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.bus-seating__aisle {
  /* The gangway. Flexible so a short last row still lines its seats up with
     the rows above it. */
  flex: 0 0 34px;
}

.bus-seat {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #1f2a44;
  background: #ffffff;
  border: 2px solid #c9d4e6;
  /* Square at the front, rounded at the back: a seat, not a button. */
  border-radius: 10px 10px 6px 6px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.bus-seat:hover:not(.is-taken) {
  border-color: #1d5fd0;
  transform: translateY(-2px);
}

.bus-seat:focus-visible {
  outline: 3px solid #1d5fd0;
  outline-offset: 2px;
}

.bus-seat.is-chosen {
  background: #1d5fd0;
  border-color: #1d5fd0;
  color: #ffffff;
}

/* Who a chosen seat is for, told apart by colour the way an operator's own
   seating chart already is: a male passenger stays the plan's usual blue, a
   female passenger is yellow, and a seat held for a passenger with a
   disability is red so it is not missed when the coach is boarding. */
.bus-seat.is-chosen.is-gender-male {
  background: #1d5fd0;
  border-color: #1d5fd0;
}

.bus-seat.is-chosen.is-gender-female {
  background: #eab308;
  border-color: #eab308;
  color: #3f2d00;
}

.bus-seat.is-chosen.is-gender-disabled {
  background: #dc2626;
  border-color: #dc2626;
}

.bus-seat.is-taken {
  background: #e5e9f0;
  border-color: #d7dde8;
  color: #9aa3b2;
  cursor: not-allowed;
  /* Never colour alone: the state has to survive a greyscale screen. */
  text-decoration: line-through;
}

/* Asked at the moment a free seat is picked, over the deck rather than a
   modal, so the seat being answered for is never in question. */
.bus-seat-gender-popover {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  transform: translate(-50%, 10px);
  border: 1px solid #e3e8f2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
}

.bus-seat-gender-popover.opens-above {
  transform: translate(-50%, calc(-100% - 10px));
}

.bus-seat-gender-option {
  padding: 8px 18px;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .12s ease;
}

.bus-seat-gender-option:hover,
.bus-seat-gender-option:focus-visible {
  filter: brightness(.94);
}

.bus-seat-gender-option.is-male {
  background: #1d5fd0;
  color: #ffffff;
}

.bus-seat-gender-option.is-female {
  background: #eab308;
  color: #3f2d00;
}

.bus-seat-gender-option.is-disabled {
  background: #dc2626;
  color: #ffffff;
}

.bus-seating__key {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e3e8f2;
  font-size: 13px;
  color: #6b7280;
}

.bus-seating__key-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The keys are labels, not controls. */
.bus-seating__key .bus-seat {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  cursor: default;
  pointer-events: none;
}

.bus-seating__summary {
  position: sticky;
  top: 20px;
  padding: 24px;
  border: 1px solid #e3e8f2;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.bus-seating__price,
.bus-seating__chosen,
.bus-seating__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: #6b7280;
}

.bus-seating__price strong,
.bus-seating__chosen strong,
.bus-seating__total strong {
  color: #0d1633;
  font-size: 16px;
  text-align: right;
}

.bus-seating__total {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid #e3e8f2;
}

.bus-seating__total strong {
  font-size: 22px;
}

.bus-seating__counts {
  padding-bottom: 10px;
  border-bottom: 1px solid #e3e8f2;
  font-size: 13px;
  color: #6b7280;
}

.bus-seating__reserve {
  width: 100%;
  margin-top: 18px;
  padding: 15px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  /* Brand yellow with navy text, the same primary call-to-action colour the
     rest of the site uses - never the template indigo. */
  color: #07183f;
  background: #ffd33f;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.bus-seating__reserve:hover:not([disabled]) {
  background: #f2c012;
}

.bus-seating__reserve[disabled] {
  background: #e4e8f0;
  color: #9aa3b2;
  cursor: not-allowed;
}

.bus-seating__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8892a4;
}

/* Step three (pay-before, signed-in): the operator's account, laid across the
   full width of the payment card rather than squeezed into its icon column. */
.bus-bank-details {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #d6e3ee;
  border-radius: 12px;
  background: #fff;
}

.bus-bank-details__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 13px;
}

.bus-bank-details__row + .bus-bank-details__row {
  border-top: 1px solid #eef2f7;
}

.bus-bank-details__label {
  color: #6b7280;
}

.bus-bank-details__value {
  font-weight: 600;
  color: #17466f;
  text-align: right;
}

/* Where the passenger gets on and off.
   Above the map and not beside it, because it is asked first: the operator has
   to know which stop to pull in at, and a seat sold without one is a booking
   they cannot fulfil. */
.bus-seating__stops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  max-width: 640px;
  margin-bottom: 24px;
  padding: 20px 22px;
  border: 1px solid #e3e8f2;
  border-radius: 14px;
  background: #fff;
}

.bus-seating__stop {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.bus-seating__stop label {
  color: #0b1f44;
  font-size: 13px;
  font-weight: 600;
}

.bus-seating__stop select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  background: #fff;
  color: #0b1f44;
  font: 14px/1.4 Jost, sans-serif;
  cursor: pointer;
}

.bus-seating__stop select:focus {
  border-color: #315bd8;
  outline: 0;
}

.bus-seating__stop-note {
  grid-column: 1 / -1;
  margin: 0;
  color: #8892a4;
  font-size: 12.5px;
  line-height: 1.5;
}

.bus-seating__stop-note.is-blocking {
  color: #b3541e;
}

/* The run on OpenStreetMap.
   A passenger knows where they are, not whether the stop named "Mawanella" is
   the one near them, so the stops are pinned on a map and the dropdowns above
   are answered by tapping one. */
.bus-map {
  grid-column: 1 / -1;
  position: relative;
  height: 340px;
  overflow: hidden;
  border: 1px solid #e3e8f2;
  border-radius: 12px;
  background: #eef2f7;
}

.bus-map__canvas {
  position: absolute;
  inset: 0;
}

.bus-map__tiles img {
  position: absolute;
  width: 256px;
  height: 256px;
  /* The tiles are the backdrop; every pin sits above them. */
  user-select: none;
  pointer-events: none;
}

.bus-map__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bus-map__route polyline {
  fill: none;
  stroke: #2f6fed;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}

.bus-map__pins {
  position: absolute;
  inset: 0;
}

.bus-map__pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  /* Positioned by its dot, not its corner, so the pin sits on the town. */
  transform: translate(-14px, -14px);
  cursor: pointer;
  white-space: nowrap;
}

.bus-map__dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #64748b;
  color: #fff;
  font: 600 12px/1 Jost, sans-serif;
  box-shadow: 0 2px 6px rgba(6, 22, 55, .35);
}

.bus-map__dot i {
  font-size: 14px;
  line-height: 1;
}

.bus-map__label {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  color: #0b1f44;
  font: 600 12px/1.3 Jost, sans-serif;
  box-shadow: 0 1px 4px rgba(6, 22, 55, .2);
}

/* A town the coach passes through, against the two ends of the run. Smaller,
   because the shape of the route should be readable at a glance - but it is
   the same button, and a passenger can board at any of them. */
.bus-map__pin.is-stop .bus-map__dot {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  background: #94a3b8;
  font-size: 11px;
}

.bus-map__pin.is-stop .bus-map__dot i {
  font-size: 11px;
}

.bus-map__pin.is-stop .bus-map__label {
  font-weight: 500;
  background: rgba(255, 255, 255, .85);
}

.bus-map__pin:hover .bus-map__dot,
.bus-map__pin:focus-visible .bus-map__dot {
  background: #1d5fd0;
}

.bus-map__pin.is-board .bus-map__dot {
  background: #0f8a3d;
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.bus-map__pin.is-drop .bus-map__dot {
  background: #c2410c;
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.bus-map__pin.is-board .bus-map__dot i,
.bus-map__pin.is-drop .bus-map__dot i {
  font-size: 16px;
}

.bus-map__pin.is-board .bus-map__label,
.bus-map__pin.is-drop .bus-map__label {
  background: #0b1f44;
  color: #fff;
}

.bus-map__status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  color: #0b1f44;
  font: 13px/1.4 Jost, sans-serif;
  box-shadow: 0 2px 8px rgba(6, 22, 55, .18);
}

.bus-map__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 2px 6px;
  background: rgba(255, 255, 255, .8);
  color: #4b5563;
  font-size: 10px;
  text-decoration: none;
}

/* Before the tiles are drawn the frame holds the plain list, which is what a
   browser with no JavaScript keeps. */
.bus-map__fallback {
  margin: 0;
  padding: 16px 18px;
  color: #566076;
  font-size: 13px;
  line-height: 1.6;
}

/* The map is visibly waiting rather than merely unresponsive, so a seat that
   refuses a click has already explained why. Only reachable without
   JavaScript, where both steps are on the screen at once. */
.bus-seating.is-awaiting-stops .bus-seating__deck {
  opacity: .55;
}

.bus-seating.is-awaiting-stops .bus-seat:not(.is-taken) {
  cursor: not-allowed;
}

/* Two steps: where you travel, then which seat.
   Only once the script has taken charge - until then both are on the page,
   which is the form as it works with no JavaScript at all. */
.bus-seating.is-stepped .bus-step {
  display: none;
}

.bus-seating.is-stepped .bus-step.is-current {
  display: block;
}

.bus-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.bus-steps__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8892a4;
  font-size: 14px;
  font-weight: 500;
}

.bus-seating.is-stepped .bus-steps__item {
  cursor: pointer;
}

.bus-steps__number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d8dee9;
  border-radius: 50%;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}

.bus-steps__item.is-current {
  color: #0b1f44;
  font-weight: 600;
}

.bus-steps__item.is-current .bus-steps__number {
  border-color: #1d5fd0;
  background: #1d5fd0;
  color: #fff;
}

.bus-steps__item.is-done .bus-steps__number {
  border-color: #0f8a3d;
  background: #0f8a3d;
  color: #fff;
}

.bus-seating__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.bus-seating__next {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border: 0;
  border-radius: 8px;
  /* Brand yellow, matching the site's primary call-to-action. */
  background: #ffd33f;
  color: #07183f;
  font: 600 15px Jost, sans-serif;
  cursor: pointer;
}

.bus-seating__next:hover:not([disabled]) {
  background: #f2c012;
}

.bus-seating__next[disabled] {
  background: #e4e8f0;
  color: #9aa3b2;
  cursor: not-allowed;
}

/* On step two, what was answered on step one - so the seat is being picked
   for a journey the passenger can still see. */
.bus-seating__journey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding: 12px 18px;
  border: 1px solid #e3e8f2;
  border-radius: 10px;
  background: #f7f9fd;
}

.bus-seating__back {
  padding: 0;
  border: 0;
  background: transparent;
  color: #1d5fd0;
  font: 600 14px Jost, sans-serif;
  cursor: pointer;
}

.bus-seating__journey-text {
  color: #0b1f44;
  font: 600 15px Jost, sans-serif;
}

@media (max-width: 991px) {
  .bus-seating__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .bus-seating__summary {
    position: static;
  }
}

@media (max-width: 575px) {
  .bus-seating__stops {
    grid-template-columns: minmax(0, 1fr);
  }
  .bus-map {
    height: 300px;
  }
  .bus-map__label {
    font-size: 11px;
  }
}

@media (max-width: 420px) {
  .bus-seat {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    font-size: 12px;
  }
  .bus-seating__aisle { flex-basis: 22px; }
  .bus-seating__deck { padding-inline: 14px; }
}