/**
 * MixCar Gallery & Compare Button Fixes
 * 1. Full responsive image gallery
 * 2. Compare button styled exactly like Buy Online button
 */

/* ========================================
   IMAGE GALLERY - FULL RESPONSIVE
   ======================================== */

/* Main gallery containers */
.stm-big-car-gallery,
.stm-thumbs-car-gallery,
.stm-listing-car-gallery,
.stm-car-carousels,
.gallery,
.wp-block-gallery {
	width: 100% !important;
	max-width: 100% !important;
}

/* Gallery images - full width and responsive with fixed height */
.stm-big-car-gallery img,
.stm-thumbs-car-gallery img,
.stm-listing-car-gallery img,
.stm-single-image img,
.gallery img,
.wp-block-gallery img {
	width: 100% !important;
	height: 726px !important;
	max-width: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Main gallery wrapper height */
.stm-big-car-gallery,
.stm-listing-car-gallery,
.stm-car-carousels {
	height: 726px !important;
	overflow: hidden !important;
}

/* Gallery item containers */
.stm-single-image,
.gallery-item,
.stm-thumbs-car-gallery .stm-single-image {
	width: 100% !important;
	max-width: 100% !important;
}

/* Owl Carousel gallery items */
.owl-carousel .owl-item img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
}

/* Gallery columns responsive */
.gallery-columns-1 .gallery-item {
	width: 100% !important;
}

.gallery-columns-2 .gallery-item {
	width: 50% !important;
}

.gallery-columns-3 .gallery-item {
	width: 33.333% !important;
}

.gallery-columns-4 .gallery-item {
	width: 25% !important;
}

/* Responsive breakpoints for gallery */
@media (max-width: 1024px) {
	.stm-big-car-gallery img,
	.stm-listing-car-gallery img,
	.stm-single-image img {
		height: 500px !important;
		object-fit: cover !important;
	}
	
	.stm-big-car-gallery,
	.stm-listing-car-gallery,
	.stm-car-carousels {
		height: 500px !important;
	}
}

@media (max-width: 768px) {
	.stm-big-car-gallery img,
	.stm-listing-car-gallery img,
	.stm-single-image img {
		height: 400px !important;
	}
	
	.stm-big-car-gallery,
	.stm-listing-car-gallery,
	.stm-car-carousels {
		height: 400px !important;
	}
	
	.gallery-columns-3 .gallery-item,
	.gallery-columns-4 .gallery-item {
		width: 50% !important;
	}
}

@media (max-width: 480px) {
	.stm-big-car-gallery img,
	.stm-listing-car-gallery img,
	.stm-single-image img {
		height: 300px !important;
	}
	
	.stm-big-car-gallery,
	.stm-listing-car-gallery,
	.stm-car-carousels {
		height: 300px !important;
	}
	
	.gallery-columns-2 .gallery-item,
	.gallery-columns-3 .gallery-item,
	.gallery-columns-4 .gallery-item {
		width: 100% !important;
	}
}

/* ========================================
   COMPARE BUTTON - STYLED LIKE BUY ONLINE BUTTON
   ======================================== */

/* Base button styling - Match Buy Online Button exactly */
.mcl-btn-compare,
a.mcl-btn-compare,
.add-to-compare,
a.add-to-compare,
.mcl-compare-section .mcl-btn-compare,
.mcl-compare-section a.mcl-btn-compare,
.car-action-unit.add-to-compare {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 15px 30px !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	white-space: nowrap !important;
	min-height: 50px !important;
	text-decoration: none !important;
	background-color: #667eea !important;
	color: #fff !important;
	text-align: center !important;
	flex-direction: row !important;
	line-height: normal !important;
	box-shadow: none !important;
}

/* Hover state - Match Buy Online Button */
.mcl-btn-compare:hover,
a.mcl-btn-compare:hover,
.add-to-compare:hover,
a.add-to-compare:hover,
.car-action-unit.add-to-compare:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
	text-decoration: none !important;
	color: #fff !important;
	background-color: #667eea !important;
	border-color: transparent !important;
}

/* Active state */
.mcl-btn-compare:active,
a.mcl-btn-compare:active,
.add-to-compare:active,
a.add-to-compare:active {
	transform: translateY(0) !important;
}

/* Focus state */
.mcl-btn-compare:focus,
a.mcl-btn-compare:focus,
.add-to-compare:focus,
a.add-to-compare:focus {
	outline: none !important;
	text-decoration: none !important;
	color: #fff !important;
}

/* Icon styling - white color and proper alignment */
.mcl-btn-compare i,
.mcl-btn-compare .fas,
.mcl-btn-compare .fa,
a.mcl-btn-compare i,
a.mcl-btn-compare .fas,
a.mcl-btn-compare .fa,
.add-to-compare i,
.add-to-compare .fas,
.add-to-compare .fa,
a.add-to-compare i,
a.add-to-compare .fas,
a.add-to-compare .fa {
	color: #fff !important;
	font-size: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
	line-height: 1 !important;
	order: 1 !important;
}

/* Text/span styling - white color and proper alignment */
.mcl-btn-compare span,
a.mcl-btn-compare span,
.add-to-compare span,
a.add-to-compare span {
	color: #fff !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
	line-height: 1 !important;
	order: 2 !important;
}

/* Maximum specificity for compare button */
.mcl-compare-section a.mcl-btn.mcl-btn-compare.add-to-compare.car-action-unit,
a.mcl-btn.mcl-btn-compare.add-to-compare.car-action-unit {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 15px 30px !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	background-color: #667eea !important;
	color: #fff !important;
	min-height: 50px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.mcl-compare-section a.mcl-btn.mcl-btn-compare.add-to-compare.car-action-unit:hover,
a.mcl-btn.mcl-btn-compare.add-to-compare.car-action-unit:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
	background-color: #667eea !important;
	color: #fff !important;
}

.mcl-compare-section a.mcl-btn.mcl-btn-compare.add-to-compare.car-action-unit i.fas.fa-exchange-alt,
a.mcl-btn.mcl-btn-compare.add-to-compare.car-action-unit i.fas.fa-exchange-alt {
	color: #fff !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
	font-size: 18px !important;
}

.mcl-compare-section a.mcl-btn.mcl-btn-compare.add-to-compare.car-action-unit span,
a.mcl-btn.mcl-btn-compare.add-to-compare.car-action-unit span {
	color: #fff !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* Added state - Change to green like success */
.mcl-btn-compare.mcl-added,
.mcl-btn-compare.added,
a.mcl-btn-compare.mcl-added,
a.mcl-btn-compare.added,
.add-to-compare.stm-added,
a.add-to-compare.stm-added {
	background-color: #25d366 !important;
	color: #fff !important;
}

.mcl-btn-compare.mcl-added:hover,
.mcl-btn-compare.added:hover,
a.mcl-btn-compare.mcl-added:hover,
a.mcl-btn-compare.added:hover,
.add-to-compare.stm-added:hover,
a.add-to-compare.stm-added:hover {
	background-color: #25d366 !important;
	box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4) !important;
}

.mcl-btn-compare.mcl-added i,
.mcl-btn-compare.added i,
.mcl-btn-compare.mcl-added .fas,
.mcl-btn-compare.added .fas,
a.mcl-btn-compare.mcl-added i,
a.mcl-btn-compare.added i {
	color: #fff !important;
}

/* Disabled state */
.mcl-btn-compare:disabled,
a.mcl-btn-compare:disabled,
.add-to-compare:disabled,
a.add-to-compare:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.mcl-btn-compare,
	a.mcl-btn-compare,
	.add-to-compare,
	a.add-to-compare,
	.car-action-unit.add-to-compare {
		padding: 12px 20px !important;
		font-size: 13px !important;
		min-height: 45px !important;
	}
	
	.mcl-btn-compare i,
	.mcl-btn-compare .fas,
	a.mcl-btn-compare i,
	a.mcl-btn-compare .fas,
	.add-to-compare i,
	.add-to-compare .fas {
		font-size: 16px !important;
	}
}

@media (max-width: 480px) {
	.mcl-btn-compare,
	a.mcl-btn-compare,
	.add-to-compare,
	a.add-to-compare,
	.car-action-unit.add-to-compare {
		padding: 12px 15px !important;
		font-size: 12px !important;
		min-height: 44px !important;
		gap: 8px !important;
	}
	
	.mcl-btn-compare i,
	.mcl-btn-compare .fas,
	a.mcl-btn-compare i,
	a.mcl-btn-compare .fas,
	.add-to-compare i,
	.add-to-compare .fas {
		font-size: 14px !important;
	}
}