/**
 * Carzuri Listings WordPress Stylesheet.
 * Reuses Carzuri Core's Design System CSS Custom Properties.
 *
 * @package CarzuriListings
 */

/* Core fallback variables if carzuri-design-system is not loaded */
:root {
	--cz-color-navy: #0A111F;
	--cz-color-gold: #D4AF37;
	--cz-color-navy-light: #121A2E;
	--cz-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
	--cz-font-display: 'Space Grotesk', 'Outfit', sans-serif;
}

/* Vehicle card styles */
.carzuri-vehicle-card {
	font-family: var(--cz-font-sans), sans-serif;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.carzuri-vehicle-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	border-color: rgba(212, 175, 55, 0.3) !important;
}

/* Thumbnail transition styling */
.cz-card-thumbnail:hover img {
	transform: scale(1.05);
}

/* Custom form dropdown styled scrollbars */
#carzuri-listings-filter-form select {
	cursor: pointer;
	outline: none;
	transition: border-color 0.15s;
}

#carzuri-listings-filter-form select:focus,
#carzuri-listings-filter-form input:focus {
	border-color: var(--cz-color-gold) !important;
	box-shadow: 0 0 0 1px var(--cz-color-gold);
}

/* Hero Section Typography */
.carzuri-hero-section h1,
.carzuri-hero-section h2 {
	font-family: var(--cz-font-display), sans-serif;
}

/* Custom horizontal scrolling support for responsive carousel rows */
@media (max-width: 900px) {
	.cz-grid-container {
		display: flex !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
		padding-bottom: 12px !important;
	}
	
	.cz-grid-item {
		flex-shrink: 0 !important;
		width: 280px !important;
		scroll-snap-align: start !important;
	}
}

/* Contact seller form hover transitions */
#cz-listings-contact-form input,
#cz-listings-contact-form textarea {
	outline: none;
	transition: border-color 0.15s;
}

#cz-listings-contact-form input:focus,
#cz-listings-contact-form textarea:focus {
	border-color: var(--cz-color-gold) !important;
}

#cz-listings-submit-inquiry:hover {
	background-color: #C5A030 !important;
}

#cz-search-submit-btn:hover {
	background-color: #C5A030 !important;
}

/* Smooth transitions */
.cz-favorite-toggle-btn:hover {
	transform: scale(1.1);
}

.cz-favorite-toggle-btn svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0;
	display: block;
}