@media only screen and (max-width: 768px) {
  .wbtm_search_route_icon_wrapper{
    display: none;
  }
  .wbtm_search_route_city_section{
    width: 45%;
  }
  .wbtm_search_route_city_section_right{
    width: 45%;
  }
}


@media (min-width:0px) {
    .wbtm-date-route_title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
        border-radius: 5px;
        /* border-bottom: 2px solid var(--wbtm_color_theme); */
    }
    .wbtm-date-return-route-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
        border-radius: 5px;
        /*border-bottom: 2px solid var(--wbtm_color_theme);*/
    }

    .wbtm_departure_bus_lists_holder{
        /*border: 1px solid #b9d3ff;*/
        background-color: #fff;
        margin-bottom: 20px;
        border-radius: 5px;
    }

    .wbtm_return_bus_lists_holder{
        /*border: 1px solid #b9d3ff;*/
        background-color: #fff;
        margin-bottom: 20px;
        border-radius: 5px;
    }
    .wbtm_bus_list_area{
        padding:10px;
    }
    #wbtm_return_container .wbtm-date-suggetion{
        margin: 10px;
    }
    .wbtm_search_route_container {
        display: flex;
        align-items: center;
        /*background-color: #cfe2ff;*/
        border-radius: 4px;  
        width: 100%;
        font-family: Arial, sans-serif;
        border: 1px solid #e3dfdf;
    }

    .wbtm_search_route_return_date {
        /*background-color: #9ec5fe;*/
        padding:10px;
        text-align: left;
        height: 100%;
        min-width: 120px;

    }


    .wbtm_selected_bus_payment{
        display: flex;
        flex-direction: column;
    }

    .wbtm_seleced_start_bus{

    }

    .wtbm_icon_margin{
        margin: unset !important;
        margin-left: 5px !important;

    }

    .wbtm_search_route_label {
        color: var(--wbtm_color_theme);
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 3px;
    }

    .wbtm_search_route_date {
        font-size: 12px;
        font-weight: 500;
        color: #000;
    }

    #start_bus{
        margin-top: 15px;
    }

    .wbtm_bus_tab_wrapper {
        display: flex;
        gap: 12px;
        padding: 2px;
    }

    .wbtm_bus_tab_wrapper .wtbm_start_route,
    .wbtm_bus_tab_wrapper .wtbm_return_route {
        flex: 1;
        padding: 14px 18px;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        color: #555;
        cursor: pointer;
        border-radius: 12px;
        position: relative;
        transition: all 0.35s ease;
        background: transparent;
        letter-spacing: 0.3px;
    }

    .wbtm_bus_tab_wrapper .wtbm_start_route::before,
    .wbtm_bus_tab_wrapper .wtbm_return_route::before {
        content: "🚌";
        margin-right: 8px;
        opacity: 0.7;
    }

    .wbtm_bus_tab_wrapper .wtbm_start_route:hover,
    .wbtm_bus_tab_wrapper .wtbm_return_route:hover {
        background: rgba(0, 0, 0, 0.05);
        color: #222;
    }

    .wbtm_bus_tab_wrapper .wbtm_tab_active {
        background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
        color: #1e1b4b;
        box-shadow: 0 6px 16px rgba(165, 180, 252, 0.4);
    }

    .wbtm_bus_tab_wrapper .wbtm_tab_active::before {
        opacity: 1;
    }

    .wbtm_bus_tab_wrapper .wbtm_tab_active::after {
        content: "";
        position: absolute;
        left: 20%;
        right: 20%;
        bottom: 6px;
        height: 3px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
    }


    .wbtm_search_route_day {
        font-size: 14px;
        color: #5f6368;
    }

    .wbtm_search_route_cities_wrapper {
        display: flex;
        flex-grow: 1;
        align-items: center;
        padding:10px;
    }

    .wbtm_search_route_city_section {
        padding:10px;
        width: 33%;
    }
    .wbtm_search_route_icon_wrapper span.wbtm_search_route_bus_icon img{
        width: 80px;
        height: auto;
    }
    .wbtm_search_route_icon_wrapper span.wbtm_search_route_bus_icon i{
        font-size: 40px;
        color: var(--wbtm_color_theme, #ff4500);
        display: inline-block;
        text-align: center;
        width: 80px;
    }
    .wbtm_search_route_icon_wrapper {
        width: 30%;
    }

    .wbtm_search_route_city_section_right {
        border-left: 1px solid #c5dafd;
        padding:10px;
        width: 30%;
    }
    .wbtm_search_route_city {
        font-size: 12px;
        font-weight: normal;
        color: #000;
        line-height: 1.2;
    }

    .wbtm_search_route_airport_code {
        font-size: 14px;
        color: #5f6368;
    }


    .wbtm_search_route_dropdown_icon {
        font-size: 30px;
        color: #b1bed3;
        cursor: pointer;
        line-height: 1;
    }

    .wbtm_return_bus_lists_holder  .wbtm_search_route_cities_wrapper .wbtm_search_route_icon_wrapper img{
    transform: scaleX(-1);
    }

    .wbtm_bus_info_holder{
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    .wbtm_bus_popup_link{
        padding: 5px 10px;
        border-radius: 50px;
        background: #f8f8f8;
        transition: all .5s;
    }
    .wbtm_bus_popup_link:hover{
        background-color: var(--wbtm_color_theme);
        color: var(--wbtm_color_theme_alter);
    }
    /* Hide all tabs by default */


    /* Show tab when hovering over parent bus item */
    .wbtm_bus_list_area .wbtm-bus-list:hover .wbtm_bus_popup_links {
        visibility: visible;
        opacity: 1;
        transform: scale(1);
    }
    .wbtm_bus_list_area .wtbm_bus_counter:hover .wbtm_bus_popup_links {
        visibility: visible;
        opacity: 1;
        transform: scale(1);
        padding: 0;
    }
    .wbtm-bus-popup {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 99;
    }

    .wbtm-bus-popup-inner {
        margin: 5% auto;
        padding: 20px;
        border-radius: 12px;
        position: relative;
        max-height: 95vh;
        overflow-y: auto;
        max-width: 1100px;
    }
    .wbtm-popup-content{
        max-width: 1100px;
        margin: auto;
    }

    .wbtm-popup-close {
        position: absolute;
        top: 10px;
        right: 25px;
        font-size: 30px;
        cursor: pointer;
        z-index: 10;
    }
    .wbtm_bus_details_container{
        width: 100%;
        margin-bottom: 15px;
    }
    .wbtm_bus_detail_popup_tabs {
        display: flex;
        gap: 8px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 12px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .wbtm_bus_detail_popup_tab {
        padding: 8px 14px;
        font-size: 14px;
        font-weight: 500;
        color: #444;
        background: #fff;
        border-radius: 6px;
        cursor: pointer;
        border: 1px solid #e3e3e3;
        transition: all .25s ease;
        white-space: nowrap;
    }

    .wbtm_bus_detail_popup_tab:hover {
        background: var(--wbtm_color_theme_alter);
        color: var(--wbtm_color_theme);
        border-color: var(--wbtm_color_theme);
    }

    .wbtm_bus_detail_popup_tab.active {
        background: var(--wbtm_color_theme);
        color: var(--wbtm_color_theme_alter);
        border-color: var(--wbtm_color_theme);
        box-shadow: 0 3px 10px rgba(0,124,186,.25);
    }

    .wbtm_bus_list_area .wbtm_bus_popup_links {
        display: flex;
        justify-content: left;
        gap: 10px;
        visibility: hidden;
        opacity: 0;
        transform: scale(0.95);
        transition: all 0.5s ease;
        cursor: pointer;
        color: var(--wbtm_color_theme);
    }

    .wbtm_bus_details_tabs_holder{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        padding: 5px;
        box-sizing: border-box;
        border-top: 1px solid #eee;
    }
    .wbtm_bus_details_tabs_holder.wbtm_no_tabs{
        justify-content: flex-end;
    }
}
@media (min-width: 540px) {

}
@media (min-width: 768px) {
    .wbtm_bus_list_area .wbtm_bus_details_tabs_holder{
        flex-direction: row;
    }
}
@media (min-width: 1240px) {}

/* ---- Mobile fixes for search results ---- */
@media only screen and (max-width: 768px) {
    /* Popup inner full-width on mobile */
    .wbtm-bus-popup-inner {
        width: 95% !important;
        margin: 3% auto !important;
        padding: 14px !important;
        max-height: 90vh;
    }
    .wbtm-popup-content {
        max-width: 100% !important;
    }
    /* Popup tab bar scrolls 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;
    }
    /* Bus popup links always visible on touch */
    .wbtm_bus_list_area .wbtm_bus_popup_links {
        visibility: visible !important;
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    /* Route search result header */
    .wbtm_search_result .wbtm-date-route,
    .wbtm-date-return-route {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px;
    }
    /* Tab switcher full width on mobile */
    .wbtm_bus_tab_wrapper {
        gap: 6px;
        padding: 2px;
    }
    .wbtm_bus_tab_wrapper .wtbm_start_route,
    .wbtm_bus_tab_wrapper .wtbm_return_route {
        padding: 10px 8px;
        font-size: 13px;
    }
}

@media only screen and (max-width: 480px) {
    /* Route city sections side by side on small phones */
    .wbtm_search_route_city_section,
    .wbtm_search_route_city_section_right {
        width: 50% !important;
        padding: 6px !important;
    }
    .wbtm_search_route_label {
        font-size: 12px;
    }
    .wbtm_search_route_city {
        font-size: 11px;
    }
}

/* ---- Mobile: results-first + collapsible "Filters" hamburger ----
   The toggle button is rendered by both search_result.php and
   search_result_flix.php inside .wbtm_bus_left_filter_holder.
   Desktop/laptop (>=768px) is untouched: button hidden, sidebar as-is. */
.wbtm-mobile-filter-toggle {
    display: none;
    /* Modern styling kept OUT of the mobile media query so the button looks good
       wherever it is shown (it also appears on the desktop results header). Only
       the display toggle is size-dependent. */
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #101828;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wbtm-mobile-filter-toggle:hover {
    border-color: var(--wbtm_color_theme, #e8510f);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .10);
}
.wbtm-mobile-filter-toggle .wbtm-mobile-filter-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wbtm-mobile-filter-toggle .wbtm-mobile-filter-toggle-label i,
.wbtm-mobile-filter-toggle .wbtm-mobile-filter-toggle-label svg {
    color: var(--wbtm_color_theme, #e8510f);
}
.wbtm-mobile-filter-caret {
    font-size: 12px;
    color: #98a2b3;
    transition: transform .2s ease;
}
.wbtm_bus_left_filter_holder.wbtm-mobile-open .wbtm-mobile-filter-caret {
    transform: rotate(180deg);
}

@media only screen and (max-width: 767px) {
    /* Stack the results page vertically, full width — the flix layout sets an
       inline width (calc(100% - 180px)) on the list area, hence !important. */
    .wbtm_search_result_holder {
        flex-direction: column;
        max-width: 100%;
    }
    .wbtm_bus_list_area {
        width: 100% !important;
    }
    .wbtm_bus_left_filter_holder {
        width: 100% !important;
        flex: none !important;
        min-width: 0;
    }

    /* Hamburger "Filters" bar */
    .wbtm-mobile-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: #fff;
        border: 1px solid #e8ecf0;
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 14px;
        font-weight: 700;
        color: #111;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    }
    .wbtm-mobile-filter-toggle .wbtm-mobile-filter-toggle-label {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .wbtm-mobile-filter-toggle .wbtm-mobile-filter-toggle-label i {
        color: var(--wbtm_color_theme, #e8510f);
    }
    .wbtm-mobile-filter-caret {
        font-size: 12px;
        color: #666;
        transition: transform .2s ease;
    }
    .wbtm_bus_left_filter_holder.wbtm-mobile-open .wbtm-mobile-filter-caret {
        transform: rotate(180deg);
    }

    /* Collapsed by default: only the toggle bar shows, so the first bus card
       appears right below it. Opening reveals the filter panel. */
    .wbtm_bus_left_filter_holder > *:not(.wbtm-mobile-filter-toggle) {
        display: none !important;
    }
    .wbtm_bus_left_filter_holder.wbtm-mobile-open > *:not(.wbtm-mobile-filter-toggle) {
        display: block !important;
        margin-top: 10px;
    }
}

/* Route with no fare configured (Frontend Display -> Unpriced Routes).
   Shown in place of the price/Book button in the flix search layout. */
.wbtm-route-unavailable {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #b45309;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.wbtm-route-unavailable i {
    font-size: 15px;
    flex-shrink: 0;
}