" 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 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
(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 , 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 |