/**
 * Goldoon Product Filter -- frontend styles.
 * Minimal, elegant, soft "liquid" UI. Scoped entirely to .gpf-widget so it
 * never touches theme/WooCommerce/Elementor global selectors. Uses CSS
 * logical properties so the plugin works correctly in both RTL (Persian,
 * the default for the Goldoon site) and LTR installations.
 */

.gpf-widget {
	--gpf-primary: #EFA6B8;
	--gpf-primary-hover: #E3839B;
	--gpf-secondary: #F8DDE4;
	--gpf-bg: #FFFFFF;
	--gpf-soft-bg: #FDF4F7;
	--gpf-text: #333333;
	--gpf-muted: #777777;
	--gpf-border: #F1D5DC;
	--gpf-radius: 18px;
	box-sizing: border-box;
	font-family: inherit;
}
.gpf-widget[dir="rtl"] {
	direction: rtl;
	text-align: right;
}
.gpf-widget *,
.gpf-widget *::before,
.gpf-widget *::after {
	box-sizing: inherit;
}

/* ------------------------------------------------------------------ */
/* Filter form                                                        */
/* ------------------------------------------------------------------ */
.gpf-filter-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	background-color: var(--gpf-bg);
	padding: 20px;
	border-radius: var(--gpf-radius);
}

.gpf-filter-groups {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.gpf-widget-title {
	margin: 0 0 4px;
	font-size: 1.1em;
	color: var(--gpf-text);
}

.gpf-filter-group {
	border: 1px solid var(--gpf-border);
	border-radius: var(--gpf-radius);
	padding: 14px 16px;
	margin: 0;
	background-color: var(--gpf-soft-bg);
	transition: border-color .2s ease;
}

.gpf-group-title {
	font-weight: 600;
	color: var(--gpf-text);
	padding-inline: 4px;
	margin-bottom: 8px;
}

.gpf-group-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Checkboxes (category) */
.gpf-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: var(--gpf-text);
	padding: 6px 4px;
	border-radius: 10px;
	transition: background-color .15s ease;
}
.gpf-checkbox:hover {
	background-color: rgba(0, 0, 0, 0.03);
}
.gpf-checkbox input {
	accent-color: var(--gpf-primary);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.gpf-checkbox:focus-within {
	outline: 2px solid var(--gpf-primary);
	outline-offset: 2px;
}
.gpf-term-count {
	margin-inline-start: auto;
	color: var(--gpf-muted);
	font-size: 0.85em;
}

/* Swatches (color) */
.gpf-swatches {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}
.gpf-swatch {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}
.gpf-swatch-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.gpf-swatch-visual {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--gpf-border);
	background-color: #EEEEEE;
	transition: transform .15s ease, outline-color .15s ease;
	outline: 2px solid transparent;
	outline-offset: 2px;
}
.gpf-swatch:hover .gpf-swatch-visual {
	transform: scale(1.08);
}
.gpf-swatch-input:checked + .gpf-swatch-visual {
	outline-color: var(--gpf-primary);
}
.gpf-swatch-input:focus-visible + .gpf-swatch-visual {
	outline-color: var(--gpf-primary);
	outline-style: solid;
}

/* Price slider */
.gpf-price-slider {
	gap: 12px;
}
.gpf-price-values {
	display: flex;
	justify-content: space-between;
	color: var(--gpf-text);
	font-weight: 600;
	font-size: 0.9em;
}
.gpf-range-inputs {
	position: relative;
	height: 28px;
}
.gpf-range {
	position: absolute;
	inset-inline: 0;
	top: 8px;
	width: 100%;
	appearance: none;
	background: transparent;
	pointer-events: none;
	accent-color: var(--gpf-primary);
}
.gpf-range::-webkit-slider-thumb {
	pointer-events: auto;
}
.gpf-range::-moz-range-thumb {
	pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/* Buttons -- explicit normal / hover / active / focus / disabled      */
/* states everywhere, never pink-on-pink.                              */
/* ------------------------------------------------------------------ */
.gpf-filter-actions {
	display: flex;
	gap: 10px;
}
.gpf-reset-btn,
.gpf-apply-btn,
.gpf-cta-btn,
.gpf-ajax-retry {
	appearance: none;
	border: 1px solid var(--gpf-primary);
	border-radius: 999px;
	padding: 10px 18px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* .gpf-cta-btn additionally lays out as an inline flex row so an icon
   (see "امکان اضافه کردن آیکون") and its label can sit side by side with
   a small gap; harmless no-op for the other buttons in this shared rule
   since they only ever have a single text child. */
.gpf-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.gpf-cta-btn i,
.gpf-cta-btn svg {
	line-height: 1;
	width: 1em;
	height: 1em;
}
.gpf-cta-btn.gpf-cta-icon-only {
	gap: 0;
}

.gpf-reset-btn {
	flex: 1;
	background: transparent;
	color: var(--gpf-primary);
}
.gpf-reset-btn:hover {
	background-color: var(--gpf-secondary);
	color: var(--gpf-text);
}

.gpf-apply-btn,
.gpf-ajax-retry {
	flex: 1;
	background-color: var(--gpf-primary);
	color: #FFFFFF;
	border-color: var(--gpf-primary);
	text-align: center;
	text-decoration: none;
	display: inline-block;
}
.gpf-apply-btn:hover,
.gpf-ajax-retry:hover {
	background-color: var(--gpf-primary-hover);
	border-color: var(--gpf-primary-hover);
	color: #FFFFFF;
}
.gpf-apply-btn:active {
	background-color: #D96E89;
	border-color: #D96E89;
}
.gpf-apply-btn:disabled {
	background-color: var(--gpf-secondary);
	border-color: var(--gpf-secondary);
	color: var(--gpf-muted);
	cursor: not-allowed;
}

/* Product-card CTA buttons live inside a COLUMN flexbox (.gpf-product-body),
   so they must NOT use flex:1 (that stretches an item's main-axis size,
   which in a column container is height -- giving different button
   heights per card depending on each card's own leftover vertical
   space). Width is instead pinned to 100% explicitly further down via
   .gpf-product-body .gpf-cta-btn, and vertical position is handled by
   margin-top: auto, not flex-grow. */
.gpf-cta-btn.gpf-cta-add {
	background-color: var(--gpf-primary);
	color: #FFFFFF;
	border-color: var(--gpf-primary);
	text-align: center;
	text-decoration: none;
}
.gpf-cta-btn.gpf-cta-add:hover {
	background-color: var(--gpf-primary-hover);
	border-color: var(--gpf-primary-hover);
	color: #FFFFFF;
}
.gpf-cta-btn.gpf-cta-add:active {
	background-color: #D96E89;
	border-color: #D96E89;
}
.gpf-cta-btn.gpf-cta-add[aria-disabled="true"] {
	background-color: var(--gpf-secondary);
	border-color: var(--gpf-secondary);
	color: var(--gpf-muted);
	cursor: not-allowed;
}

.gpf-cta-btn.gpf-cta-select {
	background: transparent;
	color: var(--gpf-primary);
	border-color: var(--gpf-primary);
	text-align: center;
	text-decoration: none;
}
.gpf-cta-btn.gpf-cta-select:hover {
	background-color: var(--gpf-primary);
	color: #FFFFFF;
}

/* Post add-to-cart state ("مشاهده سبد خرید") -- static fallback defaults;
   the Goldoon Products widget's Elementor style controls override these. */
.gpf-cta-btn.gpf-cta-added {
	background-color: #333333;
	border-color: #333333;
	color: #FFFFFF;
}
.gpf-cta-btn.gpf-cta-added:hover {
	background-color: #4A4A4A;
	border-color: #4A4A4A;
}
.gpf-cta-btn.gpf-cta-added {
	font-size: inherit;
}
.gpf-cta-btn.gpf-cta-loading {
	opacity: .7;
	pointer-events: none;
}

.gpf-reset-btn:focus-visible,
.gpf-apply-btn:focus-visible,
.gpf-load-more-btn:focus-visible,
.gpf-mobile-trigger:focus-visible,
.gpf-cta-btn:focus-visible,
.gpf-drawer-close:focus-visible,
.gpf-ajax-retry:focus-visible {
	outline: 2px solid var(--gpf-primary);
	outline-offset: 2px;
}

/* Active filters */
.gpf-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.gpf-active-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--gpf-secondary);
	color: var(--gpf-text);
	border: none;
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 0.85em;
	cursor: default;
}
button.gpf-active-filter-chip {
	cursor: pointer;
}
.gpf-active-filter-chip button {
	appearance: none;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--gpf-text);
	font-weight: 700;
	line-height: 1;
	padding: 0;
}

/* ------------------------------------------------------------------ */
/* Mobile trigger + drawer                                            */
/* ------------------------------------------------------------------ */
.gpf-mobile-trigger {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	appearance: none;
	background-color: var(--gpf-primary);
	color: #FFFFFF;
	border: none;
	border-radius: var(--gpf-radius);
	padding: 12px 16px;
	font-weight: 600;
	cursor: pointer;
}
.gpf-mobile-trigger i,
.gpf-mobile-trigger svg {
	width: 1em;
	height: 1em;
}
.gpf-mobile-trigger:hover {
	background-color: var(--gpf-primary-hover);
}

.gpf-drawer-close {
	appearance: none;
	background: var(--gpf-soft-bg);
	border: 1px solid var(--gpf-border);
	color: var(--gpf-text);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	align-self: flex-end;
	margin-bottom: 4px;
	display: none;
}

@media (max-width: 768px) {
	.gpf-mobile-trigger {
		display: flex;
	}

	.gpf-filter-panel {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba(51, 51, 51, 0.4);
		display: none;
	}

	.gpf-filter-panel.is-open {
		display: block;
	}

	.gpf-drawer-close {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gpf-filter-panel .gpf-filter-form {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: min(360px, 88vw);
		max-height: 100dvh;
		border-radius: 0;
		box-shadow: none;
		overflow: hidden;
		padding: 0;
		display: grid;
		grid-template-rows: auto 1fr auto;
		animation-name: gpf-drawer-slide-from-left;
		animation-duration: var(--gpf-anim-duration, 250ms);
		animation-timing-function: ease;
	}

	.gpf-filter-panel .gpf-drawer-close {
		margin: 14px 14px 0;
	}

	.gpf-filter-panel .gpf-filter-groups {
		overflow-y: auto;
		padding: 10px 16px 16px;
		gap: 14px;
	}

	.gpf-filter-panel .gpf-active-filters {
		padding: 0 16px 10px;
	}

	/* Sticky bottom action bar: Apply + Reset stay visible while the
	   filter list scrolls above them. */
	.gpf-filter-panel .gpf-filter-actions {
		position: sticky;
		bottom: 0;
		background-color: var(--gpf-bg);
		border-top: 1px solid var(--gpf-border);
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		margin: 0;
	}

	/* Direction-aware slide-in: the drawer is anchored with
	   inset-inline-start (the conventional "opens from the start edge"
	   pattern for slide-out menus/drawers) -- which resolves to the LEFT
	   edge in LTR and the RIGHT edge in RTL. Since transform:translateX()
	   is always physical, not logical, the two directions each need
	   their own keyframes so the panel visually enters from the same
	   edge it's anchored to (RTL/Persian, this plugin's primary target,
	   anchors and enters from the RIGHT). */
	[dir="rtl"] .gpf-filter-panel .gpf-filter-form,
	.gpf-widget[dir="rtl"] .gpf-filter-panel .gpf-filter-form {
		animation-name: gpf-drawer-slide-from-right;
	}

	@keyframes gpf-drawer-slide-from-left {
		from { transform: translateX(-100%); }
		to { transform: translateX(0); }
	}
	@keyframes gpf-drawer-slide-from-right {
		from { transform: translateX(100%); }
		to { transform: translateX(0); }
	}
}

/*
 * NOTE ON THE BREAKPOINT ABOVE: 768px is only the fallback used when this
 * static stylesheet loads on its own. The "نقطه شکست موبایل" (mobile
 * breakpoint) and "مدت زمان انیمیشن" (animation duration) admin settings
 * are the values that actually take effect: Goldoon\Assets outputs a
 * small inline <style> block (via wp_add_inline_style) after this file
 * that repeats the same selectors inside `@media (max-width: <admin
 * value>px)` and sets --gpf-anim-duration -- CSS's normal cascade rules
 * mean that later, equally-specific block wins, so the admin-configured
 * breakpoint is what's actually active on a live site.
 */

/* ------------------------------------------------------------------ */
/* Products toolbar                                                    */
/* ------------------------------------------------------------------ */
.gpf-products-toolbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
	color: var(--gpf-text);
}
.gpf-sort-control,
.gpf-result-count {
	display: flex;
	align-items: center;
	min-height: 48px;
	min-width: 0;
	flex: 1 1 auto;
	border: 1px solid var(--gpf-border);
	border-radius: 18px;
	background-color: var(--gpf-bg);
	color: var(--gpf-text);
	padding: 12px 18px;
}
.gpf-sort-control {
	justify-content: flex-start;
	gap: 8px;
}
.gpf-sort-label {
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}
.gpf-sort-select {
	border: 0;
	border-radius: 0;
	padding: 0;
	background-color: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	max-width: 100%;
	min-width: 0;
	flex: 1;
	cursor: pointer;
	outline: none;
	text-overflow: ellipsis;
}
.gpf-result-count {
	justify-content: center;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* On narrow (mobile) screens, the sort control and result count stay
   SIDE BY SIDE just like desktop/tablet -- only shrinking (smaller
   padding/font, ellipsis on overflow) instead of stacking into two
   full-width rows. */
@media (max-width: 480px) {
	.gpf-products-toolbar {
		gap: 6px;
	}
	.gpf-sort-control,
	.gpf-result-count {
		min-height: 40px;
		padding: 8px 10px;
		font-size: 0.85em;
		border-radius: 12px;
	}
	.gpf-sort-label {
		display: none; /* the dropdown itself is still fully usable without the extra label at this width */
	}
}

/* ------------------------------------------------------------------ */
/* Product grid + Goldoon card                                        */
/* ------------------------------------------------------------------ */
.gpf-products-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: opacity .2s ease;
}
.gpf-products-container.is-loading .gpf-products-grid {
	opacity: 0.55;
	pointer-events: none;
}

/*
 * NOTE: column count at each breakpoint is intentionally NOT hardcoded
 * here anymore. The "تعداد ستون‌ها" Elementor control (a responsive
 * control with its own desktop/tablet/mobile values -- see
 * class-products-widget.php) is the single source of truth; Elementor
 * generates its own @media rules for it automatically. A static
 * fallback here previously used different breakpoints (992px/600px)
 * than Elementor's own responsive system, which -- while not literally
 * a specificity conflict, since Elementor's generated selector is more
 * specific and would still win -- made auditing "why doesn't the mobile
 * column count seem to apply" unnecessarily confusing. One source of
 * truth for a given property beats two overlapping ones.
 */

.gpf-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--gpf-border);
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--gpf-bg);
	box-shadow: 0 2px 10px rgba(51, 51, 51, 0.04);
	transition: box-shadow .2s ease, transform .2s ease;
	height: 100%;
	/* "فاصله داخلی محتوای کارت" (Elementor: card_padding) is applied
	   HERE, wrapping the image AND the body together -- previously it
	   only targeted .gpf-product-body, so increasing it visually had no
	   effect on the product image at all. Defaults to 0 on every side,
	   so out of the box nothing changes; .gpf-product-body still carries
	   its own baseline text padding below. */
	padding: 0;
}
.gpf-product-card:hover {
	box-shadow: 0 6px 20px rgba(239, 166, 184, 0.25);
	transform: translateY(-2px);
}

.gpf-product-image-link {
	display: block;
}
.gpf-product-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background-color: #FFFFFF;
	padding: 12px;
	overflow: hidden;
}
.gpf-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/*
 * .gpf-product-body uses a plain flex COLUMN, not CSS Grid. This matters:
 * with a fixed-height image above it and the card stretched to a uniform
 * height across its grid row (see .gpf-product-card { height: 100% }),
 * a flex column is what lets `margin-top: auto` on the CTA button below
 * reliably push it to the exact same Y position in every card in the
 * row, regardless of whether THIS card's title wrapped to one line or
 * two -- the auto margin always consumes whatever space is left over
 * after title+price, so the button's bottom edge lines up card to card.
 * (An earlier CSS Grid version of this rule set had 4 "auto" row tracks
 * for only 3 actual children -- title/price/button auto-placed into
 * rows 1-3, leaving the intended "spacer" row 4 completely unused, so
 * the button ended up wherever leftover grid space happened to center
 * it instead of anchored to a fixed bottom position. Flexbox's auto
 * margin doesn't have that failure mode.)
 */
.gpf-product-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	gap: 0;
	padding: 4px 14px 16px;
	text-align: center;
}

.gpf-product-title {
	width: 100%;
	margin: 0;
	font-size: 0.95em;
	line-height: 1.5;
}
.gpf-product-title a {
	color: var(--gpf-text);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gpf-product-title a:hover {
	color: var(--gpf-primary);
}

.gpf-product-price {
	width: 100%;
	margin: 0;
	color: var(--gpf-primary);
	font-weight: 700;
	font-size: 0.95em;
	word-break: break-word;
}
.gpf-product-price del {
	color: var(--gpf-muted);
	font-weight: 400;
	opacity: .8;
}

/* Button is sized by its own content + padding (see the "cta_padding"
   Elementor control) instead of stretching the full card width.
   margin-top defaults to auto (bottom-anchored, see "هم‌تراز کردن خودکار
   دکمه‌ها" above) -- the Elementor control toggles this to a fixed gap
   instead when turned off. align-self follows the same alignment value
   as the rest of the card content (--gpf-card-align), defaulting to
   center. */
.gpf-product-body .gpf-cta-btn {
	margin-top: auto;
	align-self: var(--gpf-card-align, center);
	width: auto;
	max-width: 100%;
	min-width: 0;
	font-size: 0.85em;
	padding: 9px 12px;
}

/* A custom "افزودن به سبد خرید" / "انتخاب گزینه‌ها" / "مشاهده سبد خرید"
   label is admin-editable free text -- on a narrow mobile column it
   could otherwise be long enough to push the button (and the rest of
   the card's tidy layout) wider than the card itself. It truncates with
   an ellipsis instead, so button/card order and alignment never break
   across screen sizes. */
.gpf-cta-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}


/* WooCommerce/theme fallback links are intentionally hidden. The plugin
   turns the original button itself into the cart link after a successful
   add-to-cart, so a second standalone "مشاهده سبد خرید" link must never
   appear underneath it. */
.gpf-product-card .added_to_cart,
.gpf-product-card a.added_to_cart.wc-forward {
	display: none !important;
}

.gpf-no-results {
	grid-column: 1 / -1;
	padding: 40px;
	text-align: center;
	color: var(--gpf-muted);
}

/* ------------------------------------------------------------------ */
/* Pagination -- single "بارگذاری بیشتر" (Load More) button            */
/* ------------------------------------------------------------------ */
.gpf-pagination {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}
.gpf-load-more-btn {
	appearance: none;
	border: 1px solid var(--gpf-primary);
	background-color: transparent;
	color: var(--gpf-primary);
	border-radius: 999px;
	padding: 10px 28px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gpf-load-more-btn:hover {
	background-color: var(--gpf-primary);
	color: #FFFFFF;
}
.gpf-load-more-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.gpf-load-more-btn {
		width: 100%;
		padding: 10px 16px;
	}
}

.gpf-products-loading {
	display: none;
	height: 3px;
	border-radius: 3px;
	overflow: hidden;
	background-color: var(--gpf-secondary);
	margin-bottom: 12px;
}
.gpf-products-loading.is-active {
	display: block;
	position: relative;
}
.gpf-products-loading.is-active::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -30%;
	width: 30%;
	background-color: var(--gpf-primary);
	animation: gpf-loading-bar 1s ease-in-out infinite;
}
@keyframes gpf-loading-bar {
	0% { inset-inline-start: -30%; }
	100% { inset-inline-start: 100%; }
}

.gpf-ajax-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background-color: #fff3f3;
	border: 1px solid #f3c6c6;
	color: #a33;
	padding: 10px 14px;
	border-radius: 10px;
	margin-bottom: 14px;
	grid-column: 1 / -1;
}
.gpf-ajax-retry {
	padding: 6px 14px;
	font-size: 0.85em;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}