/******************************************************************** ************************************************/
@media only screen and (min-width: 10px) {
	div.mpcrbm_transport_search_area {width: 100%;max-width: 1200px; padding-bottom: 20px; margin-bottom: 20px;}
	div.mpcrbm_transport_search_area div.tabsContentNext {padding: 0; margin:10px; }
	div.mpcrbm_transport_search_area div.mpcrbm_distance_time { margin: var(--dmp) 0 0 0; }
	div.mpcrbm_distance_time h6 {font-size: var(--fs);color: var(--d_color);}
	div.mpcrbm_distance_time strong {font-size: var(--fs);}
	#mpcrbm_map_area { width: 100%; height: 100%; min-height: 200px;border-radius: 15px; }
	div.mpcrbm_form_details_area #mpcrbm_map_area{min-height: 300px;}
	div.mpcrbm_transport_summary,
	div.mpcrbm_extra_service {display: none;}
	div.mpcrbm_transport_search_area div[data-extra-service] {display: none;}
	div.get_details_next_link {display: none;}
	div.mpcrbm_transport_search_area .woocommerce-page span.woocommerce-input-wrapper,
	div.mpcrbm_transport_search_area .woocommerce-page table span {display: initial;}
	div.mpcrbm_transport_search_area .woocommerce-page label {margin: 0 0 var(--dmp_xs) 0;display:initial;}
	div.mpcrbm_transport_search_area .woocommerce-page label img{width:inherit !important;}
	div.mpcrbm_transport_search_area table th,
	div.mpcrbm_transport_search_area table td {border: none;}
	div.mpcrbm_transport_search_area .woocommerce form .form-row {margin-bottom: var(--dmp_xs);}
	div.mpcrbm .tabsContentNext {
		width: auto;
	}
	div.mpcrbm_map_search_result{
		margin-top:10px;
	}
	div.mpcrbm_transport_summary{
		margin: 20px 0;
		background: white;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}
	div.mpcrbm_transport_summary h3{
		margin: 0px 0 12px 0;
	}
	.mpcrbm_transport_summary .book-items{
		background-color: #f7fafc;
		color: #fff;
		padding: 10px;
		border-radius: 5px;
		margin: 10px 0;
	}
	.mpcrbm_transport_summary .total{
		background-color: #fdf0f4;
        color: #000000;
        padding: 10px;
        border-radius: 5px;
        margin: 10px 0;
        display: flex;
        align-items: center;
	}

	.mpcrbm_transport_summary .total h6,.mpcrbm_transport_summary .total h3{
		margin: 0;
	}

	/* ===== "Details" order summary — Choose a vehicle step only
	   (templates/registration/choose_vehicles.php, get_search_result.php) =====
	   .mpcrbm_transport_summary is shared more broadly (summary.php has a
	   different structure entirely; the car-details page has its own copy
	   styled separately in assets/frontend/mpcrbm_car_details.css) — scoped
	   under .mpcrbm_mainSection, the wrapper only these two templates use, so
	   nothing else is affected. Same soft tinted-panel look, ported from the
	   car-details page's version (minus its "Total Rental Duration" row,
	   which doesn't exist in this template's markup). */
	.mpcrbm_mainSection .mpcrbm_transport_summary {
		--mpcrbm-ts-bg: #f8fafc;
		--mpcrbm-ts-border: #e5e7eb;
		--mpcrbm-ts-text: #1f2937;
		--mpcrbm-ts-text-faded: #6b7280;
		--mpcrbm-ts-radius: 8px;
		margin: 16px 0;
		padding: 16px;
		background: var(--mpcrbm-ts-bg);
		border: 1px solid var(--mpcrbm-ts-border);
		border-radius: var(--mpcrbm-ts-radius);
		box-shadow: none;
	}
	.mpcrbm_mainSection .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-ts-text-faded);
		margin: 0 0 12px;
	}
	.mpcrbm_mainSection .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_mainSection .mpcrbm_transport_summary .divider {
		margin: 0 0 12px;
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .book-items,
	.mpcrbm_mainSection .mpcrbm_transport_summary .mpcrbm_extra_service_summary > div {
		background: none;
		color: var(--mpcrbm-ts-text-faded);
		padding: 0 0 12px;
		margin: 0 0 12px;
		border-bottom: 1px dashed var(--mpcrbm-ts-border);
		border-radius: 0;
		font-size: 13px;
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .book-items {
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	/* 3 children now (name+qty, price, rental-duration) — order keeps
	   name+qty left / price right on one line, duration full-width below. */
	.mpcrbm_mainSection .mpcrbm_transport_summary .book-items > ._dFlex_alignCenter {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .book-items > .mpcrbm_product_price {
		order: 2;
		flex-shrink: 0;
		margin-left: 10px;
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .book-items > .mpcrbm_car_day {
		order: 3;
		flex: 1 1 100%;
		margin-top: 4px;
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .book-items ._dFlex_alignCenter,
	.mpcrbm_mainSection .mpcrbm_transport_summary .mpcrbm_extra_service_summary ._dFlex_alignCenter {
		gap: 8px;
		flex-wrap: wrap;
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .book-items .fa-check-square,
	.mpcrbm_mainSection .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_mainSection .mpcrbm_transport_summary .mpcrbm_product_name {
		font-size: 14px;
		font-weight: 700;
		color: var(--mpcrbm-ts-text);
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .mpcrbm_car_qty_display,
	.mpcrbm_mainSection .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_mainSection .mpcrbm_transport_summary .mpcrbm_product_price,
	.mpcrbm_mainSection .mpcrbm_transport_summary .mpcrbm_extra_service_summary p:last-child {
		font-weight: 700;
		font-size: 14px;
		color: var(--mpcrbm-ts-text);
	}
	.mpcrbm_mainSection .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_mainSection .mpcrbm_transport_summary .mpcrbm_car_day_label {
		display: inline-flex;
		align-items: center;
		gap: 7px;
	}
	.mpcrbm_mainSection .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;
	}
	.mpcrbm_mainSection .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-ts-bg);
		border: 1px solid var(--mpcrbm-ts-border);
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .mpcrbm_car_day_value {
		font-weight: 700;
		font-size: 13px;
		color: var(--mpcrbm-ts-text);
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .mpcrbm_car_day_unit {
		font-weight: 400;
		font-size: 12px;
		color: var(--mpcrbm-ts-text-faded);
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .total {
		background: #fdf0f4;
		background: color-mix(in srgb, var(--color_theme, #F12971) 8%, transparent);
		border-radius: var(--mpcrbm-ts-radius);
		padding: 12px 14px;
		margin: 4px 0 0;
		justify-content: space-between;
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .total h6 {
		font-size: 13.5px;
		font-weight: 600;
		color: var(--mpcrbm-ts-text);
	}
	.mpcrbm_mainSection .mpcrbm_transport_summary .total h3 {
		font-size: 19px;
		color: var(--color_theme, #F12971);
	}

	div.mpcrbm_transport_search_area{
		margin: auto;
	}
	/* ===== Step progress indicator (Enter Ride Details / Choose a vehicle / Place
	   Order) ===== #mpcrbm_progress_bar_holder only ever displays where
	   progressbar='yes' is passed into registration_layout.php — the car-details
	   page's own booking widget always passes progressbar='no' (stays
	   display:none there via .dNone), so restyling it directly by ID is safe.
	   Old design drew the connecting line off the *circle* with a fixed pixel
	   offset (left: calc(50% + 31px), tied to one exact circle diameter, needing
	   a second hand-tuned offset at the 600px breakpoint below). New line lives
	   on the *step item* itself (left: -50%; width: 100%) so it always spans
	   exactly the gap between two circle centers, at any --mpcrbm-step-size. */
	#mpcrbm_progress_bar_holder {
		--mpcrbm-step-size: 38px;
		padding-bottom: 20px;
	}
	#mpcrbm_progress_bar_holder .tabItemNext {
		min-height: auto;
		gap: 8px;
	}
	#mpcrbm_progress_bar_holder [class*="circleIcon"] {
		width: var(--mpcrbm-step-size);
		height: var(--mpcrbm-step-size);
		min-width: var(--mpcrbm-step-size);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: 700;
		background-color: #eef1f5;
		color: #9aa3af;
	}
	#mpcrbm_progress_bar_holder [class*="circleIcon"]::after {
		content: none;
	}
	#mpcrbm_progress_bar_holder .tabItemNext::before {
		content: "";
		position: absolute;
		top: calc(var(--mpcrbm-step-size) / 2 - 1px);
		left: -50%;
		width: 100%;
		height: 2px;
		background: #eef1f5;
	}
	#mpcrbm_progress_bar_holder .tabItemNext:first-child::before {
		display: none;
	}
	#mpcrbm_progress_bar_holder .tabItemNext.active::before,
	#mpcrbm_progress_bar_holder .tabItemNext.active [class*="circleIcon"] {
		background-color: var(--color_theme);
	}
	#mpcrbm_progress_bar_holder .tabItemNext.active [class*="circleIcon"] {
		color: #FFF;
	}
	#mpcrbm_progress_bar_holder .tabItemNext.active [class*="circleIcon"].success {
		background-color: var(--color_success);
	}
	#mpcrbm_progress_bar_holder .circleTitle {
		position: static;
		width: auto;
		margin: 0 !important;
		font-size: 12.5px;
		font-weight: 600;
		color: #9aa3af !important;
		text-transform: none;
	}
	/* !important: the active theme can style h6 (this element's tag) with its
	   own accent color at higher specificity than this plugin's own base
	   rules (mp_global/assets/mp_style/mpcrbm_global.css) reach — without it,
	   an in-progress step's label could render in the theme's link/heading
	   color instead of this component's own palette. */
	#mpcrbm_progress_bar_holder .tabItemNext.active .circleTitle {
		font-weight: 700;
		color: #152C5B !important;
	}
	/*********************/
	div.mpcrbm_transport_search_area .mpcrbm_search_area {
		border-radius: var(--dbrl);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		background-color: #F5F7FF;
	}
	
	div.mpcrbm_transport_search_area .mpcrbm_search_area h3 {text-transform: uppercase;color: #152C5B;}
	div.mpcrbm_transport_search_area .mpcrbm_search_area label {font-weight: 400;color: #152C5B;}
	div.mpcrbm_transport_search_area .mpcrbm_search_area label .formControl {
		height: 37px;
		color: #5b6b7a;
		font-weight: 400;
		font-size: 13px;
		padding: 8px 17px;
		border-color: #EBECEE;
		background-image: url('../../mp_global/assets/images/arrow_down.svg');
		background-repeat: no-repeat; 
		background-position: calc(100% - var(--dmp_xs)); 
		background-size: auto;
		-webkit-appearance: none;
		border: unset !important;
		/*border-radius: 10px;*/
	}
	.mpcrbm .mpBtn, .mpcrbm [class*="_mpBtn"], .mpcrbm button {
		font-size:16px;
    	font-weight:bold;
	}
	.mpcrbm_transport_search_area .input_select{
		width: 100%;
	}
	div.mpcrbm_transport_search_area .mpcrbm_map_area {max-width: calc(65% - 30px);width: 65%;}
	div.mpcrbm_form_details_area div.mpcrbm_map_area{max-width: 100%;width: 100%;}
	div.mpcrbm_transport_search_area #mpcrbm_start_date.formControl {
		/*padding: var(--dmp_xs) 35px var(--dmp_xs) 60px;*/
	}
	div.mpcrbm_transport_search_area #mpcrbm_return_date.formControl {
		/*padding: var(--dmp_xs) 35px var(--dmp_xs) 60px;*/
	}
	div.mpcrbm_transport_search_area div.input_select .formControl {
		/*padding: var(--dmp_xs) 35px var(--dmp_xs) 60px;*/
	}
	div.mpcrbm_transport_search_area .mpcrbm_left_icon { position: absolute; left: 1px; bottom: 1px; width: 45px !important; font-size: 25px; background-color: #fff; color: #666666; border-radius: var(--dbr) 0 0 var(--dbr); height: 46px; margin: 0 !important;}
	/*********************/
	div.mpcrbm_transport_search_area .leftSidebar h3 {color: #152C5B; font-size: 24px;font-weight: 700;text-transform: uppercase;}
	div.mpcrbm_transport_search_area .leftSidebar h6 {color: #152C5B;font-size: 17px;font-weight: 600;}
	div.mpcrbm_transport_search_area .leftSidebar p {color: #2B1818;font-size: 16px;font-weight: 400;}
	div.mpcrbm_booking_item h5 {color: #000;font-size: 20px;font-weight: 600}
	div.mpcrbm_booking_item h4 {color: #000;font-size: 20px;font-weight: 600;margin:0;}
	.mpcrbm_booking_item_hidden{display: none !important;}
	div.mpcrbm_transport_search_area ul.list_inline_two li {border: none;color: #626262;font-weight: 400;font-size: 14px;}
	div.mpcrbm_transport_search_area button.mpcrbm_price_calculation,
	div.mpcrbm_transport_search_area button.mpcrbm_transport_select {
		background-color: var(--color_theme);
		border: 1px solid var(--color_theme);
		color: #fff;
		padding: 10px 18px;
  		border-radius: 50px;
		cursor: pointer;
		transition: transform .15s ease, box-shadow .15s ease;
	}
	div.mpcrbm_transport_search_area button.mpcrbm_price_calculation:hover,
	div.mpcrbm_transport_search_area button.mpcrbm_transport_select:hover {
		transform: translateY(-1px);
		box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
	}

	.div.mpcrbm_transport_search_area .mpcrbm_transport_select:hover span{
		color: var(--color_theme_alter);
	}
	div.mpcrbm_transport_search_area button.mpcrbm_price_calculation.mActive,
	div.mpcrbm_transport_search_area button.mpcrbm_price_calculation.active_select,
	div.mpcrbm_transport_search_area button.mpcrbm_transport_select.active_select {
		background-color: var(--color_success);
		border: 1px solid var(--color_success);
		color: var(--color_theme_alter);
	}
	button.mpcrbm_price_calculation span:nth-child(2){
		margin-right: 5px;
	}
	div.mpcrbm_transport_search_area div.sticky_on_scroll {
		/*min-height: 400px;*/
		overflow: auto;
		/*border: 1px solid var(--color_border);*/
		border: 1px solid #e5e7eb;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		border-radius: 12px;
	}
	 .mpcrbm-image-box{
		width:35%;
		height: 200px;
		/* align-items:stretch on .mpcrbm_booking_vehicle (below) is for the
		   *details* column matching a shorter image, not the other way round —
		   without this fixed height the image stretched to match whatever
		   height the details column grew to (specs wrapping, badges, etc.),
		   which could make it much taller than a normal thumbnail. */
		align-self: flex-start;
	}
	 .mpcrbm-image-box .bg_image_area{
		width: 100%;
		height: 100%;
	 }

	div.mpcrbm_transport_search_area div.mpcrbm_list_details {
		width: 65%;
		padding: 16px 20px;
	}
	div.mpcrbm_list_details h2{
		font-size: 19px;
		font-weight: 700;
		color: #1f2937;
		margin-bottom: 0;
	}
	/* Car name + Early Bird badge on one line — the badge (templates/
	   registration/vehicle_item.php, vehicle_item_search_form.php) moved
	   here from the price column below, where it used to be a full-width
	   banner; .mpcrbm_early_bird_promotion_badge's width/justify-content
	   are overridden further down to fit this compact, title-row context
	   instead. */
	.mpcrbm_title_row{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 10px;
	}
	.mpcrbm_title_row h2{
		flex: 1 1 auto;
		min-width: 0;
	}
	.mpcrbm_title_row .mpcrbm_early_bird_promotion_badge{
		width: auto;
		flex-shrink: 0;
		margin: 0 !important;
		padding: 5px 10px;
	}
	/* 9.5px was too small for bold white-on-gradient text — legible but reads
	   as fuzzy/blurred at that size due to anti-aliasing on thin strokes.
	   -webkit-font-smoothing/-moz-osx-font-smoothing crisp up light text on a
	   saturated background specifically (browsers default to a heavier,
	   softer smoothing pass there otherwise). */
	.mpcrbm_title_row .mpcrbm_early_bird_promotion_badge .early_bird_text strong,
	.mpcrbm_title_row .mpcrbm_early_bird_promotion_badge .early_bird_text span{
		font-size: 10.5px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.mpcrbm-price{
		font-size: 1.3em;
		font-weight: 800;
		color: #111827;
		text-align: end;
	}
	/* Early Bird pricing (templates/registration/vehicle_item.php,
	   vehicle_item_search_form.php) — previously styled entirely with inline
	   style="" attributes in the template, so it didn't match the rest of the
	   redesigned price block at all (plain browser-default sizing/spacing).
	   .mpcrbm-discounted-price plays the same role .mpcrbm-price does when
	   there's no discount, so it gets the identical treatment for
	   consistency; .mpcrbm-original-price is its struck-through companion. */
	/* Both plain <div>s inside a plain block .mpcrbm-price-container, so they
	   stacked on separate lines by default — inline-block puts the struck
	   original price and the final price on one line, "$10.00 $9.00", instead. */
	.mpcrbm-price-container{
		text-align: right;
	}
	.mpcrbm-original-price{
		display: inline-block;
		text-decoration: line-through;
		color: #94a3b8;
		font-size: 12px;
		margin-right: 6px;
		vertical-align: baseline;
	}
	/* WooCommerce's own price markup — a <span class="woocommerce-Price-amount">
	   nested inside — evidently sets its own text-decoration (likely "none"
	   from WooCommerce core or the active theme's price styling), which wins
	   over the line-through set on this wrapping div above: a descendant that
	   sets its own text-decoration value doesn't inherit the ancestor's line,
	   even through plain inline text. Targeting the WooCommerce span directly
	   with !important forces the strike to actually render. */
	.mpcrbm-original-price .woocommerce-Price-amount{
		text-decoration: line-through !important;
	}
	.mpcrbm-discounted-price{
		display: inline-block;
		font-size: 1.3em;
		font-weight: 800;
		color: #111827;
		vertical-align: baseline;
	}
	/* Wide centered banner pill, sitting above the price (moved there in the
	   template — templates/registration/vehicle_item.php,
	   vehicle_item_search_form.php) instead of a corner tag or an inline row
	   below the price. */
	.mpcrbm_early_bird_promotion_badge{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 100%;
		margin: 0 0 8px !important;
		padding: 7px 14px;
		background: #22c55e;
		background: linear-gradient(135deg, #4ade80, #16a34a);
		border-radius: 999px;
		box-shadow: 0 4px 10px rgba(22, 163, 74, .3);
		text-align: center;
	}
	.mpcrbm_early_bird_promotion_badge .fa-clock{
		flex-shrink: 0;
		font-size: 11px;
		color: #fff;
	}
	.mpcrbm_early_bird_promotion_badge .early_bird_text{
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1.3;
	}
	.mpcrbm_early_bird_promotion_badge .early_bird_text strong{
		font-size: 11px;
		font-weight: 800;
		color: #fff;
		text-transform: uppercase;
		letter-spacing: .02em;
	}
	.mpcrbm_early_bird_promotion_badge .early_bird_text span{
		font-size: 11px;
		font-weight: 600;
		color: #fff;
	}
	.mpcrbm_price-total{
		margin-top: 2px; 
		color: #666; 
		font-size: 0.85em;
	}
	.mpcrbm_price-total span{
		color: #4CAF50; 
		font-weight: bold; 
		margin-left: 5px;
	}
	.mpcrbm_summary_show{
		width: 25%;
		display: flex;
		position: relative;
		flex-direction: column;
		gap: 2px;
		padding: 12px 14px;
		background-color: #fff;
		border: 1px solid #e5e7eb;
		justify-content: center;
		border-radius: 12px;
		font-weight: 600;
	}
	/* Icon as its own leading badge instead of sitting inline before the label
	   text — previously the icon's width pushed "Pickup Location" to the right
	   while the value <p> below it (no icon) started flush left, so label and
	   value didn't line up. Label + value now share one column
	   (.mpcrbm_summary_text) that starts at the same x position either way. */
	.mpcrbm_summary_row{
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
	}
	.mpcrbm_summary_icon{
		flex-shrink: 0;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #f1f5f9;
		color: var(--color_theme, #F12971);
		font-size: 14px;
	}
	.mpcrbm_summary_text{
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}


}
/******************************************************************** Responsive ************************************************/

@media only screen and (max-width:1200px) {
	div.mpcrbm_transport_search_area .mpcrbm_map_area{width:100%;max-width:100%;}
	div.mpcrbm_transport_search_area div.mpcrbm_booking_item,
	div.mpcrbm_pick_up_details > .justifyBetween {-webkit-flex-direction: column;flex-direction: column;}
	div.mpcrbm_transport_search_area .mpcrbm_search_area.inputHorizontal,
	div.mpcrbm_transport_search_area .mpcrbm_map_area,
	div.mpcrbm_transport_search_area .leftSidebar,
	div.mpcrbm_transport_search_area .leftSidebar .sticky_area,
	div.mpcrbm_transport_search_area .mainSection {width: 100%;max-width: 100%;}
	div.mpcrbm_transport_search_area #mpcrbm_map_area {margin: var(--dmp) 0;min-height: 400px;}
	div.mpcrbm_transport_search_area .mainSection {margin: var(--dmp) 0 0 0;}
	div.mpcrbm_transport_search_area ul.list_inline_two li {width: 100%;}
	div.mpcrbm_transport_search_area div.mpcrbm_list_details [class*="_min_150"],
	div.mpcrbm_transport_search_area button.mpcrbm_transport_select {width: auto;min-width: 100px;}
	
	.mpcrbm_booking_item .mpcrbm-image-box{
		width: 100%;
		flex-shrink: 0;
	}
	.mpcrbm-image-box{
		width: 100%;
		height: 200px;
	}
	.mpcrbm-image-box img{
		width: 100%;
		
		object-fit: cover;
	}
	 div.mpcrbm_transport_search_area div.mpcrbm_list_details {
		width:100%;
		padding: 10px;
	}
	.mpcrbm_booking_summary_description{
		flex-wrap: wrap;
	}
	.mpcrbm_summary_show{
	 width:48.5%;
	}
}
@media only screen and (max-width: 600px) {
	/* Only --mpcrbm-step-size needs to change here — the connector line
	   (.tabItemNext::before, defined above) recalculates its position from
	   that variable automatically instead of needing its own pixel offset. */
	#mpcrbm_progress_bar_holder {
		--mpcrbm-step-size: 28px;
	}
	#mpcrbm_progress_bar_holder .circleTitle {
		font-size: 10.5px;
	}
}
.mpcrbm_transport_search_area{
	margin: 0 auto;
}

#ui-datepicker-div {
	width:auto;
}



 .mpcrbm_next_button{
	 width: 90% !important;
	 max-width: 90% !important;
	 padding: 12px !important;
	 margin: 10px !important;
 }

 /* Persistent Book Now — last section of the search-results page
    (templates/registration/choose_vehicles.php, get_search_result.php).
    .mpcrbm_next_button (above) forces width:90%!important for its original
    use (the sidebar "Previous" button, templates/registration/
    summary_new.php) — overridden here to a natural content width so
    right-aligning it via the flex holder below is actually visible instead
    of it still spanning almost the full row regardless of alignment. */
 .mpcrbm_book_now_holder{
	 display: flex;
	 justify-content: flex-end;
 }
 .mpcrbm_book_now_holder .mpcrbm_book_now{
	 width: auto !important;
	 max-width: none !important;
	 margin: 10px 0 !important;
 }

 /* Starts disabled until a vehicle is selected — native [disabled] blocks
    the click, but the shared "_successButton" green fill (mp_global/assets/
    mp_style/mpcrbm_global.css) doesn't change on its own, so it'd otherwise
    look identically clickable either way. */
 .mpcrbm_book_now:disabled{
	 opacity: .5;
	 cursor: not-allowed;
	 background-color: #9aa3af !important;
	 border-color: #9aa3af !important;
 }

 .mpcrbm_dFlex_fdColumn_btLight{
	 background: #f7f7fd;
	 /*border: 1px solid #e5e7eb;*/
	 /*border-radius: 20px;*/
	 padding: 10px 10px;
	 height: fit-content;
	 /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);*/
 }
 .mpcrbm_summary_title{
	 font-size: 22px;
	 font-weight: 600;
	 margin-bottom:10px;
	 color: #2c3e50;
	 display: flex;
	 align-items: center;
	 gap: 5px;
 }
 .mpcrbm_summary_title i{
	color: var(--color_theme);
 }

 .mpcrbm_booking_vehicle {
	 background: white;
	 border: 1px solid #e5e7eb;
	 border-radius: 16px;
	 box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
	 transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
	 display: flex;
	 justify-content: space-between;
	 align-items: stretch;
	 margin-bottom: 14px;
	 /* Clips .mpcrbm-image-box's flush left edge to this card's own rounded
	    corner instead of needing radius+overflow on the image box itself
	    (which previously had border-radius with no overflow:hidden, so it
	    never actually clipped anything — the image always showed square
	    corners regardless). */
	 overflow: hidden;
 }
 .mpcrbm_booking_vehicle:hover {
	 box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
	 transform: translateY(-2px);
	 border-color: #d7dbe3;
 }

 .mpcrbm .mpcrbm-image-box img:not(.wp_editor img){
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
 }
 .mpcrbm_group {
	 margin: 20px 0 10px 0;
 }

 .mpcrbm_pickup_drop_off_checkbox{
	 display: flex;
	 flex-direction: column;
	 margin-right: 10px;
	 min-width: 220px;
 }

 .mpcrbm_location_checkbox{
	 display: flex;
	 flex-direction: column;
 }
.mpcrbm_booking_vehicle .woocommerce-Price-amount{font-size:22px;}
.mpcrbm_deposit_wrap .woocommerce-Price-amount{font-size:12px;}
.mpcrbm .mpcrbm_extra_service .dLayout{border-radius:20px; background-color: #f7f5f5;}
div.mpcrbm .mpcrbm_extra_service h3{margin:0px 0 12px 0;}
h2#mpcrbm_title_change{color:white;}
.mpcrbm_car_specs_lists{
	display: flex;
	width: 60%;
	flex-wrap: wrap;
	gap: 10px 8px;
	font-size: 16px;

}

.mpcrbm_car_spec{
	display: flex;
	align-items: center;
	gap: 8px;
	width: 48%;
	margin: 0;
}
.mpcrbm_car_spec i{
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f1f5f9;
	color: var(--color_theme, #F12971);
	font-size: 13px;
}

.mpcrbm_car_spec .spec-label{
	font-size: 12px;
	color: #64748b;
}
.mpcrbm_car_spec .spec-value{
	font-size: 12.5px;
	font-weight: 600;
	color: #334155;
}

.mpcrbm_price-breakdown {
	font-size: 12.5px;
	color: #94a3b8;
	font-weight: 500;

}

.mpcrbm_list{
	gap:10px;
}

.mpcrbm-discount-seasonal .mpcrbm_price-breakdown .amount{
    text-decoration: line-through;
}

.mpcrbm_line_through{
	text-decoration: line-through;
}

 .mpcrbm_price-main {
	 font-size: 18px;
	 font-weight: 800;
	 color: var(--color_success);
 }
 .mpcrbm_seasonal-info {
	 font-size: 12px;
	 color: #d97706;
	 background: #fefce8;
	 padding: 5px;
	 border-radius: 5px;
	 display: inline-block;
	 border: 1px solid #fde68a;
	 text-align: center;
 }

 .mpcrbm_discount_info{
	 display: flex;
	 flex-direction: column;
	 text-align: center;
	 gap:5px;
 }

 .mpcrbm_100_width{
	 width: 100%;
 }
 

 .mpcrbm_price-total {
	 font-size: 12.5px;
	 color: #64748b;
	 font-weight: 500;
	 padding: 2px 0px;
	 text-align: right;
 }
 .mpcrbm_booking_vehicle .mpcrbm_discount-info .woocommerce-Price-amount {
	 font-size: 12px !important;
 }
 .mpcrbm_booking_vehicle .mpcrbm_price-breakdown .woocommerce-Price-amount {
	 font-size: 16px !important;
	 /*text-decoration: line-through;*/
 }
 .mpcrbm_booking_vehicle .mpcrbm_price-main .woocommerce-Price-amount {
	 font-size: 16px !important;
	 /*text-decoration: line-through;*/
 }

 .mpcrbm_discount-info {
	 font-size: 12px;
	 color: #059669;
	 font-weight: 600;
	 background: #f0fdf4;
	 padding: 5px;
	 border-radius: 5px;
	 display: inline-block;
	 border: 1px solid #bbf7d0;
 }
 .mpcrbm_booking_items{
	 display: flex;
	 flex-direction: column;
	 justify-content: flex-end;
	 text-align: center;
	 align-items: end;
	 gap:5px;
 }

 .mpcrbm_textRight{
	 text-align: right;
 }
 .mpcrbm_duration-highlight {
	color: var(--color_success);
	border-radius: 12px;
	text-align: center;
 }
 .mpcrbm_duration-days {
	 font-size:14px;
	 font-weight: 700;
 }

 .mpcrbm_duration-label {
	 font-size: 12px;
	 opacity: 0.9;
	 text-transform: uppercase;
	 letter-spacing: 1px;
	 margin-top: 4px;
 }

 .mpcrbm_feature_icon_color_1 {
	 color: #0a4b78 !important;
 }
 .mpcrbm_feature_icon_color_2 {
	 color: #e67e22 !important;
 }
 .mpcrbm_feature_icon_color_3 {
	 color: #27ae60 !important;
 }
 .mpcrbm_feature_icon_color_4 {
	 color: #8e44ad !important;
 }
 .mpcrbm_feature_icon_color {
	 color: #e67e22 !important;
 }

.mpcrbm_add_multiple_qty{
	display: flex;
	justify-content: end;
	padding: 8px 0;
}

.mpcrbm_search_result_holder{
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.mpcrbm_main_content{
	display: flex;
	flex-direction: column;
	width: calc( 100% - 250px );
}

 .mpcrbm_left_filter{
	 display: flex;
	 flex-direction: column;
	 width: 250px;
	 border-radius: 5px;
 }

 .mpcrbm-left-filter {
	 background: #fff;
	 padding: 10px;
	 border-radius: 10px;
	 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
	.mpcrbm-filter-group {
		margin-bottom: 20px;
		border: 1px solid #ddd;
		border-radius: 10px;
		padding: 10px;
	}
   div.mpcrbm .mpcrbm-filter-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	border-bottom: 1px solid #eee;
	padding-bottom: 4px !important;
	cursor: pointer;
	user-select: none;
 }
 .mpcrbm-filter-arrow {
	flex-shrink: 0;
	font-size: 12px;
	color: #888;
	transition: transform .25s ease;
 }
 /* Collapsed state toggled on .mpcrbm-filter-group by the click handler on
    .mpcrbm-filter-title (assets/frontend/mpcrbm_registration.js) — the
    arrow rotates to point right and the list collapses via max-height
    (not display:none) so the height change can transition smoothly. */
 .mpcrbm-filter-group.mpcrbm-filter-collapsed .mpcrbm-filter-arrow {
	transform: rotate(-90deg);
 }
 .mpcrbm-filter-group.mpcrbm-filter-collapsed .mpcrbm-filter-title {
	border-bottom: none;
 }
 .mpcrbm-filter-list {
	list-style: none;
	padding-left: 10px;
	margin: 0;
	padding-top: 8px !important;
	max-height: 500px;
	overflow: hidden;
	opacity: 1;
	transition: max-height .3s ease, opacity .2s ease, padding-top .2s ease;
 }
 .mpcrbm-filter-group.mpcrbm-filter-collapsed .mpcrbm-filter-list {
	max-height: 0;
	opacity: 0;
	padding-top: 0 !important;
 }
 .mpcrbm-filter-list li {
	 margin: 4px 0;
 }
 .mpcrbm-filter-list input[type="checkbox"] {
	 margin-right: 6px;
	 cursor: pointer;
 }

 button.mpcrbm_filter_btn {
	 background: #007bff;
	 color: #fff;
	 border: none;
	 border-radius: 8px;
	 padding: 8px 16px;
	 font-size: 15px;
	 display: flex;
	 align-items: center;
	 gap: 6px;
	 cursor: pointer;
	 transition: 0.3s;
	 width: 100%;
	 margin-bottom: 10px;

 }
 .mpcrbm_filter_btn:hover {
	 background: #0056b3;
 }

 .mpcrbm_extra_service_layout{
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	margin-bottom: 10px;
 }
 .mpcrbm_extra_service_layout_details{
	 max-width: 360px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	margin-bottom: 10px;
 }
	.price-quantity-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.price-quantity-box .mpcrbm-price{
		font-size: 1.2em;
		font-weight: bold;
		color: #2c3338;
		text-align: end;
	}
	.mpcrbm-ex-quantity-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.mpcrbm-ex-quantity-box .mpcrbm-price{
		font-size: 1.2em;
		font-weight: bold;
		color: #2c3338;
		text-align: end;
	}

	/* ===== Extra Features row — single-line alignment (search-results/
	   choose-vehicle step only) ===== .mpcrbm_extra_service_layout is this
	   page's own wrapper class (templates/registration/extra_service.php sets
	   $mpcrbm_extra_service_class to this — car_details.php uses
	   'mpcrbm_extra_service_layout_details' instead, already styled
	   separately in assets/frontend/mpcrbm_car_details.css). Ports that same
	   "name / price-per-day / Select button all on one row" redesign here. */
	.mpcrbm_extra_service_layout {
		--mpcrbm-es-border: #e5e7eb;
		--mpcrbm-es-text: #1f2937;
		--mpcrbm-es-text-faded: #6b7280;
		--mpcrbm-es-bg: #f8fafc;
	}
	.mpcrbm_extra_service_layout .mpcrbm_extra_service_item .fdColumn._fullWidth {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 12px;
		min-width: 0;
	}
	.mpcrbm_extra_service_layout .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_extra_service_layout .mpcrbm_extra_service_item .mpcrbm-ex-quantity-box {
		flex-shrink: 0;
		flex-wrap: nowrap;
		gap: 10px;
	}
	.mpcrbm_extra_service_layout .price-quantity-box {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: nowrap;
		gap: 10px;
		color: var(--mpcrbm-es-text-faded);
	}
	.mpcrbm_extra_service_layout .price-quantity-box .mpcrbm-price {
		width: auto;
		white-space: nowrap;
		text-align: left;
		font-size: 13px;
		font-weight: 700;
		color: var(--mpcrbm-es-text);
	}
	.mpcrbm_extra_service_layout .price-quantity-box .mpcrbm-price-per-day {
		display: block;
		font-size: 12px;
		font-weight: 400;
		color: var(--mpcrbm-es-text-faded);
	}
	.mpcrbm_extra_service_layout .price-quantity-box ._mR_min_100 {
		flex-shrink: 0;
		margin-right: 0;
	}
	/* Overrides the shared 70px min-width floor (mp_global/assets/mp_style/
	   mpcrbm_global.css, "[class*='_min_100']") the same way the car-details
	   page's version does — two extra classes of specificity is enough to
	   win without !important. */
	.mpcrbm_extra_service_layout .mpcrbm_extra_service_item [class*="_min_100"] {
		min-width: auto;
	}
	.mpcrbm_extra_service_layout .price-quantity-box .qtyIncDec {
		max-width: 88px;
		display: flex;
		align-items: stretch;
		background: #fff;
		border: 1px solid var(--mpcrbm-es-border);
		border-radius: 999px;
		overflow: hidden;
	}
	.mpcrbm_extra_service_layout .price-quantity-box .groupContent > * {
		border-left: none;
	}
	.mpcrbm_extra_service_layout .price-quantity-box .addonGroupContent {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 28px;
		min-height: 28px;
		background: var(--mpcrbm-es-bg);
		color: var(--color_theme, #F12971);
		font-size: 11px;
		transition: background .15s ease, color .15s ease;
	}
	.mpcrbm_extra_service_layout .price-quantity-box .addonGroupContent:hover {
		background: var(--color_theme, #F12971);
		color: var(--color_theme_alter, #fff);
	}
	.mpcrbm_extra_service_layout .price-quantity-box .inputIncDec {
		padding: 0 2px;
		font-size: 12.5px;
		font-weight: 700;
		text-align: center;
		background: #fff;
	}
	.mpcrbm_extra_service_layout .price-quantity-box .mpcrbm_price_calculation {
		flex-shrink: 0;
		padding: 6px 12px;
		border-radius: 999px;
		font-size: 12px;
		white-space: nowrap;
	}

 .mpcrbm_discount_booking{
	 display: flex;
	 flex-direction: column;
	 gap: 10px;
	 justify-content: end;
	 align-items: revert;
	 width: 38%;
 }

 .mpcrbm_car_quantity{
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 background-color: #f8fafc;
	 border: 1px solid #e5e7eb;
	 padding: 8px 10px;
	 border-radius: 10px;
 }

 .mpcrbm_car_quantity_title{
	 padding: 5px;
	 margin-top: 2px;
 }

 /* Single-unit fallback (templates/registration/vehicle_item.php,
    vehicle_item_search_form.php) — the real qty stepper wraps its input in
    .groupContent.qtyIncDec, which sizes it via flex; this direct child has no
    such wrapper, so the shared .formControl width:100% (mp_global/assets/
    mp_style/mpcrbm_global.css) would otherwise stretch it to fill the row. */
 .mpcrbm_car_quantity > input.inputIncDec{
	 width: 44px;
	 flex: 0 0 auto;
	 text-align: center;
	 border-radius: 6px;
 }

 /* Qty stepper — default look (mp_global/assets/mp_style/mpcrbm_global.css) is a
    flat, square-cornered, theme-colored bar with thin divider lines. Restyled
    into the same small rounded pill used on the car-details page's price box
    (assets/frontend/mpcrbm_car_details.css) for a consistent look across the
    plugin, scoped to this vehicle card only. */
 .mpcrbm_booking_vehicle .qtyIncDec {
	 display: flex;
	 align-items: stretch;
	 max-width: 110px;
	 background: #fff;
	 border: 1px solid #e5e7eb;
	 border-radius: 999px;
	 overflow: hidden;
 }
 .mpcrbm_booking_vehicle .groupContent > * {
	 border-left: none;
 }
 .mpcrbm_booking_vehicle .addonGroupContent {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 min-width: 28px;
	 min-height: 28px;
	 background: #f8fafc;
	 color: var(--color_theme, #F12971);
	 font-size: 11px;
 }
 .mpcrbm_booking_vehicle .addonGroupContent:hover {
	 background: var(--color_theme, #F12971);
	 color: #fff;
 }
 .mpcrbm_booking_vehicle .inputIncDec {
	 text-align: center;
	 font-weight: 700;
	 border: none;
	 background: #fff;
 }

 .mpcrbm_price_holder{
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 flex-direction: row;
	 gap: 20px;
 }

 
 .mpcrbm_summary_show:nth-of-type(4){
	border:2px solid var(--color_success);
 }

 .mpcrbm_summary_show span{
	color: #64748b;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.mpcrbm_summary_show i{
	color: var(--color_theme);
}

.mpcrbm_summary_show p:not(.wp_editor p){
	font-weight: 700;
	color: #1f2937;
	font-size: 13.5px;
	margin: 0;
 }

 .mpcrbm_location_icon_margin{
	 color: var(--color_theme);
	 margin: 5px !important;
 }

 .mpcrbm_mainSection{
	 margin-top: 10px;
 }

 .mpcrbm_booking_summary_description{
	 position: relative;
	 display: flex;
	 gap: 10px;
 }

 .mpcrbm_search_result_load_more_holder {
	 display: flex;
	 justify-content: center;
	 margin: 40px 0;
 }

 /* Button Base */
 .mpcrbm_load_more_btn {
	 padding: 14px 36px;
	 font-size: 16px;
	 font-weight: 600;
	 letter-spacing: 0.4px;
	 color: #ffffff;
	 background: linear-gradient(135deg, #ff6a00, #ee0979);
	 border-radius: 50px;
	 cursor: pointer;
	 user-select: none;
	 transition: all 0.35s ease;
	 box-shadow: 0 10px 30px rgba(238, 9, 121, 0.35);
	 position: relative;
	 overflow: hidden;
 }

 /* Hover Effect */
 .mpcrbm_load_more_btn:hover {
	 transform: translateY(-3px);
	 box-shadow: 0 15px 35px rgba(238, 9, 121, 0.45);
 }

 /* Click Effect */
 .mpcrbm_load_more_btn:active {
	 transform: translateY(0);
	 box-shadow: 0 6px 18px rgba(238, 9, 121, 0.35);
 }

 /* Subtle Shine Animation */
 .mpcrbm_load_more_btn::after {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: -75%;
	 width: 50%;
	 height: 100%;
	 background: rgba(255, 255, 255, 0.25);
	 transform: skewX(-25deg);
	 transition: left 0.6s ease;
 }

 .mpcrbm_load_more_btn:hover::after {
	 left: 130%;
 }

 /* Mobile Friendly */
 @media (max-width: 480px) {
	 .mpcrbm_load_more_btn {
		 width: 100%;
		 text-align: center;
		 padding: 14px 0;
	 }
 }



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

	div.mpcrbm_transport_search_area div.mpcrbm_list_details {
		width: 100%;
	}
	 .mpcrbm_main_content{
		 width: 100%;
	 }
	 .mpcrbm_left_filter {
		 width: 100%;
	 }
	
	div.mpcrbm_transport_search_area div.mpcrbm_list_details {
		width: 100%;
	}
	.mpcrbm_discount_booking {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		border-top: 1px solid #e5e7eb;
	}
	.mpcrbm_discount_booking, .mpcrbm_car_specs_lists {
		width: 100%;
	}
	.mpcrbm_summary_show {
		width: 100%;
	}
}


 @media (max-width: 1200px) {

	 .mpcrbm_booking_vehicle {
		 display: flex;
		 flex-direction: column;
		 height: 100%;
	 }

	 /* Image container = 50% */
	 .mpcrbm-image-box {
		 flex: 0 0 50%;
		 overflow: hidden;
	 }

	 /* Image full cover */
	 .mpcrbm-image-box img {
		 width: 100%;
		 height: 100%;
		 object-fit: cover;
	 }

	 /* Details = remaining 50% */
	 .mpcrbm_list_details {
		 flex: 0 0 50%;
		 overflow: hidden;
	 }

 }