/* WPRM Elementor AJAX Filter Styles */

:root {
	--wprm-filter-radius: 9999px;
	--wprm-filter-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wprm-filter-bar-wrapper {
	font-family: var(--wprm-filter-font-family);
	border-bottom: 1px solid #e5e5e5;
	background-color: rgba(255, 255, 255, 0.95);
	transition: all 0.3s ease;
	width: 100%;
	box-sizing: border-box;
}

/* Sticky styling */
.wprm-filter-bar-wrapper.sticky-enabled {
	position: -webkit-sticky;
	position: sticky;
	z-index: 90; 
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.wprm-filter-bar {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.wprm-filter-bar {
		padding: 1.25rem 2rem;
		gap: 1rem;
	}
}

/* Top Row: Search, Sort, kids toggle */
.wprm-filter-row-top {
	display: flex;
	flex-wrap: wrap !important; /* Allow wrapping on small tablet/mobile */
	align-items: center !important;
	gap: 0.75rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.wprm-search-label {
	position: relative !important;
	flex: 1 1 220px !important; /* Grow to fill space, wrap below 220px */
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.wprm-search-icon {
	position: absolute !important;
	left: 1rem !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
	color: rgba(0, 0, 0, 0.35) !important;
	display: flex !important;
	align-items: center !important;
	z-index: 2 !important;
}

.wprm-filter-input,
.wprm-filter-select,
.wprm-filter-toggle {
	font-family: inherit !important;
	border-radius: var(--wprm-filter-radius) !important;
	border: 1px solid #e5e5e5 !important;
	background-color: #ffffff !important;
	font-size: 0.85rem !important;
	line-height: 1.25rem !important;
	outline: none !important;
	color: #2d2d2d !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
	box-sizing: border-box !important;
}

.wprm-filter-input {
	width: 100% !important;
	padding: 0.6rem 1rem 0.6rem 2.6rem !important;
	height: 44px !important;
}

.wprm-filter-input::placeholder {
	color: rgba(0, 0, 0, 0.35) !important;
}

.wprm-filter-select {
	padding: 0 2.5rem 0 1.25rem !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	height: 44px !important;
	width: auto !important;
	min-width: 160px !important;
	flex: 1 1 160px !important; /* Grow on smaller screens, sit inline on desktop */
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%234a4a4a' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'></path></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 14px !important;
}

.wprm-kids-toggle {
	padding: 0 1.25rem !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	height: 44px !important;
	width: auto !important;
	flex: 1 1 auto !important; /* Shrink/grow dynamically */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.35rem !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

.wprm-kids-toggle:hover {
	border-color: #2d2d2d !important;
	background-color: rgba(0, 0, 0, 0.01) !important;
}

.wprm-kids-toggle.active {
	border-color: #f26e2e !important;
	color: #f26e2e !important;
	background-color: rgba(242, 110, 46, 0.08) !important;
	font-weight: 600 !important;
}

/* Responsive adjustment for top row on mobile: force select and toggle to be inline side-by-side */
@media (max-width: 767px) {
	.wprm-filter-row-top {
		flex-wrap: wrap !important;
		gap: 0.5rem !important; /* Slightly tighter gap on mobile */
	}
	.wprm-search-label {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
	.wprm-filter-select {
		flex: 1 1 0% !important;
		width: calc(50% - 0.25rem) !important; /* Explicitly take half width minus gap */
		min-width: 0 !important;
		padding: 0 1.75rem 0 0.75rem !important; /* Less padding to fit text on mobile */
		font-size: 0.8rem !important;
		background-position: right 0.5rem center !important;
	}
	.wprm-kids-toggle {
		flex: 1 1 0% !important;
		width: calc(50% - 0.25rem) !important; /* Explicitly take half width minus gap */
		padding: 0 0.5rem !important; /* Less padding to fit text on mobile */
		font-size: 0.8rem !important;
		justify-content: center !important;
	}
}

/* Middle and Bottom Rows: Wrap to fit on all screens (No hidden horizontal scrolling) */
.scrollable-row {
	display: flex !important;
	flex-wrap: wrap !important; /* Wrap instead of single row overflow */
	gap: 0.5rem !important;
	padding: 0.25rem 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Buttons Reset and Setup */
.wprm-filter-btn,
.wprm-time-btn {
	border-radius: var(--wprm-filter-radius) !important;
	border: 1px solid #e5e5e5 !important;
	background-color: #ffffff !important;
	color: rgba(0, 0, 0, 0.65) !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	flex: 0 0 auto !important;
	padding: 0.45rem 1.1rem !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	line-height: 1.5 !important;
	transition: all 0.25s ease !important;
	margin: 0 !important;
	height: auto !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
	box-sizing: border-box !important;
}

@media (max-width: 767px) {
	.wprm-filter-btn,
	.wprm-time-btn {
		padding: 0.4rem 0.85rem !important;
		font-size: 0.7rem !important;
	}
}

.wprm-filter-btn:hover,
.wprm-time-btn:hover {
	border-color: #2d2d2d !important;
	color: #000000 !important;
}

/* Active Button Classes */
.wprm-filter-btn.active {
	border-color: #f26e2e !important;
	background-color: #f26e2e !important;
	color: #ffffff !important;
}

/* Bottom Row Time Pills */
.wprm-time-btn {
	background-color: #faf6f0 !important; /* Premium Cream Background */
	border-color: #f2ebe1 !important;
}

.wprm-time-btn.active {
	border-color: #f26e2e !important;
	background-color: #f26e2e !important;
	color: #ffffff !important;
}

/* Empty State / Notice Styling */
.wprm-no-recipes-found {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding: 4rem 2rem !important;
	width: 100% !important;
	color: rgba(0, 0, 0, 0.5) !important;
	box-sizing: border-box !important;
	grid-column: 1 / -1 !important; /* Span full Elementor Loop Grid width */
}

.wprm-no-recipes-found svg {
	margin-bottom: 1.25rem !important;
	color: #f26e2e !important; /* Brand active color */
}

.wprm-no-recipes-found h3 {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	color: #241710 !important; /* Rich dark brown color matching layout */
	margin: 0 0 0.5rem 0 !important;
}

.wprm-no-recipes-found p {
	font-size: 0.9rem !important;
	margin: 0 !important;
	max-width: 320px !important;
	line-height: 1.5 !important;
	color: rgba(0, 0, 0, 0.55) !important;
}

/* Loading overlays for loop grid */
.wprm-ajax-loading {
	opacity: 0.4 !important;
	pointer-events: none !important;
	position: relative !important;
}

.wprm-ajax-loading::after {
	content: "" !important;
	position: absolute !important;
	top: 100px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 40px !important;
	height: 40px !important;
	border: 3px solid rgba(242, 110, 46, 0.2) !important;
	border-top-color: #f26e2e !important;
	border-radius: 50% !important;
	animation: wprm-spinner 0.8s linear infinite !important;
	z-index: 999 !important;
}

@keyframes wprm-spinner {
	to {
		transform: translateX(-50%) rotate(360deg);
	}
}

/* Focus States */
.wprm-filter-input:focus,
.wprm-filter-select:focus {
	border-color: #f26e2e !important;
	box-shadow: 0 0 0 3px rgba(242, 110, 46, 0.15) !important;
}