/* ========================================
   PRODUCT ARCHIVE FILTERS STYLING
   Mobile Modal + Desktop Sidebar
   Responsive with min-width breakpoints only
   ======================================== */

:root {
	--filter-font-family: "Nunito Sans", sans-serif;
	--filter-primary-color: #000000;
	--filter-secondary-color: #ffffff;
	--filter-border-color: #e5e5e5;
	--filter-bg-color: #ffffff;
	--filter-text-color: #000000;
	--filter-text-muted: #666666;
	--filter-checkbox-color: #0066cc;
	--filter-radio-color: #0066cc;
	--filter-slider-track: #e5e5e5;
	--filter-slider-fill: #000000;
	--filter-modal-overlay: rgba(0, 0, 0, 0.5);
	--filter-transition: 0.3s ease;
}

/* ========================================
   BASE STYLES (Mobile First - 320px+)
   ======================================== */

/* Filter Modal - Fullscreen on Mobile */
.sangeetly-filter-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999; /* Increased to ensure it's above all mobile navigation elements */
	display: none;
	opacity: 0;
	transition: opacity var(--filter-transition);
}

.sangeetly-filter-modal.is-open {
	display: flex;
	opacity: 1;
}

.sangeetly-filter-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--filter-modal-overlay);
	cursor: pointer;
}

/* Filter Modal Content - Fullscreen */
.sangeetly-filter-modal__content {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 100%;
	background: var(--filter-bg-color);
	display: flex;
	flex-direction: column;
	z-index: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0;
	position: relative; /* Ensure proper stacking context */
}

/* Filter Modal Header */
.sangeetly-filter-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid var(--filter-border-color);
	flex-shrink: 0;
	background: var(--filter-bg-color);
	position: sticky;
	top: 0;
	z-index: 100001; /* Very high z-index to ensure it's above mobile navigation (z-index: 1000) */
	width: 100%;
	box-sizing: border-box;
	/* Ensure header stays visible above all content */
	background-color: var(--filter-bg-color);
}

/* Ensure header is always visible when modal is open */
.sangeetly-filter-modal.is-open .sangeetly-filter-modal__header {
	position: sticky;
	top: 0;
	z-index: 100001;
	background-color: var(--filter-bg-color) !important;
}

.sangeetly-filter-modal__title {
	font-family: var(--filter-font-family);
	font-size: 20px;
	font-weight: 700;
	color: var(--filter-text-color);
	margin: 0;
	padding: 0;
}

.sangeetly-filter-modal__close {
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--filter-text-color);
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--filter-transition);
}

.sangeetly-filter-modal__close:hover {
	opacity: 0.7;
}

.sangeetly-filter-modal__close span {
	display: block;
	line-height: 1;
}

/* Filter Modal Body - Scrollable */
.sangeetly-filter-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	-webkit-overflow-scrolling: touch;
}

/* Filter Modal Footer */
.sangeetly-filter-modal__footer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-top: 1px solid var(--filter-border-color);
	flex-shrink: 0;
	background: var(--filter-bg-color);
	position: sticky;
	bottom: 0;
	z-index: 100; /* Increased to ensure footer is always visible above modal content */
	width: 100%;
	box-sizing: border-box;
}

/* Desktop Filter Sidebar - Hidden on Mobile */
.sangeetly-filter-sidebar {
	display: none;
}

/* Filter Trigger Button - Hidden by default */
.sangeetly-filter-trigger {
	display: none;
}

/* ========================================
   FILTER SECTIONS (Shared)
   ======================================== */

.sangeetly-filter-section {
	border-bottom: 1px solid var(--filter-border-color);
	margin-bottom: 0;
	padding: 0;
}

.sangeetly-filter-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

/* Ensure proper spacing between sections */
.sangeetly-filter-modal__body .sangeetly-filter-section,
.sangeetly-filter-sidebar .sangeetly-filter-section {
	margin-bottom: 0;
}

/* Filter Section Header */
.sangeetly-filter-section__header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--filter-font-family);
	font-size: 16px;
	font-weight: 700;
	color: var(--filter-text-color);
	transition: color var(--filter-transition);
}

.sangeetly-filter-section__header:hover {
	color: var(--filter-text-muted);
}

.sangeetly-filter-section__title {
	flex: 1;
}

.sangeetly-filter-section__range {
	font-weight: 400;
	font-size: 14px;
	color: var(--filter-text-muted);
	margin-right: 12px;
}

.sangeetly-filter-section__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform var(--filter-transition);
}

.sangeetly-filter-section__header[aria-expanded="false"] .sangeetly-filter-section__toggle {
	transform: rotate(-90deg);
}

/* Filter Section Content */
.sangeetly-filter-section__content {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--filter-transition);
	padding: 0 0 0 0;
	position: relative; /* Ensure proper stacking context */
}

.sangeetly-filter-section__header[aria-expanded="true"] + .sangeetly-filter-section__content {
	max-height: 1000px;
	padding-bottom: 0;
	padding-top: 0;
}

/* ========================================
   CHECKBOX FILTERS (Santy's Collection)
   ======================================== */

.sangeetly-filter-checkbox {
	display: flex;
	align-items: center;
	padding: 12px 0;
	cursor: pointer;
	user-select: none;
}

.sangeetly-filter-checkbox__input {
	width: 20px;
	height: 20px;
	margin: 0;
	margin-right: 12px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 2px solid var(--filter-border-color);
	border-radius: 4px;
	background: var(--filter-bg-color);
	position: relative;
	flex-shrink: 0;
	transition: all var(--filter-transition);
}

.sangeetly-filter-checkbox__input:checked {
	background: var(--filter-checkbox-color);
	border-color: var(--filter-checkbox-color);
}

.sangeetly-filter-checkbox__input:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -60%) rotate(45deg);
}

.sangeetly-filter-checkbox__input:focus-visible {
	outline: 2px solid var(--filter-checkbox-color);
	outline-offset: 2px;
}

.sangeetly-filter-checkbox__label {
	font-family: var(--filter-font-family);
	font-size: 14px;
	font-weight: 400;
	color: var(--filter-text-color);
	line-height: 1.5;
	flex: 1;
}

.sangeetly-filter-checkbox:hover .sangeetly-filter-checkbox__label {
	color: var(--filter-text-muted);
}

/* ========================================
   RADIO FILTERS (Shop by Relation)
   ======================================== */

.sangeetly-filter-radio {
	display: flex;
	align-items: center;
	padding: 12px 0;
	cursor: pointer;
	user-select: none;
}

.sangeetly-filter-radio__input {
	width: 20px;
	height: 20px;
	margin: 0;
	margin-right: 12px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 2px solid var(--filter-border-color);
	border-radius: 50%;
	background: var(--filter-bg-color);
	position: relative;
	flex-shrink: 0;
	transition: all var(--filter-transition);
}

.sangeetly-filter-radio__input:checked {
	border-color: var(--filter-radio-color);
}

.sangeetly-filter-radio__input:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--filter-radio-color);
}

.sangeetly-filter-radio__input:focus-visible {
	outline: 2px solid var(--filter-radio-color);
	outline-offset: 2px;
}

.sangeetly-filter-radio__label {
	font-family: var(--filter-font-family);
	font-size: 14px;
	font-weight: 400;
	color: var(--filter-text-color);
	line-height: 1.5;
	flex: 1;
}

.sangeetly-filter-radio:hover .sangeetly-filter-radio__label {
	color: var(--filter-text-muted);
}

/* ========================================
   FILTER LINKS (Occasion & Relation Categories)
   ======================================== */

.sangeetly-filter-link {
	display: flex;
	align-items: center;
	padding: 12px 0;
	text-decoration: none;
	color: var(--filter-text-color);
	transition: color var(--filter-transition);
	cursor: pointer;
	user-select: none;
}

.sangeetly-filter-link:hover {
	color: var(--filter-primary-color);
	text-decoration: none;
}

.sangeetly-filter-link__label {
	font-family: var(--filter-font-family);
	font-size: 14px;
	font-weight: 400;
	color: inherit;
	line-height: 1.5;
	transition: color var(--filter-transition);
}

.sangeetly-filter-empty {
	font-family: var(--filter-font-family);
	font-size: 14px;
	color: var(--filter-text-muted);
	padding: 12px 0;
	margin: 0;
}

/* ========================================
   PRICE RANGE SLIDER (Your Budget)
   ======================================== */

.sangeetly-filter-range {
	padding: 16px 0;
}

.sangeetly-filter-range__slider {
	position: relative;
	height: 40px;
	margin-bottom: 16px;
	overflow: visible; /* Ensure inputs aren't clipped */
	z-index: 1; /* Create stacking context */
}

.sangeetly-filter-range__track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--filter-slider-track);
	border-radius: 2px;
	transform: translateY(-50%);
	pointer-events: none; /* Prevent track from blocking input interactions */
	z-index: 1;
}

.sangeetly-filter-range__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--filter-slider-fill);
	border-radius: 2px;
	transition: width var(--filter-transition), left var(--filter-transition);
	pointer-events: none; /* Prevent fill from blocking input interactions */
	z-index: 1;
}

.sangeetly-filter-range__input {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 40px; /* Increased height for better clickability */
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	cursor: pointer;
	z-index: 2;
	-webkit-tap-highlight-color: transparent;
	touch-action: pan-y; /* Allow vertical scrolling */
	pointer-events: auto !important; /* Force pointer events */
	-webkit-user-select: none;
	user-select: none;
}

.sangeetly-filter-range__input--min {
	z-index: 3;
}

.sangeetly-filter-range__input--max {
	z-index: 4; /* Higher z-index so max can be clicked when overlapping */
}

.sangeetly-filter-range__input::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--filter-slider-fill);
	border: 2px solid var(--filter-bg-color);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: transform var(--filter-transition);
}

.sangeetly-filter-range__input::-webkit-slider-thumb:hover {
	transform: scale(1.1);
}

.sangeetly-filter-range__input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--filter-slider-fill);
	border: 2px solid var(--filter-bg-color);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	-moz-appearance: none;
	appearance: none;
}

.sangeetly-filter-range__input::-moz-range-thumb:hover {
	transform: scale(1.1);
}

.sangeetly-filter-range__input:focus-visible {
	outline: none;
}

.sangeetly-filter-range__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

.sangeetly-filter-range__values {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--filter-font-family);
	font-size: 14px;
	color: var(--filter-text-muted);
}

	.sangeetly-filter-range__value-min,
	.sangeetly-filter-range__value-max {
		font-weight: 600;
		color: var(--filter-text-color);
	}

/* ========================================
   FILTER BUTTONS
   ======================================== */

.sangeetly-filter-btn {
	font-family: var(--filter-font-family);
	font-size: 16px;
	font-weight: 700;
	padding: 14px 24px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all var(--filter-transition);
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	min-height: 48px;
	width: 100%;
}

.sangeetly-filter-btn--primary {
	background: var(--filter-primary-color);
	color: var(--filter-secondary-color);
}

.sangeetly-filter-btn--primary:hover {
	background: #333333;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sangeetly-filter-btn--primary:active {
	transform: translateY(0);
}

.sangeetly-filter-btn--secondary {
	background: var(--filter-secondary-color);
	color: var(--filter-primary-color);
	border: 1px solid var(--filter-primary-color);
}

.sangeetly-filter-btn--secondary:hover {
	background: #f5f5f5;
}

.sangeetly-filter-btn--secondary:active {
	background: #eeeeee;
}

.sangeetly-filter-btn:focus-visible {
	outline: 2px solid var(--filter-checkbox-color);
	outline-offset: 2px;
}

.sangeetly-filter-sidebar__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--filter-border-color);
}

/* ========================================
   RESPONSIVE BREAKPOINTS (min-width only)
   ======================================== */

/* 375px and up */
@media (min-width: 375px) {
	.sangeetly-filter-modal__header,
	.sangeetly-filter-modal__body,
	.sangeetly-filter-modal__footer {
		padding: 16px;
	}
}

/* 425px and up */
@media (min-width: 425px) {
	.sangeetly-filter-modal__header,
	.sangeetly-filter-modal__body,
	.sangeetly-filter-modal__footer {
		padding: 20px;
	}
}

/* 768px and up */
@media (min-width: 768px) {
	.sangeetly-filter-modal__header,
	.sangeetly-filter-modal__body,
	.sangeetly-filter-modal__footer {
		padding: 24px;
	}
	
	.sangeetly-filter-modal__footer {
		flex-direction: row;
		gap: 16px;
	}
	
	.sangeetly-filter-btn {
		width: auto;
		flex: 1;
	}
}

/* 1024px and up - Desktop Layout */
@media (min-width: 1024px) {
	/* Hide modal on desktop */
	.sangeetly-filter-modal {
		display: none !important;
	}
	
	/* Shop wrapper layout */
	.sangeetly-shop-wrapper--with-filters {
		display: flex;
		flex-direction: column;
	}
	
	/* Header row - full width */
	.sangeetly-shop-wrapper--with-filters > .sangeetly-shop-header-row {
		width: 100%;
		flex-shrink: 0;
	}
	
	/* Hide sidebar that's outside filters row (from filters.php template) */
	.sangeetly-shop-wrapper--with-filters > .sangeetly-filter-sidebar {
		display: none !important;
	}
	
	/* Filters row - contains sidebar and content wrapper */
	.sangeetly-shop-filters-row {
		display: flex;
		flex-direction: row;
		align-items: stretch; /* Stretch children to same height */
		gap: 40px;
		width: 100%;
		margin-top: 0;
	}
	
	/* Show sidebar on desktop (inside filters row) */
	.sangeetly-shop-filters-row > .sangeetly-filter-sidebar {
		display: flex !important;
		flex-direction: column;
		width: 28%;
		max-width: 320px;
		flex-shrink: 0;
		background: var(--filter-bg-color);
		padding: 0;
		border-right: 1px solid var(--filter-border-color);
		position: sticky;
		top: 20px;
		align-self: stretch; /* Stretch to match content wrapper height */
		height: auto;
		min-height: 100%;
		overflow-y: visible;
		overflow-x: visible;
	}
	
	/* Desktop Sidebar Header */
	.sangeetly-filter-sidebar__header {
		padding: 24px 24px 20px 24px;
		border-bottom: 1px solid var(--filter-border-color);
		margin-bottom: 0;
	}
	
	.sangeetly-filter-sidebar__title {
		font-family: var(--filter-font-family);
		font-size: 20px;
		font-weight: 700;
		color: var(--filter-text-color);
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		gap: 12px;
	}
	
	.sangeetly-filter-sidebar__icon {
		width: 24px;
		height: 24px;
		background-image: url('../../anima/img/filter-icon.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		flex-shrink: 0;
		display: inline-block;
	}
	
	/* Add padding to filter sections in desktop sidebar */
	.sangeetly-filter-sidebar .sangeetly-filter-section {
		padding-left: 24px;
		padding-right: 24px;
	}
	
	.sangeetly-filter-sidebar .sangeetly-filter-sidebar__actions {
		padding-left: 24px;
		padding-right: 24px;
		padding-bottom: 24px;
	}
	
	/* Content wrapper - takes remaining space (72%) */
	.sangeetly-shop-filters-row > .sangeetly-shop-content-wrapper {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		width: auto;
		min-height: 100%;
	}
	
	/* Product grid - preserve WooCommerce's default flex layout */
	.sangeetly-shop-content-wrapper .woocommerce-products,
	.sangeetly-shop-content-wrapper .products,
	.sangeetly-shop-content-wrapper ul.products {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		/* Preserve WooCommerce's default flex layout */
	}
	
	/* Ensure product cards maintain their natural size - let WooCommerce columns handle width */
	.sangeetly-shop-content-wrapper .woocommerce-products li.product,
	.sangeetly-shop-content-wrapper .products li.product,
	.sangeetly-shop-content-wrapper ul.products li.product {
		margin-bottom: 29px !important;
		/* Let WooCommerce columns classes handle width */
	}
	
	/* Sidebar actions */
	.sangeetly-filter-sidebar__actions {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 24px;
		padding-top: 24px;
		border-top: 1px solid var(--filter-border-color);
	}
	
	.sangeetly-filter-sidebar__actions .sangeetly-filter-btn {
		width: 100%;
	}

	/* Desktop-specific slider fixes */
	.sangeetly-filter-sidebar .sangeetly-filter-range__slider {
		position: relative;
		height: 40px;
		margin-bottom: 16px;
		width: 100%;
		min-width: 0;
		overflow: visible; /* Ensure inputs aren't clipped */
		z-index: 1; /* Create stacking context */
	}

	.sangeetly-filter-sidebar .sangeetly-filter-range__track {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		width: 100%;
		height: 4px;
		background: var(--filter-slider-track);
		border-radius: 2px;
		transform: translateY(-50%);
		pointer-events: none; /* Prevent track from blocking input interactions */
		z-index: 1;
	}

	.sangeetly-filter-sidebar .sangeetly-filter-range__fill {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background: var(--filter-slider-fill);
		border-radius: 2px;
		transition: width var(--filter-transition), left var(--filter-transition);
		pointer-events: none; /* Prevent fill from blocking input interactions */
		z-index: 1;
	}

	.sangeetly-filter-sidebar .sangeetly-filter-range__input {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 40px; /* Increased height for better clickability on desktop */
		margin: 0;
		padding: 0;
		transform: translateY(-50%);
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background: transparent;
		cursor: grab;
		z-index: 2;
		pointer-events: auto !important; /* Force pointer events on desktop */
		-webkit-tap-highlight-color: transparent;
		touch-action: pan-y; /* Allow vertical scrolling but prevent horizontal */
		-webkit-user-select: none;
		user-select: none;
		opacity: 1 !important; /* Ensure inputs are visible */
	}

	.sangeetly-filter-sidebar .sangeetly-filter-range__input:active {
		cursor: grabbing;
	}

	.sangeetly-filter-sidebar .sangeetly-filter-range__input--min {
		z-index: 3;
	}

	.sangeetly-filter-sidebar .sangeetly-filter-range__input--max {
		z-index: 4; /* Higher z-index so max can be clicked when overlapping */
	}

	/* When min input is active/focused, bring it to front */
	.sangeetly-filter-sidebar .sangeetly-filter-range__input--min:focus,
	.sangeetly-filter-sidebar .sangeetly-filter-range__input--min:active,
	.sangeetly-filter-sidebar .sangeetly-filter-range__input--min:hover {
		z-index: 5;
	}

	/* When max input is active/focused, bring it to front with higher z-index */
	.sangeetly-filter-sidebar .sangeetly-filter-range__input--max:focus,
	.sangeetly-filter-sidebar .sangeetly-filter-range__input--max:active,
	.sangeetly-filter-sidebar .sangeetly-filter-range__input--max:hover {
		z-index: 6; /* Higher than min to ensure max is always accessible */
	}
}

/* 1440px and up */
@media (min-width: 1440px) {
	.sangeetly-filter-sidebar {
		width: 30%;
		padding: 32px;
	}
	
	.sangeetly-shop-wrapper--with-filters .sangeetly-shop-content-wrapper {
		gap: 48px;
	}
}

/* ========================================
   MOBILE SPECIFIC - woocommerce-ordering clickable
   ======================================== */

/* Ensure woocommerce-ordering is visible and clickable on mobile */
.woocommerce-ordering {
	cursor: pointer;
	display: inline-flex !important;
	position: relative;
	z-index: 1;
}

/* Hide the select dropdown visually but keep it for accessibility */
.woocommerce-ordering select,
.woocommerce-ordering .orderby {
	pointer-events: none;
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/* Hide filter trigger button (using woocommerce-ordering instead) */
.sangeetly-filter-trigger {
	display: none !important;
}