.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 -----
   Every selector in this section is duplicated against
   .mptbm_exsvc_summary_footer: extra_service.php renders a second copy of
   this exact block (same .mptbm_transport_summary markup, kept in sync for
   free since mptbm_registration.js updates every ".mptbm_transport_summary"
   it finds) right above the "Book Now" button, as a mobile/scrolled-past
   echo of the running total.
   One consistent itemized-list pattern for every row (the main vehicle line,
   each extra service, each stoppage): icon + dark label on the left, a muted
   qty pill + dark price on the right, no per-row border - rhythm comes from
   padding alone, with a single solid divider right before the total instead
   of a dashed line under every item. Line prices are neutral dark, not
   theme-colored - color is reserved for the grand total alone so it reads
   as the one number that matters. */
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary,
.mptbm_exsvc_summary_footer {
    margin-top: 14px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
/* The first child is a bare .divider meant to separate this card from
   whatever precedes it in the sidebar - inside the card's own padding,
   with nothing above it, it only ever read as a stray line under the
   heading. */
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary > .divider:first-child,
.mptbm_exsvc_summary_footer > .divider:first-child {
    display: none;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary h6._mB_xs,
.mptbm_exsvc_summary_footer h6._mB_xs {
    margin: 0 0 12px !important;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -.01em;
    text-transform: none !important;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary h6._mB_xs::before,
.mptbm_exsvc_summary_footer h6._mB_xs::before {
    content: "";
    width: 5px;
    height: 16px;
    border-radius: 3px;
    background: var(--color_theme);
    flex-shrink: 0;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary ._textColor_4,
.mptbm_exsvc_summary_footer ._textColor_4,
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .mptbm_extra_service_summary [data-extra-service] ._textLight_1_dFlex_flexWrap_justifyBetween,
.mptbm_exsvc_summary_footer .mptbm_extra_service_summary [data-extra-service] ._textLight_1_dFlex_flexWrap_justifyBetween {
    padding: 7px 0;
    align-items: center;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .mptbm_product_name,
.mptbm_exsvc_summary_footer .mptbm_product_name,
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary [data-extra-service] ._dFlex_alignCenter > span:last-child,
.mptbm_exsvc_summary_footer .mptbm_extra_service_summary [data-extra-service] ._dFlex_alignCenter > span:last-child {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .mptbm_product_price,
.mptbm_exsvc_summary_footer .mptbm_product_price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .mptbm_product_qty,
.mptbm_exsvc_summary_footer .mptbm_product_qty,
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .ex_service_qty,
.mptbm_exsvc_summary_footer .ex_service_qty {
    padding: 2px 8px;
    color: #64748b !important;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .mptbm_product_price_value,
.mptbm_exsvc_summary_footer .mptbm_product_price_value,
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary [data-extra-service] p > span.textTheme:last-child,
.mptbm_exsvc_summary_footer .mptbm_extra_service_summary [data-extra-service] p > span.textTheme:last-child {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .justifyBetween,
.mptbm_exsvc_summary_footer .justifyBetween {
    align-items: center;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary > .divider,
.mptbm_exsvc_summary_footer > .divider {
    margin: 10px 0 !important;
    border-color: #e5e7eb;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary h4,
.mptbm_exsvc_summary_footer h4 {
    margin: 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary .mptbm_product_total_price,
.mptbm_exsvc_summary_footer .mptbm_product_total_price {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: var(--color_theme) !important;
    letter-spacing: -.01em;
}
/* .mptbm_product_total_price is itself an <h6> (summary.php), so the
   sidebar's generic "section heading" rule (div.mp_sticky_on_scroll
   .summary-box h6::before - a small grey bullet dot, meant for labels like
   "Passengers"/"Bags") was also painting that dot in front of the total
   price. It's a value, not a section label - cancel the bullet here. */
div.mp_sticky_on_scroll.summary-box .mptbm_product_total_price::before {
    content: none;
}

/* ----- Icon styling for the check-square in transport row -----
   Cancel the inherited _mR_xs margin-right from the markup - spacing to the
   label is driven solely by the parent's flex `gap` below, otherwise the
   two stack and the extra-service rows end up with nearly double the gap
   of the main vehicle row. */
div.mp_sticky_on_scroll.summary-box ._textColor_4 .fas.fa-check-square,
.mptbm_exsvc_summary_footer ._textColor_4 .fas.fa-check-square,
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary .fas.fa-check-square,
.mptbm_exsvc_summary_footer .mptbm_extra_service_summary .fas.fa-check-square {
    color: var(--color_theme);
    font-size: 12px;
    margin-right: 0 !important;
    flex: 0 0 auto;
}
div.mp_sticky_on_scroll.summary-box .mptbm_transport_summary ._textColor_4 ._dFlex_alignCenter,
.mptbm_exsvc_summary_footer ._textColor_4 ._dFlex_alignCenter {
    gap: 6px;
}

/* ----- Extra service line items (Child Seat, Bouquet of Flowers, etc.) ----- */
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary,
.mptbm_exsvc_summary_footer .mptbm_extra_service_summary {
    display: flex;
    flex-direction: column;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary [class*="_dFlex_flexWrap_justifyBetween"],
.mptbm_exsvc_summary_footer .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,
.mptbm_exsvc_summary_footer .mptbm_extra_service_summary ._dFlex_alignCenter {
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

/* ----- Stoppage line items - same treatment as the extra service rows above,
   so a customer sees which stop costs what instead of one combined total. ----- */
div.mp_sticky_on_scroll.summary-box .mptbm_stoppage_price_detail,
.mptbm_exsvc_summary_footer .mptbm_stoppage_price_detail {
    display: flex;
    flex-direction: column;
}
div.mp_sticky_on_scroll.summary-box .mptbm_stoppage_price_detail > div,
.mptbm_exsvc_summary_footer .mptbm_stoppage_price_detail > div {
    padding: 7px 0;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
}
div.mp_sticky_on_scroll.summary-box .mptbm_extra_service_summary p,
.mptbm_exsvc_summary_footer .mptbm_extra_service_summary p {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

/* ----- "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,
    .mptbm_exsvc_summary_footer .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;
    opacity: 1;
    transform: scale(1);
    transition: opacity .22s ease, transform .22s ease;
}
/* Fade/shrink first, then mptbm_booking_item_hidden (below) actually pulls it
   out of layout .22s later once the fade has finished - display can't be
   transitioned, so jumping straight to display:none skipped the animation
   entirely. See the change handler in mptbm_script.js. */
.mptbm_transport_search_area .mptbm_booking_item.mptbm_booking_item_fading {
    opacity: 0;
    transform: scale(.97);
    pointer-events: none;
}
.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 -----
   align-items:flex-end (not stretch) so the buttons below shrink-wrap to
   their own label instead of being stretched to fill this column's full
   200px - they looked oversized/"long" relative to short labels like
   "Select Car". Price stays flush right either way (its own
   align-items:flex-end !important already right-aligns its text). */
.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: flex-end;
    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: shrink-wrapped "Select Car" button -----
   width:auto (not 100%) on the row/container/button together - the column
   is align-items:flex-end now (see .mptbm_vehicle_cta above), but that only
   has anything to shrink to if nothing downstream still forces full width. */
.mptbm_transport_search_area .mptbm_vehicle_cta_row {
    display: flex;
    width: auto;
}
.mptbm_transport_search_area .mptbm-button-container {
    display: flex;
    width: auto;
    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: auto;
    white-space: nowrap;
    padding: 12px 20px !important;
    background: var(--color_theme) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !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;
}
/* The icon span is always in the DOM (JS just toggles its fa- classes on
   select/deselect) so with flex's `gap` it reserved 6px even while empty,
   nudging the label off-center and making the button's content box wider
   than the label alone needs - hide the slot entirely until a checkmark
   class is actually toggled on, so the label centers cleanly and only the
   selected state pays the icon+gap width. */
.mptbm_transport_search_area button._mpBtn_xs.mptbm_transport_select [data-icon] {
    display: none;
}
.mptbm_transport_search_area button._mpBtn_xs.mptbm_transport_select.active_select [data-icon] {
    display: inline-flex;
    align-items: center;
}
.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: auto;
    margin-top: 0;
    padding: 11px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px;
    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;
}
/* List view only: both buttons shrink-wrap to their own label (see
   .mptbm_vehicle_cta_row/.mptbm-button-container/button width:auto above),
   so "Select Car"/"Selected" and "View Details" naturally land at different
   widths - "View Details" carries a chevron icon and is the longer label
   (~130px vs ~105-125px). A shared min-width, picked to fit the longest of
   the three, makes both buttons match instead of each sizing independently.
   Scoped to list view specifically: grid view's buttons sit side by side in
   a much narrower card and already size themselves to fit that row. */
.mp_sticky_depend_area.mptbm_view_list .mptbm_vehicle_cta button._mpBtn_xs.mptbm_transport_select,
.mp_sticky_depend_area.mptbm_view_list .mptbm_vehicle_cta button._mpBtn_xs.mptbm_out_of_stock,
.mp_sticky_depend_area.mptbm_view_list .mptbm_vehicle_cta button.mptbm_view_details_toggle {
    min-width: 132px;
}
.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: auto;
        aspect-ratio: 16 / 9;
    }
    .mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area,
    .mptbm_transport_search_area .mptbm_vehicle_image .bg_image_area > div {
        height: 100%;
        min-height: 0;
    }
    .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;
        /* Desktop's align-items:flex-end (above) shrinks the buttons to
           their label width against the 200px column's right edge - on a
           full-width mobile card that would strand them as a narrow island
           on the right instead of full-width tap targets, so go back to
           stretch + explicit full width here. */
        align-items: stretch;
    }
    .mptbm_transport_search_area .mptbm_vehicle_cta_row,
    .mptbm_transport_search_area .mptbm-button-container,
    .mptbm_transport_search_area button._mpBtn_xs.mptbm_transport_select,
    .mptbm_transport_search_area button._mpBtn_xs.mptbm_out_of_stock,
    .mptbm_transport_search_area button.mptbm_view_details_toggle {
        width: 100%;
    }
    .mptbm_transport_search_area .mptbm_vehicle_price_col {
        align-items: center !important;
        width: 100%;
    }
    .mptbm_transport_search_area h4.mptbm_vehicle_price {
        text-align: center !important;
        width: 100%;
    }
    .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: center;
    gap: 16px;
    width: 100%;
}
.mptbm_exsvc_info {
    flex: 1;
    min-width: 0;
}
/* Row: the quantity stepper (shown only once a service is selected) sits to
   the left of the price+button pair. The qty stepper used to live inside
   .mptbm_exsvc_actions, as a sibling of the button - appearing/disappearing
   there changed .mptbm_exsvc_actions's own width, and since price was
   centered over that same width (align-items:center), selecting an item
   visibly shifted the price out from over the button. Splitting them into
   separate siblings here, with price+button now centered only within their
   own .mptbm_exsvc_price_btn (next rule) - a group whose width never
   includes the stepper - keeps price locked above the button regardless of
   whether the stepper is showing. */
.mptbm_exsvc_meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.mptbm_exsvc_price_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* 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
   The qty stepper's own markup is `.groupContent.qtyIncDec` (MP_Custom_Layout::
   qty_input()), and mp_global's core mp_style.css has a generic
   `.mpStyle .groupContent { background: var(--color_theme); ... }` (2-class
   specificity) that would otherwise paint every groupContent - including
   this one - in the solid theme-green "selected pill" look. The bare
   `.qtyIncDec` selector below is only 1 class, too weak to beat that; it
   used to be paired with the then-correct `.mptbm_exsvc_actions .qtyIncDec`
   (2 classes) which won the specificity tie by loading later in the
   cascade. Moving the qty stepper out of .mptbm_exsvc_actions (see
   .mptbm_exsvc_meta above) broke that pairing - .mptbm_extra_service
   (the stable outer wrapper the whole panel loads into, regardless of
   internal structure) restores the same 2-class specificity. */
.mptbm_extra_service .qtyIncDec,
.qtyIncDec {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 6px;
    gap: 4px;
    height: 38px;
}
.mptbm_extra_service .decQty,
.mptbm_extra_service .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_extra_service .decQty:hover,
.mptbm_extra_service .incQty:hover,
.qtyIncDec .decQty:hover,
.qtyIncDec .incQty:hover {
    background: #e2e8f0;
    color: #334155;
}
.mptbm_extra_service .decQty .fas,
.mptbm_extra_service .incQty .fas,
.qtyIncDec .decQty .fas,
.qtyIncDec .incQty .fas {
    margin: 0;
}
.mptbm_extra_service .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: 999px !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;
}
/* The icon span is always in the DOM (JS only toggles its fa- classes on
   select/deselect) so with flex's `gap` it reserved 6px even while empty,
   nudging the "Select" label off-center - same root cause as the vehicle
   Select Car button. Hide the slot until a checkmark class is actually
   toggled on (.mActive, added alongside the icon class by the same click
   handler) so the label centers cleanly. */
.mptbm_exsvc_select [data-icon] {
    display: none;
}
.mptbm_exsvc_select.mActive [data-icon] {
    display: inline-flex;
    align-items: center;
}
.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: stretch;
}
.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;
}
/* Stretched to match the tallest card in the row (align-items:stretch above)
   so price/CTA lands on the same line across a row regardless of how many
   feature chips a given card wraps to - position:relative so the expanded
   details panel below can anchor to THIS card specifically rather than the
   page. overflow is NOT hidden here (see .mptbm_vehicle_image below for
   where the rounded-corner clipping actually happens instead): the details
   panel is positioned absolute, outside normal flow, specifically so that
   expanding it never changes this wrapper's own layout size - an earlier
   version instead grew the wrapper/row to fit the panel in flow, which
   stretched every OTHER card in the row to match (align-items:stretch
   reacting to the new row height), visibly puffing up still-collapsed
   neighbours as if a second panel had opened on its own. */
/* A CSS Grid item with any z-index (even inherited/auto from a descendant)
   is still painted as one atomic unit relative to its sibling grid items -
   a high z-index on the panel alone can't escape ITS OWN wrapper to paint
   above a sibling wrapper's card. Elevating the wrapper itself (the actual
   grid item) whenever its own toggle is open is what lets the floating
   panel below actually sit on top of the row(s) underneath it. */
.mp_sticky_depend_area.mptbm_view_grid .mptbm-vehicle-wrapper:has(.mptbm_view_details_toggle.is-open) {
    z-index: 5;
}
.mp_sticky_depend_area.mptbm_view_grid .mptbm-vehicle-wrapper {
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: visible;
}

/* 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. flex:1 1 auto (not height:100%) so a
   flex column's default min-height:auto stops this from being squeezed
   below its own natural content - see .mptbm-vehicle-wrapper above for why
   the expanding details panel can't feed back into this at all now. */
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_booking_item {
    flex-direction: column !important;
    flex: 1 1 auto;
    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: 18px 18px 0 0;
    overflow: hidden;
    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;
}
/* Price (left) + Select Car/View Details side by side (right, auto-width)
   in one single row - a grid rather than flex so each piece can be placed
   in its own column without extra wrapper markup around the two buttons. */
.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;
    display: grid !important;
    grid-template-columns: auto 1fr auto auto;
    column-gap: 8px;
    align-items: center;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_vehicle_price_col {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start !important;
    width: auto;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_vehicle_cta_row {
    grid-column: 3;
    grid-row: 1;
    width: auto;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm-button-container {
    width: auto;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid button._mpBtn_xs.mptbm_transport_select,
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid button._mpBtn_xs.mptbm_out_of_stock {
    width: auto !important;
    white-space: nowrap;
    padding: 12px 16px !important;
}
.mptbm_transport_search_area .mp_sticky_depend_area.mptbm_view_grid .mptbm_view_details_toggle {
    grid-column: 4;
    grid-row: 1;
    width: auto;
    padding: 11px 14px;
    white-space: nowrap;
}
.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;
}
/* 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.
   position:absolute, floating below the card it belongs to (anchored by
   .mptbm-vehicle-wrapper's position:relative above): this is what keeps an
   expanding panel out of the row's own height calculation entirely, so
   row-mates stay exactly where they were. It does mean an open panel visibly
   floats over whatever cards are in the row(s) below until it's collapsed
   again - the deliberate trade-off for "same card only" sizing. */
.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;
    flex: 0 0 auto;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 20;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
}
.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;
    }
}