/**
 * Pharma Storefront — filter sidebar styles.
 *
 * Introduces the two-column shop layout (sidebar + content) that Phase
 * 4/5's toolbar, grid, pagination, and empty state now render inside —
 * the width/margin resets below undo those elements' earlier
 * "I own the full page width" assumptions from when there was no
 * sidebar yet, now that WooCommerce\Shop wraps them in
 * .pharma-shop-layout__content.
 *
 * display:flex/flex-basis below use !important for the same reason
 * shop.css forces display:grid on the product list — a theme with its
 * own WooCommerce integration (OceanWP confirmed) can carry generic
 * wrapper-div CSS (block/flow layout, width resets) that outranks a
 * plain, non-important declaration on a class it's never heard of,
 * simply by loading later or matching a broader parent selector. Since
 * .pharma-shop-layout/.pharma-shop-layout__content are names this
 * plugin invented, nothing else *should* target them directly — but
 * broad theme rules (e.g. "all direct div children of #content get
 * display:block") can still catch them incidentally.
 */

.pharma-shop-layout {
	display: flex !important;
	align-items: flex-start;
	gap: var(--pharma-space-5);
	max-width: var(--pharma-container-width);
	margin: 0 auto;
	padding: 0 var(--pharma-space-4);
}

.pharma-shop-layout .pharma-filters {
	flex: 0 0 260px !important;
	width: 260px;
}

.pharma-shop-layout__content {
	flex: 1 1 0% !important;
	min-width: 0;
	width: auto !important;
}

.pharma-shop-layout__content .pharma-shop-toolbar,
.pharma-shop-layout__content ul.products,
.pharma-shop-layout__content .pharma-pagination,
.pharma-shop-layout__content .pharma-empty-state {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.pharma-shop-layout__content .pharma-shop-toolbar,
.pharma-shop-layout__content ul.products {
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 1025px) {
	.pharma-shop-layout {
		flex-wrap: nowrap !important;
	}
}

/* ---------------------------------------------------------------------
 * Filter sidebar
 * ------------------------------------------------------------------- */

.pharma-filters {
	background: var(--pharma-card);
	border: 1px solid var(--pharma-border);
	border-radius: var(--pharma-radius-md);
	padding: var(--pharma-space-4);
	margin: var(--pharma-space-5) 0;
}

.pharma-filter-group {
	padding-bottom: var(--pharma-space-4);
	margin-bottom: var(--pharma-space-4);
	border-bottom: 1px solid var(--pharma-border);
}

.pharma-filter-group:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.pharma-filter-group__title {
	font-size: var(--pharma-font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pharma-muted);
	margin: 0 0 var(--pharma-space-2);
}

.pharma-filter-group__options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pharma-space-1);
	max-height: 220px;
	overflow-y: auto;
}

.pharma-filter-option {
	display: flex;
	align-items: center;
	gap: var(--pharma-space-2);
	font-size: var(--pharma-font-size-sm);
	color: var(--pharma-text);
	cursor: pointer;
}

.pharma-filter-option input[type="checkbox"] {
	accent-color: var(--pharma-primary);
	flex-shrink: 0;
}

.pharma-filter-option__count {
	color: var(--pharma-muted);
	margin-left: auto;
	padding-left: var(--pharma-space-2);
}

.pharma-filter-price {
	display: flex;
	align-items: center;
	gap: var(--pharma-space-2);
}

.pharma-filter-price__input {
	width: 0;
	flex: 1;
	border: 1px solid var(--pharma-border);
	border-radius: var(--pharma-radius-sm);
	padding: var(--pharma-space-1) var(--pharma-space-2);
	font-size: var(--pharma-font-size-sm);
	color: var(--pharma-text);
}

.pharma-filter-price__separator {
	color: var(--pharma-muted);
}

.pharma-filters__actions {
	display: flex;
	flex-direction: column;
	gap: var(--pharma-space-2);
	margin-top: var(--pharma-space-2);
}

.pharma-filters__apply {
	background: var(--pharma-primary);
	color: #ffffff;
	border: none;
	border-radius: var(--pharma-radius-pill);
	padding: var(--pharma-space-2) var(--pharma-space-4);
	font-weight: 600;
	font-size: var(--pharma-font-size-base);
	cursor: pointer;
	text-align: center;
}

.pharma-filters__apply:hover {
	background: var(--pharma-primary-dark);
}

.pharma-filters__clear {
	text-align: center;
	font-size: var(--pharma-font-size-sm);
	color: var(--pharma-muted);
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.pharma-shop-layout {
		flex-direction: column;
	}

	.pharma-shop-layout .pharma-filters {
		width: 100%;
		flex: 1 1 100% !important;
	}

	.pharma-filter-group__options {
		max-height: none;
	}
}