.ecab-taxi h1 {
    max-width: 1200px;
    margin-bottom: 20px;
}

.mptbm-filter-feature{
    display: flex !important;
    flex-direction: row !important;
    flex-flow: column wrap;
    justify-content: space-around !important;
    align-items: center !important;
}

.mptbm-filter-feature-input{
    width: 49%;
}

.mptbm-filter-feature-input select:focus {
  /* Add your styling here */
  border-color: #007bff; /* Example border color */
  outline: none; /* Remove default focus outline */
  background-color: #fff !important;
  /* Add any other styles you want for the focus state */
}

.geo-fence-no-transport{
  display: none;
}
.mptbm_manual_start_place , .mptbm_map_end_place{
  text-transform: capitalize;
}

/* Hide disabled core WooCommerce fields */
.woocommerce .checkout .form-row.mptbm-hidden-field,
.woocommerce-checkout .form-row.mptbm-hidden-field {
    display: none !important;
}

/* Custom CSS for taxi booking manager */

/* Prevent price and currency symbol from breaking into separate lines */
.mptbm_list_details h4,
.mptbm_product_total_price,
.mptbm_product_price,
.woocommerce-Price-amount,
.amount {
    white-space: nowrap !important;
    word-break: keep-all !important;
    display: inline-block;
}

/* Ensure currency symbols stay with price numbers */
.woocommerce-Price-currencySymbol {
    white-space: nowrap !important;
}

/* Mobile-specific price styling */
@media only screen and (max-width: 768px) {
    .mptbm_list_details h4 {
        font-size: 20px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    /* Container for price to allow horizontal scrolling if needed */
    .mptbm_list_details .mptbm_vehicle_cta {
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* For very small screens, keep it readable */
@media only screen and (max-width: 480px) {
    .mptbm_list_details h4 {
        font-size: 18px !important;
    }
}

/* Hide fields that are disabled but need to be hidden */
.mptbm-hidden-field {
    display: none !important;
}

/* Buffer time notice styling */
.mptbm_buffer_notice {
    background-color: #f8f9fa;
    border-left: 3px solid #007cba;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 8px;
    font-size: 12px;
    color: #495057;
    line-height: 1.4;
}

.mptbm_buffer_notice i {
    color: #007cba;
    margin-right: 5px;
}

.mptbm_buffer_notice:hover {
    background-color: #e9ecef;
    transition: background-color 0.2s ease;
}

/* Mobile responsive buffer notice */
@media only screen and (max-width: 768px) {
    .mptbm_buffer_notice {
        font-size: 11px;
        padding: 6px 10px;
    }
}

.woocommerce-page form .form-row .select2-container .select2-selection--single .select2-selection__rendered
 {
     padding: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-left: 3px  !important;
    margin-top: 8px  !important;
}

.woocommerce-input-wrapper .select2-container--default .select2-selection--single {
    background-color: #fff;
    /* border: 1px solid #aaa; */
    border-radius: 4px;
    height: 46px;
    padding: 0;
}

/* Override for small screens */
@media only screen and (max-width: 450px) {
    .mpStyle .justifyBetween {
        display: block !important;
        /* justify-content: space-between; */ /* Not needed for block */
    }
     ._dLayout.mptbm_distance_time {
        margin-top: 20px !important;
    }
}

/* Location validation error styles */
.mptbm-error-field {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.mptbm-location-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* Error field focus state */
.mptbm-error-field:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}
/* ============================================
   MPTBM Summary Box — Modern Pretty Skin
   Appended at bottom of mptbm_style.css
   ============================================ */

/* ----- Card shell ----- */
div.mptbm_transport_search_area div.mp_sticky_on_scroll.summary-box {
    background: #ffffff;
    background-image:
        radial-gradient(1200px 200px at 0% 0%, rgba(99, 102, 241, 0.08), transparent 60%),
        radial-gradient(800px 200px at 100% 0%, rgba(16, 185, 129, 0.06), transparent 60%);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    padding: 22px 22px 20px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 30px -10px rgba(15, 23, 42, 0.10);
    min-height: 400px;
    position: sticky;
    top: 20px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
div.mptbm_transport_search_area div.mp_sticky_on_scroll.summary-box:hover {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 18px 40px -12px rgba(15, 23, 42, 0.16);
}

/* ----- Header (SUMMARY) ----- */
.mptbm_transport_search_area .mp_sticky_on_scroll h3 {
    margin: 0 0 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color_theme);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mptbm_transport_search_area .mp_sticky_on_scroll h3::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color_theme);
    box-shadow: 0 0 0 3px var(--color_theme_77);
}

/* ----- Section heading (h6) ----- */
div.mp_sticky_on_scroll.summary-box h6 {
    margin: 0 0 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #94a3b8 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
div.mp_sticky_on_scroll.summary-box h6::before {
    content: "";
    width: 4px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 50%;
    flex: 0 0 4px;
}

/* ----- Value text (p) ----- */
div.mp_sticky_on_scroll.summary-box p {
    margin: 0 0 4px !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    word-break: break-word;
}

/* ----- Divider (soft) ----- */
div.mp_sticky_on_scroll.summary-box .divider {
    background: none !important;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .08), transparent) !important;
    margin: 10px 0 !important;
    border: 0;
}

/* ----- Top row: Service Times + Pickup Date and Time side by side ----- */
div.mp_sticky_on_scroll.summary-box .mptbm_summary_top_row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
div.mp_sticky_on_scroll.summary-box .mptbm_summary_top_col {
    flex: 1 1 0;
    min-width: 0;
}

/* ----- Section grouping: stack rows with breathing room ----- */
div.mp_sticky_on_scroll.summary-box > div._dFlex_fdColumn > * + * {
    margin-top: 2px;
}

/* ----- Transportation  Details block ----- */
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary {
    margin-top: 14px;
    padding: 14px 14px 12px;
    background: linear-gradient(180deg, #f8fafc, #ffffff);
    border: 1px dashed var(--color_theme_77);
    border-radius: 12px;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .divider {
    margin: 8px 0 !important;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary h6 {
    color: var(--color_theme) !important;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary h6::before {
    background: var(--color_theme);
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary ._textColor_4 {
    color: #0f172a !important;
    font-size: 14px;
    font-weight: 600;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .mptbm_product_name {
    font-weight: 600;
    color: #0f172a;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .mptbm_product_price {
    color: var(--color_theme) !important;
    font-weight: 700;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .justifyBetween {
    align-items: center;
    margin-top: 4px;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary h4 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .mptbm_product_total_price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--color_theme) !important;
    letter-spacing: -.01em;
}

/* ----- Icon styling for the check-square in transport row ----- */
div.mp_sticky_on_scroll.summary-box ._textColor_4 .fas.fa-check-square {
    color: var(--color_theme);
    font-size: 14px;
}

/* ----- Extra service line items (Child Seat, Bouquet of Flowers, etc.) ----- */
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary [data-extra-service] {
    padding: 7px 0;
    border-bottom: 1px dashed rgba(15, 23, 42, .08);
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary [data-extra-service]:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary [class*="_dFlex_flexWrap_justifyBetween"] {
    align-items: center;
    gap: 10px;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary ._dFlex_alignCenter {
    gap: 7px;
    min-width: 0;
    flex: 1 1 auto;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary ._dFlex_alignCenter > span:last-child {
    overflow: hidden;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary .fas.fa-check-square {
    flex: 0 0 auto;
    color: var(--color_theme);
    font-size: 12px;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary p {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary .ex_service_qty {
    padding: 1px 7px !important;
    color: #64748b !important;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 700 !important;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary p > span.textTheme:last-child {
    position: relative;
    padding-left: 9px;
    color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary p > span.textTheme:last-child::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 11px;
    background: rgba(15, 23, 42, .15);
    transform: translateY(-50%);
}

/* ----- "Previous" button ----- */
div.mp_sticky_on_scroll.summary-box button._mpBtn_fullWidth.mptbm_get_vehicle_prev {
    margin-top: 16px;
    width: 100%;
    padding: 12px 18px;
    background: #0f172a;
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .45);
}
div.mp_sticky_on_scroll.summary-box button._mpBtn_fullWidth.mptbm_get_vehicle_prev:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(15, 23, 42, .55);
}
div.mp_sticky_on_scroll.summary-box button._mpBtn_fullWidth.mptbm_get_vehicle_prev:active {
    transform: translateY(0);
}
div.mp_sticky_on_scroll.summary-box button._mpBtn_fullWidth.mptbm_get_vehicle_prev span {
    color: #ffffff;
}

/* ----- Mobile polish ----- */
@media (max-width: 768px) {
    div.mptbm_transport_search_area div.mp_sticky_on_scroll.summary-box {
        border-radius: 14px;
        padding: 18px 16px;
    }
    div.mp_sticky_on_scroll.summary-box p { font-size: 13px !important; }
    div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .mptbm_product_total_price { font-size: 18px !important; }
}

/* ============================================
   MPTBM Vehicle Card — Modern Pretty Skin
   Appended at bottom of mptbm_style.css
   ============================================ */

/* ----- Vehicle wrapper — this is the actual card box now (border, shadow,
   radius, hover elevation) so that the expanded "View Details" panel, which
   lives here as a sibling of .mptbm_booking_item, shares the same box and
   rises together with it on hover instead of looking like a separate,
   disconnected panel underneath.
   Spacing between cards comes entirely from the parent's `gap` (list or
   grid mode) - not from a margin here - so list and grid share one source
   of truth for the value instead of stacking margin on top of gap. */
.mptbm-vehicle-wrapper {
    width: 100%;
    display: block;
    margin-bottom: 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.mptbm-vehicle-wrapper:hover {
    box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
    transform: translateY(-3px);
    border-color: rgba(5, 150, 105, 0.20);
}
/* JS toggles mptbm_booking_item_hidden on .mptbm_booking_item (search/geo-fence/
   feature filters, in several files) - collapse the whole wrapper box (not just
   the now-borderless row) whenever that happens, so a filtered-out card doesn't
   leave a stray empty bordered/shadowed shell behind. */
.mptbm-vehicle-wrapper:has(> .mptbm_booking_item.mptbm_booking_item_hidden) {
    display: none !important;
}

/* ----- Vehicle card (the main item) - no border/background/shadow of its
   own anymore; .mptbm-vehicle-wrapper owns those. ----- */
.mptbm_transport_search_area .mptbm_booking_item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding: 0;
    gap: 18px;
    position: relative;
}
.mptbm_transport_search_area .mptbm_booking_item.mptbm_booking_item_hidden {
    display: none !important;
}

/* ----- Selected state ----- */
.mptbm-vehicle-wrapper:has(> .mptbm_booking_item.active),
.mptbm-vehicle-wrapper:has(> .mptbm_booking_item.selected) {
    border-color: transparent;
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 70%);
    box-shadow: 0 0 0 2px var(--color_theme_88, rgba(5, 150, 105, 0.35)), 0 8px 24px -8px rgba(5, 150, 105, 0.25);
}

/* ----- Vehicle image (bleeds flush to the card's own left edge/corners -
   no inner padding/gap around it, full height of the card) ----- */
.mptbm_transport_search_area .mptbm_vehicle_image {
    flex: 0 0 168px;
    width: 168px;
    max-width: 168px;
    border-radius: 0;
    overflow: hidden;
    background: #f1f5f9;
    align-self: stretch;
    position: relative;
}
.mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area {
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 140px;
    border-radius: 0;
    overflow: hidden;
}
.mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area > div {
    width: 100%;
    height: 100%;
    min-height: 140px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.mptbm-vehicle-wrapper:hover .mptbm_vehicle_image .bg_image_area > div {
    transform: scale(1.06);
}

/* ----- "Best Price" badge (added by JS, computed from the real prices
   actually shown in the current result set -- not a fabricated claim) ----- */
.mptbm_transport_search_area .mptbm_best_price_badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color_theme);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.35);
}

/* ----- Middle column: title/rating, feature chips, driver info -----
   Carries the card's own vertical padding now that .mptbm_booking_item is
   unpadded (so the image can bleed flush to the card's edges). ----- */
.mptbm_transport_search_area .mptbm_vehicle_main {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 18px 0;
}
.mptbm_vehicle_header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.mptbm_vehicle_title {
    margin: 0 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -.015em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ----- Rating line - its own row below the title (not inline beside it) ----- */
.mptbm_vehicle_rating { line-height: 1; }
.mptbm_rating_summary {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
}
.mptbm_rating_stars {
    color: #f59e0b;
    font-size: 14px;
    letter-spacing: 1px;
}
.mptbm_rating_value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.mptbm_rating_count {
    font-size: 12.5px;
    color: #64748b;
}

/* ----- Right column: price + Book Now + View Details ----- */
.mptbm_transport_search_area .mptbm_vehicle_cta {
    flex: 0 0 200px;
    width: 200px;
    max-width: 200px;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    border-left: 1px solid rgba(15, 23, 42, 0.06);
    padding: 18px;
}
/* Keeps the price pinned to the top and the Select Car + View Details pair
   pinned to the bottom as one tightly-spaced unit, regardless of how tall
   the card is (varies with feature-chip wrapping) - margin-top:auto on the
   first button absorbs all the leftover vertical space above it, instead of
   justify-content:space-between spreading that space between every child
   (which stretched the gap *between the two buttons* on taller cards). */
.mptbm_transport_search_area .mptbm_vehicle_cta_row {
    margin-top: auto;
}
.mptbm_transport_search_area .mptbm_vehicle_price_col {
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px;
}
.mptbm_vehicle_price_col .mptbm-tier-pricing-savings-ticket-container {
    min-height: 0;
}
.mptbm_transport_search_area h4.mptbm_vehicle_price {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: right !important;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.mptbm_vehicle_price .woocommerce-Price-amount { color: #0f172a; }
.mptbm_vehicle_price .woocommerce-Price-currencySymbol { color: #64748b; margin-right: 2px; font-weight: 600; }

/* ----- Features row (full width, flowing spec chips) ----- */
/* Reserves space for up to 2 wrapped rows of chips regardless of how many a
   vehicle actually has (0, 3, 5...) - without this, card height (and with it
   the stretched image's height) varied per card based on chip count/wrap,
   which is what made the featured image look a different height on every
   card in the results list. */
.mptbm_transport_search_area .mptbm_vehicle_features_row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
}
.mptbm_transport_search_area ul.mptbm_features_grid.list_inline_two {
    display: flow-root; /* clears the floated <li> children without extra markup */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
    min-width: 0;
}
.mptbm_transport_search_area ul.mptbm_features_grid > li.mptbm_feature_item {
    float: left;
    width: auto;
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin: 0 8px 8px 0;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    line-height: 1.2;
    max-width: 100%;
}
.mptbm_transport_search_area ul.mptbm_features_grid > li.mptbm_feature_item .mptbm_feature_icon {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1;
    flex: 0 0 auto;
}
.mptbm_transport_search_area ul.mptbm_features_grid > li.mptbm_feature_item .mptbm_feature_text {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.mptbm_transport_search_area ul.mptbm_features_grid > li.mptbm_feature_item .mptbm_feature_label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin: 0 !important;
}
.mptbm_transport_search_area ul.mptbm_features_grid > li.mptbm_feature_item .mptbm_feature_value {
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- CTA row: full-width "Select Car" button ----- */
.mptbm_transport_search_area .mptbm_vehicle_cta_row {
    display: flex;
    width: 100%;
}
.mptbm_transport_search_area .mptbm-button-container {
    display: flex;
    width: 100%;
    position: relative;
}
/* Simpler/more compact than the old version: less horizontal padding (was
   12px 18px, reading as oversized for a 200px-wide column), sentence case
   instead of uppercase+letter-spacing, and a flat, low-key shadow instead of
   a heavy tinted glow - keeps this the clear primary action without it
   visually dominating the card. */
.mptbm_transport_search_area button._mpBtn_xs.mptbm_transport_select,
.mptbm_transport_search_area button._mpBtn_xs.mptbm_out_of_stock {
    width: 100%;
    white-space: nowrap;
    padding: 10px 14px !important;
    background: var(--color_theme) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.mptbm_transport_search_area button._mpBtn_xs.mptbm_transport_select:hover {
    /* No pre-darkened "--color_theme_dark" token exists in this codebase to
       reach for (would silently no-op as an unresolved var() fallback) -
       filter reliably darkens whatever the live theme color happens to be. */
    filter: brightness(0.92);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}
.mptbm_transport_search_area button._mpBtn_xs.mptbm_transport_select:active {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}
/* Selected state keeps the same fill (still the clearest "this one's picked"
   signal alongside the label/checkmark swap) plus a thin inner ring, so it
   reads as "confirmed" rather than just another hoverable button. */
.mptbm_transport_search_area button._mpBtn_xs.mptbm_transport_select.active_select {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.mptbm_transport_search_area button._mpBtn_xs.mptbm_out_of_stock {
    background: #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* ----- "View Details" as a secondary outline button, stacked under the
   primary CTA in the right column (replaces the old small (i) icon button -
   one single expand action per card now). Consolidated into a single rule
   (a stale duplicate block used to live further down the file setting
   display/gap/layout, fighting this one over which properties won). ----- */
.mptbm_transport_search_area button.mptbm_view_details_toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 0;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px;
    color: #334155;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.mptbm_transport_search_area button.mptbm_view_details_toggle span[data-label] {
    color: inherit;
}
.mptbm_transport_search_area button.mptbm_view_details_toggle i {
    font-size: 10px;
    color: inherit;
    transition: transform .2s ease;
}
.mptbm_transport_search_area button.mptbm_view_details_toggle:hover {
    color: var(--color_theme);
    border-color: var(--color_theme_88, rgba(5, 150, 105, 0.4)) !important;
}
.mptbm_transport_search_area button.mptbm_view_details_toggle.is-open {
    background: #ecfdf5;
    border-color: var(--color_theme_88, rgba(5, 150, 105, 0.4)) !important;
    color: var(--color_theme);
}
.mptbm_transport_search_area button.mptbm_view_details_toggle.is-open i {
    transform: rotate(180deg);
}

/* ----- Mobile polish: stack image / middle / price+CTA into one column ----- */
@media (max-width: 768px) {
    .mptbm_transport_search_area .mptbm_booking_item {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        min-height: 0;
    }
    .mptbm_transport_search_area .mptbm_vehicle_image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        height: 150px;
    }
    .mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area,
    .mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area > div {
        min-height: 150px;
    }
    .mptbm_transport_search_area .mptbm_vehicle_main {
        padding: 14px 18px 0;
    }
    .mptbm_transport_search_area .mptbm_vehicle_cta {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
        padding-top: 14px;
    }
    .mptbm_transport_search_area .mptbm_vehicle_price_col {
        align-items: flex-start !important;
    }
    .mptbm_transport_search_area h4.mptbm_vehicle_price {
        text-align: left !important;
    }
    .mptbm_vehicle_title { font-size: 15px !important; }
    .mptbm_transport_search_area h4.mptbm_vehicle_price { font-size: 20px !important; }
    ul.mptbm_features_grid > li.mptbm_feature_item .mptbm_feature_text { max-width: 110px; }
}

/* ============================================
   Extra Services Section — Modern Card Design
   ============================================ */

/* Panel */
.mptbm_extra_service .mptbm_exsvc_panel,
.mptbm_extra_service .dLayout.mptbm_exsvc_panel {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 28px 24px 12px;
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
}

.mptbm_exsvc_header {
    margin-bottom: 20px;
}
.mptbm_exsvc_header h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -.02em;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mptbm_exsvc_header h3::before {
    content: "";
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background: var(--color_theme);
    flex-shrink: 0;
}

/* Service Card */
.mptbm_extra_service_item {
    display: flex !important;
    gap: 16px;
    padding: 18px 16px;
    margin: 0 -8px;
    border-radius: 12px;
    align-items: flex-start;
    transition: background .2s ease, box-shadow .2s ease;
    border-left: 3px solid transparent;
}
.mptbm_extra_service_item:hover {
    background: #f8fafc;
}
.mptbm_extra_service_item + .divider {
    margin: 0;
    border: none;
}

/* Thumbnail */
.mptbm_exsvc_thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
}
.mptbm_exsvc_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Icon Fallback */
.mptbm_exsvc_icon {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 12px;
    /* Neutral chip instead of a theme-tinted one -- tinting off
       --color_theme depends on that color already being reasonably dark;
       sites with a pale/light theme color (e.g. near-white) turned the chip
       almost invisible against the white card. A fixed light-gray backdrop
       stays visible regardless of the configured theme color, while the
       icon glyph below still carries the brand color. */
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mptbm_exsvc_icon span {
    font-size: 26px;
    color: var(--color_theme);
}

/* Info + Meta Layout */
.mptbm_exsvc_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}
.mptbm_exsvc_info {
    flex: 1;
    min-width: 0;
}
.mptbm_exsvc_meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* Title */
.mptbm_exsvc_info h4 {
    margin: 0 0 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}
.mptbm_exsvc_info h4 .mi {
    font-size: 16px;
    color: var(--color_theme);
    flex-shrink: 0;
}

/* Price Badge */
.mptbm_exsvc_price {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}
.mptbm_exsvc_price .woocommerce-Price-currencySymbol {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

/* Description */
.mptbm_exsvc_desc {
    margin-top: 2px;
}
.mptbm_exsvc_desc .mp_load_more_text_area,
.mp_load_more_text_area {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
}
.mptbm_exsvc_desc .mp_load_more_text_area div[data-read],
.mp_load_more_text_area div[data-read] {
    color: var(--color_theme);
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: .01em;
    transition: text-decoration-color .15s ease;
}
.mptbm_exsvc_desc .mp_load_more_text_area div[data-read]:hover,
.mp_load_more_text_area div[data-read]:hover {
    text-decoration: underline;
}

/* Actions Row (qty + select) */
.mptbm_exsvc_actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Quantity Control */
.mptbm_exsvc_actions .qtyIncDec,
.qtyIncDec {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 6px;
    gap: 4px;
    height: 38px;
}
.mptbm_exsvc_actions .decQty,
.mptbm_exsvc_actions .incQty,
.qtyIncDec .decQty,
.qtyIncDec .incQty {
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #64748b;
    font-size: 11px;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}
.mptbm_exsvc_actions .decQty:hover,
.mptbm_exsvc_actions .incQty:hover,
.qtyIncDec .decQty:hover,
.qtyIncDec .incQty:hover {
    background: #e2e8f0;
    color: #334155;
}
.mptbm_exsvc_actions .decQty .fas,
.mptbm_exsvc_actions .incQty .fas,
.qtyIncDec .decQty .fas,
.qtyIncDec .incQty .fas {
    margin: 0;
}
.mptbm_exsvc_actions .qtyIncDec input[type="text"],
.qtyIncDec input[type="text"] {
    border: none;
    background: transparent;
    text-align: center;
    width: 32px;
    height: 28px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    padding: 0;
    box-shadow: none !important;
    outline: none;
}

/* Select Button — matches car-select style */
.mptbm_exsvc_select,
button.mptbm_price_calculation.mptbm_exsvc_select {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    min-width: 0;
    background: linear-gradient(135deg, var(--color_theme) 0%, var(--color_theme_cc) 100%) !important;
    color: var(--color_theme_alter) !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    box-shadow: 0 4px 12px -4px var(--color_theme_88);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.mptbm_exsvc_select span[data-text] {
    text-transform: uppercase;
    letter-spacing: .02em;
}
.mptbm_exsvc_select:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px var(--color_theme_aa);
    filter: brightness(1.05);
}
.mptbm_exsvc_select:active {
    transform: translateY(0);
}
/* Selected state keeps the same brand color (no separate accent hue) --
   distinguished from the default "Select" state by the darker fill plus the
   text/icon swap to "Selected" that mptbm_registration.js already does. */
.mptbm_exsvc_select.mActive {
    background: var(--color_theme) !important;
    filter: brightness(0.88);
    box-shadow: 0 4px 12px -4px var(--color_theme_aa);
}
.mptbm_exsvc_select.mActive:hover {
    box-shadow: 0 8px 20px -6px var(--color_theme_aa);
    filter: brightness(0.95);
}

/* Active / Selected Card State */
.mptbm_extra_service_item.mActive {
    background: var(--color_theme_77);
    border-left-color: var(--color_theme);
}
.mptbm_extra_service_item.mActive:hover {
    background: var(--color_theme_88);
}

/* Divider between cards */
.mptbm_exsvc_panel > .divider {
    height: 1px;
    background: #f1f5f9;
    margin: 0 16px;
    border: none;
}

/* Book Now Footer */
.mptbm_exsvc_footer {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0 4px;
}
.mptbm_exsvc_booknow,
button.mptbm_exsvc_booknow.mptbm_book_now {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color_theme), var(--color_theme_cc));
    color: var(--color_theme_alter);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(5,150,105,.25);
    transition: transform .15s ease, box-shadow .2s ease;
}
.mptbm_exsvc_booknow:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--color_theme_aa);
}
.mptbm_exsvc_booknow:active {
    transform: translateY(0);
}
.mptbm_exsvc_booknow:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Unavailable Booking Message */
.mptbm_booking_unavailable_msg {
    margin: 0;
    color: #ef4444;
    font-size: 13px;
    max-width: 65%;
    line-height: 1.4;
}

/* ============================================
   Responsive — Tablets & Mobile
   ============================================ */
@media (max-width: 768px) {
    .mptbm_extra_service .mptbm_exsvc_panel,
    .mptbm_extra_service .dLayout.mptbm_exsvc_panel {
        padding: 20px 16px 8px;
        border-radius: 12px;
    }
    .mptbm_exsvc_header h3 {
        font-size: 17px !important;
    }
    .mptbm_extra_service_item {
        flex-direction: column;
        gap: 12px;
        padding: 16px 12px;
        margin: 0;
    }
    .mptbm_exsvc_thumb,
    .mptbm_exsvc_icon {
        width: 100%;
        height: 140px;
    }
    .mptbm_exsvc_top {
        flex-direction: column;
        gap: 14px;
    }
    .mptbm_exsvc_meta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .mptbm_exsvc_actions {
        gap: 8px;
    }
    .mptbm_exsvc_select,
    button.mptbm_price_calculation.mptbm_exsvc_select {
        flex: 1;
        min-width: 0;
    }
    .qtyIncDec {
        flex: 0 0 auto;
    }
    .mptbm_exsvc_footer {
        justify-content: stretch;
    }
    .mptbm_exsvc_booknow,
    button.mptbm_exsvc_booknow.mptbm_book_now {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .mptbm_exsvc_price {
        font-size: 15px;
    }
    .mptbm_exsvc_actions {
        flex-wrap: wrap;
    }
    .mptbm_exsvc_select,
    button.mptbm_price_calculation.mptbm_exsvc_select {
        width: 100%;
        min-width: 0;
    }
}

/* Legacy fallback — hide old divider-based layout artifacts */
.dLayout .mptbm_extra_service_item + .divider {
    display: none;
}

/* ============================================
   Override mp_style.css / mp_global conflicts
   ============================================ */

/* mp_style.css:2250 — .mpStyle .qtyIncDec { max-width: 100px } too small */
.mptbm_extra_service .qtyIncDec,
.mptbm_extra_service .mptbm_exsvc_actions .qtyIncDec {
    max-width: none;
}

/* mp_style.css:1639-1646 — .mpStyle .dLayout base border/padding/radius conflicts */
.mptbm_extra_service .dLayout.mptbm_exsvc_panel,
.mptbm_extra_service .mptbm_exsvc_panel {
    border: none !important;
    border-radius: 16px !important;
    padding: 28px 24px 12px !important;
    margin-top: 20px !important;
}

/* mp_style.css:1647 — .mpStyle .dLayout:last-child adds unwanted border-bottom */
.mptbm_extra_service .mptbm_exsvc_panel:last-child {
    border-bottom: none !important;
}

/* mp_style.css:3755 — .mpStyle .mp_load_more_text_area overrides color */
.mptbm_extra_service .mp_load_more_text_area {
    color: #64748b;
}

/* mp_style.css:3758 — .mpStyle [data-read] overrides link color */
.mptbm_extra_service div[data-read] {
    color: #6366f1;
}

/* mp_style.css:696 — .mpStyle .divider generic height/background */
.mptbm_extra_service .mptbm_exsvc_panel > .divider {
    height: 1px;
    background: #f1f5f9;
    margin: 0 16px;
    border: none;
}

/* mp_style.css:571 — .mpStyle [class*="_themeButton"] on Book Now button */
.mptbm_extra_service .mptbm_exsvc_booknow,
.mptbm_extra_service button.mptbm_exsvc_booknow.mptbm_book_now {
    background: linear-gradient(135deg, var(--color_theme), var(--color_theme_cc)) !important;
    color: var(--color_theme_alter) !important;
    border: 0 !important;
    box-shadow: 0 4px 12px var(--color_theme_77) !important;
}

/* mp_style.css:2820 — ._fullWidth max-width constraint */
.mptbm_extra_service .fdColumn._fullWidth {
    min-width: 0;
}

/* mp_style.css:185-189 — div.mpStyle h3 color/margin overrides */
.mptbm_extra_service .mptbm_exsvc_header h3 {
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* mp_style.css:198-203 — div.mpStyle h4 font-size/font-weight overrides */
.mptbm_extra_service .mptbm_exsvc_info h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

/* mp_style.css:495 — button font-size from var(--button_fs) */
.mptbm_extra_service .mptbm_exsvc_select,
.mptbm_extra_service button.mptbm_price_calculation.mptbm_exsvc_select {
    font-size: 13px !important;
}

/* Ensure no stray theme-color bleed from generic .active_select rules */
.mptbm_extra_service button.mptbm_price_calculation.active_select {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.5) !important;
}

/* ============================================
   MPTBM Results Toolbar — trip summary + sort
   ============================================ */
.mptbm_results_toolbar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ----- Left column: route, pickup ••• drop-off on a single line -----
   space-between pins pickup to the row's left edge and drop-off to its
   right edge, with the dotted connector filling whatever's left between
   them, instead of the two sitting packed together off to one side. */
.mptbm_results_trip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    padding-right: 20px;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
}
.mptbm_results_trip_place {
    /* mp_style.css:.mpStyle span sets inline-block at equal specificity (both
       have 1 class + this also matches the "span" element selector) and wins
       on source order - must force flex back on to lay out icon + text. */
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    max-width: 150px;
    /* overflow/text-overflow used to live here, but text-overflow:ellipsis
       doesn't reliably fire on a flex container split into multiple flex
       items (the icon + the name) - it needs the overflowing text to be the
       sole content of a block-level box, so long names just got hard-clipped
       with no "…" at all. Moved onto .mptbm_results_trip_place_text below,
       which wraps only the name text itself. */
    flex: 0 1 auto;
    min-width: 0;
}
.mptbm_results_trip_place_text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mptbm_results_trip_place > i {
    font-size: 12px;
    flex: 0 0 auto;
}
.mptbm_results_pin_start {
    color: var(--color_theme);
}
.mptbm_results_pin_end {
    color: #ef4444;
}
/* Route connector: a start bullet (pickup-colored, left edge), a dashed
   line, and a right-pointing arrowhead (drop-off-colored, right edge) -
   reads as "from → to" at a glance instead of 3 static, purely decorative
   dots. Purely visual (the place names already carry the real info), so
   the element itself is aria-hidden in the template. */
.mptbm_results_trip_dots {
    position: relative;
    width: 20%;
    min-width: 32px;
    flex: 0 0 auto;
    align-self: stretch;
    color: transparent;
    font-size: 0;
    letter-spacing: 0;
    line-height: 1;
}
.mptbm_results_trip_dots::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    right: 9px;
    border-top: 2px dotted #cbd5e1;
    transform: translateY(-50%);
}
/* Start bullet - solid, pickup-pin colored, marks the "from" end. */
.mptbm_results_trip_dots::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color_theme);
    transform: translateY(-50%);
}
/* End arrowhead - a CSS-drawn triangle, drop-off-pin colored, pointing at
   the destination pin to make the travel direction explicit. */
.mptbm_results_trip_dots_pulse {
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #ef4444;
    transform: translateY(-50%);
    animation: mptbm_trip_travel 1.8s ease-in-out infinite;
}
@keyframes mptbm_trip_travel {
    0%, 100% {
        transform: translate(0, -50%);
        opacity: 1;
    }
    50% {
        transform: translate(3px, -50%);
        opacity: .55;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mptbm_results_trip_dots_pulse {
        animation: none;
    }
}
.mptbm_results_trip_divider {
    display: block !important;
    width: 1px !important;
    height: 16px !important;
    margin: 0 !important;
    background: rgba(15, 23, 42, 0.1) !important;
    flex: 0 0 auto;
}
.mptbm_results_trip_meta {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    flex: 0 0 auto;
}
.mptbm_results_trip_meta > i {
    color: #94a3b8;
    font-size: 12px;
}

/* ----- Middle column: Service Times + Pickup Date/Time etc, as a
   self-wrapping label/value grid instead of one baseline-aligned line -
   each fact keeps its own column width, so values line up instead of the
   row overflowing once Transfer Type/Waiting/Distance/Duration all join
   Pickup Date/Time (see mptbm_reveal_inline_results in the JS). ----- */
.mptbm_results_toolbar_middle {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 20px;
}
/* A CSS Grid here (repeat(auto-fill, minmax(96px, 1fr))) looks equivalent
   but isn't: browsers size a grid's *intrinsic* (auto) height off a
   worst-case single-column stacking of its items, independent of the real
   width-based layout - since this row is itself sized by its flex-item
   parent's auto height, that pessimistic intrinsic height leaks out as a
   tall, mostly-empty box even though the grid itself renders as one tidy
   row. A wrapping flex row doesn't have that mismatch - its auto/hypothetical
   height reflects the actual line-wrapping at the real available width. */
.mptbm_results_toolbar_middle .mptbm_summary_top_row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    width: 100%;
}
.mptbm_results_toolbar_middle .mptbm_summary_top_col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1 1 96px;
}
.mptbm_results_toolbar_middle h6 {
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8 !important;
    white-space: nowrap;
}
.mptbm_results_toolbar_middle p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ----- Right column: edit/map actions ----- */
.mptbm_results_actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    padding-left: 20px;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
}
.mptbm_results_count_number {
    color: var(--color_theme);
}
.mptbm_results_sort {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
}
.mptbm_results_sort_label_sr {
    /* Visually hidden but still announced by screen readers - the select's
       own aria-label duplicates this for browsers that don't associate a
       wrapping <label> reliably, so sighted users don't need to see it too. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.mptbm_results_sort select.mptbm_sort_select {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    padding: 7px 30px 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color .15s ease;
}
.mptbm_results_sort select.mptbm_sort_select:hover {
    border-color: rgba(5, 150, 105, .35);
}
.mptbm_results_sort select.mptbm_sort_select:focus {
    outline: none;
    border-color: var(--color_theme);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .12);
}
button.mptbm_results_edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
button.mptbm_results_edit i {
    font-size: 11px;
    color: #94a3b8;
    transition: color .15s ease;
}
button.mptbm_results_edit:hover {
    border-color: var(--color_theme);
    background: rgba(5, 150, 105, .06);
    color: var(--color_theme);
}
button.mptbm_results_edit:hover i {
    color: var(--color_theme);
}

@media (max-width: 640px) {
    .mptbm_results_toolbar {
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 10px;
    }
    /* Stacked mobile order: route/location on top, then date, then
       duration + pickup time together, then the edit action. The three
       columns' side borders/padding (built for sitting shoulder to
       shoulder) become a top border/padding once they stack instead. */
    .mptbm_results_trip {
        order: 1;
        width: 100%;
        padding-right: 0;
        border-right: none;
    }
    .mptbm_results_toolbar_middle {
        order: 2;
        width: 100%;
        padding: 10px 0 0;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }
    .mptbm_results_actions {
        order: 3;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10px 0 0;
        border-left: none;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }
    .mptbm_results_actions > * {
        flex: 1 1 auto;
    }
    .mptbm_results_trip_place {
        max-width: 100%;
    }
    .mptbm_results_toolbar_middle .mptbm_summary_top_col.mptbm_summary_col_date {
        grid-column: 1 / -1;
    }
}
@media (max-width: 480px) {
    .mptbm_results_toolbar {
        padding: 12px 14px;
    }
    .mptbm_results_summary_title {
        font-size: 15px;
    }
}

/* ============================================
   MPTBM Results Controls Row — count + sort + view toggle
   (separate row below the trip-summary toolbar)
   ============================================ */
.mptbm_results_controls_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: none;
    border: 0;
    padding: 10px;
    margin-bottom: 0;
    box-shadow: none;
}
.mptbm_results_summary_title {
    margin: 0 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -.01em;
}
.mptbm_results_controls_right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-left: auto;
}

/* ----- Grid / List view toggle ----- */
.mptbm_results_view_toggle {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 9px;
    padding: 3px;
    flex: 0 0 auto;
}
.mptbm_results_view_toggle button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.mptbm_results_view_toggle button.is-active {
    background: #ffffff;
    color: var(--color_theme);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.mptbm_results_view_toggle button:hover:not(.is-active) {
    color: #475569;
}

/* ----- List layout mode (default) -----
   Same flex-column behavior the shared fdColumn utility class provided,
   plus an explicit gap so list and grid draw their spacing from the same
   10px value instead of list relying on each card's own margin. */
.mp_sticky_depend_area.mptbm_view_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ----- Grid layout mode ----- */
.mp_sticky_depend_area.mptbm_view_grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}
.mp_sticky_depend_area.mptbm_view_grid > .mptbm_results_toolbar,
.mp_sticky_depend_area.mptbm_view_grid > .mptbm_results_controls_row,
.mp_sticky_depend_area.mptbm_view_grid > .geo-fence-no-transport,
.mp_sticky_depend_area.mptbm_view_grid > .mptbm_extra_service,
.mp_sticky_depend_area.mptbm_view_grid > ._dLayout_dFlex_fdColumn_btLight_2 {
    grid-column: 1 / -1;
}
.mp_sticky_depend_area.mptbm_view_grid .mptbm-vehicle-wrapper {
    min-width: 0;
}

/* Grid cards get their own column layout (image on top, full-width content
   below) instead of the list view's side-by-side row - the row layout only
   leaves ~140px for title/chips at grid-column widths, which is what was
   truncating everything unreadably.
   Cards intentionally do NOT stretch to match the tallest card in their row
   (no height:100%): once any single card's own details panel expands, its
   grid row grows to fit it - forcing every card in that row to also stretch
   to the new row height would push each of THEIR price/button sections down
   with dead space above them, even on cards nobody expanded. Natural,
   independent per-card height avoids that entirely. */
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_booking_item {
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_vehicle_image {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    border-radius: 0;
    align-self: auto;
}
/* mp_script.js's mp_resize_bg_image_area() sets an inline min-height on the
   inner div, computed from each photo's own aspect ratio (outerWidth *
   imgHeight / imgWidth) - so without an !important override here, every
   card's thumbnail ends up a different height depending on the source
   photo's aspect ratio. Only !important can beat that inline style. */
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_vehicle_image .bg_image_area,
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_vehicle_image .bg_image_area > div {
    min-height: 170px !important;
    height: 170px !important;
    border-radius: 0;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_vehicle_main {
    justify-content: flex-start;
    padding: 14px 16px 0;
    gap: 8px;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_vehicle_title {
    font-size: 16px !important;
    white-space: normal;
    line-height: 1.25;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_vehicle_cta {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    border-left: 0;
    padding: 14px 16px 16px;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_vehicle_price_col {
    align-items: flex-start !important;
    width: 100%;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid h4.mptbm_vehicle_price {
    font-size: 19px !important;
    text-align: left !important;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid ul.mptbm_features_grid > li.mptbm_feature_item:nth-child(n+4) {
    display: none !important;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_view_details_toggle {
    margin-top: 4px;
}
/* Grid cards are always narrow (2-up), regardless of viewport width, so the
   details panel's 2-column layout never has enough room - it was cramming
   the spec-table's own 2-column grid + block titles into ~200px sub-columns,
   reading as overlapping/collided text. Always single-column here. */
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_vehicle_details_panel {
    grid-template-columns: 1fr;
    gap: 28px 0;
    padding: 18px 16px 20px;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_spec_table {
    grid-template-columns: 1fr;
}
@media (max-width: 640px) {
    .mp_sticky_depend_area.mptbm_view_grid {
        grid-template-columns: 1fr;
    }
    .mptbm_results_controls_row {
        padding: 10px;
    }
}

/* ============================================
   MPTBM "View Details" — real specs + reviews
   ============================================ */
/* Two explicit column containers (not CSS balanced-columns) so the split is
   always Description+Specifications on the left, Reviews+Driver Info on the
   right, deterministically - regardless of how tall any one block is. Column
   balancing would otherwise regroup blocks purely by height. */
.mptbm_vehicle_details_panel {
    width: 100%;
    margin: 0;
    padding: 26px 28px 30px;
    background: #ffffff;
    border: 0;
    border-top: 1px solid #e5e7eb;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0 32px;
    align-items: start;
}
.mptbm_details_col_left,
.mptbm_details_col_right {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}
.mptbm_details_block {
    min-width: 0;
}
.mptbm_details_block h4 {
    margin: 0 0 12px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mptbm_details_reviews_avg {
    color: #f59e0b;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    font-size: 12.5px;
}
@media (max-width: 640px) {
    .mptbm_vehicle_details_panel {
        grid-template-columns: 1fr;
        gap: 28px 0;
        padding: 18px 16px 20px;
    }
}

/* ----- Specifications ----- */
.mptbm_details_spec_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mptbm_details_spec_list li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #1e293b;
}
.mptbm_details_spec_list li i {
    color: var(--color_theme);
    font-size: 12px;
    width: 14px;
    flex: 0 0 auto;
}
.mptbm_details_spec_label {
    color: #64748b;
    font-weight: 600;
}
.mptbm_details_spec_value {
    font-weight: 600;
}

/* ----- Reviews ----- */
.mptbm_details_reviews_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mptbm_details_review {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.mptbm_details_review:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.mptbm_details_review_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}
.mptbm_details_review_author {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.mptbm_details_review_date {
    font-size: 11.5px;
    color: #94a3b8;
}
.mptbm_details_review_stars {
    display: block;
    color: #f59e0b;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.mptbm_details_review p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
}

/* ----- Additional information (real admin-entered extra_info field) ----- */
.mptbm_details_extra_info {
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}

/* ----- Vehicle Specifications (real make/model/year/color/engine/plate/
   mileage fields - Admin > Vehicle Specification) ----- */
.mptbm_spec_table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
}
.mptbm_spec_row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e5e7eb;
}
.mptbm_spec_row span:first-child { color: #94a3b8; }
.mptbm_spec_row span:last-child {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
}

@media (max-width: 640px) {
    .mptbm_spec_table {
        grid-template-columns: 1fr;
    }
    .mptbm_details_spec_list {
        grid-template-columns: 1fr;
    }
}