/********************************************************************************************************************/ @media only screen and (min-width: 10px) { /* Break out of WordPress block theme narrow content width (e.g. Twenty Twenty-Five contentSize: 645px). Falls back to width:100% / margin:0 on classic themes that don't define these variables. */ div.wbtm_container { width: 1340px; /* Was max-width:1340px — the same fixed value as the width, so the container could never be narrower than 1340px. Between the 768px mobile rule below and a 1380px-wide screen it was therefore wider than the viewport and the whole plugin page scrolled sideways: the search bar lost its Return Date field and Search button off the right edge, and every result card lost its price and Book column. Capping at the space actually available keeps the 1340px breakout on wide screens and simply fits on narrower ones. */ max-width: 100%; margin-top: var(--wbtm_dmp); margin-bottom: var(--wbtm_dmp); margin-left: auto; margin-right: auto; padding: 20px; } } /* ── Plugin page: align post title / page title with the 1340px plugin container ── body.wbtm-plugin-page is added by PHP whenever a plugin shortcode is on the page. Targets the most common title selectors across block themes and classic themes. */ body.wbtm-plugin-page .wp-block-post-title, body.wbtm-plugin-page .entry-title, body.wbtm-plugin-page h1.page-title, body.wbtm-plugin-page .page-title, body.wbtm-plugin-page .post-title { width: 1340px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } /* Block themes wrap content with has-global-padding which adds side padding. Remove it on plugin pages so the title left edge matches the container. */ body.wbtm-plugin-page .has-global-padding > .wp-block-post-title, body.wbtm-plugin-page .has-global-padding > h1 { padding-left: 0 !important; padding-right: 0 !important; } /* Also align the post content block itself on plugin pages. Desktop only: on mobile we must NOT touch margins — .entry-content is often `alignfull`, and the theme centers it with symmetric NEGATIVE side margins. Overriding only one side (our !important vs the theme's) leaves asymmetric margins (0 left / -30px right), pushing the whole page 30px right and creating a horizontal scrollbar on phones. */ @media only screen and (min-width: 769px) { body.wbtm-plugin-page .wp-block-post-content, body.wbtm-plugin-page .entry-content { /* max-width: 1340px !important; */ margin-left: auto !important; margin-right: auto !important; } } @media only screen and (max-width: 768px) { body.wbtm-plugin-page .wp-block-post-title, body.wbtm-plugin-page .entry-title, body.wbtm-plugin-page h1.page-title { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* Single bus page: wbtm_container sits directly inside (not inside TT5's constrained 645px content wrapper), so the negative margin-left breakout calc produces -347.5px and shifts content far left. Reset to auto centering. */ body.single-wbtm_bus div.wbtm_container { margin-left: auto !important; margin-right: auto !important; } /* On mobile collapse the breakout — full width, no negative margin */ @media only screen and (max-width: 768px) { div.wbtm_container { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } } /********************************************************************************************************************/ @media only screen and (min-width: 10px) { div.wbtm_search_area button, div.wbtm_search_area input.formControl { height: 44px; border: 1px solid #7d7979; } } /********************************************************************************************************************/ @media only screen and (min-width: 10px) { div.wbtm_bus_list_area table { width: 100%; border: none; border-collapse: collapse; box-shadow: none; margin: 0; } div.wbtm_bus_list_area table th, div.wbtm_bus_list_area table td { border: none; vertical-align: middle; font-size: var(--wbtm_fs_label); text-align:left; text-transform: none; } h5.wbtm_sub_total.col_6.paddingLeft_xs{text-align:right;} div.wbtm_bus_list_area table thead th { background-color: var(--wbtm_color_light); text-transform: capitalize; font-weight: normal;} div.wbtm_bus_list_area table tbody { background-color: var(--wbtm_color_theme_alter); } div.wbtm_bus_list_area table tbody tr.bus_item_row td { border-top: 1px solid var(--wbtm_color_theme); } div.wbtm_selected_seat_details table { border: 1px solid var(--wbtm_color_border); } div.wbtm_selected_seat_details table tbody tr:nth-of-type(odd) th, div.wbtm_selected_seat_details table tbody tr:nth-of-type(odd) td, div.wbtm_bus_details_area table tbody tr:nth-of-type(odd) th, div.wbtm_bus_details_area table tbody tr:nth-of-type(odd) td { color: var(--wbtm_d_color); text-align: left; } div.wbtm_selected_seat_details table tbody tr:nth-of-type(even) th, div.wbtm_selected_seat_details table tbody tr:nth-of-type(even) td, div.wbtm_bus_details_area table tbody tr:nth-of-type(even) th, div.wbtm_bus_details_area table tbody tr:nth-of-type(even) td { color: var(--wbtm_d_color); text-align: left; } /**********************/ div.wbtm_bus_list_area td.wbtm_bus_details { padding: 0; } /**********************/ div.wbtm_form_submit_area, div.wbtm_ex_service_area { display: none; } .wbtm_loading_button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; line-height: 1; } .wbtm_loading_button.wbtm_is_loading { cursor: wait; opacity: 0.85; pointer-events: none; } .wbtm_loading_button .wbtm_loading_button_text { display: inline-block; white-space: nowrap; } /**********************/ img.driver_img { max-width: 45px !important; } .wbtm-bus-notification{ background-color: #d4f7d4; /* light green */ color: #000; /* black text for contrast */ padding: 15px 25px; border-radius: 8px; text-align: center; font-size: 16px; font-weight: 500; margin: 20px auto; width: fit-content; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .wbtm-bus-notification a.cart-link { color: #007c00; font-weight: bold; text-decoration: underline; margin-left: 5px; } .wbtm-bus-notification a.cart-link:hover { color: #005500; } } /********************************************************************************************************************/ @media only screen and (min-width: 10px) { div.wbtm_bus_list_area div.wbtm_seat_plan_area table { margin: 0 auto; } div.wbtm_bus_list_area div.wbtm_seat_plan_area table tr { background-color: var(--wbtm_color_theme_alter); } div.wbtm_bus_list_area div.wbtm_seat_plan_area table th, div.wbtm_bus_list_area div.wbtm_seat_plan_area table td { min-height: 60px; text-align: center; height: 60px; width: 60px; background-color: var(--wbtm_color_theme_alter); padding: 5px; min-width: 60px; } div.wbtm_bus_list_area div.wbtm_seat_plan_area table thead th { height: auto; } div.mp_driver_image { width: 60px; } /****************/ div.mp_seat_item { position: relative; width: 100%; height: 100%; } div.mp_seat_item:hover div.seat_available { border-color: var(--wbtm_color_theme); color: var(--wbtm_color_theme); } div.mp_seat_item div.wbtm_seat_item_list { position: absolute; left: 0; top: 100%; min-width: 150px; width: 100%; display: none; z-index: 111; margin: 0; padding: 0; background-color: var(--wbtm_color_light); border: 1px solid var(--wbtm_color_theme); border-radius: var(--wbtm_dbr); } div.mp_seat_item div.wbtm_seat_item_list li { cursor: pointer; padding: 5px var(--wbtm_dmp_xs); } div.mp_seat_item div.wbtm_seat_item_list li:hover { background-color: var(--wbtm_color_theme); color: var(--wbtm_color_theme_alter); } div.mp_seat_item:hover div.wbtm_seat_item_list { display: block; } div.mp_seat_item div.wbtm_seat_item_list::before { position: absolute; content: ""; width: 20px; height: 20px; left: 15px; top: -20px; border: 10px solid transparent; border-bottom-color: var(--wbtm_color_theme); } /****************/ .wbtm_registration_area div.wbtm_item_hidden { display: none; } /****************/ div.wbtm_seat_plan_area div.mp_seat { border: none; background-color: transparent; width: 100%; height: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } /* Apply visual styling to seat_visual instead */ div.wbtm_seat_plan_area div.mp_seat .seat_visual { border: 1px solid var(--wbtm_color_border); border-radius: 15px 15px 0 0; border-bottom: 5px solid var(--wbtm_color_light); } div.seat_available { background-color: transparent; cursor: pointer; color: var(--wbtm_d_color); } div.seat_selected.seat_available, div.mp_seat_item:hover div.seat_selected.seat_available { background-color: transparent; color: var(--wbtm_color_theme_alter); } div.seat_booked { cursor: not-allowed; background-color: transparent; color: var(--wbtm_color_theme_alter); } div.seat_in_cart { cursor: not-allowed; background-color: transparent; color: var(--wbtm_color_theme_alter); } /* Apply seat state styling to seat_visual */ div.seat_available .seat_visual { background-color: var(--wbtm_color_theme_alter); } div.seat_selected.seat_available .seat_visual, div.mp_seat_item:hover div.seat_selected.seat_available .seat_visual { background-color: var(--wbtm_color_theme); } div.seat_booked .seat_visual { background-color: var(--wbtm_color_warning); } div.seat_in_cart .seat_visual { background-color: var(--wbtm_color_light_3); } /********************/ div.wbtm_seat_plan_area table tr th:nth-last-child(2) div.wbtm_seat_item_list, div.wbtm_seat_plan_area table tr th:last-child div.wbtm_seat_item_list { right: 0; left: inherit; } div.wbtm_seat_plan_area table tr th:nth-last-child(2) div.wbtm_seat_item_list::before, div.wbtm_seat_plan_area table tr th:last-child div.wbtm_seat_item_list::before { left: inherit; right: 15px; } div.wbtm_seat_plan_area table tr:nth-last-child(2) th div.wbtm_seat_item_list, div.wbtm_seat_plan_area table tr:last-child th div.wbtm_seat_item_list { top: calc(-100% - 23px); } div.wbtm_seat_plan_area table tr:nth-last-child(2) th div.wbtm_seat_item_list::before, div.wbtm_seat_plan_area table tr:last-child th div.wbtm_seat_item_list::before { top: 100%; border-top-color: var(--wbtm_color_theme); border-bottom-color: transparent; } } /********************************************************************************************************************/ /* ── jQuery UI Datepicker — clean minimal redesign ───────────────────────────── */ @media only screen and (min-width: 10px) { /* Container */ #ui-datepicker-div { width: 300px !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; box-shadow: 0 8px 32px rgba(0,0,0,.12) !important; padding: 0 !important; overflow: hidden; font-size: 13px !important; } /* Header bar */ #ui-datepicker-div .ui-datepicker-header { background: #16213e !important; background-image: none !important; border: none !important; border-radius: 0 !important; padding: 12px 14px !important; display: flex; align-items: center; justify-content: space-between; } /* Prev / Next arrows */ #ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { top: 10px !important; width: 28px !important; height: 28px !important; background: rgba(255,255,255,.12) !important; border-radius: 6px !important; border: none !important; cursor: pointer; } #ui-datepicker-div .ui-datepicker-prev { left: 10px !important; } #ui-datepicker-div .ui-datepicker-next { right: 10px !important; } #ui-datepicker-div .ui-datepicker-prev:hover, #ui-datepicker-div .ui-datepicker-prev:focus, #ui-datepicker-div .ui-datepicker-next:hover, #ui-datepicker-div .ui-datepicker-next:focus { background: rgba(255,255,255,.25) !important; box-shadow: none !important; outline: none !important; } #ui-datepicker-div .ui-datepicker-header a.ui-datepicker-prev::before, #ui-datepicker-div .ui-datepicker-header a.ui-datepicker-next::before { color: #fff !important; font-size: 14px !important; font-weight: 700 !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } #ui-datepicker-div .ui-datepicker-header a.ui-datepicker-prev::before { content: "‹" !important; } #ui-datepicker-div .ui-datepicker-header a.ui-datepicker-next::before { content: "›" !important; } #ui-datepicker-div .ui-datepicker-header .ui-icon { display: none !important; } /* Month / Year title & selects */ /* jQuery UI's own base rule (jquery-ui.min.css) reserves `margin: 0 2.3em` on .ui-datepicker-title specifically to clear the absolutely-positioned prev/next buttons (28px wide, 10px from each edge) either side of it -- this block's `margin:0 !important` wiped that clearance with nothing put back, so the title (and the year select's own dropdown caret) crowded right up against the next button. Restoring a margin sized to the actual button footprint (28px + 10px offset) fixes the overlap; flex + justify-content:center recentres the month/year selects (with a real gap between them, since the plugin never set one) now that the title has room to actually be centered in rather than just clipped by the buttons on either side. */ #ui-datepicker-div .ui-datepicker-title { background: transparent !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.2px; line-height: 1 !important; margin: 0 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px; } #ui-datepicker-div .ui-datepicker-title select { background: transparent !important; border: none !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; height: auto !important; padding: 2px 4px !important; cursor: pointer; outline: none !important; min-width: auto !important; flex: 0 1 auto; } #ui-datepicker-div .ui-datepicker-header .ui-state-hover { background: transparent !important; background-image: none !important; border: none !important; } /* Calendar table */ #ui-datepicker-div table { width: 100% !important; border-collapse: collapse !important; padding: 10px 12px 14px !important; margin: 0 !important; } /* Day-name headers (M T W T F S S) */ #ui-datepicker-div th { color: #94a3b8 !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 6px 2px !important; text-align: center !important; border: none !important; background: transparent !important; } /* Day cells */ #ui-datepicker-div.ui-datepicker td { background: transparent !important; border: none !important; padding: 2px !important; text-align: center !important; } /* Day links */ #ui-datepicker-div .ui-state-default { background: transparent !important; background-image: none !important; border: none !important; color: #374151 !important; font-size: 13px !important; font-weight: 500 !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border-radius: 8px !important; margin: 0 auto !important; text-decoration: none !important; line-height: 1 !important; transition: background 0.12s, color 0.12s !important; } /* Hover */ #ui-datepicker-div a.ui-state-default:hover { background: #f1f5f9 !important; color: #16213e !important; } /* Selected */ #ui-datepicker-div .ui-state-active { background: #16213e !important; background-image: none !important; color: #fff !important; border-radius: 8px !important; } /* Today */ #ui-datepicker-div .ui-state-highlight { background: transparent !important; background-image: none !important; color: var(--wbtm_color_theme, #e8510f) !important; font-weight: 700 !important; border: 1.5px solid var(--wbtm_color_theme, #e8510f) !important; border-radius: 8px !important; } /* Other-month and disabled dates */ #ui-datepicker-div .ui-datepicker-other-month .ui-state-default { color: #cbd5e1 !important; } #ui-datepicker-div td.ui-datepicker-unselectable .ui-state-default, #ui-datepicker-div td.ui-state-disabled .ui-state-default { color: #e2e8f0 !important; cursor: not-allowed !important; pointer-events: none !important; } } /********************************************************************************************************************/ /* ======text alignment======= */ .text-start { text-align: left; } .text-center { text-align: center; } .text-end { text-align: right; } /* ============= */ .wbtm-bus-list.in_cart {background-color: #F2C9C9;} /* @media (min-width: 768px) { .wbtm-bust-list { flex-direction: row; flex-wrap: wrap; } .wbtm-bus-image { width: 10%; } .wbtm-bus-name { width: 15%; margin: 0; } .wbtm-bus-route { width: 20%; margin: 0; } .wbtm-seat-info { width: auto; } .wbtm-seat-book { width: 10%; margin: 0; } } */ /* ── Generic button-loading spinner ────────────────────────────── Used by assets/global/wbtm_global.js's wbtm_set_loading_button_state() (Book Now / Add to Cart / registration submit) -- a plain CSS ring prepended next to the button's own text instead of Font Awesome's choppy fa-spin replacing the whole label with "Loading...". Same ring technique as the search bar's own spinners (search_form.php's div.wbtm_loader_xs .fa-spinner, and the search button's own .wbtm-search-btn-spinner), just generalized here since this one shows up on buttons across the booking flow, not just the search bar. White ring on an orange fill: every button this attaches to (.wbtm_summary_preview_book_now, #wbtm_add_to_cart) already has a solid theme-color background. */ .wbtm-loading-btn-spinner { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: wbtm-loading-btn-spin .7s linear infinite; } @keyframes wbtm-loading-btn-spin { to { transform: rotate(360deg); } }