/* ==========================================================================
   Car Details page — visual redesign.
   Every selector below is unchanged from before (nothing here renames a
   class/ID) — templates/car-details/car_details.php and
   assets/frontend/mpcrbm_registration.js (tabs, gallery lightbox, FAQ
   accordion, multi-step booking flow) keep working exactly as they did.
   Local CSS variables scoped to the page wrapper (same pattern as the
   admin side's --mpcrbm-shell-* vars) give the whole page one consistent
   radius/shadow/color scale instead of the previous mix of ad-hoc values
   and a mismatched purple/blue accent in the FAQ/Terms sections. Brand
   color still comes from the site's real --color_theme/--color_theme_alter
   custom properties (mp_global/class/MPCRBM_Global_Style.php), so this
   still follows whatever color an admin has set — default pink #F12971.
   ========================================================================== */

.mpcrbm_car_details_wrapper {
    --mpcrbm-cd-radius: 14px;
    --mpcrbm-cd-radius-sm: 8px;
    --mpcrbm-cd-shadow: 0 4px 24px rgba(15, 23, 42, .06);
    --mpcrbm-cd-border: #e5e7eb;
    --mpcrbm-cd-text: #1f2937;
    --mpcrbm-cd-text-faded: #6b7280;
    --mpcrbm-cd-bg: #f8fafc;
}

div.mpcrbm h1 {
    font-size: 30px;
    font-weight: 700;
    color: var(--mpcrbm-cd-text);
    margin: 24px 0 20px;
}

.mpcrbm_car_details_container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    margin: 0 auto 40px;
}

.mpcrbm_car_details_left,
.mpcrbm_car_details_right {
    background-color: #fff;
    border-radius: var(--mpcrbm-cd-radius);
    border: 1px solid var(--mpcrbm-cd-border);
    box-shadow: var(--mpcrbm-cd-shadow);
}

.mpcrbm_car_details_left {
    flex: 1 1 65%;
    min-width: 0;
    padding: 20px;
}

.mpcrbm_car_details_right {
    flex: 1 1 30%;
    min-width: 0;
    padding: 20px;
}

div.mpcrbm .mpcrbm_car_details_container h3,
div.mpcrbm_car_details_container h3 {
    font-weight: 700;
    font-size: 17px;
    color: var(--mpcrbm-cd-text);
    text-align: left;
    margin: 0 0 10px;
}

/* Every plain "<div class="divider">" in this page (Car specification, price
   box's "Details" summary, driver box) had no CSS anywhere in the plugin at
   all — it rendered as an invisible, zero-height div. Scoped to this page
   only, so registration/checkout templates that reuse the same bare
   ".divider" class elsewhere are unaffected. */
.mpcrbm_car_details_wrapper .divider {
    height: 1px;
    background: var(--mpcrbm-cd-border);
    border: none;
    margin: 0 0 16px;
}

/* ===== FEATURE IMAGE ===== */
.mpcrbm_car_details_feature_image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--mpcrbm-cd-radius-sm);
    object-fit: cover;
    display: block;
}

/* ===== GALLERY ===== */
.mpcrbm_car_details_gallery {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.mpcrbm_car_details_gallery img {
    width: 90px !important;
    height: 64px !important;
    border-radius: var(--mpcrbm-cd-radius-sm);
    object-fit: cover;
    cursor: pointer;
}

.mpcrbm_car_details_view_more {
    background: var(--color_theme, #F12971);
    color: var(--color_theme_alter, #fff);
    border: none;
    padding: 8px 16px;
    border-radius: var(--mpcrbm-cd-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s ease;
}

.mpcrbm_car_details_view_more:hover {
    opacity: .88;
}

/* ===== TABS — underline style instead of boxed buttons ===== */
.mpcrbm_car_details_tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 24px 0 16px;
    border-bottom: 1px solid var(--mpcrbm-cd-border);
}

.mpcrbm_car_details .mpcrbm_car_details_tabs button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 0 12px;
    margin-bottom: -1px;
    cursor: pointer;
    color: var(--mpcrbm-cd-text-faded);
    font-size: 14px;
    font-weight: 600;
    transition: color .15s ease;
}

.mpcrbm_car_details .mpcrbm_car_details_tabs button:hover {
    color: var(--mpcrbm-cd-text);
}

.mpcrbm_car_details_tabs button.active {
    background: none;
    color: var(--color_theme, #F12971);
    border-bottom-color: var(--color_theme, #F12971);
}

/* ===== TAB CONTENT =====
   Not a show/hide tab switcher — every section renders at once and stacks
   down the page; the buttons above just scroll to + briefly flash their
   section (see the ".mpcrbm_car_details_tabs button" click handler in
   mpcrbm_registration.js, which only scrolls and toggles ".focus-highlight"
   — it never touches these content divs' visibility or ".active" class).
   "Benefits" is the one exception, deliberately hidden via its own inline
   style="display:none" in the template — that still wins over this rule
   regardless, no special-casing needed here. */
.mpcrbm_car_details_tab_content {
    display: block;
    padding: 16px 0 0;
    margin-top: 16px;
    border-top: 1px solid var(--mpcrbm-cd-border);
}

/* The tabs bar (.mpcrbm_car_details_tabs) is also a <div>, so a plain
   ":first-of-type" here would match IT, not the first actual content
   section — this adjacent-sibling selector targets the real first one. */
.mpcrbm_car_details_tabs + .mpcrbm_car_details_tab_content {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

/* Brief highlight flash when a tab link scrolls to this section — the class
   itself already existed in the JS with no CSS behind it at all. */
.mpcrbm_car_details_tab_content.focus-highlight {
    background-color: #fdf0f4; /* fallback for browsers without color-mix() */
    background-color: color-mix(in srgb, var(--color_theme, #F12971) 8%, transparent);
    transition: background-color .3s ease;
}

.mpcrbm_car_details_tab_content p {
    color: var(--mpcrbm-cd-text-faded);
    line-height: 1.7;
    font-size: 14.5px;
}

/* ===== INFO GRID (Car Info tab) ===== */
.mpcrbm_car_details_info_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.specification {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mpcrbm-cd-text);
    background: var(--mpcrbm-cd-bg);
    border-radius: var(--mpcrbm-cd-radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    padding: 10px 12px;
}

.specification i {
    color: var(--color_theme, #F12971);
    font-size: 15px;
}

.mpcrbm_car_details_benefit_list {
    padding: 0 !important;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mpcrbm_car_details_benefit_list li {
    font-size: 14px;
    color: var(--mpcrbm-cd-text);
}

/* ===== INCLUDE/EXCLUDE ===== */
.mpcrbm_car_details_include_exclude {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.mpcrbm_car_details_include_exclude ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mpcrbm_car_details_include_exclude ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--mpcrbm-cd-text);
}

.mpcrbm_car_details_include,
.mpcrbm_car_details_exclude {
    flex: 1 1 45%;
    padding: 16px;
    border-radius: var(--mpcrbm-cd-radius-sm);
    background: var(--mpcrbm-cd-bg);
}

div.mpcrbm_car_details_left h4, div.mpcrbm_car_details_right h4
 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mpcrbm-cd-text);
}


.mpcrbm_car_details_include i {
    color: #16a34a;
}

.mpcrbm_car_details_exclude i {
    color: #dc2626;
}

/* ===== MAP ===== */
.mpcrbm_car_details_map_box iframe {
    width: 100%;
    height: 300px;
    border: none;
    border-radius: var(--mpcrbm-cd-radius-sm);
}

/* ===== RIGHT BOX — PRICE ===== */
.mpcrbm-car-price-header {
    background: var(--color_theme, #F12971);
    color: var(--color_theme_alter, #fff);
    padding: 16px;
    border-radius: var(--mpcrbm-cd-radius-sm);
    margin-bottom: 16px;
}

.mpcrbm-car-price-header h3 {
    color: var(--color_theme_alter, #fff) !important;
    font-size: 22px;
    font-weight: 700;
    margin: 4px 0 !important;
}

.mpcrbm-car-price-header p {
    margin: 0;
    font-size: 12.5px;
    opacity: .85;
}

.mpcrbm-car-price-header .mpcrbm_minimum_booking {
    opacity: .95;
    font-size: 12.5px;
}

/* Scoped — .mpcrbm_price-breakdown is also reused on car list/search-result
   cards (templates/registration/vehicle_item*.php). */
.mpcrbm-car-price-header .mpcrbm_price-breakdown {
    font-size: 12.5px;
    color: #ffffff;
    font-weight: 500;
}

/* Scoped to inside the pink price header specifically — .mpcrbm_price_hover_wrap
   /.mpcrbm_price_info are also reused on car list/search-result cards
   (templates/registration/vehicle_item*.php), which don't have a colored
   background behind them, so this must not apply there. */
.mpcrbm-car-price-header .mpcrbm_price_hover_wrap .mpcrbm_price_info {
    color: var(--color_theme_alter, #fff);
    background: rgba(255, 255, 255, .18);
}

.mpcrbm_car_details_price_box div.mpcrbm_transport_search_area {
    margin: 0;
}

.mpcrbm_car_details_price_box div.mpcrbm_transport_search_area div.tabsContentNext {
    margin: 0;
}

.mpcrbm_car_details_price_box .mpcrbm_extra_service_layout_details {
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--mpcrbm-cd-border);
    border-radius: var(--mpcrbm-cd-radius-sm);
    padding: 14px;
    box-shadow: none;
    margin-bottom: 12px;
}

.mpcrbm_car_details_price_box .mpcrbm_extra_service_item button {
    background: var(--color_theme, #F12971);
    color: var(--color_theme_alter, #fff);
    border: none;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Puts the service name ("Driver"), price, and Select button all on one
   row instead of the name stacked above them — .fdColumn is a shared
   flex-direction:column utility (mp_global/assets/mp_style/
   mpcrbm_global.css), overridden here only inside this page's extra-service
   list, not globally. The quantity stepper itself stays hidden until
   "Select" is clicked (div.mpcrbm [data-collapse]{display:none} — existing,
   unrelated behavior), so only these 3 elements are visible at rest. */
.mpcrbm_car_details_price_box .mpcrbm_extra_service_item .fdColumn._fullWidth {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    min-width: 0;
}

/* flex: 1 1 auto + ellipsis lets the title shrink/truncate under pressure
   (a longer service name, or the qty stepper revealing on Select) instead
   of the row being rigid end-to-end — that rigidity was the real cause of
   the price box "jumping": with no give anywhere in this row, its natural
   content width could exceed the column's 30% flex-basis, and without
   min-width:0 on .mpcrbm_car_details_right (fixed separately, see that
   rule) a flex item's default min-width:auto forces the *whole* 2-column
   container to wrap instead of clipping inside its own column — dropping
   the price box onto its own line below the left column, which reads as
   the sidebar suddenly jumping to the bottom of the page.
   min-width is a small positive floor (not 0): once the qty stepper reveals
   on Select, .mpcrbm-ex-quantity-box's flex-shrink:0 siblings (price, qty
   input, button) don't give an inch, so min-width:0 let the name get
   squeezed all the way down to nothing — invisible, not just truncated.
   The floor below plus the compacted price/qty/button sizes further down
   keep every piece, including the name, visible on one line. */
.mpcrbm_car_details_price_box .mpcrbm_extra_service_item .mpcrbm_search_title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 46px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mpcrbm_car_details_price_box .mpcrbm_extra_service_item .mpcrbm-ex-quantity-box {
    flex-shrink: 0;
}

/* ===== "Details" order summary — sidebar price box only =====
   .mpcrbm_transport_summary is also the shared order-summary block reused
   on the checkout/search-results pages (templates/registration/
   choose_vehicles.php, get_search_result.php, summary.php) — every rule
   below is scoped under .mpcrbm_car_details_price_box so those pages keep
   their existing look untouched. This card already sits inside
   .mpcrbm_car_details_right's own bordered/shadowed card, so instead of
   the shared base's second white+shadow card-in-card, it uses the same
   soft tinted-panel language as the pick-up/return summary above it
   (.mpcrbm-date-range-summary) for a consistent, lighter feel. */
.mpcrbm_car_details_price_box .mpcrbm_transport_summary {
    margin: 16px 0;
    padding: 16px;
    background: var(--mpcrbm-cd-bg, #f8fafc);
    border: 1px solid var(--mpcrbm-cd-border, #e5e7eb);
    border-radius: var(--mpcrbm-cd-radius-sm, 8px);
    box-shadow: none;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mpcrbm-cd-text-faded, #6b7280);
    margin: 0 0 12px;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary h3::before {
    content: "\f543";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--color_theme, #F12971);
    font-size: 12.5px;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .divider {
    margin: 0 0 12px;
}

/* Row rhythm: every direct summary row (main car line, extra services,
   deposit, one-way fee) gets consistent spacing + a hairline separator
   instead of each block bringing its own flat gray/box style. */
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .book-items,
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_extra_service_summary > div,
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_security_deposit_summary .justifyBetween,
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_one_way_fee_summary .justifyBetween {
    background: none;
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px dashed var(--mpcrbm-cd-border, #e5e7eb);
    border-radius: 0;
    font-size: 13px;
    color: var(--mpcrbm-cd-text-faded, #6b7280);
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_security_deposit_summary .divider,
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_one_way_fee_summary .divider {
    display: none;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_security_deposit_price,
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_one_way_fee_price {
    font-weight: 700;
}

/* .justifyBetween (shared utility, same element) makes .book-items a flex
   row already — with 3 plain <p> children (name block, "x days", price) it
   used to spread them across the row as 3 separate columns instead of
   grouping name+price on one line with "x days" as a line underneath, which
   read as scattered/misaligned. Reordered via flex so name+qty sit left,
   price sits right, and "x days" wraps onto its own full-width line below. */
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .book-items {
    flex-wrap: wrap;
    align-items: center;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .book-items > ._dFlex_alignCenter {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .book-items > .mpcrbm_product_price {
    order: 2;
    flex-shrink: 0;
    margin-left: 10px;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .book-items > .mpcrbm_car_day {
    order: 3;
    flex: 1 1 100%;
    margin-top: 4px;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .book-items ._dFlex_alignCenter,
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_extra_service_summary ._dFlex_alignCenter {
    gap: 8px;
    flex-wrap: wrap;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .book-items .fa-check-square,
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_extra_service_summary .fa-check-square {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color_theme, #F12971);
    color: var(--color_theme_alter, #fff);
    font-size: 10px;
    margin-right: 0;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_product_name {
    font-size: 14px;
    font-weight: 700;
    color: var(--mpcrbm-cd-text, #1f2937);
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_car_qty_display,
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_extra_service_summary .ex_service_qty {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fdf0f4;
    background: color-mix(in srgb, var(--color_theme, #F12971) 12%, transparent);
    color: var(--color_theme, #F12971);
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_car_day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color_theme, #F12971);
    margin: 4px 0 0;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_car_day_label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_car_day_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color_theme, #F12971);
    color: var(--color_theme_alter, #fff);
    font-size: 9px;
}

/* Value + unit merged into one neutral pill on the right — kept visually
   distinct (gray, not theme-tinted) from the theme-colored qty badge above
   it and the theme-colored label beside it, so it reads as the "answer". */
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_car_day_badge {
    display: inline-flex;
    align-items: baseline;
    flex-shrink: 0;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mpcrbm-cd-bg, #f1f5f9);
    border: 1px solid var(--mpcrbm-cd-border, #e5e7eb);
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_car_day_value {
    font-weight: 700;
    font-size: 13px;
    color: var(--mpcrbm-cd-text, #1f2937);
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_car_day_unit {
    font-weight: 400;
    font-size: 12px;
    color: var(--mpcrbm-cd-text-faded, #6b7280);
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_product_price,
.mpcrbm_car_details_price_box .mpcrbm_transport_summary .mpcrbm_extra_service_summary p:last-child {
    font-weight: 700;
    font-size: 14px;
    color: var(--mpcrbm-cd-text, #1f2937);
}

/* Extra service row ("Driver", etc.) — .price-quantity-box's shared base
   (assets/frontend/mpcrbm_registration.css, reused by the multi-step
   booking flow's own Extra Services step too) stacks price/qty-stepper/
   button in a column, which reads as jumbled/misaligned in this narrower
   sidebar price box. Scoped override puts them in one row instead, without
   touching the shared base other pages rely on. */
.mpcrbm_car_details_price_box .mpcrbm-ex-quantity-box {
    flex-wrap: nowrap;
    gap: 10px;
}

.mpcrbm_car_details_price_box .price-quantity-box {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
    color: var(--mpcrbm-cd-text-faded);
}

.mpcrbm_car_details_price_box .price-quantity-box .mpcrbm-price {
    width: auto;
    white-space: nowrap;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--mpcrbm-cd-text, #1f2937);
}

.mpcrbm_car_details_price_box .price-quantity-box .mpcrbm-price-per-day {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--mpcrbm-cd-text-faded, #6b7280);
}

.mpcrbm_car_details_price_box .price-quantity-box ._mR_min_100 {
    flex-shrink: 0;
    margin-right: 0;
}

/* The shared "[class*='_min_100']" rule (mp_global/assets/mp_style/
   mpcrbm_global.css) forces a 70px min-width onto anything whose class
   contains that substring — including ._mR_min_100 here — reserving more
   width than the compacted qty stepper above actually needs and working
   against the space just freed up for the service name. Two extra classes
   of specificity over that rule's "div.mpcrbm [class*=...]" is enough to
   win without !important. */
.mpcrbm_car_details_price_box .mpcrbm_extra_service_item [class*="_min_100"] {
    min-width: auto;
}

/* Qty stepper — default look (mp_global/assets/mp_style/mpcrbm_global.css)
   is a flat, square-cornered, theme-colored bar with thin divider lines and
   a max-width of 100px. Restyled into a small rounded pill (radius scale
   matching the rest of this page) with light, borderless +/- segments —
   overflow:hidden on the pill clips the flat children to its rounded shape
   instead of needing to round each one individually. Narrowed at the same
   time so it, the price, and the Select button leave the service name
   (.mpcrbm_search_title, above) enough room to stay visible once revealed
   on Select instead of squeezing it down to nothing. */
.mpcrbm_car_details_price_box .price-quantity-box .qtyIncDec {
    max-width: 88px;
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--mpcrbm-cd-border, #e5e7eb);
    border-radius: 999px;
    overflow: hidden;
}

.mpcrbm_car_details_price_box .price-quantity-box .groupContent > * {
    border-left: none;
}

.mpcrbm_car_details_price_box .price-quantity-box .addonGroupContent {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    background: var(--mpcrbm-cd-bg, #f8fafc);
    color: var(--color_theme, #F12971);
    font-size: 11px;
    transition: background .15s ease, color .15s ease;
}

.mpcrbm_car_details_price_box .price-quantity-box .addonGroupContent:hover {
    background: var(--color_theme, #F12971);
    color: var(--color_theme_alter, #fff);
}

.mpcrbm_car_details_price_box .price-quantity-box .inputIncDec {
    padding: 0 2px;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    background: #fff;
}

.mpcrbm_car_details_price_box .price-quantity-box .mpcrbm_price_calculation {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

/* Scoped to the price box specifically — .mpcrbm_car_quantity is also reused
   on search-result cards (templates/registration/vehicle_item*.php), which
   this page's styling must not affect. */
.mpcrbm_car_details_price_box .mpcrbm_car_quantity {
    padding: 10px 0;
    border-top: 1px solid var(--mpcrbm-cd-border, #e5e7eb);
    align-items: center;
}

.mpcrbm_car_details_price_box .mpcrbm_car_quantity_title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mpcrbm-cd-text, #1f2937);
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .total {
    background: #fdf0f4;
    background: color-mix(in srgb, var(--color_theme, #F12971) 8%, transparent);
    border-radius: var(--mpcrbm-cd-radius-sm, 8px);
    padding: 12px 14px;
    margin: 4px 0 0;
    justify-content: space-between;
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .total h6 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mpcrbm-cd-text, #1f2937);
}

.mpcrbm_car_details_price_box .mpcrbm_transport_summary .total h3 {
    font-size: 19px;
    color: var(--color_theme, #F12971);
}

/* ===== BUTTON ===== */
.mpcrbm_car_details_continue_btn {
    width: 100%;
    background: var(--color_theme, #F12971);
    color: var(--color_theme_alter, #fff);
    border: none;
    padding: 13px 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin: 12px 0 0;
    transition: opacity .15s ease, transform .1s ease;
}

.mpcrbm_car_details_continue_btn:hover {
    opacity: .9;
}

.mpcrbm_car_details_continue_btn:active {
    transform: scale(.99);
}

.mpcrbm_already_booked {
    display: block;
    padding: 10px 12px;
    margin-top: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--mpcrbm-cd-radius-sm);
    color: #b91c1c;
    font-size: 13.5px;
}

/* Inline "required" notice next to the pick-up/return date & time fields
   (mpcrbm_registration.js / date-picker.js toggle these instead of an
   alert() popup) — same red palette as .mpcrbm_already_booked above, just
   sized for a small per-field hint rather than a full banner. */
.mpcrbm_field_error {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #b91c1c;
}

.mpcrbm-field-invalid .formControl {
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 1px #fca5a5;
}

/* ===== DRIVER / RENTER INFO ===== */
.mpcrbm_car_details_driver_box {
    background: #fff;
    border: 1px solid var(--mpcrbm-cd-border);
    border-radius: var(--mpcrbm-cd-radius);
    padding: 16px;
    margin-top: 16px;
}

.mpcrbm_car_details_renter_box {
    background: #fff;
    border: 1px solid var(--mpcrbm-cd-border);
    border-radius: var(--mpcrbm-cd-radius);
    padding: 16px;
    margin-top: 16px;
}

.mpcrbm_car_details_driver_box .driver-data {
    display: flex;
    gap: 12px;
}

.driver-data .driver-picuture {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    gap: 6px;
}

.driver-data .verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    font-size: 11.5px;
    font-weight: 600;
}

.driver-data .driver-picuture img {
    width: 88px;
    height: 88px;
    border-radius: var(--mpcrbm-cd-radius-sm);
    border: 1px solid var(--mpcrbm-cd-border);
    object-fit: cover;
}

.driver-data .driver-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
}

.driver-data .driver-info div {
    margin: 4px 0;
    padding-bottom: 4px;
    font-size: 13.5px;
    color: var(--mpcrbm-cd-text);
    border-bottom: 1px solid #f5f5f5;
}

/* ===== GALLERY / LIGHTBOX ===== */
.mpcrbm_gallery_image_fade_out {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mpcrbm_gallery_image_fade_in {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.mpcrbm_gallery_image {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mpcrbm_gallery_image:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.mpcrbm_gallery_image.active {
    outline: 2px solid var(--color_theme, #F12971);
    outline-offset: 1px;
}

.mpcrbm_car_image_details {
    cursor: pointer;
}

.mpcrbm_gallery_image_popup_wrapper {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.88);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.mpcrbm_gallery_image_popup_content {
    position: relative;
    max-width: 90%;
    max-height: 85%;
    top: 10%;
    margin: auto;
}

.mpcrbm_gallery_image_popup_prev_holder {
    display: flex;
    justify-content: space-between;
    max-width: 150px;
    margin: 10px auto;
}

.mpcrbm_gallery_image_popup_item {
    display: none;
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--mpcrbm-cd-radius-sm);
    animation: mpcrbmCdFadeIn 0.3s ease;
}

@keyframes mpcrbmCdFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mpcrbm_gallery_image_popup_container img.active {
    display: block;
    opacity: 1;
}

.mpcrbm_gallery_image_popup_close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, .9);
    border: none;
    color: #1f2937;
    font-size: 16px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

.mpcrbm_gallery_image_popup_prev,
.mpcrbm_gallery_image_popup_next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .85);
    border: none;
    color: #1f2937;
    font-size: 20px;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease;
}

.mpcrbm_gallery_image_popup_prev:hover,
.mpcrbm_gallery_image_popup_next:hover {
    background: #fff;
}

.mpcrbm_gallery_image_popup_prev { left: 14px; }
.mpcrbm_gallery_image_popup_next { right: 14px; }

/* Unused elsewhere in this template today, kept for compatibility with any
   add-on that renders a plain data table into this class. */
.mpcrbm_car_details_table {
    border-left: 1px solid var(--mpcrbm-cd-border);
    border-top: 1px solid var(--mpcrbm-cd-border);
    margin: 0;
    border-radius: var(--mpcrbm-cd-radius);
}

/* ===== FAQ SECTION ===== */
.mpcrbm_car_details_faq_section {
    background: var(--mpcrbm-cd-bg);
    border-radius: var(--mpcrbm-cd-radius-sm);
    box-shadow: none;
}

.mpcrbm_car_details_faq_section h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--mpcrbm-cd-text);
    margin-bottom: 6px;
    text-align: left;
}

.mpcrbm_car_details_divider {
    width: 48px;
    height: 3px;
    margin: 0 0 20px;
    background: var(--color_theme, #F12971);
    border-radius: 50px;
}

.mpcrbm_car_details_faq_wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mpcrbm_car_details_faq_item {
    background: #fff;
    border: 1px solid var(--mpcrbm-cd-border);
    border-radius: var(--mpcrbm-cd-radius-sm);
    overflow: hidden;
    transition: box-shadow .2s ease;
}

.mpcrbm_car_details_faq_item:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}

/* ".mpcrbm button" in mp_global/assets/mp_style/mpcrbm_global.css forces
   display:flex + justify-content:center on every plain <button> in the page
   (class+element beats this rule's single class). Qualifying with the
   wrapper class here — same trick already used above for
   ".mpcrbm_car_details .mpcrbm_car_details_tabs button" — outranks it so the
   question/icon actually stay left-aligned instead of centering. */
.mpcrbm_car_details_faq_wrapper .mpcrbm_car_details_faq_question {
    width: 100%;
    padding: 16px 18px;
    border: none;
    background: none;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mpcrbm-cd-text);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.mpcrbm_car_details_faq_icon {
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--color_theme, #F12971);
    transition: transform .2s ease;
}

.mpcrbm_car_details_faq_item.active .mpcrbm_car_details_faq_icon {
    transform: rotate(45deg);
}

.mpcrbm_car_details_faq_answer {
    display: none;
    padding: 0 18px 16px;
}

.mpcrbm_car_details_faq_answer p {
    margin: 0;
    font-size: 13.5px;
    color: var(--mpcrbm-cd-text-faded);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .mpcrbm_car_details_faq_question {
        font-size: 14px;
        padding: 14px;
    }

    .mpcrbm_car_details_faq_answer p {
        font-size: 13px;
    }
}

/* ===== TERMS & CONDITIONS ===== */
.mpcrbm_car_details_conditions_section {
    width: 100%;
    border-radius: var(--mpcrbm-cd-radius-sm);
    box-shadow: none;
}

.mpcrbm_car_details_conditions_section h3 {
    text-align: left;
    font-size: 20px;
    font-weight: 700;
    color: var(--mpcrbm-cd-text);
    margin-bottom: 6px;
}

.mpcrbm_car_details_conditions_section .divider {
    height: 3px;
    width: 48px;
    background: var(--color_theme, #F12971);
    border-radius: 50px;
    margin-bottom: 20px;
}

.mpcrbm_car_details_tc_wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mpcrbm_car_details_tc_item {
    background: var(--mpcrbm-cd-bg);
    padding: 14px 16px 14px 20px;
    border-radius: var(--mpcrbm-cd-radius-sm);
    position: relative;
    overflow: hidden;
}

.mpcrbm_car_details_tc_item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--color_theme, #F12971);
}

.mpcrbm_car_details_tc_title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mpcrbm-cd-text);
    margin-bottom: 4px;
}

.mpcrbm_car_details_tc_description {
    font-size: 13.5px;
    color: var(--mpcrbm-cd-text-faded);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .mpcrbm_car_details_tc_item {
        padding: 14px;
    }
}

/* ===== SIMILAR RENTALS =====
   "Related Rental" picks (admin/settings/MPCRBM_Tax_Settings.php's Advanced
   tab) rendered as simple preview cards — not the search-flow's
   vehicle_item.php card (that one requires a live date range + AJAX nonce
   context and has its own "Select Car"/cart wiring, not appropriate for a
   plain "here are some other cars" link-through). 3 or fewer: a static
   grid. More than 3: an Owl Carousel (mp_global/assets/owl_carousel — bundled
   and enqueued site-wide already, just never initialized until now; see the
   inline <script> next to this markup in the template). ===== */
.mpcrbm_similar_rentals_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.mpcrbm_similar_rentals_carousel {
    position: relative;
    padding: 0 6px;
}

.mpcrbm_similar_rental_item {
    background: #fff;
    border: 1px solid var(--mpcrbm-cd-border, #e5e7eb);
    border-radius: var(--mpcrbm-cd-radius-sm, 8px);
    overflow: hidden;
    transition: box-shadow .2s ease;
}

.mpcrbm_similar_rentals_grid .mpcrbm_similar_rental_item:hover {
    box-shadow: var(--mpcrbm-cd-shadow, 0 4px 24px rgba(15, 23, 42, .06));
}

.mpcrbm_similar_rental_thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--mpcrbm-cd-bg, #f8fafc);
    overflow: hidden;
}

.mpcrbm_similar_rental_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mpcrbm_similar_rental_item img {
    height: 200px;
}

.mpcrbm_similar_rental_thumb i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 30px;
    color: var(--mpcrbm-cd-text-faded, #6b7280);
}

.mpcrbm_similar_rental_info {
    padding: 12px 14px;
}

.mpcrbm_similar_rental_info h4 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
}

.mpcrbm_similar_rental_info h4 a {
    color: var(--mpcrbm-cd-text, #1f2937) !important;
    text-decoration: none;
}

.mpcrbm_similar_rental_price {
    font-size: 13px;
    font-weight: 700;
    color: var(--color_theme, #F12971);
    margin-bottom: 10px;
}

.mpcrbm_similar_rental_btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--color_theme, #F12971) !important;
    color: var(--color_theme_alter, #fff) !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s ease;
}

.mpcrbm_similar_rental_btn:hover {
    opacity: .88;
}

.mpcrbm_similar_rentals_carousel .owl-nav button.owl-prev,
.mpcrbm_similar_rentals_carousel .owl-nav button.owl-next {
    position: absolute;
    top: 35%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff !important;
    border: 1px solid var(--mpcrbm-cd-border, #e5e7eb) !important;
    color: var(--mpcrbm-cd-text, #1f2937) !important;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.mpcrbm_similar_rentals_carousel .owl-nav button.owl-prev {
    left: -14px;
}

.mpcrbm_similar_rentals_carousel .owl-nav button.owl-next {
    right: -14px;
}

@media (max-width: 768px) {
    .mpcrbm_similar_rentals_grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .mpcrbm_car_details_container {
        flex-direction: column;
    }

    .mpcrbm_car_details_left,
    .mpcrbm_car_details_right {
        flex: 1 1 100%;
    }

    .mpcrbm_car_details_tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    div.mpcrbm h1 {
        font-size: 24px;
    }
}

/* ===== GUIDED SINGLE-DATE FLOW (car-details page only) =====
   templates/registration/single_car_search_details.php wraps the Return
   date/time block in #mpcrbm_date_step_return.mpcrbm-date-step-return,
   starting with .is-locked so it's hidden on first paint (no JS-dependent
   flash). assets/frontend/mpcrbm_registration.js removes .is-locked and
   reveals it once pick-up date + time are both chosen, then marks each step
   .is-complete as it's finished. */
.mpcrbm-date-step-return.is-locked {
    display: none;
}

.mpcrbm-date-step-pickup {
    position: relative;
    transition: box-shadow .2s ease;
}

/* .mpcrbm-date-step-return wraps both the "Return" section label and the
   date/time fields, but the completion border should only outline the
   fields — so it's applied to the inner .mpcrbm_horizontal_date_time_input,
   not the step wrapper itself. */
.mpcrbm-date-step-return .mpcrbm_horizontal_date_time_input {
    position: relative;
    transition: box-shadow .2s ease;
}

.mpcrbm-date-step-pickup.is-complete,
.mpcrbm-date-step-return.is-complete .mpcrbm_horizontal_date_time_input {
    box-shadow: inset 0 0 0 1px #bdb3b6;
    border-radius: var(--mpcrbm-cd-radius-sm, 8px);
}

.mpcrbm-date-step-pickup.is-complete::after,
.mpcrbm-date-step-return.is-complete .mpcrbm_horizontal_date_time_input::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color_theme, #F12971);
    color: var(--color_theme_alter, #fff);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Brief highlight when the "Details" summary updates after a full
   pick-up + return selection — a visible cue that the total just changed,
   not just a silent number swap. */
@keyframes mpcrbmSummaryPulse {
    0%   { background-color: transparent; }
    30%  {
        background-color: #fdf0f4; /* fallback for browsers without color-mix() */
        background-color: color-mix(in srgb, var(--color_theme, #F12971) 10%, transparent);
    }
    100% { background-color: transparent; }
}

.mpcrbm_transport_summary.mpcrbm-summary-pulse {
    animation: mpcrbmSummaryPulse .9s ease;
    border-radius: var(--mpcrbm-cd-radius-sm, 8px);
}

/* Selected date-range + pick-up/return time summary — appears once both
   steps are complete (JS: mpcrbm_registration.js's ".return_time_list li"
   handler). Lives inside the booking form itself, so it shows right where
   the customer just finished picking, before they even scroll to the
   price/day total below. */
.mpcrbm-date-range-summary {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--mpcrbm-cd-bg, #f8fafc);
    border: 1px solid var(--mpcrbm-cd-border, #e5e7eb);
    border-radius: var(--mpcrbm-cd-radius-sm, 8px);
}

.mpcrbm-date-range-summary-range {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mpcrbm-cd-text, #1f2937);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--mpcrbm-cd-border, #e5e7eb);
}

.mpcrbm-date-range-summary-range i {
    color: var(--color_theme, #F12971);
}

.mpcrbm-date-range-summary-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mpcrbm-date-range-summary-time {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mpcrbm-date-range-summary-time-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--mpcrbm-cd-text-faded, #6b7280);
}

.mpcrbm-date-range-summary-time-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mpcrbm-cd-text, #1f2937);
}

@media (max-width: 480px) {
    .mpcrbm-date-range-summary-times {
        grid-template-columns: 1fr;
    }
}