/**
 * FlexMart Smart Filters — Front-end styles.
 * Matches the design tokens already established across FlexMart.
 */

.fsf-layout{
	--fsf-primary:#2563EB;
	--fsf-text:#111827;
	--fsf-text-secondary:#6B7280;
	--fsf-border:#E5E7EB;
	--fsf-bg-light:#F8FAFC;
	--fsf-radius:16px;
	--fsf-radius-pill:999px;
	--fsf-shadow-sm:0 1px 3px rgba(15,23,42,0.07);
	--fsf-shadow-md:0 12px 26px rgba(15,23,42,0.13);
	--fsf-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	/* Distance from the bottom of the viewport to the floating Filter/
	   Sort bar on mobile — kept as a variable so it can be raised if a
	   taller bottom navigation bar is ever installed, without touching
	   this rule. Override from theme CSS if needed: .fsf-layout{ --fsf-floatbar-offset: 90px; } */
	--fsf-floatbar-offset:78px;
	display:flex;
	align-items:flex-start;
	gap:28px;
	font-family:var(--fsf-font);
	width:100%;
}

.fsf-layout *{ box-sizing:border-box; }

.fsf-main{
	flex:1;
	min-width:0;
}

/* ---------------------------------------------------------------------
   Sidebar — desktop sticky, mobile slide-in panel (same markup,
   repositioned by this media query rather than rendered twice)
   --------------------------------------------------------------------- */
.fsf-sidebar{
	flex:0 0 var(--fsf-sidebar-width, 280px);
	width:var(--fsf-sidebar-width, 280px);
	background:#fff;
	border:1px solid var(--fsf-border);
	border-radius:var(--fsf-radius);
	box-shadow:var(--fsf-shadow-sm);
	position:sticky;
	top:20px;
	max-height:calc(100vh - 40px);
	overflow-y:auto;
	display:flex;
	flex-direction:column;
}

.fsf-sidebar__header{
	display:none; /* desktop: no header row needed, mobile shows it */
}

.fsf-sidebar__footer{
	display:none; /* desktop: filters apply live via checkboxes, no footer buttons needed */
}

.fsf-backdrop{
	display:none;
}

.fsf-filter-groups{
	padding:8px 18px;
}

/* ---------------------------------------------------------------------
   Filter group — collapsible card
   --------------------------------------------------------------------- */
.fsf-filter-group{
	border-bottom:1px solid var(--fsf-border);
	padding:16px 0;
}

.fsf-filter-group:last-child{ border-bottom:none; }

.fsf-filter-group__header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	background:none;
	border:none;
	padding:0;
	cursor:pointer;
	font-family:var(--fsf-font);
	font-size:0.95rem;
	font-weight:700;
	color:var(--fsf-text);
}

.fsf-filter-group__header--static{ cursor:default; }

.fsf-chevron{
	width:16px;
	height:16px;
	color:var(--fsf-text-secondary);
	transition:transform 0.2s ease;
	flex-shrink:0;
}

.fsf-filter-group.is-collapsed .fsf-chevron{ transform:rotate(-90deg); }

.fsf-filter-group__body{
	margin-top:12px;
	display:flex;
	flex-direction:column;
	gap:4px;
	max-height:280px;
	overflow-y:auto;
	transition:max-height 0.25s ease;
}

.fsf-filter-group.is-collapsed .fsf-filter-group__body{
	display:none;
}

/* ---------------------------------------------------------------------
   Checkbox cards — Category / Brand / Attribute / Stock
   --------------------------------------------------------------------- */
.fsf-check-card{
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px 10px;
	border-radius:10px;
	cursor:pointer;
	transition:background 0.15s ease;
}

.fsf-check-card:hover{
	background:var(--fsf-bg-light);
}

.fsf-check-card input[type="checkbox"]{
	position:absolute;
	opacity:0;
	width:0;
	height:0;
}

.fsf-check-card__box{
	width:18px;
	height:18px;
	flex-shrink:0;
	border:1.5px solid var(--fsf-border);
	border-radius:5px;
	position:relative;
	transition:background 0.15s ease, border-color 0.15s ease;
}

.fsf-check-card__box::after{
	content:"";
	position:absolute;
	left:5px;
	top:1px;
	width:5px;
	height:10px;
	border:solid #fff;
	border-width:0 2px 2px 0;
	transform:rotate(45deg) scale(0);
	transition:transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}

.fsf-check-card input:checked + .fsf-check-card__box{
	background:var(--fsf-primary);
	border-color:var(--fsf-primary);
}

.fsf-check-card input:checked + .fsf-check-card__box::after{
	transform:rotate(45deg) scale(1);
}

.fsf-check-card__label{
	flex:1;
	font-size:0.86rem;
	color:var(--fsf-text);
	line-height:1.3;
}

.fsf-check-card__count{
	font-size:0.74rem;
	color:var(--fsf-text-secondary);
	background:var(--fsf-bg-light);
	padding:2px 7px;
	border-radius:var(--fsf-radius-pill);
}

.fsf-brand-search{
	width:100%;
	height:38px;
	border-radius:10px;
	border:1px solid var(--fsf-border);
	padding:0 12px;
	font-size:0.85rem;
	font-family:var(--fsf-font);
	margin-bottom:8px;
}

.fsf-brand-search:focus{
	outline:none;
	border-color:var(--fsf-primary);
	box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}

.fsf-brand-list{ display:flex; flex-direction:column; gap:4px; }

/* ---------------------------------------------------------------------
   Price slider — dual overlapping range inputs
   --------------------------------------------------------------------- */
.fsf-price-slider{
	position:relative;
	height:36px;
	margin-bottom:14px;
}

.fsf-price-slider__track{
	position:absolute;
	top:50%;
	left:0;
	right:0;
	height:4px;
	transform:translateY(-50%);
	background:var(--fsf-border);
	border-radius:var(--fsf-radius-pill);
}

.fsf-price-slider__range{
	position:absolute;
	height:100%;
	background:var(--fsf-primary);
	border-radius:var(--fsf-radius-pill);
}

.fsf-price-slider__handle{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	transform:translateY(-50%);
	margin:0;
	background:none;
	pointer-events:none;
	appearance:none;
	-webkit-appearance:none;
}

.fsf-price-slider__handle::-webkit-slider-thumb{
	appearance:none;
	-webkit-appearance:none;
	pointer-events:auto;
	width:20px;
	height:20px;
	border-radius:50%;
	background:#fff;
	border:2.5px solid var(--fsf-primary);
	box-shadow:var(--fsf-shadow-sm);
	cursor:pointer;
}

.fsf-price-slider__handle::-moz-range-thumb{
	pointer-events:auto;
	width:20px;
	height:20px;
	border-radius:50%;
	background:#fff;
	border:2.5px solid var(--fsf-primary);
	box-shadow:var(--fsf-shadow-sm);
	cursor:pointer;
}

.fsf-price-slider__handle::-webkit-slider-runnable-track{ background:none; }
.fsf-price-slider__handle::-moz-range-track{ background:none; }

.fsf-price-inputs{
	display:flex;
	align-items:flex-end;
	gap:10px;
}

.fsf-price-input-group{ flex:1; }

.fsf-price-input-group label{
	display:block;
	font-size:0.7rem;
	font-weight:600;
	color:var(--fsf-text-secondary);
	text-transform:uppercase;
	letter-spacing:0.03em;
	margin-bottom:4px;
}

.fsf-price-input-wrap{
	display:flex;
	align-items:center;
	border:1px solid var(--fsf-border);
	border-radius:10px;
	padding:0 10px;
	height:38px;
}

.fsf-price-input-wrap:focus-within{
	border-color:var(--fsf-primary);
	box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}

.fsf-price-currency{
	font-size:0.8rem;
	color:var(--fsf-text-secondary);
	margin-right:4px;
}

.fsf-price-input-wrap input{
	width:100%;
	border:none;
	font-size:0.85rem;
	font-family:var(--fsf-font);
	background:none;
}

.fsf-price-input-wrap input:focus{ outline:none; }

.fsf-price-separator{
	color:var(--fsf-text-secondary);
	padding-bottom:9px;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.fsf-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:44px;
	padding:0 20px;
	border-radius:var(--fsf-radius-pill);
	font-weight:700;
	font-size:0.86rem;
	border:none;
	cursor:pointer;
	font-family:var(--fsf-font);
	text-decoration:none !important;
	transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.fsf-btn--primary{
	background:linear-gradient(135deg,var(--fsf-primary),#1D4ED8);
	color:#fff !important;
	box-shadow:0 8px 18px rgba(37,99,235,0.24);
}

.fsf-btn--outline{
	background:#fff;
	color:var(--fsf-primary) !important;
	border:1.5px solid var(--fsf-primary);
}

@media (hover:hover) and (pointer:fine){
	.fsf-btn:hover{ transform:translateY(-2px); }
}

/* ---------------------------------------------------------------------
   Filter + Sort controls (floating-bar.php)
   Desktop: rendered inline, in normal document flow — same look as the
   original toolbar row. Mobile: the .fsf-floating-bar media query
   further down turns this into a fixed pill bar; no markup is
   duplicated between the two layouts.
   --------------------------------------------------------------------- */
.fsf-floating-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:14px;
}

.fsf-filter-toggle{
	display:none; /* shown only on mobile via the media query below */
}

.fsf-floating-bar__divider{
	display:none; /* shown only inside the mobile pill bar */
}

.fsf-floating-bar__badge{
	min-width:18px;
	height:18px;
	padding:0 5px;
	border-radius:var(--fsf-radius-pill);
	background:#fff;
	color:var(--fsf-primary);
	font-size:0.68rem;
	font-weight:800;
	align-items:center;
	justify-content:center;
	line-height:1;
}

.fsf-floating-bar__badge:not([hidden]){ display:inline-flex; }

.fsf-sort-wrapper{
	position:relative;
	margin-left:auto;
}

.fsf-sort-toggle{
	display:flex;
	align-items:center;
	gap:8px;
	height:42px;
	padding:0 16px;
	border-radius:var(--fsf-radius-pill);
	border:1px solid var(--fsf-border);
	background:#fff;
	font-family:var(--fsf-font);
	font-size:0.85rem;
	font-weight:600;
	color:var(--fsf-text);
	cursor:pointer;
}

.fsf-sort-toggle svg{ width:16px; height:16px; color:var(--fsf-text-secondary); }

.fsf-sort-toggle__icon-leading{ display:none; } /* shown only in the mobile pill bar */

.fsf-sort-dropdown__title{ display:none; } /* shown only in the mobile bottom sheet */

.fsf-sort-dropdown{
	position:absolute;
	top:calc(100% + 8px);
	right:0;
	background:#fff;
	border:1px solid var(--fsf-border);
	border-radius:14px;
	box-shadow:var(--fsf-shadow-md);
	padding:6px;
	min-width:210px;
	z-index:20;
	opacity:0;
	visibility:hidden;
	transform:translateY(-6px);
	transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.fsf-sort-dropdown.is-open{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

.fsf-sort-option{
	display:block;
	width:100%;
	text-align:left;
	background:none;
	border:none;
	padding:10px 12px;
	border-radius:9px;
	font-family:var(--fsf-font);
	font-size:0.85rem;
	color:var(--fsf-text);
	cursor:pointer;
}

.fsf-sort-option:hover{ background:var(--fsf-bg-light); }

.fsf-sort-option.is-active{
	color:var(--fsf-primary);
	font-weight:700;
	background:rgba(37,99,235,0.06);
}

/* ---------------------------------------------------------------------
   Active filter chips
   --------------------------------------------------------------------- */
.fsf-active-filters{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px;
	margin-bottom:14px;
}

.fsf-active-filters:empty{ display:none; margin-bottom:0; }

.fsf-chip{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:var(--fsf-bg-light);
	border:1px solid var(--fsf-border);
	border-radius:var(--fsf-radius-pill);
	padding:6px 8px 6px 14px;
	font-size:0.8rem;
	font-weight:600;
	color:var(--fsf-text);
}

.fsf-chip__remove{
	display:flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:20px;
	border-radius:50%;
	background:#fff;
	border:none;
	color:var(--fsf-text-secondary);
	cursor:pointer;
	font-size:0.7rem;
	transition:background 0.15s ease, color 0.15s ease;
}

.fsf-chip__remove:hover{
	background:var(--fsf-primary);
	color:#fff;
}

.fsf-chip--clear-all{
	background:none;
	border:none;
	color:var(--fsf-primary);
	font-weight:700;
	font-size:0.8rem;
	cursor:pointer;
	padding:6px 8px;
}

/* ---------------------------------------------------------------------
   Product count + loading overlay
   --------------------------------------------------------------------- */
.fsf-product-count{
	font-size:0.82rem;
	color:var(--fsf-text-secondary);
	margin-bottom:16px;
}

.fsf-loading-overlay{
	display:none;
	align-items:center;
	justify-content:center;
	padding:60px 0;
}

.fsf-loading-overlay.is-active{ display:flex; }

.fsf-spinner{
	width:36px;
	height:36px;
	border-radius:50%;
	border:3px solid var(--fsf-border);
	border-top-color:var(--fsf-primary);
	animation:fsf-spin 0.8s linear infinite;
}

@keyframes fsf-spin{ to{ transform:rotate(360deg); } }

.fsf-main.is-loading > *:not(.fsf-toolbar):not(.fsf-active-filters):not(.fsf-product-count):not(.fsf-loading-overlay){
	opacity:0.35;
	pointer-events:none;
	transition:opacity 0.2s ease;
}

/* ---------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------- */
.fsf-empty-state{
	max-width:420px;
	margin:50px auto;
	text-align:center;
	padding:20px;
}

.fsf-empty-state__illustration{
	width:150px;
	height:auto;
	margin:0 auto 18px;
	display:block;
}

.fsf-empty-state__title{
	font-size:1.15rem;
	font-weight:800;
	color:var(--fsf-text);
	margin:0 0 8px;
}

.fsf-empty-state__text{
	font-size:0.85rem;
	color:var(--fsf-text-secondary);
	margin:0 0 22px;
	line-height:1.6;
}

/* ---------------------------------------------------------------------
   Admin toggle switch (reused visual language for the sidebar toggle,
   also referenced by the settings page CSS but declared once here isn't
   applicable — admin has its own stylesheet; this block intentionally
   left for front-end only)
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Mobile — floating pill bar + bottom sheets
   --------------------------------------------------------------------- */
@media (max-width:900px){
	.fsf-layout{
		flex-direction:column;
		gap:0;
	}

	/* The row that used to sit above the grid is gone on mobile — the
	   product count text moves into the header context instead of the
	   old inline location; the chips row stays put just under the
	   grid's top so people can still see/remove active filters. */
	.fsf-product-count{
		display:none;
	}

	/* -------------------------------------------------------------
	   Floating pill bar — Filter + Sort, fixed above the bottom nav
	   ------------------------------------------------------------- */
	.fsf-floating-bar{
		position:fixed;
		left:50%;
		bottom:calc(var(--fsf-floatbar-offset, 78px) + env(safe-area-inset-bottom, 0px));
		transform:translateX(-50%);
		z-index:9400;
		display:flex;
		align-items:stretch;
		justify-content:center;
		gap:0;
		margin:0;
		width:auto;
		max-width:calc(100vw - 32px);
		background:linear-gradient(135deg,var(--fsf-primary),#1D4ED8);
		border-radius:var(--fsf-radius-pill);
		box-shadow:0 12px 28px rgba(37,99,235,0.35),0 2px 10px rgba(15,23,42,0.14);
		padding:6px;
		opacity:0;
		animation:fsf-floatbar-in 0.4s ease 0.05s forwards;
	}

	/* Bug fix: because .fsf-floating-bar is a fixed, z-indexed element,
	   it creates its own stacking context — so the Sort sheet nested
	   inside it (see floating-bar.php) could never out-rank the
	   backdrop's z-index (9500) no matter what z-index the sheet itself
	   declared; taps were landing on the backdrop instead of the sheet.
	   Bumping the bar's own stacking context above the backdrop for the
	   moment the Sort sheet is open (JS toggles this class) resolves it
	   without touching the bar's default appearance, position, or the
	   Filter panel's behaviour at all. */
	.fsf-floating-bar.fsf-sort-open{
		z-index:9600;
	}

	@keyframes fsf-floatbar-in{
		from{ opacity:0; transform:translateX(-50%) translateY(14px); }
		to{ opacity:1; transform:translateX(-50%) translateY(0); }
	}

	.fsf-floating-bar__divider{
		display:block;
		width:1px;
		align-self:stretch;
		margin:6px 2px;
		background:rgba(255,255,255,0.28);
	}

	.fsf-filter-toggle{
		display:flex;
		align-items:center;
		justify-content:center;
		gap:8px;
		height:42px;
		padding:0 18px;
		border-radius:var(--fsf-radius-pill);
		border:none;
		background:transparent;
		color:#fff;
		font-family:var(--fsf-font);
		font-size:0.85rem;
		font-weight:700;
		cursor:pointer;
		position:relative;
	}

	.fsf-filter-toggle svg{ width:16px; height:16px; }

	.fsf-sort-wrapper{
		margin-left:0;
	}

	.fsf-sort-toggle{
		height:42px;
		padding:0 18px;
		border:none;
		background:transparent;
		color:#fff;
		box-shadow:none;
	}

	.fsf-sort-toggle svg{ color:#fff; }

	.fsf-sort-toggle__icon-leading{ display:block; }

	/* -------------------------------------------------------------
	   Backdrop — shared dimming layer behind whichever bottom sheet
	   (filter panel or sort sheet) is currently open
	   ------------------------------------------------------------- */
	.fsf-backdrop{
		display:block;
		position:fixed;
		inset:0;
		z-index:9500;
		background:rgba(15,23,42,0.55);
		opacity:0;
		visibility:hidden;
		transition:opacity 0.3s ease, visibility 0.3s ease;
	}

	.fsf-backdrop.is-open{
		opacity:1;
		visibility:visible;
	}

	/* -------------------------------------------------------------
	   Filter sidebar — presented as a slide-up bottom sheet.
	   Same markup/JS as the desktop sidebar; only position and
	   transform direction change here. Note: a bottom sheet is
	   conventionally full-width, so the "Mobile Panel Width" admin
	   setting (--fsf-panel-width, still computed and available on
	   .fsf-layout) intentionally isn't used for the width here
	   anymore — it's left wired in case a narrower sheet is wanted
	   later, but the setting itself is untouched either way.
	   ------------------------------------------------------------- */
	.fsf-sidebar{
		position:fixed;
		left:0;
		right:0;
		top:auto;
		bottom:0;
		width:100%;
		max-width:none;
		height:87vh;
		max-height:87vh;
		border-radius:22px 22px 0 0;
		border:none;
		z-index:9501;
		transform:translateY(100%);
		transition:transform 0.34s cubic-bezier(0.22,1,0.36,1);
		box-shadow:0 -12px 34px rgba(15,23,42,0.18);
	}

	.fsf-sidebar.is-open{
		transform:translateY(0);
	}

	.fsf-sidebar::before{
		content:"";
		position:absolute;
		top:10px;
		left:50%;
		transform:translateX(-50%);
		width:40px;
		height:4px;
		border-radius:2px;
		background:var(--fsf-border);
	}

	.fsf-sidebar__header{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:22px 20px 16px;
		border-bottom:1px solid var(--fsf-border);
		flex-shrink:0;
	}

	.fsf-sidebar__header h2{
		margin:0;
		font-size:1.05rem;
		font-weight:800;
		color:var(--fsf-text);
	}

	.fsf-sidebar__close{
		width:34px;
		height:34px;
		border-radius:50%;
		border:none;
		background:var(--fsf-bg-light);
		display:flex;
		align-items:center;
		justify-content:center;
		cursor:pointer;
		color:var(--fsf-text-secondary);
	}

	.fsf-sidebar__close svg{ width:16px; height:16px; }

	.fsf-sidebar__footer{
		display:flex;
		gap:10px;
		padding:16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
		border-top:1px solid var(--fsf-border);
		flex-shrink:0;
	}

	.fsf-sidebar__footer .fsf-btn{ flex:1; }

	.fsf-filter-groups{
		flex:1;
		overflow-y:auto;
	}

	/* -------------------------------------------------------------
	   Sort dropdown — presented as a slide-up bottom sheet instead
	   of an inline dropdown. Same options/JS, only presentation.
	   ------------------------------------------------------------- */
	.fsf-sort-dropdown{
		position:fixed;
		top:auto;
		left:0;
		right:0;
		bottom:0;
		min-width:0;
		width:100%;
		max-width:none;
		border-radius:22px 22px 0 0;
		padding:8px 10px calc(14px + env(safe-area-inset-bottom, 0px));
		z-index:9502;
		opacity:1;
		visibility:hidden;
		pointer-events:none;
		transform:translateY(100%);
		transition:transform 0.32s cubic-bezier(0.22,1,0.36,1), visibility 0.32s ease;
		box-shadow:0 -12px 34px rgba(15,23,42,0.18);
	}

	.fsf-sort-dropdown.is-open{
		pointer-events:auto;
	}

	.fsf-sort-dropdown.is-open .fsf-sort-option{
		pointer-events:auto;
	}

	.fsf-sort-dropdown.is-open{
		visibility:visible;
		transform:translateY(0);
	}

	.fsf-sort-dropdown::before{
		content:"";
		position:absolute;
		top:10px;
		left:50%;
		transform:translateX(-50%);
		width:40px;
		height:4px;
		border-radius:2px;
		background:var(--fsf-border);
	}

	.fsf-sort-dropdown__title{
		display:block;
		text-align:center;
		font-weight:800;
		font-size:0.95rem;
		color:var(--fsf-text);
		padding:16px 10px 6px;
	}

	.fsf-sort-option{
		text-align:center;
		font-size:0.92rem;
		padding:13px 12px;
	}
}

@media (prefers-reduced-motion: reduce){
	.fsf-sidebar, .fsf-backdrop, .fsf-sort-dropdown, .fsf-spinner, .fsf-check-card__box, .fsf-check-card__box::after{
		transition:none !important;
		animation-duration:2s !important;
	}

	.fsf-floating-bar{
		animation:none !important;
		opacity:1 !important;
	}
}

/* ---------------------------------------------------------------------
   Guaranteed hiding of WooCommerce's default filter/sort UI — a CSS
   safety net on top of the PHP-level hook removal in FSF_Frontend, in
   case a leftover element still renders (some themes duplicate this
   markup outside the standard hook, or a classic WooCommerce widget was
   placed directly in a sidebar rather than reached via those hooks).
   These are WooCommerce's own stable, documented core class names —
   safe to target broadly, since nothing else could ever carry them.
   --------------------------------------------------------------------- */
.woocommerce-result-count,
.woocommerce-ordering,
.widget_price_filter,
.widget_layered_nav,
.widget_layered_nav_filters,
.widget_rating_filter,
.woocommerce-widget-layered-nav,
form.woocommerce-widget-layered-nav-dropdown{
	display:none !important;
}