/**
 * Category Listings Styles
 * Based on Elementor category listing designs
 */

.elementor-widget-qr-menu-category-listings .category-listings-grid,
.elementor-widget-qr-menu-category-listings .qr-menu-category-listings-wrapper,
.category-listings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
	margin: 40px 0;
}

@media (max-width: 768px) {
	.elementor-widget-qr-menu-category-listings .category-listings-grid,
	.elementor-widget-qr-menu-category-listings .qr-menu-category-listings-wrapper,
	.category-listings-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		margin: 30px 0;
	}
}

.category-listing-item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	border-radius: 20px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	/* Ensure links are immediately clickable on page load */
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.category-listing-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	text-decoration: none;
}

.category-listing-item.category-listing-icon:hover {
	background-color: transparent;
	border: none;
}

/* All hover effects disabled to prevent double-click navigation issue */
.category-listing-item:hover,
.category-listing-item:active,
.category-listing-item:focus,
.category-listing-item.category-listing-icon:hover {
	transform: none !important;
	box-shadow: none !important;
	background-color: transparent !important;
	border: none !important;
}

/* Ensure single-click navigation - optimize for touch */
.category-listing-item {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: none !important;
	pointer-events: auto;
}

/* Image Listing Style */
.category-listing-image {
	min-height: 200px;
	padding: 60px 30px;
}

@media (max-width: 768px) {
	.category-listing-image {
		padding: 40px 20px;
		min-height: 150px;
	}
}

.category-listing-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
	pointer-events: none; /* Don't block clicks */
}

.category-listing-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none; /* Don't block clicks */
}

.category-listing-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 15px;
	width: 100%;
	pointer-events: none; /* Don't block clicks - let the link handle it */
}

/* Ensure the link itself is clickable */
.category-listing-item {
	pointer-events: auto !important;
}

.category-listing-content .category-listing-icon {
	font-size: 48px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Image listing icon and text use text color */
.elementor-widget-qr-menu-category-listings .category-listing-image .category-listing-content .category-listing-icon,
.category-listing-image .category-listing-content .category-listing-icon {
	color: var(--category-text-color, #000000) !important;
}

.category-listing-content .category-listing-icon i {
	width: 1em;
	height: 1em;
	display: inline-block;
}

.category-listing-title {
	font-size: clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem) !important; /* Title 7 */
	font-weight: 500 !important;
	margin: 0;
	text-align: center;
}

/* Image listing title uses text color */
.elementor-widget-qr-menu-category-listings .category-listing-image .category-listing-title,
.category-listing-image .category-listing-title {
	color: var(--category-text-color, #000000) !important;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Icon Listing Style */
.category-listing-item.category-listing-icon {
	padding: 0;
	min-height: auto;
	background-color: transparent;
	border: none;
}

.category-listing-item.category-listing-icon .category-listing-content {
	padding: 20px 15px;
}

@media (max-width: 768px) {
	.category-listing-item.category-listing-icon .category-listing-content {
		padding: 15px 10px;
	}
}

.category-listing-item.category-listing-icon .category-listing-content .category-listing-icon {
	color: var(--category-primary-color, #000000);
	font-size: 1.4rem;
}

@media (max-width: 768px) {
	.category-listing-item.category-listing-icon .category-listing-content .category-listing-icon {
		font-size: 1.2rem;
	}
}

.category-listing-item.category-listing-icon .category-listing-title,
.archive-categories-icon-grid .category-listing-item .category-listing-title,
.archive-categories-icon-listings .category-listing-item .category-listing-title {
	color: var(--category-primary-color, #000000);
	text-shadow: none;
	font-size: clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem) !important; /* Title 7 */
	font-weight: 500 !important;
	line-height: 1.2;
}

@media (max-width: 768px) {
	.category-listing-item.category-listing-icon .category-listing-title,
	.archive-categories-icon-grid .category-listing-item .category-listing-title,
	.archive-categories-icon-listings .category-listing-item .category-listing-title {
		font-size: clamp(1rem, 0.9769rem + 0.1026vw, 1.05rem) !important;
	}
}

/* Ensure icon listings don't have background/overlay */
.category-listing-item.category-listing-icon .category-listing-background,
.category-listing-item.category-listing-icon .category-listing-overlay {
	display: none;
}