.car-product-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
	font-family: inherit;
}

.car-product-card{
	background:#F5F5F5 !important;
	border-radius:12px;
	display:flex;
	flex-direction:column;
	height:100%;
	font-family:inherit;
}

.car-cart-btn{
	padding: 12px 24px;
    border-radius: 70px;
    background-color: #20C210;
    color: #fff;
    font-size: 16px !important;
    border: 1px solid #20C210;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
    text-decoration: none;
}

.car-image{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
	height: 240px !important;
}

.car-image img{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	border-radius: 12px !important;
 	transition: transform 0.5s ease;
}

/* .car-product-card:hover .car-image img{
    transform: scale(1.1);
} */

.car-product-card:hover .car-price .car-amount {
    color: #0F71DD;
	transition: color 0.3s ease;
}

.car-product-card:hover .car-cart-btn {
	background-color: transparent;
    color: #20C210;	
}

.car-card-body {
    padding: 20px;
}

.car-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 10px;
    color: #1e1e1e !important;
}

.car-desc {
    color: #505050;
    flex-grow: 1;
    font-family: inherit;
}

.car-bottom{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:auto;
	padding: 0 20px;
    margin-bottom: 20px;
}

.car-price{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	font-weight: 600;
}

.car-amount{
	font-size:20px;
	color: #141414;
}

.car-from-class{
    color:#878787;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    margin-right: 6px;
}

/* ============================================================
CAR RENTAL BOOKING FORM
============================================================ */

.car-booking-form{
	padding: 14px;
	background-color: #FEFEFE;
	box-shadow: 0 5px 15px rgba(0,0,0,0.07);
	border-radius: 10px;
	font-family: inherit;
	max-height: 90vh; 
    overflow-y: auto;
}
.car-booking-form::-webkit-scrollbar {
    display: none;
}

/* TOP PRICE BAR */

.car-price-top{
    font-size: 16px;
    color: #8E8E93;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

/* FORM */

#car-booking-form{
	display:flex;
	flex-direction:column;
}

/* LABEL */
.cb-field {
    margin-bottom: 16px;
}

#car-booking-form .cb-field label{
	display: block;
	color: #878787;
	font-size: 14px;
	margin-bottom: 10px;
}

#car-booking-form label:after{
	content:"* ";
}

/* INPUT + SELECT */

#car-booking-form input,
#car-booking-form select{
	width: 100%;
	height: 52px;
	padding: 14px;
	background-color: #F6F6F6;
	border-radius: 8px;
	border: none;
	font-size: 15px;
	color: #141414;
	outline: none;
	box-sizing: border-box;
}

/* SELECT DROPDOWN */

#car-booking-form select{
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 45px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 14px;
}

/* INLINE ADULT + CHILD */
/* PRUNED: #adult-count / #child-count removed — those IDs don't exist
   anywhere in the current booking form markup (replaced by
   #passenger-count / #passenger-input). nth-of-type selectors kept
   since they are structural and still match live labels. */
#car-booking-form label:nth-of-type(5),
#car-booking-form label:nth-of-type(6) {
	width: 100%;
	display: inline-block;
}

/* #car-booking-form label:nth-of-type(5),
#car-booking-form label:nth-of-type(6) {
margin-top: 16px;
} */

/* TOTAL BUTTON */

.cb-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#calculate-car-price{
	width: 100%;
	padding: 12px 24px;
	background-color: #00B531;
	color: #fff;
	border: none;
	border-radius: 70px;
	font-size: 14px;
	cursor: pointer;
	font-weight: 400;
}

#calculate-car-price .btn-title{
	font-size:15px;
	font-weight: 500;
}


#calculate-car-price .btn-title .btn-price{
	font-size:20px;
	font-weight:500;
}

/* BOOK NOW BUTTON */

#book-car{
	width: 100%;
	padding: 12px 24px;
	background-color: #00B531;
	color: #fff;
	border: none;
	border-radius: 70px;
	font-size: 16px;
	cursor: pointer;
	font-weight: 400;
}

/* PERSON VALIDATION ERROR */

.person-error{
	color:#d93025;
	font-size:13px;
	margin-top:5px;
	display:block;
	font-weight:500;
	font-family:inherit;
}
/* PAGINATION WRAPPER */
.car-pagination:not(:empty) {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;
	margin-top:40px;
	font-family:inherit;
}

/* PAGINATION LINKS */

.car-pagination a,
.car-pagination span{
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 10px 16px;
	border-radius:20px;
	border:1px solid #D9D9D9;
	text-decoration:none;
	font-size:14px !important;
	color:#333;
	background:#fff;
	transition:all 0.25s ease;
	line-height:130% !important;
}

/* HOVER */

.car-pagination a:hover{
	background:#20C210;
	border-color:#20C210;
	color:#fff;
}

/* CURRENT PAGE */

.car-pagination .current{
	background:#20C210;
	color:#fff;
	border-color:#20C210;
}

/* DOTS (...) */

.car-pagination .dots{
	border:none;
	background:transparent;
}

/* PREV / NEXT */

/* .car-pagination .prev,
.car-pagination .next{
	font-weight:600;
} */

/* PRUNED: .ajax-loader / .spinner removed — no element with these
   classes exists in either provided PHP file (the AJAX responses only
   return 'products'/'pagination' HTML strings; a loader with these
   exact classes would have to be injected by JS not included here).
   @keyframes spin kept intact per instructions in case other CSS
   or a JS-injected node still depends on it. */
@keyframes spin{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}
.car-share {
	margin-top: 20px;
}

.car-share-label {
	display: block;
	margin-bottom: 10px;
	font-size: 20px;
	color: #333;
	font-weight:500;
	padding-top:5px
}

.car-share-icons {
	display: flex;
	gap: 12px;
	padding-top:5px;
}


.car-share-icon img {
	width: 100%;
}

#book-car{
	display:none;
}

/* PRUNED: entire "SIMPLE RADIO STYLE" driver-option block removed —
   .driver-option-simple / .driver-option classes do not appear
   anywhere in the booking form markup (no driver radio field exists
   in the current form). Includes the associated radio ::before reset
   rules, which only had meaning in combination with those classes. */

#car-booking-form input::-webkit-input-placeholder {
	color: #b5b5b5;
}

#car-booking-form input::-moz-placeholder {
	color: #b5b5b5;
}

#car-booking-form input:-ms-input-placeholder {
	color: #b5b5b5;
}

#car-booking-form input::placeholder {
	color: #b5b5b5;
}

/* ── Car Features section ── */
.car-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.car-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

/* ── See all button ── */
.car-features-see-all {
    margin-top: 18px;
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    transition: background 0.15s;
}

.car-features-see-all:hover {
    background: #f5f5f5;
}

/* ── Modal overlay ── */
.car-features-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.car-features-modal {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    width: 540px;
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
}

.car-features-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.car-features-modal-head h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.car-features-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 0;
}

.car-features-close:hover {
    color: #333;
}

.car-features-grid--all {
    gap: 12px 32px;
}


/* Google Maps autocomplete dropdown
   NOTE: kept — these classes are injected at runtime by the Google
   Places JS library for the pickup-location/return-location fields,
   so they will never appear in static PHP markup by design. */
.pac-container {
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-family: inherit;
    z-index: 99999 !important; /* above modals */
}

.pac-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}

.pac-item:hover {
    background-color: #f5f5f5;
}

.pac-item-query {
    font-size: 14px;
    color: #333;
}

.pac-matched {
    font-weight: 600;
}
.cb-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.cb-row-2col .cb-field {
	margin-bottom: 16px;
}

/* PRUNED: .car-card--v2 wrapper, .car-card-v2-top, .car-card-v2-footer,
   .car-card-v2-price(+ .hotel-card__price-amount), .car-card-v2-rating,
   .car-rating-badge, .car-review-count all removed — _car_render_card()
   builds cards with .tour-card / .tour-card__top-row / .tour-card__price-row
   / .tour-rating-badge / .tour-card__review-count instead, so none of
   these "-v2" selectors ever match live markup. */

.car-recommended-badge {
	position: absolute;
    top: 14px;
    left: 14px;
	background: #FEFEFE;
    border-radius: 80px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    color: #111;
    z-index: 2;
    white-space: nowrap;
}

.car-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff !important;
    border-radius: 80px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #141414 !important;
}

.car-card-v2-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.car-spec-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #505050;
}

.car-spec-item svg {
	color: #20C210;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.car-card-v2-specs {
		grid-template-columns: 1fr 1fr;
	}
}
/* ======================
TABLET
====================== */

@media screen and (max-width:1366px){
	
	.car-image {
		height:220px !important;
	}
	
	.car-amount{
		font-size:18px;
	}
}

@media screen and (max-width:1199px){
	.car-cart-btn{
		padding: 10px 16px !important;
	}
}

@media (max-width:1024px){

	.car-product-grid{
		grid-template-columns:repeat(2,1fr);
		gap:24px;
	}

	.car-title{
		font-size:20px;
	}
	
	.car-booking-form {
		max-height: 100%;
	}

	#car-booking-form label{
		font-size:12px;
	}


}

/* ======================
MOBILE
====================== */

@media (max-width:767px){

	.car-product-grid{
		grid-template-columns:1fr;
		gap:20px;
	}

	.car-image{
		height:200px !important;
	}

	.car-title{
		font-size:18px;
	}

	.car-features-grid {
    	grid-template-columns: 1fr;
	}
}
/* ======================
SMALL MOBILE
====================== */

@media (max-width:480px){

	.car-image{
		height:160px;
	}

	.car-bottom{
		align-items: center;
	}

	.car-cart-btn{
		/* 		width:100%; */
		text-align:center;
	}

}
/* Add this CSS — hides all gallery items by default before JS runs
   NOTE: kept — belongs to the WooCommerce/Elementor single product
   gallery template, a separate file from the two shortcode files
   reviewed here, so its absence from them doesn't mean it's unused. */
.product-gallery .elementor-image-gallery .gallery-item {
	display: none;
}

/* MERGED: this selector list was declared twice with non-conflicting
   properties — combined into one rule.
   NOTE: #hotel-booking kept — likely belongs to a separate hotel
   booking shortcode not included in the two files reviewed; only
   #car-booking-form's presence was verified here, and the selector
   list can't be safely split without possibly missing that context. */
#car-booking-form input[type="date"],
#hotel-booking input[type="date"] {
	background-color: #F6F6F6 !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 14px 40px 14px 14px !important;
	font-size: 15px !important;
	color: #141414 !important;
	appearance: none;
	-webkit-appearance: none;
	position: relative;
}
/* Hide default browser calendar icon */
#car-booking-form input[type="date"]::-webkit-calendar-picker-indicator,
#hotel-booking input[type="date"]::-webkit-calendar-picker-indicator {
	display: none;
	-webkit-appearance: none;
}
.cb-date-wrap {
	position: relative;
}

.cb-input {
	width: 100%;
	height: 52px;
	padding: 14px;
	padding-right: 40px;
	background: #F6F6F6;
	border-radius: 8px;
	border: none;
	cursor: pointer;
}

.cb-date-icon {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}
.toggle-switch {
	position: relative;
	width: 40px;
	height: 26px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	background-color: #ccc;
	border-radius: 34px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: 0.4s;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 0;
	bottom: 0;
	background-color: white;
	border-radius: 50%;
	transition: 0.4s;
	content: "" !important;
}

/* ON state */
.toggle-switch input:checked + .toggle-slider {
	background-color: #4CAF50;
}

.toggle-switch input:checked + .toggle-slider:before {
	transform: translateX(24px);
}
/* .toggle-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
} */

.toggle-label {
	font-size: 14px;
	color: #878787;
}
.km-section {
	background: #F6F6F6;
	padding: 12px;
	border-radius: 10px;
}

#included-km-text {
	margin: 0 0 8px 0;
	font-weight: 500;
	color: #333;
}

.toggle-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* PRUNED: #extra-km-price-text removed — no element with this ID
   exists in either provided PHP file. If your JS creates this node
   dynamically, restore this rule before deploying:
   #extra-km-price-text { font-size: 13px; color: #666; margin-top: 5px; } */

/* 🔥 FIX DATE CLICK ISSUE */
.cb-date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

/* MERGED: this was a byte-for-byte duplicate of the earlier
   .cb-date-wrap { position: relative; } rule — removed here since
   the declaration above it already covers it completely. */

/* ============================================================
   CAR RENTAL LISTING PAGE — car-rental-listing.css
   Mirrors hotel-listing.css exactly
   ============================================================ */

/* PRUNED: .car-listing-page .hotel-results-bar removed — its markup
   (<div class="hotel-results-bar" id="carResultsBar">) is commented
   out in car_rental_listing_filter_shortcode(), so it never renders. */

/* ══════════════════════════════════════════════════════════════
   CAR CARD
══════════════════════════════════════════════════════════════ */

/* PRUNED: .car-card .hotel-card__img-wrap(+img), .car-cat-badge,
   .car-tags(+.hotel-card__room-tag), .car-no-results all removed —
   _car_render_card() renders cards with .tour-card / .tour-card__img-wrap
   / .car-cat-pill / .car-card-v2-specs instead of .car-card / .car-cat-badge
   / .car-tags, and error/no-results states use the shared
   .tours-no-results.hotel-no-results classes, not .car-no-results. */

/* ══════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════ */
#carPagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

#carPagination .tours-pagination-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

#carPagination .page-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #D9D9D9;
    background: transparent;
    color: #121212;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    font-family: inherit;
}

#carPagination .page-btn:hover {
    background: #20C210;
    border-color: #20C210;
    color: #fff;
}

#carPagination .page-btn.active {
    background: #20C210;
    border-color: #20C210;
    color: #fff;
}

#carPagination .page-btn:disabled {
    cursor: default;
    opacity: 0.5;
}
/* ============================================================
   CAR ROUTE PRICE TABLE — used by [car_price_table]
   Mirrors .transport-description-block styling from
   transport-style.css, using "car-" prefixed class names.
   Add this to your car stylesheet.
   ============================================================ */

.car-description-block {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
}
.car-price-group {
    margin: 0;
}
.car-vehicle-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #1e1e1e;
    padding: 10px;
    font-weight: 400;
    border-bottom: 1px solid #ddd;
}
.car-vehicle-cap-badge,
.car-vehicle-avail-badge {
     display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    white-space: nowrap;
}
.car-vehicle-cap-badge {
    background: #E8F8E6;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.car-vehicle-avail-badge {
    background: #EFF6FF;
    color: #185FA5;
    border: 1px solid #BFDBFE;
}

.car-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
.car-price-table thead th {
    font-size: 14px;
    font-weight: 400;
    background-color: #E8F8E6;
    color: #505050;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #EEE;
}
.car-price-table tbody td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    color: #1e1e1e;
}
.car-price-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}
.car-price-cell {
    font-weight: 500;
    color: #1e1e1e;
    white-space: nowrap;
}

.car-badge a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px !important;
    background: #FFF4E5;
    color: #8A5200;
    border: 1px solid #FBE2B8;
    border-radius: 20px;
    font-size: 14px !important;
    margin-right: 6px;
	pointer-events: none;
}

.car-badge a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('/wp-content/uploads/2026/03/petrol-svgrepo-com-1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* PRUNED: .car-badge a (+::before) removed — no ".car-badge" element
   exists in either provided PHP file's markup. */

/* ══════════════════════════════════════════════════════════════
   SIDEBAR HIDE HEADING ON DESKTOP
══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    #carSidebarHeading {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET
══════════════════════════════════════════════════════════════ */

/* PRUNED: @media (max-width:1366px) .car-card .hotel-card__img-wrap
   removed — .car-card is unused (see CAR CARD note above). */

@media screen and (max-width: 1024px) {
    .car-listing-page .tours-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100vh;
        overflow-y: auto;
        z-index: 1200;
        border-radius: 0;
        transition: left 0.3s ease;
        scrollbar-width: none;
    }

    .car-listing-page .tours-sidebar::-webkit-scrollbar {
        display: none;
    }

    .car-listing-page .tours-sidebar.is-open {
        left: 0;
    }

    .car-listing-page .sidebar-filter-heading {
        display: flex !important;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid #CDCDCD;
    }

    .car-listing-page .sidebar-filter-heading .sidebar-heading-text {
        display: block;
        font-size: 22px;
        font-weight: 700;
        color: #1e1e1e;
    }

    .car-listing-page .sidebar-close-btn  { display: flex; }
    .car-listing-page .btn-apply-filter   { display: block; }
    .car-listing-page .btn-mobile-filter  { display: flex !important; }

    /* PRUNED: .car-card / .car-card .hotel-card__body / .hotel-card__actions
       rules removed — .car-card is unused (cards render as .tour-card). */
}

/* ── MOBILE ── */
@media screen and (max-width: 768px) {
    .car-filter-bar .filter-bar__label {
        display: none;
    }

    /* PRUNED: .car-card .hotel-card__img-wrap removed — .car-card unused. */
}

@media screen and (max-width: 480px) {
    /* PRUNED: .car-tags(+.hotel-card__room-tag) and
       .car-card .hotel-card__price-amount removed — both classes unused. */
}