/******************************************************************** Date picker ************************************************/
/* Mobile: the datepicker below is a fixed 342px wide, which overflows
   320-360px phone screens — clamp it to the viewport. */
@media only screen and (max-width: 400px) {
  #ui-datepicker-div {
    max-width: calc(100vw - 16px);
  }
  #ui-datepicker-div .ui-datepicker-calendar {
    width: 100%;
  }
}
@media only screen and (min-width: 10px) {
  #ui-datepicker-div {
    width: 342px;
    border-color: var(--wbtm_color_theme);
    padding: 0;
    background-color: #FFF;
  }

  #ui-datepicker-div .ui-datepicker-header {
    background-color: var(--wbtm_color_theme);
    background-image: none;
    border-color: var(--wbtm_color_theme);
    padding: var(--wbtm_dmp_xs);
    color: var(--wbtm_color_theme_alter);
    border-radius: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: var(--wbtm_fs_h6);
  }

  #ui-datepicker-div .ui-datepicker-header .ui-icon {
    display: none;
  }

  #ui-datepicker-div .ui-datepicker-prev {
    top: var(--wbtm_dmp_xs);
    left: 5px;
    height: 30px;
    width: 30px;
  }

  #ui-datepicker-div .ui-datepicker-next {
    top: var(--wbtm_dmp_xs);
    right: 5px;
    height: 30px;
    width: 30px;
  }

  #ui-datepicker-div .ui-datepicker-prev:hover,
  #ui-datepicker-div .ui-datepicker-prev:focus,
  #ui-datepicker-div .ui-datepicker-next:focus,
  #ui-datepicker-div .ui-datepicker-next:hover {
    box-shadow: 0 0 0 2px #FFF, 0 0 2px 1px #FFF;
    outline: 1px solid transparent;
  }

  #ui-datepicker-div .ui-datepicker-header a.ui-datepicker-prev::before,
  #ui-datepicker-div .ui-datepicker-header a.ui-datepicker-next::before {
    position: absolute;
    content: ">";
    color: #FFF;
    left: 10px;
    font-size: var(--wbtm_fs_h3);
    top: 5px;
    font-weight: bold;
    line-height: 1;
  }

  #ui-datepicker-div .ui-datepicker-header a.ui-datepicker-prev::before {
    content: "<";
  }

  #ui-datepicker-div .ui-datepicker-header .ui-state-hover {
    background-color: var(--wbtm_color_theme);
    background-image: none;
    border-color: var(--wbtm_color_theme);
  }

  #ui-datepicker-div .ui-state-default {
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    color: var(--wbtm_color_theme);
    font-weight: bold;
    padding: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }

  #ui-datepicker-div a.ui-state-default:hover {
    background-color: var(--wbtm_color_theme);
    color: var(--wbtm_color_theme_alter);
  }

  #ui-datepicker-div .ui-state-active {
    background-color: var(--wbtm_color_theme);
    color: var(--wbtm_color_theme_alter);
    background-image: none;
  }

  #ui-datepicker-div .ui-datepicker-title {
    background-color: var(--wbtm_color_theme);
    color: var(--wbtm_color_theme_alter);
    background-image: none;
    font-size: var(--wbtm_fs_h5);
    display: -webkit-flex;
    display: flex;
    margin: 0;
  }

  #ui-datepicker-div .ui-datepicker-title select {
    min-width: 100px;
    height: 30px;
    font-size: var(--wbtm_fs);
    padding: 0 var(--wbtm_dmp_xs);
    text-align: left;
  }

  #ui-datepicker-div.ui-datepicker td {
    background-color: floralwhite;
    border: 1px dotted #000;
    padding: 4px 6px;
  }
}

/* Responsive adjustments for rotated seats */
@media only screen and (max-width: 768px) {

  .wbtm_seat_rotated_90 .mp_seat .seat_number,
  .wbtm_seat_rotated_270 .mp_seat .seat_number {
    font-size: 0.9em;
  }

  .wbtm_seat_rotated_180 .mp_seat .seat_number {
    font-size: 0.95em;
  }
}


/* Responsive adjustments for cabin layouts */
@media only screen and (max-width: 960px) {
  .wbtm_style {
    padding: 10px;
    border-radius: 15px;
  }

  .wbtm_input_fields_holder {
    gap: 15px;
    width: 100% !important;
  }

  .wbtm_input_fields_holder,
  .wbtm_search_input_fields_holder {
    flex-direction: column !important;
  }

  .wbtm_input_fields_holder,
  .wbtm_input_start_end_location,
  .wbtm_input_start_end_date,
  .wtbm_bus_search_button_holder {
    width: 100% !important;
  }

.search_button_holder {
  width: 100%;
}

.wbtm_search_action_button {
  align-items: center;
  justify-content: center;
}

.wbtm_search_action_button.wbtm_is_loading {
  cursor: wait;
  opacity: 0.85;
  pointer-events: none;
}

.search_button_holder > .wbtm_search_button_spacer {
  display: none !important;
}

  .wbtm_bus_submit,
  .get_wbtm_bus_list {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
  }
}

@media only screen and (max-width: 600px) {

  .wbtm_input_start_end_location,
  .wbtm_input_start_end_date {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .wtbm_inputList {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
  }

  .wbtm_search_location_toggle {
    top: 50% !important;
    left: auto !important;
    right: 15px !important;
    transform: translateY(-50%) rotate(90deg) !important;
  }

  .wbtm_dropping_point {
    margin-top: 5px !important;
  }
}

@media only screen and (max-width: 768px) {
  .wbtm_selected_seat_details table tr th {
    font-size: 14px;
  }

  table.wbtm_totals tbody tr h5 {
    font-size: 14px;
  }

  .wbtm_cabin_toggle {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .wbtm_cabin_title_container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .wbtm_cabin_title_container .wbtm_cabin_title {
    font-size: 16px;
  }

  .wbtm_cabin_toggle_icon {
    align-self: flex-end;
  }

  .wbtm_cabin_seat_plan {
    padding: 15px;
  }

  .wbtm_cabin_seat_plan table {
    border-spacing: 6px;
  }

}

/*# sourceMappingURL=wbtm.css.map */
@media (min-width:0px) {

div[class*=wbtm_loader] {
  background: rgba(0, 0, 0, 0.2);
  color: var(--wbtm_color_theme);
}
div[class*=wbtm_loader] span{width:initial !important;margin: 0 !important;}
div[class*=wbtm_loader].border_spin_loader span {
  border-top: 5px solid var(--wbtm_color_theme_alter);
  border-right: 5px solid var(--wbtm_color_theme);
  border-bottom: 5px solid var(--wbtm_color_theme_alter);
  border-left: 5px solid var(--wbtm_color_theme);
  width: 60px;
  height: 60px;
  -webkit-animation: spin 1000ms linear infinite;
  animation: spin 1000ms linear infinite;
}

div[class*=simpleSpinner] {
  padding: var(--wbtm_dmp);
  color: var(--wbtm_color_theme);
}
.wbtm_ex_service_area h3{
  font-size: 14px;
  font-weight: normal;
}
/*****Text Theme*********/
div.wbtm_style .textTheme,
div.wbtm_style [class*=_textTheme] {
  color: var(--wbtm_color_theme);
}

div.wbtm_style .bgTheme,
div.wbtm_style [class*=_bgTheme] {
  background-color: var(--wbtm_color_theme);
  color: var(--wbtm_color_theme_alter);
}

div.wbtm_style [class*=_bTheme],
.bTheme {
  border: 1px solid var(--wbtm_color_theme);
}

.pickup-point,
.drop-off-point {
  margin-left: 8px;
  border-left: 1px solid;
  flex-direction: column;
}
.pickup-point .point,
.drop-off-point .point {
  margin-left: -0.57em;
  padding: 15px 0;
}
.pickup-point .point:first-child,
.drop-off-point .point:first-child {
  padding-top: 21px;
}
.pickup-point .point:last-child,
.drop-off-point .point:last-child {
  padding-bottom: 0;
  line-height: 0;
  margin-bottom: 24px;
}

.wbtm_selected_seat_details table thead th {
  font-size: 16px;
  color: #666;
  font-weight: normal;
}
.wbtm_selected_seat_details table tbody tr {
  border-bottom: 1px solid #d8d8d8;
}

table.wbtm_totals tbody tr h5 {
  font-size: 16px;
  color: #333;
}

div.wbtm_selected_seat_details table tbody tr td {
  border-bottom: 1px solid #d8d8d8;
}

.wbtm_ex_service_area table thead th {
  font-size: 16px;
  color: #666;
}
.wbtm_ex_service_area table tbody tr:nth-child(2n+1) {
  background: none;
}
.wbtm_ex_service_area table tr:nth-child(2n) {
  background: none;
}

.wbtm-seat-book.hide {
  display: none;
}

.wbtm_bus_details_tabs_holder .wbtm-seat-book {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  width: auto;
}

.wbtm_bus_details_tabs_holder .wbtm-seat-book > button,
.wbtm_bus_details_tabs_holder .wbtm-full-bus-booking > button {
  width: auto;
  white-space: nowrap;
}

.wbtm-full-bus-booking {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 0;
  position: relative;
}

.wbtm-full-bus-booking > .wbtm_full_bus_book_now {
  margin: 0;
  border-radius: 4px 0 0 4px !important;
}

.wbtm-full-bus-booking.hide {
  display: none;
}

.wbtm-full-bus-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  height: 38px;
  min-height: 38px;
}

.wbtm-full-bus-tooltip-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 38px;
  min-width: 34px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0 4px 4px 0;
  background: var(--wbtm_theme_color);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
  visibility: visible;
}

.wbtm-full-bus-tooltip-toggle span {
  display: inline-block !important;
  color: #fff;
  opacity: 1;
  visibility: visible;
}

.wbtm-full-bus-tooltip-toggle::before {
  content: "?";
  display: inline-block;
  color: #fff;
}

.wbtm-full-bus-tooltip-toggle span {
  display: none !important;
}

.wbtm-full-bus-tooltip-toggle:focus {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: -3px;
}

.wbtm-full-bus-tooltip-panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid #d9dfe7;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.wbtm-full-bus-tooltip.is-open .wbtm-full-bus-tooltip-panel {
  display: flex;
}

.wbtm-full-bus-tooltip-panel span {
  font-size: 12px;
  color: var(--wbtm_d_color);
}

.wbtm-full-bus-tooltip-panel del,
.wbtm-full-bus-tooltip-panel small {
  font-size: 12px;
  color: #69727d;
}

.wbtm-full-bus-tooltip-panel del {
  text-decoration-thickness: 1px;
}

.wbtm-full-bus-tooltip-panel strong {
  color: var(--wbtm_theme_color);
}

@media only screen and (max-width: 767px) {
  .wbtm_bus_details_tabs_holder .wbtm-seat-book {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
}

/* Frontend Seat Rotation Styles */
.wbtm_seat_rotated_90 .mp_seat .seat_visual {
  transform: rotate(90deg);
  transform-origin: center;
}

.wbtm_seat_rotated_180 .mp_seat .seat_visual {
  transform: rotate(180deg);
  transform-origin: center;
}

.wbtm_seat_rotated_270 .mp_seat .seat_visual {
  transform: rotate(270deg);
  transform-origin: center;
}

/* Ensure seat number text never rotates */
.wbtm_seat_rotated_90 .mp_seat .seat_number,
.wbtm_seat_rotated_180 .mp_seat .seat_number,
.wbtm_seat_rotated_270 .mp_seat .seat_number {
  transform: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  rotate: none !important;
  transform-origin: initial !important;
}

/* Additional protection for seat numbers */
.mp_seat_item .seat_number {
  transform: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  rotate: none !important;
  transform-origin: initial !important;
  position: relative !important;
  z-index: 999 !important;
}

/* Ensure rotated seats maintain proper spacing and alignment */
.wbtm_seat_plan_area .mp_seat_item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 32px;
}

.wbtm_seat_plan_area .mp_seat_item .mp_seat {
  transition: transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  flex-direction: column;
  background-color: transparent;
  border: none;
}

/* Seat structure styles */
.seat_visual {
  width: 100%;
  height: 100%;
  background-color: inherit;
  border: inherit;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 0.3s ease;
}

/* Ensure seat_visual inherits all visual styling from parent seat */
.mp_seat .seat_visual {
  background-color: inherit;
  border: inherit;
  border-radius: inherit;
  cursor: inherit;
}

/* Specific seat state styling for seat_visual */
.seat_available .seat_visual {
  background-color: var(--wbtm_color_theme_alter);
  cursor: pointer;
}

.seat_selected.seat_available .seat_visual {
  background-color: var(--wbtm_color_theme);
  color: #ffffff;
}

.seat_booked .seat_visual {
  cursor: not-allowed;
  background-color: var(--wbtm_color_warning);
}

.seat_in_cart .seat_visual {
  cursor: not-allowed;
  background-color: var(--wbtm_color_light_3);
}

/* Override existing seat styling to move visual properties to seat_visual */
.mp_seat.seat_available {
  background-color: transparent !important;
  border: none !important;
}

.mp_seat.seat_booked {
  background-color: transparent !important;
  border: none !important;
}

.mp_seat.seat_in_cart {
  background-color: transparent !important;
  border: none !important;
}

/* Ensure seat_visual gets the border styling */
.seat_visual {
  border: 1px solid var(--wbtm_color_border) !important;
}

.seat_number {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: bold;
  color: inherit;
  text-align: center;
  line-height: 1;
  pointer-events: none;
  transform: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* Ensure consistent seat styling for both lower and upper deck */
.wbtm_seat_plan_area table th,
.wbtm_seat_plan_area table td {
  min-height: 46px !important;
  text-align: center !important;
  height: 46px !important;
  width: 46px !important;
  background-color: var(--wbtm_color_theme_alter) !important;
  padding: 4px !important;
  min-width: 46px !important;
}

/* Make upper deck exactly the same as lower deck */
.wbtm_seat_plan_upper {
  /* Inherit all lower deck styles */
}

.wbtm_seat_plan_upper table {
  margin: 0 auto !important;
}

.wbtm_seat_plan_upper table tr {
  background-color: var(--wbtm_color_theme_alter) !important;
}

.wbtm_seat_plan_upper table th,
.wbtm_seat_plan_upper table td {
  min-height: 46px !important;
  text-align: center !important;
  height: 46px !important;
  width: 46px !important;
  background-color: var(--wbtm_color_theme_alter) !important;
  padding: 4px !important;
  min-width: 46px !important;
}

.wbtm_seat_plan_upper table thead th {
  height: auto !important;
}

/* More specific selectors to override global CSS */
div.wbtm_bus_list_area div.wbtm_seat_plan_area table th,
div.wbtm_bus_list_area div.wbtm_seat_plan_area table td,
div.wbtm_bus_list_area div.wbtm_seat_plan_upper table th,
div.wbtm_bus_list_area div.wbtm_seat_plan_upper table td {
  min-height: 46px !important;
  text-align: center !important;
  height: 46px !important;
  width: 46px !important;
  background-color: var(--wbtm_color_theme_alter) !important;
  padding: 4px !important;
  min-width: 46px !important;
}

/* Ensure seat items have consistent styling */
.wbtm_seat_plan_area .mp_seat_item,
.wbtm_seat_plan_upper .mp_seat_item {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Ensure seats have consistent styling */
.wbtm_seat_plan_area .mp_seat,
.wbtm_seat_plan_upper .mp_seat {
  border: 1px solid var(--wbtm_color_border);
  width: 100%;
  height: 100%;
  border-radius: 15px 15px 0 0;
  border-bottom: 5px solid var(--wbtm_color_light);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* More specific selectors for seat styling - moved visual properties to seat_visual */
div.wbtm_bus_list_area div.wbtm_seat_plan_area div.mp_seat,
div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.mp_seat {
  border: none !important;
  background-color: transparent !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Apply visual styling to seat_visual instead */
div.wbtm_bus_list_area div.wbtm_seat_plan_area div.mp_seat .seat_visual,
div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.mp_seat .seat_visual {
  border: 1px solid var(--wbtm_color_border) !important;
  border-radius: 15px 15px 0 0 !important;
  border-bottom: 5px solid var(--wbtm_color_light) !important;
}

/* Force upper deck to use exact same styling as lower deck */
.wbtm_seat_plan_upper div.mp_seat_item {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

.wbtm_seat_plan_upper div.mp_seat {
  border: 1px solid var(--wbtm_color_border) !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 15px 15px 0 0 !important;
  border-bottom: 5px solid var(--wbtm_color_light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Most aggressive approach - copy exact lower deck styles to upper deck */
div.wbtm_bus_list_area div.wbtm_seat_plan_upper table {
  margin: 0 auto !important;
}

div.wbtm_bus_list_area div.wbtm_seat_plan_upper table tr {
  background-color: var(--wbtm_color_theme_alter) !important;
}

div.wbtm_bus_list_area div.wbtm_seat_plan_upper table th,
div.wbtm_bus_list_area div.wbtm_seat_plan_upper table td {
  min-height: 46px !important;
  text-align: center !important;
  height: 46px !important;
  width: 46px !important;
  background-color: var(--wbtm_color_theme_alter) !important;
  padding: 4px !important;
  min-width: 46px !important;
}

div.wbtm_bus_list_area div.wbtm_seat_plan_upper table thead th {
  height: auto !important;
}

div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.mp_seat_item {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.mp_seat {
  border: none !important;
  background-color: transparent !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure seat states are consistent - moved to seat_visual */
div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.seat_available {
  background-color: transparent !important;
  cursor: pointer !important;
  /*color: var(--wbtm_d_color) !important;*/
}

div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.seat_booked {
  cursor: not-allowed !important;
  background-color: transparent !important;
  color: var(--wbtm_color_theme_alter) !important;
}

div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.seat_in_cart {
  cursor: not-allowed !important;
  background-color: transparent !important;
  color: var(--wbtm_color_theme_alter) !important;
}

/* Apply seat state styling to seat_visual */
div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.seat_available .seat_visual {
  /*background-color: var(--wbtm_color_theme_alter) !important;*/
}

div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.seat_booked .seat_visual {
  background-color: var(--wbtm_color_warning) !important;
}

div.wbtm_bus_list_area div.wbtm_seat_plan_upper div.seat_in_cart .seat_visual {
  background-color: var(--wbtm_color_light_3) !important;
}

/* ULTIMATE FIX - Force upper deck to be exactly like lower deck */
.wbtm_seat_plan_upper * {
  box-sizing: border-box !important;
}

.wbtm_seat_plan_upper table {
  table-layout: fixed !important;
  margin: 0 auto !important;
}

.wbtm_seat_plan_upper table th,
.wbtm_seat_plan_upper table td {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  padding:0 35px !important;
  margin: 0 !important;
  border: none !important;
  background-color: var(--wbtm_color_theme_alter) !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  font-size: 17px !important;
}

.wbtm_seat_plan_upper .mp_seat_item {
  width: 60px !important;
  height: 50px !important;
  min-width: 60px !important;
  min-height: 50px !important;
  max-width: 60px !important;
  max-height: 50px !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.wbtm_seat_plan_upper .mp_seat {
  width: 60px !important;
  height: 50px !important;
  min-width: 60px !important;
  min-height: 50px !important;
  max-width: 60px !important;
  max-height: 50px !important;
  border: 1px solid var(--wbtm_color_border) !important;
  border-radius: 15px 15px 0 0 !important;
  border-bottom: 5px solid var(--wbtm_color_light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Override any other styles that might be affecting upper deck */
.wbtm_seat_plan_upper {
  font-size: inherit !important;
}

.wbtm_seat_plan_upper * {
  font-size: inherit !important;
}

/* Force the same dimensions as lower deck */
.wbtm_seat_plan_upper table th,
.wbtm_seat_plan_upper table td {
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Fix seat price dropdown positioning for ALL seat plans */
.wbtm_seat_plan_area .mp_seat_item,
.wbtm_seat_plan_upper .mp_seat_item,
.wbtm_cabin_seat_plan .mp_seat_item {
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* Increase z-index when hovering to bring tooltip above other seats */
.wbtm_seat_plan_area .mp_seat_item:hover,
.wbtm_seat_plan_upper .mp_seat_item:hover,
.wbtm_cabin_seat_plan .mp_seat_item:hover {
  z-index: 9999 !important;
}

.wbtm_seat_plan_area .mp_seat_item .wbtm_seat_item_list,
.wbtm_seat_plan_upper .mp_seat_item .wbtm_seat_item_list,
.wbtm_cabin_seat_plan .mp_seat_item .wbtm_seat_item_list {
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  min-width: 150px !important;
  width: 100% !important;
  display: none !important;
  z-index: 99999 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style-type: none !important;
  background-color: var(--wbtm_color_light) !important;
  border: 1px solid var(--wbtm_color_theme) !important;
  border-radius: var(--wbtm_dbr) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.wbtm_seat_plan_area .mp_seat_item:hover .wbtm_seat_item_list,
.wbtm_seat_plan_upper .mp_seat_item:hover .wbtm_seat_item_list,
.wbtm_cabin_seat_plan .mp_seat_item:hover .wbtm_seat_item_list {
  display: block !important;
}

.wbtm_seat_plan_area .mp_seat_item .wbtm_seat_item_list::before,
.wbtm_seat_plan_upper .mp_seat_item .wbtm_seat_item_list::before,
.wbtm_cabin_seat_plan .mp_seat_item .wbtm_seat_item_list::before {
  position: absolute !important;
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  left: 15px !important;
  top: -20px !important;
  border: 10px solid transparent !important;
  border-bottom-color: var(--wbtm_color_theme) !important;
  z-index: 99998 !important;
}

.wbtm_seat_plan_area .mp_seat_item .wbtm_seat_item_list li,
.wbtm_seat_plan_upper .mp_seat_item .wbtm_seat_item_list li,
.wbtm_cabin_seat_plan .mp_seat_item .wbtm_seat_item_list li {
  cursor: pointer !important;
  padding: 5px var(--wbtm_dmp_xs) !important;
  background-color: var(--wbtm_color_light) !important;
  border-bottom: 1px solid #eee !important;
  position: relative !important;
  z-index: 99999 !important;
}

.wbtm_seat_plan_area .mp_seat_item .wbtm_seat_item_list li:last-child,
.wbtm_seat_plan_upper .mp_seat_item .wbtm_seat_item_list li:last-child,
.wbtm_cabin_seat_plan .mp_seat_item .wbtm_seat_item_list li:last-child {
  border-bottom: none !important;
}

.wbtm_seat_plan_area .mp_seat_item .wbtm_seat_item_list li:hover,
.wbtm_seat_plan_upper .mp_seat_item .wbtm_seat_item_list li:hover,
.wbtm_cabin_seat_plan .mp_seat_item .wbtm_seat_item_list li:hover {
  background-color: var(--wbtm_color_theme) !important;
  color: var(--wbtm_color_theme_alter) !important;
}

/* Fix positioning for seats on the right side */
.wbtm_seat_plan_area table tr th:nth-last-child(2) .wbtm_seat_item_list,
.wbtm_seat_plan_area table tr th:last-child .wbtm_seat_item_list,
.wbtm_seat_plan_upper table tr th:nth-last-child(2) .wbtm_seat_item_list,
.wbtm_seat_plan_upper table tr th:last-child .wbtm_seat_item_list,
.wbtm_cabin_seat_plan table tr th:nth-last-child(2) .wbtm_seat_item_list,
.wbtm_cabin_seat_plan table tr th:last-child .wbtm_seat_item_list {
  right: 0 !important;
  left: inherit !important;
}

.wbtm_seat_plan_area table tr th:nth-last-child(2) .wbtm_seat_item_list::before,
.wbtm_seat_plan_area table tr th:last-child .wbtm_seat_item_list::before,
.wbtm_seat_plan_upper table tr th:nth-last-child(2) .wbtm_seat_item_list::before,
.wbtm_seat_plan_upper table tr th:last-child .wbtm_seat_item_list::before,
.wbtm_cabin_seat_plan table tr th:nth-last-child(2) .wbtm_seat_item_list::before,
.wbtm_cabin_seat_plan table tr th:last-child .wbtm_seat_item_list::before {
  left: inherit !important;
  right: 15px !important;
}

/* Fix positioning for seats on the bottom rows */
.wbtm_seat_plan_area table tr:nth-last-child(2) th .wbtm_seat_item_list,
.wbtm_seat_plan_area table tr:last-child th .wbtm_seat_item_list,
.wbtm_seat_plan_upper table tr:nth-last-child(2) th .wbtm_seat_item_list,
.wbtm_seat_plan_upper table tr:last-child th .wbtm_seat_item_list,
.wbtm_cabin_seat_plan table tr:nth-last-child(2) th .wbtm_seat_item_list,
.wbtm_cabin_seat_plan table tr:last-child th .wbtm_seat_item_list {
  top: calc(-100% - 23px) !important;
}

.wbtm_seat_plan_area table tr:nth-last-child(2) th .wbtm_seat_item_list::before,
.wbtm_seat_plan_area table tr:last-child th .wbtm_seat_item_list::before,
.wbtm_seat_plan_upper table tr:nth-last-child(2) th .wbtm_seat_item_list::before,
.wbtm_seat_plan_upper table tr:last-child th .wbtm_seat_item_list::before,
.wbtm_cabin_seat_plan table tr:nth-last-child(2) th .wbtm_seat_item_list::before,
.wbtm_cabin_seat_plan table tr:last-child th .wbtm_seat_item_list::before {
  top: 100% !important;
  border-top-color: var(--wbtm_color_theme) !important;
  border-bottom-color: transparent !important;
}

/* Ensure containers don't clip the dropdown */
.wbtm_seat_plan_area,
.wbtm_seat_plan_upper,
.wbtm_cabin_seat_plan {
  overflow: visible !important;
  position: relative !important;
}

.wbtm_seat_plan_area .ovAuto,
.wbtm_seat_plan_upper .ovAuto,
.wbtm_cabin_seat_plan .ovAuto {
  overflow: visible !important;
}

/* Cabin-specific styles for train/bus multi-cabin support */
.wbtm_cabin_section {
  margin-bottom: 20px;
  border: 1px solid var(--wbtm_color_border);
  border-radius: 12px;
  background-color: var(--wbtm_color_light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
  overflow: hidden;
}

.wbtm_cabin_section:last-child {
  margin-bottom: 0;
}

/* Ensure collapsed cabins don't take extra space */
.wbtm_cabin_section.collapsed {
  margin-bottom: 10px;
}

.wbtm_cabin_header {
  background-color: var(--wbtm_color_theme);
  color: white;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: filter .15s ease;
}
.wbtm_cabin_header:hover {
  filter: brightness(1.06);
}

.wbtm_cabin_toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.wbtm_cabin_title_container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.wbtm_cabin_toggle_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  flex-shrink: 0;
}

.wbtm_toggle_arrow {
  font-size: 16px;
  font-weight: bold;
  transition: transform 0.3s ease;
  display: inline-block;
}

.wbtm_cabin_title_container .wbtm_cabin_title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.wbtm_cabin_price_info {
  display: flex;
  align-items: center;
}

.wbtm_price_multiplier {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.wbtm_price_discount {
  background-color: rgba(76, 175, 80, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.wbtm_cabin_seat_plan {
  padding: 24px 20px;
  background-color: white;
}

.wbtm_cabin_seat_plan table {
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 8px;
}

.wbtm_cabin_seat_plan .mp_seat_item {
  position: relative;
}

.wbtm_cabin_direction {
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 16px;
}

.wbtm_cabin_seat_plan .seat_available {
  cursor: pointer;
  transition: all 0.3s ease;
}

.wbtm_cabin_seat_plan .seat_available:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.wbtm_cabin_seat_plan .seat_booked,
.wbtm_cabin_seat_plan .seat_in_cart {
  opacity: 0.7;
}


.wbtm_search_input_fields_holder{
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: flex-end;
}

.wbtm_input_start_end_location{
  position: relative;
  display: flex;
  align-items: center;
}
.wbtm_start_point,
.wbtm_dropping_point{
  width: 50%;
}
.wbtm_search_location_toggle{
  position: absolute ;
  margin: 9px -4px;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  padding: 5px 7px;
  width:30px;
  height: 30px;
  background-color: #ddd;
  border-radius: 50%;
  border: 1px solid #bbb;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(50, 50, 50, 0.3);
}

.wbtm_search_location_toggle:hover{
  background: var(--wbtm_color_theme);
  border: 1px solid rgba(50, 50, 50, 0.3);
}
.wbtm_search_location_toggle:hover i{
  color: #fff;
}

.wbtm_search_location_toggle i{
  font-size: 15px;
  line-height: 0;
  transition: transform 0.35s ease;
  color: var(--wbtm_color_theme);
}

.wbtm_search_location_toggle.rotate i{
  transform: rotate(180deg);
}
.swap-animation{
  transition: all .3s ease-in-out;
  transform: translateY(6px);
  opacity: 0.6;
}

.wbtm_input_fields_holder{
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.wbtm_search_action_button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  white-space: nowrap;
  line-height: 1;
}
.wbtm_search_action_button.wbtm_is_loading{
  cursor: wait;
  opacity: 0.85;
  pointer-events: none;
}
.wbtm_search_action_button .wbtm_search_button_text{
  display: inline-block;
  white-space: nowrap;
}

.wtbm_bus_search_button_holder{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
}
.wbtm_input_start_end_location,
.wbtm_input_start_end_date{
  display: flex;
  width: 50%;
  position: relative;
}
  .wbtm-bus-flix-style {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid var(--wbtm_color_border, #ddd);
    margin: 0 0 14px;
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
    font-family: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .wbtm-bus-flix-style:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(15, 23, 42, .1);
  }

  /* 5-column strip: photo | title | route | feature | price. The old
     `display:flex` row gave none of its 5 children a flex-basis/flex-shrink,
     so once their combined intrinsic width passed the row's, every child
     shrank by the same factor and whatever text had nowhere left to go
     wrapped mid-word -- a price's currency symbol dropping onto its own line
     from the amount, a seat count breaking after "Seats". A grid gives every
     column a fixed or content-sized track instead, so nothing is ever
     squeezed below its own content width. */
  .wbtm-bus-flix-style_bus {
    display: grid;
    grid-template-columns: 130px minmax(150px, 210px) 1fr auto;
    align-items: center;
    column-gap: 22px;
    font-family: inherit;
  }

  /* Per-departure bus/boat photo (restored: the modern card rewrite
     dropped the thumbnail; helper + fallback logic still intact). */
  .wbtm-bus-flix-style_bus .wbtm-flix-photo {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    height: 84px;
    border-radius: 14px;
    overflow: hidden;
    margin-right: 0;
    background: #eef3fb;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* !important beats themes that force `img { height:auto }`. */
  .wbtm-bus-flix-style_bus .wbtm-flix-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .wbtm-bus-flix-style .title {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
  }

  .wbtm-bus-flix-style .title h5 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 6px;
    cursor: pointer;
  }

  .wbtm-bus-flix-style .title p { margin: 0; }

  /* Bus-number badge: no white-space control and no width cap meant a long
     "Bus No: <name>" wrapped onto a second line inside a 50px border-radius,
     which reads as a misshapen capsule rather than a rounded badge. */
  .wbtm-bus-flix-style .title span {
    display: inline-flex;
    white-space: nowrap;
    padding: 0;
    border-radius: 0;
    color: var(--wbtm_color_light_3, #878787);
    background-color: transparent;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
  }

  .wbtm-bus-flix-style .route {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
  }

  .wbtm-bus-flix-style .route .route-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 0;
  }

  .wbtm-bus-flix-style .route .route-info .from,
  .wbtm-bus-flix-style .route .route-info .to {
    width: auto;
  }

  .wbtm-bus-flix-style .route .route-info .from h4,
  .wbtm-bus-flix-style .route .route-info .to h4 {
    font-size: 22px;
    font-weight: 800;
    white-space: nowrap;
    margin: 0 0 4px;
    color: #1a1a1a;
  }

  .wbtm-bus-flix-style .route .route-info .from p,
  .wbtm-bus-flix-style .route .route-info .to p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--wbtm_color_light_3, #878787);
    white-space: nowrap;
  }

  .wbtm-bus-flix-style .route .route-info .to {
    padding-left: 0;
  }

  /* The icon + duration text sit directly on this div's own border-bottom --
     there is no separate floating badge in this markup, unlike the `.time`
     rule below (dead: no template emits a `.time` element here). A flat 3px
     solid line left no breathing room under the text, reading as an overlap
     between the line and the label above it. */
  .wbtm-bus-flix-style .route .route-info .duration {
    border-bottom: 2px dashed var(--wbtm_color_border, #ddd);
    width: auto;
    min-width: 90px;
    position: relative;
    padding-bottom: 10px;
    font-size: 12px;
    color: var(--wbtm_color_light_3, #878787);
    white-space: nowrap;
    text-align: center;
  }

  .wbtm-bus-flix-style .route .route-info .duration i {
    color: var(--wbtm_color_theme, #e8510f);
    margin-right: 4px;
  }

  .wbtm-bus-flix-style .route .route-info .duration strong {
    font-weight: 700;
  }

  .wbtm-bus-flix-style .route .route-info .duration .time {
    background: var(--wbtm_color_light);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 5px;
  }

  /* Seat-count badge: two stacked <p> lines wrapped in a 50px-radius pill
     with no background to actually show it -- the invisible pill is what
     produced the overlapping-text look reported on some cards. */
  .wbtm-bus-flix-style .feature {
    grid-column: 4;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
  }

  .wbtm-bus-flix-style .feature .items {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
  }

  .wbtm-bus-flix-style .feature .items p {
    margin: 0;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    line-height: 1.3;
  }

  .wbtm-bus-flix-style .feature .items p:first-child {
    color: #166534;
    font-weight: 700;
    font-size: 12px;
  }

  .wbtm-bus-flix-style .feature .items p:last-child {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--wbtm_color_light_3, #878787);
  }

  .wbtm-bus-flix-style .price {
    grid-column: 4;
    grid-row: 2;
    text-align: center;
    white-space: nowrap;
    margin-top: 4px;
  }

  .wbtm-bus-flix-style .price h4 {
    white-space: nowrap;
    font-size: 22px;
    font-weight: 800;
    margin: 0;
  }

  .wbtm-bus-flix-style .price h4 .woocommerce-Price-amount {
    white-space: nowrap;
    font-size: inherit;
  }

  .wbtm-bus-flix-style .wbtm_bus_details_tabs_holder {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--wbtm_color_border, #ddd);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* The base .wbtm_bus_popup_links rule (wtbm_search.css) hides these pills
     until the card is hovered -- fine for the old list layout, but on this
     card redesign the row reads as empty most of the time. Shown by default
     here, matching the other search style. */
  .wbtm-bus-flix-style .wbtm_bus_popup_links {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .wbtm-bus-flix-style .wbtm_bus_popup_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
  }

  .wbtm-bus-flix-style .wbtm_bus_popup_link i {
    font-size: 11px;
  }

  .wbtm-bus-flix-style .wbtm-seat-book {
    margin: 0;
  }

  .wbtm_style {
    background-color: #f5f7fa;
    padding: 20px;
    border-radius: 20px;
    font-weight: normal;
    font-size: 15px;
    color: #333;
  }

  /* No margin-bottom: this selector only ever matches .wbtm_search_area
     nested inside .wbtm_style (see the selector itself), and .wbtm_style's
     own base rule already gives it padding:20px on all four sides -- the
     extra bottom margin here just doubled that on the one side, leaving
     visibly more empty space below the pill bar than above/beside it
     inside the grey wrapper. Scoped to this same nested selector, so it
     can't affect any other (non-.wbtm_style-wrapped) use of
     .wbtm_search_area elsewhere in the plugin. */
  .wbtm_style .wbtm_search_area {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  .wbtm_search_area .inputList {
    margin: 0 10px 5px 0;
  }

  .wtbm_inputList label {
    width: 100%;
  }

  .wbtm_search_input_fields_holder .marker,
  .wbtm_search_input_fields_holder .calendar {
    margin-top: 5px;
  }

  .wtbm_inputList {
    flex: 1;
    margin: 0 5px 0 0;
  }

  .wbtm_search_area .wtbm_inputList:last-child,
  .wbtm_search_area .inputList:last-child {
    margin-right: 0;
  }

  .wbtm_search_area .marker,
  .wbtm_search_area .calendar {
    position: relative;
  }

  .wbtm_search_area .marker i,
  .wbtm_search_area .calendar i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    color: #999;
  }

  .wbtm_search_area .marker input,
  .wbtm_search_area .calendar input {
    padding-left: 30px;
    font-size: 16px;

  }

  .wbtm_search_result .wbtm-date-suggetion {
    margin: 10px;
    overflow: auto;
    background-color: #ddd;
    padding: 5px;
    border-radius: 8px;
  }

  .wbtm_search_result .wbtm-date-suggetion .wbtm_next_date {
    margin-right: 5px;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #fff;
    color: var(--wbtm_d_color);
    font-weight: normal;
    font-size: 14px;
  }

  #ui-datepicker-div {
    position: inherit;
    z-index: 2 !important;
  }

  .wbtm_search_result .wbtm-date-suggetion .wbtm_next_date:last-child {
    margin-right: 0;
  }

  .wbtm_search_result .wbtm-date-suggetion .wbtm_next_date:hover {
    color: var(--wbtm_color_theme);
    border: 1px solid var(--wbtm_color_theme);
  }

  .wbtm_search_result .wbtm-date-suggetion .wbtm_next_date.active {
    background-color: #f0f6ff;
    color: #4285f4;
    border: 1px solid #4285f4;
  }

  .wbtm_search_result .wbtm-date-route {
    background-color: white;
    padding: 15px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid var(--wbtm_color_theme);
  }

  .wbtm-date-return-route {
    background-color: white;
    padding: 15px;
    border-radius: 5px 5px 5px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    /*border-bottom: 2px solid var(--wbtm_color_theme);*/
  }

  .wbtm_search_result .wbtm-bus-list {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    margin-top: 0;
    margin-bottom: 15px;
    background-color: #fff;
    /* Matches .wbtm-card-wrap's 24px (templates/layout/search_result.php) --
       this element is that card's own wrapper, so a smaller radius here
       left its squarer corner peeking out past the card's more rounded
       one. */
    border-radius: 24px;
    display: flex;
    justify-content: space-between;
    gap: 0;
    flex-wrap: wrap;
    border: 1px solid #ddd;
  }

  .wbtm_search_result .wbtm-bus-list:hover {
    transform: none;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-image {
    border-radius: 12px 0 0 12px;
    width: 100%;
    height: 250px;
    padding: 10px;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-image img {
    height: 100%;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-image .bg_image_area {
    width: 100%;
    height: 100%;
    border-radius: 0 0 0 12px;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-image .bg_image_area>div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 0 12px;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-name {
    margin: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-items: start;
    width: 100%;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-name p {
    font-size: 14px;
    color: gray;
  }

  .wbtm_search_result .wbtm-bus-route {
    margin: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-items: start;
    gap: 10px;
    width: 100%;
  }

  .wbtm_search_result .wbtm-bus-route h6 {
    font-weight: normal;
    font-size: 16px;
  }

  .wbtm_search_result .wbtm-bus-route h6 i {
    padding-right: 10px;
    color: gray;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-seat-info {
    margin: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: auto;
    width: 33%;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-seat-info:last-child {
    border-right: 0;
  }

  .wbtm_search_result .wbtm-bus-list .ac {
    background-color: #e0f7fa;
    color: #0097a7;
    padding: 3px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .wbtm_search_result .wbtm-bus-list .none-ac {
    background-color: #fff8e1;
    color: #ffa000;
    padding: 2px 6px;
    border-radius: 5px;
  }

  .wbtm_search_result .wbtm-bus-list .seats-available {
    color: #28a745;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .wbtm_search_result .wbtm-bus-list .seats-price {
    color: var(--wbtm_color_theme);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-seat-book {
    margin: 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: auto;
    border-right: 0;
    width: 100%;
  }


  .wbtm_search_result .wbtm-bus-lists .lists-title {
    background: linear-gradient(105deg, #dddddd, #d8d8d8);
    color: var(--wbtm_color_theme);
    padding: 10px 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 30px 0;
    text-align: center;
  }

  .wbtm_search_result .wbtm-bus-lists .wbtm_registration_area {
    padding: 20px;
    border: 1px solid #d0d0d0;
    margin-bottom: 20px;
    border-radius: 20px;
  }



  .wbtm_style .themeButton,
  .wbtm_style [class*=_themeButton] {
    background-color: var(--wbtm_color_theme);
    color: var(--wbtm_color_theme_alter);
    padding: var(--wbtm_dmp_xs) var(--wbtm_dmp_xs);
    border: 1px solid var(--wbtm-primary);
  }

  .wbtm_style .themeButton span,
  .wbtm_style [class*=_themeButton] span {
    color: var(--wbtm_color_theme_alter);
  }

  .wbtm_style .themeButton:hover,
  .wbtm_style [class*=_themeButton]:hover {
    background-color: var(--wbtm_color_theme);
    color: var(--wbtm_color_theme_alter);
    border-color: var(--wbtm_color_theme);
  }

  .wbtm_style .themeButton:hover span,
  .wbtm_style [class*=_themeButton]:hover span {
    color: var(--wbtm_color_theme_alter);
  }

  .wbtm_bus_info_holder {
    flex-wrap: wrap;
  }

  .wbtm_bus_info_details_holder {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-image {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-image img {
    height: 100%;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-name {
    border-right: 1px solid #eee;
    width: 50%;
  }

  .wbtm_search_result .wbtm-bus-route {
    border-right: 0;
    width: 50%;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-seat-info {
    border-right: 1px solid #eee;
    border-top: 1px solid #eee;
    width: 50%;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-seat-book {
    width: auto;
  }

}

@media (min-width: 768px) {
  .wbtm_search_result .wbtm-bus-list {
    flex-direction: row;
    flex-wrap: nowrap;
    border: 0;
  }

  .wbtm_bus_info_details_holder {
    width: 75%;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-image {
    width: 25%;
    height: auto;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-image img {
    height: auto;
  }
}

/* Tablet: the filter rail has already dropped above the list (see
   wtbm_search.css), but that still only left the list area ~500-540px wide
   at the narrow end of this range -- nowhere near the desktop row's real
   minimum (96px photo + 110px title + route-info's own min-content of
   ~266px once its 90px-min duration badge and nowrap times are accounted
   for + two more auto-sized columns for the feature/price badges + 3-4
   column-gaps), which came to ~600px+. Shrinking a couple of those sizes
   (the previous approach here) still left it short, so the feature/price
   pair rendered past the card's own right edge, clipped mid-badge by an
   ancestor's overflow:hidden.
   Simplest fix that's actually guaranteed to fit: reuse the same 2-column
   stack the max-width:768px block below already uses (photo, then title,
   then route, full width each; feature + price share the last row) rather
   than continuing to squeeze a single-row layout into a track that has no
   real room for it. This range has more width to spare than true mobile
   once stacked, so none of the max-width:768px block's font/gap shrinks
   are needed here -- desktop sizing already fits comfortably. */
@media (min-width: 768px) and (max-width: 1099px) {
  .wbtm-bus-flix-style_bus {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    row-gap: 12px;
  }
  .wbtm-bus-flix-style_bus .wbtm-flix-photo {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 150px;
  }
  .wbtm-bus-flix-style .title {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .wbtm-bus-flix-style .route {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }
  .wbtm-bus-flix-style .feature {
    grid-column: 1;
    grid-row: 4;
  }
  .wbtm-bus-flix-style .price {
    grid-column: 2;
    grid-row: 4;
    margin-top: 6px;
  }
}

@media (min-width: 1240px) {
  .wbtm_bus_info_details_holder {
    width: 80%;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-image {
    width: 20%;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-bus-name {
    width: 25%;
  }

  .wbtm_search_result .wbtm-bus-route {
    border-right: 1px solid #eee;
    width: 25%;
  }

  .wbtm_search_result .wbtm-bus-list .wbtm-seat-info {
    border-right: 1px solid #eee;
    border-top: 0;
    width: 25%;
  }
}

/* ===== Non-Seat Items (Frontend) ===== */
.wbtm_non_seat_item {
  text-align: center;
  vertical-align: middle;
  cursor: default !important;
  user-select: none;
  pointer-events: none;
  padding: 6px 4px;
  min-width: 50px;
}

.wbtm_non_seat_item .wbtm_non_seat_icon {
  display: block;
  font-size: 18px;
  color: #6c757d;
  margin-bottom: 3px;
  line-height: 1;
}

.wbtm_non_seat_item .wbtm_non_seat_label {
  display: block;
  font-size: 10px;
  color: #868e96;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
}

.wbtm_seat_plan_area table td.wbtm_non_seat_item,
.wbtm_seat_plan_upper table td.wbtm_non_seat_item,
.wbtm_cabin_seat_plan table td.wbtm_non_seat_item {
  background-color: #f1f3f5 !important;
  border: 1px dashed #ced4da !important;
  border-radius: 4px;
  opacity: 0.85;
}

/* Aisle is rendered as an empty <td> (no icon/label markup at all) — just
   blank space, no border/background, unlike every other non-seat item above. */
.wbtm_seat_plan_area table td.wbtm_aisle_blank,
.wbtm_seat_plan_upper table td.wbtm_aisle_blank,
.wbtm_cabin_seat_plan table td.wbtm_aisle_blank {
  background: transparent !important;
  border: none !important;
  cursor: default !important;
  pointer-events: none;
}

@media only screen and (max-width: 768px) {
  .wbtm_non_seat_item .wbtm_non_seat_icon {
    font-size: 14px;
  }
  .wbtm_non_seat_item .wbtm_non_seat_label {
    font-size: 8px;
  }
}

/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   ============================================================ */

/* ---- Search form layout ---- */
._dFlex_fdColumn_justifyBetween_fullHeight {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}
/* Hide the blank spacer above the search button — alignment handled by flex-end */
._dFlex_fdColumn_justifyBetween_fullHeight > span:first-child {
  display: none !important;
}

@media only screen and (max-width: 960px) {
  /* Stack search form fields vertically */
  .wbtm_search_input_fields_holder {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .wbtm_input_fields_holder {
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .wbtm_input_start_end_location,
  .wbtm_input_start_end_date {
    width: 100% !important;
    flex-direction: row;
  }
  .wtbm_bus_search_button_holder {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  ._dFlex_fdColumn_justifyBetween_fullHeight {
    width: 100% !important;
  }
  .wbtm_bus_submit,
  .get_wbtm_bus_list {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
  }
}

@media only screen and (max-width: 600px) {
  /* Stack From/To on very small screens */
  .wbtm_input_start_end_location,
  .wbtm_input_start_end_date {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .wtbm_inputList {
    width: 100% !important;
    margin: 0 !important;
  }
  /* Swap icon repositioned */
  .wbtm_search_location_toggle {
    position: static !important;
    transform: rotate(90deg) !important;
    margin: 4px auto !important;
    left: auto !important;
    top: auto !important;
  }
  /* Search form padding */
  ._dLayout.wbtm_search_area {
    padding: 12px !important;
  }
  .wbtm_style {
    padding: 8px !important;
  }
}

/* ---- Seat plan: scrollable on mobile ---- */
.wbtm_seat_plan_holder,
.wbtm_seat_plan_area,
.wbtm_seat_plan_upper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 600px) {
  /* Smaller seat cells on phones */
  .wbtm_seat_plan_area table th,
  .wbtm_seat_plan_area table td,
  div.wbtm_bus_list_area div.wbtm_seat_plan_area table th,
  div.wbtm_bus_list_area div.wbtm_seat_plan_area table td,
  .wbtm_seat_plan_upper table th,
  .wbtm_seat_plan_upper table td,
  div.wbtm_bus_list_area div.wbtm_seat_plan_upper table th,
  div.wbtm_bus_list_area div.wbtm_seat_plan_upper table td,
  .wbtm_cabin_seat_plan table th,
  .wbtm_cabin_seat_plan table td {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 3px !important;
  }
  .seat_number {
    font-size: 10px !important;
  }
}

/* ---- Date suggestion bar: horizontal scroll ---- */
.wbtm-date-suggetion {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding-bottom: 4px;
}
.wbtm-date-suggetion .wbtm_next_date {
  flex-shrink: 0 !important;
  white-space: nowrap;
}

/* ---- Search results: bus list cards ---- */
@media only screen and (max-width: 768px) {
  .wbtm_search_result .wbtm-bus-list {
    flex-direction: column !important;
  }
  .wbtm_search_result .wbtm-bus-list .wbtm-bus-image {
    width: 100% !important;
    height: 180px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  .wbtm_bus_info_details_holder {
    width: 100% !important;
  }
  /* Route info: date block + cities stay in one row on mobile too (the
     base rule already sets this to display:flex with no flex-direction
     override, i.e. row -- flex-direction:column here is what forced it
     onto two stacked lines). The bus-icon-and-dashed-line piece between
     the cities is still dropped to leave room for it in a phone-width
     row; the date block and both cities keep their own font/gap sizes
     from the base rules, which is tight but fits down to ~340px wide. */
  .wbtm_search_route_container {
    flex-direction: row !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .wbtm_search_route_return_date {
    padding-right: 12px !important;
  }
  .wbtm_search_route_cities_wrapper {
    flex: 1 !important;
    /* mp_global/assets/mp_style/wbtm_plugin_global.css ships a generic
       `.wbtm_style [class*="_wrap"] { flex-wrap: wrap; }` utility-class
       rule -- an attribute selector matching any class *containing*
       "_wrap" -- which also matches this element's actual name, "...
       _cities_wrapper", by accident. With no rule anywhere setting this
       back to nowrap, that's what was actually stacking Paris/Berlin onto
       two lines instead of the icon-gap sizing above being too tight. */
    flex-wrap: nowrap !important;
  }
  /* Keep a plain dashed connector between the two cities instead of
     dropping it outright -- just without the 36px bus-icon circle (base
     rule's ::before/::after leave a 40px gap in the middle sized for it),
     which is too wide to also fit on a phone-width row. Both dashes
     stretch to meet in the middle instead. */
  .wbtm_search_route_icon_wrapper {
    display: flex !important;
    flex: 0 1 20px !important;
    padding: 0 !important;
  }
  .wbtm_search_route_icon_wrapper::before,
  .wbtm_search_route_icon_wrapper::after {
    width: 50% !important;
  }
  .wbtm_search_route_bus_icon {
    display: none !important;
  }
  .wbtm_search_route_city_section,
  .wbtm_search_route_city_section_right {
    width: 44% !important;
    padding: 6px !important;
  }
  /* Bus info row stacks vertically */
  .wbtm_bus_info_holder {
    flex-direction: column !important;
    gap: 8px;
  }
  /* Force all bus card children full width when stacked */
  .wbtm_search_result .wbtm-bus-list .wbtm-bus-name,
  .wbtm_search_result .wbtm-bus-route,
  .wbtm_search_result .wbtm-bus-list .wbtm-seat-info {
    width: 100% !important;
    border-right: 0 !important;
    border-top: 0 !important;
  }
  /* Show seat-info divs side by side (price + seats) */
  .wbtm_bus_info_holder .wbtm-seat-info {
    width: 50% !important;
    display: inline-flex !important;
    vertical-align: top;
  }
  /* Route display in flix-style: the 5-column strip collapses to 2 columns
     -- photo and title/route span both, feature and price share the last
     row side by side (seats on the left, price on the right).
     Every child below also needs its OWN grid-row set explicitly: the
     desktop rules above give .wbtm-flix-photo/.title/.route a `grid-row:
     1 / span 2` and .feature/.price `grid-row: 1` / `grid-row: 2`
     respectively, none of which this query used to override -- so on
     mobile all five kept those desktop row assignments while only their
     *columns* changed, and every one of them landed back in rows 1-2,
     rendering stacked directly on top of each other (times and price
     text smeared across the photo) instead of the five stacked rows this
     comment describes. .price was also left at `grid-column: 1`, the same
     column as .feature, instead of column 2 -- so even the "side by side"
     pair overlapped each other too. */
  .wbtm-bus-flix-style_bus {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    row-gap: 12px !important;
  }
  .wbtm-bus-flix-style_bus .wbtm-flix-photo {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    height: 150px !important;
  }
  .wbtm-bus-flix-style .title {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }
  .wbtm-bus-flix-style .route {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
  }
  .wbtm-bus-flix-style .feature {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
  .wbtm-bus-flix-style .price {
    grid-column: 2 !important;
    grid-row: 4 !important;
    margin-top: 6px;
  }
  .wbtm-bus-flix-style .wbtm_bus_details_tabs_holder {
    justify-content: space-between;
  }
  /* .route-info's desktop sizing (22px nowrap times, 18px gaps, a 90px-min
     duration badge) is tuned for the 1fr third column of a 4-column desktop
     grid, easily 300px+ wide. Mobile only ever shrunk the *card's* padding
     and grid — never these — so at anything near 320-360px wide "10:30 pm"
     had nowhere to go and ran off the edge of the viewport, clipped to
     "10:3". Shrinking the font, gap and badge here brings the row's total
     width back under what a narrow phone actually has. */
  .wbtm-bus-flix-style .route .route-info {
    gap: 8px;
  }
  .wbtm-bus-flix-style .route .route-info .from h4,
  .wbtm-bus-flix-style .route .route-info .to h4 {
    font-size: 17px !important;
  }
  .wbtm-bus-flix-style .route .route-info .duration {
    min-width: 68px;
    font-size: 11px;
  }
  /* Date-route header wraps */
  .wbtm_search_result .wbtm-date-route,
  .wbtm-date-return-route {
    flex-direction: column !important;
    gap: 8px;
    align-items: flex-start !important;
  }
  /* Tabs scroll horizontally */
  .wbtm_bus_detail_popup_tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .wbtm_bus_detail_popup_tab {
    flex-shrink: 0 !important;
  }
}

/* ---- Popup / modal on mobile ---- */
@media only screen and (max-width: 768px) {
  .wbtm-bus-popup-inner {
    width: 95% !important;
    margin: 3% auto !important;
    padding: 14px !important;
    border-radius: 8px !important;
  }
  .wbtm-popup-content {
    max-width: 100% !important;
  }
}

/* ---- Registration / passenger form ---- */
@media only screen and (max-width: 768px) {
  .wbtm_registration_area,
  .wbtm_selected_seat_details {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wbtm_selected_seat_details table {
    min-width: 320px;
  }
  /* Totals table */
  table.wbtm_totals {
    width: 100% !important;
  }
  /* Passenger form fields full width */
  .wbtm_passenger_form_area .col_6,
  .wbtm_passenger_form_area .col_4,
  .wbtm_passenger_form_area .col_3 {
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* ---- Left filter panel ---- */
@media only screen and (max-width: 768px) {
  .wbtm_bus_left_filter_holder {
    width: 100% !important;
    margin-bottom: 12px;
  }
  .wbtm_bus_list_area {
    flex-direction: column !important;
  }
  .wbtm_bus_list_holder {
    width: 100% !important;
  }
}

/* ---- Bus details tabs ---- */
@media only screen and (max-width: 768px) {
  .wbtm_bus_details_tabs_holder {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding: 5px;
  }
  .wbtm_bus_details_tabs_holder > * {
    flex-shrink: 0;
  }
}

/* ---- Single bus feature image ---- */
@media only screen and (max-width: 600px) {
  .wbtm_car_details_feature_image {
    width: 100% !important;
    max-width: 100% !important;
  }
  .wbtm_car_details_gallery img {
    width: 70px !important;
    height: 56px !important;
  }
}

/* ---- General overflow guard ---- */
@media only screen and (max-width: 768px) {
  .wbtm_style {
    overflow-x: hidden;
  }
  #wbtm_area {
    overflow-x: hidden;
  }
}

/* Editable Return Route (Pro): style the return From/To selectors to match the
   plugin's main search inputs (boxed input with an inline marker icon), and show
   the locked "From" (fixed to the outbound destination) as read-only. */
.wbtm_return_route_selectors {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  margin: 12px 0 10px;
  padding: 12px 14px;
  background-color: var(--wbtm_color_white, #ffffff);
  border: 1px solid var(--wbtm_color_border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}
.wbtm_return_route_selectors .wtbm_inputList {
  position: relative;
  flex: 1 1 calc(50% - 10px);
  min-width: 180px;
  margin: 0;
}
.wbtm_return_route_selectors .wtbm_fdColumn {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
  font-size: var(--wbtm_fs_label, 14px);
  color: #555;
}
.wbtm_return_route_selectors .marker {
  position: relative;
}
.wbtm_return_route_selectors .marker > i.fa-map-marker-alt {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
  pointer-events: none;
}
.wbtm_return_route_selectors input.formControl {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 32px;
  font-size: 16px;
  color: #333;
  background-color: var(--wbtm_color_white, #ffffff);
  border: 1px solid #7d7979;
  border-radius: 6px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wbtm_return_route_selectors input.formControl:focus {
  border-color: var(--wbtm_color_theme, #2271b1);
  box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.12);
}
/* Locked "From" — read-only, with a lock icon on the right. */
.wbtm_return_route_selectors .wbtm_return_from_fixed input.formControl {
  padding-right: 30px;
  cursor: not-allowed;
  background-color: #f4f5f7;
  color: #555;
  pointer-events: none;
}
.wbtm_return_route_selectors .wbtm_return_from_fixed .wbtm_return_from_lock {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #9aa0a6;
  pointer-events: none;
}
/* Reuse the main search dropdown look for the editable "To" list. */
.wbtm_return_route_selectors ul.wbtm_input_select_list {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .wbtm_return_route_selectors .wtbm_inputList {
    flex: 1 1 100%;
  }
}

/* Available / Selected / Booked legend, shown below .wbtm_seat_plan_area. */
.wbtm_seat_legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 4px 10px 20px;
  padding-top: 18px;
  border-top: 1px solid #eef1f5;
}
.wbtm_seat_legend_item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1;
  color: #64748b;
  white-space: nowrap;
}
.wbtm_seat_legend_swatch {
  width: 13px;
  height: 13px;
  min-width: 13px;
  border-radius: 3px;
  display: inline-block;
  box-sizing: border-box;
  flex-shrink: 0;
  font-style: normal;
  vertical-align: middle;
}
.wbtm_seat_legend_swatch.is_available {
  /* A near-white fill with a visible border reads as ill-defined/misaligned
     against the page's own white background — tinted very slightly so it
     shows up as a clear, consistently-sized square like the other two. */
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
}
.wbtm_seat_legend_swatch.is_selected {
  background: #ef4444;
  border: 1.5px solid #ef4444;
}
.wbtm_seat_legend_swatch.is_booked {
  background: #cbd5e1;
  border: 1.5px solid #cbd5e1;
}

/* ==================================================================== *
 *  Booking summary column redesign — selected seats, totals, pickup /
 *  drop-off, extra services, passenger info and the Book Now footer
 *  (the right-hand column of the seat-booking form). Each section is
 *  scoped to its own existing wrapper class. Shared component classes also
 *  reused elsewhere in the plugin (.mpPanel_xs, .mpPanelHeader,
 *  .mpPanelBody, .qtyIncDec, .groupContent, .mp_form_item) are always
 *  qualified with a wrapper from this column (e.g. ".wbtm_attendee_area
 *  .mpPanel_xs") so nothing here leaks into admin settings pages or other
 *  frontend areas that reuse those same classes. !important is used only
 *  on the box-model properties (background/border/padding/margin/radius)
 *  that the classic [class*="_dLayout"]/[class*="_bgLight"] utility
 *  classes already set on these same elements. *
 * ==================================================================== */

/* ---- Selected-seats table / totals table — hidden, not removed ----
   Both are now redundant on-screen (the "Booking Summary" preview card
   shows the same seat list + subtotal), but .wbtm_selected_seat_details
   .wbtm_item_insert and .wbtm_sub_total are the live elements
   wbtm_selected_seat_details()/wbtm_price_calculation() in wbtm_global.js
   read from and write to on every seat click — and the exact source
   wbtm_update_summary_preview() mirrors into the preview card. Removing
   this markup from the template would break seat tracking and price
   calculation everywhere, not just this duplicate display, so it's hidden
   with CSS instead; the DOM keeps working exactly as before. */
.wbtm_selected_seat_details,
table.wbtm_totals {
  display: none !important;
}

/* ---- Bottom Total/Book Now footer — hidden, not removed ----
   Same reasoning as above: the "Booking Summary" preview card now shows the
   total and its own Book Now button, but #wbtm_add_to_cart here is the real
   button that button re-triggers via .trigger('click') (see the click
   handler for .wbtm_summary_preview_book_now in wbtm_global.js), and
   .wbtm_total is what wbtm_price_calculation() writes the grand total (incl.
   extra services) and data-raw-total into. jQuery's .trigger('click') still
   fires a hidden element's click handler, so hiding this with CSS rather
   than removing it from the template keeps the preview's button working. */
/* Hidden until a ticket quantity / seat is chosen. No !important here on
   purpose: wbtm_price_calculation() (wbtm_global.js) reveals this footer via
   jQuery .slideDown(), which sets an inline display that must be able to win
   over this rule. The without-seat-plan flow has no Booking Summary preview
   card, so this footer is its ONLY Book Now button and must stay revealable. */
.wbtm_form_submit_area {
  display: none;
}

/* Seat-plan flow renders a Booking Summary preview card whose own Book Now
   button re-triggers the hidden #wbtm_add_to_cart, so the real submit footer
   is kept permanently hidden there to avoid a duplicate button. !important
   scoped to that flow blocks the shared slideDown() from revealing it — the
   without-seat-plan flow (no preview card) is unaffected. */
.wbtm_registration_area:has(.wbtm_booking_summary_preview) .wbtm_form_submit_area {
  display: none !important;
}

/* ---- Shared card shell for every section in this column ----
   .wbtm_pickup_point deliberately NOT included here — Pickup Point and
   Drop-Off Point are merged into one shared card (.wbtm_location_points_card
   below) instead of getting one each. */
.wbtm_selected_seat_details,
table.wbtm_totals,
.wbtm_ex_service_area,
.wbtm_attendee_area .wbtm_attendee_item,
.wbtm_form_submit_area {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  padding: 18px !important;
  margin: 0 0 16px !important;
  box-sizing: border-box;
}
.wbtm_attendee_area .wbtm_attendee_item + .wbtm_attendee_item {
  margin-top: 16px !important;
}

/* ---- Selected seat(s) — table reshaped into a compact line-item list ---- */
.wbtm_selected_seat_details table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.wbtm_selected_seat_details table,
.wbtm_selected_seat_details tbody.wbtm_item_insert {
  display: block;
  width: 100%;
}
.wbtm_selected_seat_details tbody.wbtm_item_insert {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wbtm_selected_seat_details tr.wbtm_remove_area {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #eef1f5 !important;
  border-radius: 10px;
  padding: 9px 12px;
}
.wbtm_selected_seat_details tr.wbtm_remove_area td {
  border: 0 !important;
  padding: 0 !important;
}
.wbtm_selected_seat_details td.insert_seat_label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--wbtm_color_theme);
  background: var(--wbtm_color_theme_alter, #fff1f4);
  border-radius: 999px;
  padding: 4px 10px;
  flex: 0 0 auto;
}
.wbtm_selected_seat_details td.insert_seat_name {
  font-weight: 700;
  color: #1f2937;
  flex: 1 1 auto;
}
.wbtm_selected_seat_details td.insert_seat_price {
  font-weight: 700;
  color: #1f2937;
  flex: 0 0 auto;
}
.wbtm_selected_seat_details tr.wbtm_remove_area .allCenter,
.wbtm_selected_seat_details tr.wbtm_remove_area .wbtm_item_remove {
  flex: 0 0 auto;
}
.wbtm_selected_seat_details .wbtm_item_remove {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #eef1f5;
  color: #ef4444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wbtm_selected_seat_details .wbtm_item_remove:hover {
  background: #fef2f2;
}

/* ---- Totals table — a clean flex row instead of a bordered grid ---- */
table.wbtm_totals tbody,
table.wbtm_totals tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
table.wbtm_totals td {
  border: 0 !important;
  padding: 0 !important;
}
table.wbtm_totals h5 {
  margin: 0;
  font-size: 15px !important;
  color: #64748b !important;
  font-weight: 600;
}
table.wbtm_totals .wbtm_sub_total {
  color: #1f2937 !important;
  font-weight: 700;
}

/* ---- Pickup / Drop-off point — merged into ONE shared card ----
   Pickup Point and Drop-Off Point are two separate templates
   (templates/layout/pickup_point.php, drop_off_point.php), each rendering
   its own <div class="wbtm_pickup_point _bgLight ...">, and each only
   conditionally (a bus may have only one of the two enabled). Rather than
   editing both templates, they're wrapped in one new
   .wbtm_location_points_card container (see registration_seat_plan.php)
   which gets the card shell instead of each .wbtm_pickup_point getting its
   own; the individual sections are stripped back to flush, borderless
   blocks with a divider between them when both are present. */
.wbtm_location_points_card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  padding: 18px !important;
  margin: 0 0 16px !important;
  box-sizing: border-box;
}
.wbtm_location_points_card .wbtm_pickup_point {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wbtm_location_points_card .wbtm_pickup_point + .wbtm_pickup_point {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid #eef1f5 !important;
}
.wbtm_pickup_point label.justifyBetween {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px;
}
.wbtm_pickup_point label span {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* The open dropdown list itself is native/OS-rendered for a plain <select>
   and can't be restyled cross-browser from CSS alone (no rounded corners,
   shadow, or custom row highlight there) -- only the closed control can be
   modernized this way. */
.wbtm_pickup_point select.formControl {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 11px 40px 11px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600;
  color: #1e293b;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wbtm_pickup_point select.formControl:hover {
  border-color: #cbd5e1 !important;
}
.wbtm_pickup_point select.formControl:focus {
  border-color: var(--wbtm_color_theme) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wbtm_color_theme, #e8510f) 15%, transparent);
  outline: none;
}

/* ---- Extra services — line items with a pill quantity stepper ----
   Styled to match the passenger-information card: the shared 18px card
   padding is zeroed out so the tinted header band (the h3) can bleed
   edge-to-edge, with the padding moved onto the .mpPanel body instead. */
.wbtm_ex_service_area {
  padding: 0 !important;
  border: 1px solid #e7eaf0 !important;
  /* Matches .wbtm_booking_summary_preview's own radius/shadow (or lack of
     one) right below it -- this card used to float noticeably harder
     (heavier radius, a real drop shadow) while that one sat flat, making
     the two summary-column cards look like they belonged to different
     designs. */
  border-radius: 14px !important;
  box-shadow: none;
  overflow: hidden;
}
.wbtm_ex_service_area h3 {
  text-transform: uppercase;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid #e7eaf0 !important;
  padding: 14px 18px !important;
}
.wbtm_ex_service_area .mpPanel {
  border: 0;
  background: #fff;
  padding: 18px;
}
.wbtm_style .wbtm_ex_service_area .mT {
  margin-top: 0px;
}
.wbtm_ex_service_area table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.wbtm_ex_service_area table,
.wbtm_ex_service_area tbody {
  display: block;
  width: 100%;
}
.wbtm_ex_service_area tbody {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wbtm_ex_service_area tbody tr {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wbtm_ex_service_area tbody tr:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}
.wbtm_ex_service_area tbody td {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.wbtm_ex_service_area td._textLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  font-weight: 700;
  color: #0f172a;
  font-size: 14px;
  text-align: left !important;
  min-width: 0;
}
/* Generic add-on icon badge -- the plugin doesn't store a per-service icon,
   so every row gets the same tag glyph in a small tinted circle rather than
   the name sitting bare, matching the icon treatment used on the bus-details
   popup tabs. */
.wbtm_ex_service_area .wbtm_ex_service_icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wbtm_color_theme, #e8510f) 12%, #ffffff);
  color: var(--wbtm_color_theme, #e8510f);
  font-size: 12px;
}
.wbtm_ex_service_area .wbtm_ex_service_name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wbtm_ex_service_area td._textCenter {
  flex: 0 0 auto;
  text-align: center !important;
}
/* Swap visual order so Price sits to the left of the Quantity stepper — the
   markup order (Name, Quantity, Price) is unchanged, this just reorders how
   the row paints. Uses nth-child (fixed structural position), not :has(),
   so it isn't at risk of the DOM-mutation reflow issue fixed for the
   Passenger Information fields (the quantity stepper's +/- buttons only
   change the input's value, they don't add/remove/re-tag DOM nodes). */
.wbtm_ex_service_area tbody td:nth-child(2) { order: 3; }
.wbtm_ex_service_area tbody td:nth-child(3) { order: 2; }
.wbtm_ex_service_area td._textCenter .woocommerce-Price-amount {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 13.5px;
  color: #1e293b;
}
/* Back to one grouped pill (not three separate floating controls) -- the
   dividers between the two buttons and the number are what actually reads
   as "adjustable spacing" here, not physical gaps between the pieces. */
.wbtm_ex_service_area .qtyIncDec {
  display: flex;
  align-items: center;
  /* `.groupContent` (mp_global's generic grouped-input skin) paints its own
     background-color: var(--wbtm_color_theme) at equal specificity to this
     selector -- only source order kept it from winning here, which isn't
     safe to rely on, so it's pinned with !important. */
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.wbtm_ex_service_area .qtyIncDec .addonGroupContent {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  background: transparent;
  border: 0 !important;
  transition: background-color .15s ease, color .15s ease;
}
.wbtm_ex_service_area .qtyIncDec .decQty {
  border-right: 1px solid #e2e8f0 !important;
}
.wbtm_ex_service_area .qtyIncDec .incQty {
  border-left: 1px solid #e2e8f0 !important;
}
.wbtm_ex_service_area .qtyIncDec .addonGroupContent:hover {
  background: var(--wbtm_color_theme, #2563eb);
  color: #fff;
}
.wbtm_ex_service_area .qtyIncDec input.formControl {
  width: 34px !important;
  height: 30px;
  flex: 0 0 auto;
  border: 0 !important;
  text-align: center;
  font-weight: 700;
  padding: 0 !important;
  background: transparent !important;
}

/* ---- Passenger information ---- */
/* The shared card shell above pads every summary-column card 18px on all
   sides; the passenger card zeroes that out so its tinted header can bleed
   edge-to-edge, with the padding moved onto .mpPanelBody instead. */
.wbtm_attendee_area .wbtm_attendee_item {
  padding: 0 !important;
  border: 1px solid #e7eaf0 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 28px -20px rgba(2, 6, 23, .28);
  overflow: hidden;
}
/* Thin brand accent bar along the top edge of the card. */
.wbtm_attendee_area .wbtm_attendee_item::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--wbtm_color_theme, #2563eb), var(--wbtm_color_theme_alter, #93c5fd));
}
.wbtm_attendee_area .mpPanelHeader {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
  border: 0 !important;
  border-bottom: 1px solid #e7eaf0 !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
}
.wbtm_attendee_header_text {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wbtm_attendee_area .mpPanelHeader h5 {
  margin: 0;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: .01em;
  text-transform: uppercase;
}
/* Seat assignment rendered as a small white pill badge under the title. */
.wbtm_attendee_seat_label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  text-transform: none !important;
  letter-spacing: normal !important;
}
.wbtm_attendee_area .mpPanelHeader .wbtm_seat_name {
  font-weight: 800;
  color: var(--wbtm_color_theme);
}
/* Round person+pencil avatar, right side of the header — purely decorative. */
.wbtm_attendee_header_icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M4 20c0-3.3 2.5-5.5 5.5-5.5'/%3E%3Cpath d='M15.5 20.5l4-4a1.4 1.4 0 0 0-2-2l-4 4-.6 2.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}
.wbtm_attendee_area .mpPanelBody {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px;
  /* Card shell padding was zeroed so the header could bleed edge-to-edge;
     the body carries it instead. */
  padding: 18px !important;
  background: #fff !important;
}
.wbtm_attendee_area .mp_form_item {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Grid items default to min-width:auto, which refuses to shrink below
     the item's own content size (e.g. the uppercase "PASSENGER ADDRESS"
     label) — that alone can make the two 1fr tracks render at visibly
     different widths even though they're an equal fr share. min-width:0
     lets both columns actually end up equal, and width:100% stops this
     flex column from shrink-wrapping instead of filling its grid track. */
  width: 100% !important;
  min-width: 0 !important;
}
.wbtm_attendee_area .mp_form_item span {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.wbtm_attendee_area .mp_form_item .textRequired {
  color: #ef4444;
  font-weight: 700;
}
.wbtm_attendee_area .mp_form_item .formControl {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 16px !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wbtm_attendee_area .mp_form_item .formControl::placeholder {
  color: #94a3b8;
}
.wbtm_attendee_area .mp_form_item .formControl:hover {
  border-color: #cbd5e1 !important;
}
/* The blanket padding:10px 12px !important above clobbers the legacy
   calendar icon's own padding-left:40px (div.wbtm_style .formControl.date_type
   in wbtm_plugin_global.css, not !important, so it lost) — collapsing the
   left padding back to 12px let the icon overlap the "D" in "Date of Birth".
   Restored here, scoped to this form only. */
.wbtm_attendee_area .mp_form_item .formControl.date_type {
  padding-left: 40px !important;
}
.wbtm_attendee_area .mp_form_item .formControl:focus {
  border-color: var(--wbtm_color_theme) !important;
  background-color: #fff !important;
  outline: 0 !important;
  /* Soft focus ring in the theme color (falls back to blue). */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wbtm_color_theme, #2563eb) 15%, transparent);
}
.wbtm_attendee_area .mp_form_item:has(textarea) {
  grid-column: 1 / -1;
}
/* Field order (Name, Email, Phone, DOB, Gender, Address) is now handled by
   physically moving the DOM nodes once in JS — see wbtm_reorder_attendee_fields()
   in wbtm_global.js. A CSS `order` + :has() version of this lived here
   before, but interacting with the Date of Birth datepicker mutated the DOM
   enough to re-trigger :has() and visibly reshuffle the grid (Passenger Name
   and Date of Birth would swap on screen). Real DOM order isn't affected by
   that.
   Icon prefixes — matched by field name so no PHP template changes were
   needed; each icon is a small inline SVG (not an icon font) so it renders
   the same regardless of whether Font Awesome/Dashicons load on this page.
   Selectors include .mp_form_item (not just .wbtm_attendee_area + the field)
   so their specificity (0,3,1) beats .wbtm_attendee_area .mp_form_item
   .formControl's padding:10px 12px !important (0,3,0) above — both are
   !important, so without that extra class here padding-left silently lost
   and the icon ended up drawn on top of the placeholder text. */
.wbtm_attendee_area .mp_form_item input[name="wbtm_full_name[]"] {
  padding-left: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E") !important;
  background-position: 12px center !important;
}
.wbtm_attendee_area .mp_form_item input[name="wbtm_reg_email[]"] {
  padding-left: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") !important;
  background-position: 12px center !important;
}
.wbtm_attendee_area .mp_form_item input[name="wbtm_reg_phone[]"] {
  padding-left: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.7l1.5 4-2 1.4a10.8 10.8 0 0 0 5.3 5.3l1.4-2 4 1.5v2.7a1.8 1.8 0 0 1-2 1.8C11 17.4 6.6 13 5.8 6.5a1.8 1.8 0 0 1 1.8-2z'/%3E%3C/svg%3E") !important;
  background-position: 12px center !important;
}
.wbtm_attendee_area .mp_form_item select[name="wbtm_user_gender[]"] {
  padding-left: 36px !important;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='2.6'/%3E%3Ccircle cx='16' cy='9.5' r='2.2'/%3E%3Cpath d='M4 20c0-3 2.2-5.2 5-5.2s5 2.2 5 5.2M13.6 20c.3-2 1.8-3.5 3.6-3.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-position: 12px center, right 12px center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 16px, 14px !important;
  padding-right: 34px !important;
}
.wbtm_attendee_area .mp_form_item textarea[name="wbtm_reg_address[]"] {
  padding-left: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11a7 7 0 1 0-14 0c0 4.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") !important;
  background-position: 12px 12px !important;
  background-repeat: no-repeat !important;
}
/* Date of birth already gets a calendar icon from the classic
   div.wbtm_style .formControl.date_type rule (wbtm_plugin_global.css) —
   left as-is rather than duplicated here. */
@media only screen and (max-width: 600px) {
  .wbtm_attendee_area .mpPanelBody {
    grid-template-columns: 1fr;
  }
}

/* ---- Footer: total + Book Now ---- */
.wbtm_form_submit_area {
  position: sticky;
  bottom: 12px;
}
.wbtm_form_submit_area .justifyBetween {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.wbtm_form_submit_area h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}
.wbtm_form_submit_area .wbtm_total {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  font-weight: 800;
}
#wbtm_add_to_cart {
  border: 0;
  border-radius: 999px;
  padding: 14px 32px !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--wbtm_color_theme);
  color: var(--wbtm_color_theme_alter);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transition: filter .15s, transform .15s;
  cursor: pointer;
}
#wbtm_add_to_cart:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
@media only screen and (max-width: 600px) {
  .wbtm_form_submit_area .justifyBetween {
    flex-direction: column;
    align-items: stretch;
  }
  #wbtm_add_to_cart {
    width: 100%;
  }
}

/* ==================================================================== *
 *  Booking Summary preview card (templates/layout/booking_summary_preview.php)
 *  A second, read-only summary shown right after Drop-Off Point — mirrors
 *  the live seat list/subtotal (see wbtm_update_summary_preview() in
 *  wbtm_global.js) and its Book Now button just re-triggers the real
 *  #wbtm_add_to_cart button below, so nothing here duplicates cart logic.
 * ==================================================================== */
.wbtm_booking_summary_preview {
  /* Lighter than the header band's #f8fafc, not darker/more saturated than
     it -- the card body should read as the receding surface and the header
     as the (slightly) more present one, not the other way round. */
  background: #fff;
  border: 1px solid #e0e7ff;
  border-radius: 14px;
  padding: 0 18px 18px;
  margin: 0 0 16px;
  box-sizing: border-box;
  overflow: hidden;
}
/* Same banner treatment as the Extra Services header (.wbtm_ex_service_area
   h3): uppercase, bolder weight, a tinted band bled edge-to-edge via
   negative margins (this card, unlike that one, has its own 18px padding
   rather than padding:0) with a border to separate it from the rest of the
   card, instead of just a plain bold line sitting in the same flat card
   background as everything below it. */
.wbtm_booking_summary_title {
  /* The generic `div.wbtm_style h4` rule (wbtm_plugin_global.css) is more
     specific than this single class (it also matches the element type), so
     it was winning on every shared property -- margin/padding included,
     which is why the banner's edge-to-edge bleed and rounded top corners
     weren't landing cleanly either, not just the uppercase transform. */
  margin: 0 -18px 0 !important;
  padding: 14px 18px 2px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .01em;
  /* Same header treatment as .wbtm_ex_service_area h3 right above this card
     (identical grey + text color) so the two summary-column headers read
     as one consistent style instead of two different ones. Flat, not that
     h3's gradient -- title and route are two separate boxes here (h3 is
     one), so the same gradient applied to each independently would restart
     at the top color at the seam between them instead of flowing through. */
  color: #0f172a;
  background: #f8fafc;
}
.wbtm_booking_summary_route {
  /* Route now sits inside the same header band as the title (no border
     between them) -- just the closing edge of that shared band. */
  margin: 0 -18px 15px !important;
  padding: 0 18px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 23, 42, .6);
  background: #f8fafc;
  border-bottom: 1px solid #e7eaf0;
}
/* Table + subtotal + total now sit together inside .wbtm_booking_summary_card
   (one shared white, rounded section), so the table itself no longer needs
   its own background or corner radius -- that would just double up with the
   card's. */
.wbtm_booking_summary_card {
  background: #fff;
  border: 1px solid #e0e7ff;
  border-radius: 12px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.wbtm_booking_summary_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}
.wbtm_booking_summary_table thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  padding: 0 0 8px;
  border-bottom: 1px solid #dbe2fb;
}
.wbtm_booking_summary_table tbody tr {
  background: #fff !important;
}
.wbtm_booking_summary_table tbody td {
  padding: 11px 0;
  font-size: 13.5px;
  color: #374151;
  background: #fff !important;
  border-bottom: 1px dotted #b9c3e6;
  vertical-align: middle;
}
.wbtm_booking_summary_table tbody tr:last-child td {
  border-bottom: none;
}
.wbtm_booking_summary_table tbody td:first-child {
  color: #ea580c;
  padding-left: 6px;
  padding-right: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.wbtm_booking_summary_table tbody td:nth-child(2) {
  padding: 11px 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}
.wbtm_booking_summary_table tbody td:last-child {
  text-align: right;
  padding-right: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}
/* "No seat selected yet" placeholder row (see booking_summary_preview.php /
   wbtm_update_summary_preview()) — its lone <td> would otherwise inherit the
   seat-type column's orange first-child styling above. */
.wbtm_booking_summary_table tbody tr.wbtm_summary_preview_empty_row td {
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  color: #9ca3af !important;
  font-style: italic;
  background: transparent !important;
  padding: 16px 0 !important;
  border-bottom: none !important;
  border: 1px dashed #c7d2fe !important;
  border-radius: 8px;
}
.wbtm_booking_summary_subtotal {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 12px;
  padding-top: 14px;
  border-top: 1px dotted #b9c3e6;
}
.wbtm_booking_summary_subtotal .wbtm_summary_preview_subtotal {
  font-size: 17px;
  font-weight: 800;
  color: #1e3a8a;
}
/* Extra-service breakdown between the ticket subtotal and the grand total (see
   booking_summary_preview.php / wbtm_update_summary_services()). Deliberately
   plain: one line per service, no heading and no rule of its own. The service
   names say what the lines are, and sitting between "Ticket Sub total" and
   "Total Price" says where they belong — a heading plus a repeated subtotal
   turned one $50 add-on into three rows of card. */
.wbtm_summary_preview_services {
  margin: -8px 0 12px;
}
.wbtm_summary_preview_service_row {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 5px;
}
.wbtm_summary_preview_service_row .wbtm_summary_service_name {
  min-width: 0;
  word-break: break-word;
}
.wbtm_summary_preview_service_row .wbtm_summary_service_name small {
  margin-left: 5px;
  color: #6b7280;
  font-weight: 600;
}
.wbtm_summary_preview_service_row .wbtm_summary_service_price {
  flex: none;
  font-weight: 700;
  color: #1f2937;
  white-space: nowrap;
}
/* Shown only when more than one service was taken (see the JS) — under a single
   line it would just repeat the amount above it. */
.wbtm_summary_preview_services .wbtm_summary_services_subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px dashed #e5e7eb;
}
.wbtm_summary_preview_services .wbtm_summary_preview_services_total {
  flex: none;
  font-size: 14px;
  font-weight: 800;
  color: #1e3a8a;
  white-space: nowrap;
}
.wbtm_booking_summary_total {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  padding: 12px 0 14px;
  border-top: 1px dashed #cbd5f5;
}
.wbtm_booking_summary_total .wbtm_summary_preview_total {
  font-size: 19px;
  font-weight: 800;
  color: #1e3a8a;
}
.wbtm_summary_preview_book_now {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  background-color: var(--wbtm_color_theme);
  color: #fff;
  cursor: pointer;
  transition: filter .15s;
}
.wbtm_summary_preview_book_now:hover {
  filter: brightness(1.08);
}
.wbtm_summary_preview_book_now:disabled {
  background: #cbd5e1;
  color: #f8fafc;
  cursor: not-allowed;
}
.wbtm_summary_preview_book_now:disabled:hover {
  filter: none;
}
/* wbtm_set_loading_button_state() (assets/global/wbtm_global.js) disables
   this button while its click is in flight, same attribute as "can't
   submit yet" above -- but greying it out mid-submit reads as "this
   stopped working", not "this is working on it". Keep the normal
   theme-color look (with the spinner riding along next to the text)
   specifically while .wbtm_is_loading is the reason it's disabled. */
.wbtm_summary_preview_book_now.wbtm_is_loading:disabled {
  background: var(--wbtm_color_theme);
  color: #fff;
  cursor: wait;
}
.wbtm_booking_summary_note {
  display: flex;
  /* flex-start, not center: the "✓" and the message are two flex items in
     this same <p> (the message is an anonymous flex item, "✓" comes from
     ::before) -- on narrow cards the message text wraps to 2 lines, and
     align-items:center centered the ✓ against the wrapped block's full
     height, leaving it floating between the two lines instead of sitting
     next to the first one. */
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  margin-top: 15px !important;
  padding: 12px 14px;
  background: #ecfdf5;
  border: 1px solid #a7f0c7;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #065f46;
}
.wbtm_booking_summary_note::before {
  content: "\2713";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.wbtm_registration_area ._dLayout_xs {
  border-radius: 10px;
}
.wbtm_registration_area .mpPanel {
  border: none !important;
}
/* Desktop-only: widen the seat-plan column slightly. Was previously wrapped
   in (min-width: 10px), which applied at ALL widths and — because this
   selector out-specifies the responsive .col_12_800 / .col_12_700 grid
   classes — locked the seat plan to 38% width on phones, squeezing the seat
   grid and pushing the summary column off-screen. Scoped to >1000px so the
   col_5_1000 / col_6_900 / col_12_800 breakpoints work again. */
@media only screen and (min-width: 1001px) {
  .wbtm_style .wbtm_registration_area .col_4 {
    width: 40%;
  }
  /* col_4/col_7 stay complementary (kept ~4% for the row's own gap): the
     seat buttons are a fixed 46px each now (see .mp_seat_item), so the
     seat-plan column no longer needs half the row -- give the extra room
     to the booking-summary card instead, which reads better wider. */
  .wbtm_style .wbtm_registration_area .col_7 {
    width: 56%;
  }
  /* `.mpRow` is `display:flex`, and a flex item's default min-width is
     `auto` (its content's own min-content size), not 0 -- so col_4/col_7
     only ever grew to fit whatever the seat table / booking-summary card
     wanted, ignoring the percentages above once that content was wider than
     its column. The booking-summary card (no overflow-hidden of its own)
     then visibly ran past its rounded border into the seat-plan column /
     off the edge of the row instead of actually being 54% wide. */
  .wbtm_style .wbtm_registration_area .col_4,
  .wbtm_style .wbtm_registration_area .col_7 {
    min-width: 0;
  }
}

/* ---- Mobile: expanded seat-plan / booking view ---- */
@media only screen and (max-width: 800px) {
  /* Stack the seat-plan column and the summary column full-width, whatever
     grid class combination the templates use. */
  .wbtm_style .wbtm_registration_area .mpRow.justifyBetween > [class*="col_"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* Wide seat layouts (many columns / double-decker) scroll inside their
     card instead of overflowing the viewport. */
  .wbtm_style .wbtm_seat_plan_area {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wbtm_style .wbtm_seat_plan_area table {
    margin-left: auto;
    margin-right: auto;
  }
  /* The white card around the seat grid: trim side padding so the seat
     grid gets the full phone width. */
  .wbtm_style .wbtm_registration_area ._dLayout_xs {
    padding-left: 10px;
    padding-right: 10px;
  }
  /* Legend sits inside the same card — keep it inside the card width and
     let items wrap instead of forcing a wider box. */
  .wbtm_style .wbtm_seat_legend {
    margin-left: 0;
    margin-right: 0;
    gap: 10px 14px;
  }
}

/* The small inline loader (e.g. the "To" field while its Drop-Off Point
   options load) inherits a dark semi-transparent background from the
   generic div[class*="wbtm_loader"] rule in wbtm_plugin_global.css, which
   is shared with the big full-area loader used elsewhere (search results,
   etc). Scoped to just .wbtm_loader_xs so only this small spinner loses its
   background — the bigger loader's dimming overlay elsewhere is untouched. */
div.wbtm_loader_xs {
  background: transparent !important;
}

/* Seat-hold countdown badge (WBTM_Seat_Hold): shown in the selected-seat
   summary while the customer's seats are temporarily held. Styled to match
   the "Free cancellation" note card right above it (same shape, same
   icon-badge-plus-text layout) instead of a plain bordered rectangle with
   centered text, which read as a disconnected warning strip rather than
   part of the same summary card. */
.wbtm_style .wbtm_registration_area .wbtm_hold_badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-weight: 700;
  font-size: 12px;
  text-align: left;
}
.wbtm_style .wbtm_registration_area .wbtm_hold_badge::before {
  content: "\23F1";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
}
.wbtm_style .wbtm_registration_area .wbtm_hold_badge--urgent {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.wbtm_style .wbtm_registration_area .wbtm_hold_badge--urgent::before {
  background: #dc2626;
}

/* Lower/Upper deck switch inside a double-decker cabin/coach */
.wbtm_style .wbtm_cabin_deck_tabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px 0;
}
.wbtm_style .wbtm_cabin_deck_tab {
  flex: 1 1 auto;
  padding: 8px 12px;
  border: 1px solid #d7dce3;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f4f6f9;
  color: #55606e;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wbtm_style .wbtm_cabin_deck_tab:hover {
  background: #eaeef3;
}
.wbtm_style .wbtm_cabin_deck_tab.wbtm_cabin_deck_tab_active {
  background: #fff;
  color: #1f2733;
  border-color: #c9d2dc;
  box-shadow: 0 -2px 0 0 #2d7ff9 inset;
}
.wbtm_style .wbtm_deck_pane {
  border-top: 1px solid #e4e9ef;
}