/**
 * Novo Portfolio — Two-level filter UI (Luxury black & gold theme).
 *
 * PURE STYLING. This file only restyles the two filter rows that the child
 * theme JS injects (`.filter-button-group.ptcf-enhanced` > `.wrap.ptcf-parents`
 * / `.wrap.ptcf-children`). It changes NO markup, NO filtering logic and does
 * not touch the parent Novo theme or the PT Portfolio plugin.
 *
 * All rules are scoped to `.ptcf-enhanced` so other filter bars on the site
 * (blog, products) are left completely untouched.
 */

.filter-button-group.ptcf-enhanced {
	/* Luxury gold gradient stops */
	--ptcf-gold-1: #f9edc0;
	--ptcf-gold-2: #e9cd7d;
	--ptcf-gold-3: #caa14a;
	--ptcf-gold-4: #b8863a;

	--ptcf-gold-soft: rgba(212, 175, 55, 0.55);
	--ptcf-gold-line: rgba(212, 175, 55, 0.30);
	--ptcf-glass: rgba(14, 13, 11, 0.55);
	--ptcf-text: #f4f1ea;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	margin: 0 auto 46px;
	padding: 0;
	background: none;
	border: 0;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Filter bars — glassmorphism pill with a soft gold gradient rim
 * ---------------------------------------------------------------------- */
.filter-button-group.ptcf-enhanced .wrap.ptcf-parents,
.filter-button-group.ptcf-enhanced .wrap.ptcf-children {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	padding: 9px;
	border-radius: 999px;
	border: 1px solid transparent;

	/* Glass fill (padding-box) + gold gradient border (border-box). */
	background:
		linear-gradient(var(--ptcf-glass), var(--ptcf-glass)) padding-box,
		linear-gradient(
			135deg,
			rgba(249, 237, 192, 0.55),
			rgba(201, 162, 75, 0.12) 45%,
			rgba(249, 237, 192, 0.50)
		) border-box;

	-webkit-backdrop-filter: blur(16px) saturate(130%);
	backdrop-filter: blur(16px) saturate(130%);
	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.5),
		0 2px 8px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Sub filter: collapsed by default, revealed with a smooth fade + slide. */
.filter-button-group.ptcf-enhanced .wrap.ptcf-children {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(-8px);
	border-color: transparent;
	pointer-events: none;
	transition:
		max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.4s ease,
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.4s ease;
}

.filter-button-group.ptcf-enhanced .wrap.ptcf-children.is-visible {
	max-height: 240px;
	padding-top: 7px;
	padding-bottom: 7px;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */
.filter-button-group.ptcf-enhanced .button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* clips the shine sweep to the pill */
	margin: 0 !important; /* overrides theme's margin-bottom:10px !important */
	padding: 12px 24px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.02);
	color: var(--ptcf-text);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		color 0.35s ease,
		border-color 0.35s ease,
		background 0.35s ease,
		box-shadow 0.35s ease,
		transform 0.35s ease;
}

/* Neutralise the parent theme's underline hover pseudo-element. */
.filter-button-group.ptcf-enhanced .button::after {
	display: none !important;
	content: none !important;
}

/* Diagonal light "shine" sweep (premium gleam on hover / active). */
.filter-button-group.ptcf-enhanced .button::before {
	content: "";
	position: absolute;
	top: 0;
	left: -130%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		115deg,
		transparent 0%,
		rgba(255, 255, 255, 0.35) 50%,
		transparent 100%
	);
	transform: skewX(-18deg);
	transition: left 0.6s ease;
	pointer-events: none;
	z-index: 2;
}

.filter-button-group.ptcf-enhanced .button:hover::before {
	left: 140%;
}

.filter-button-group.ptcf-enhanced .button span {
	position: relative;
	z-index: 3;
	color: inherit;
}

/* Inactive hover — gold rim, subtle lift, faint gold halo. */
.filter-button-group.ptcf-enhanced .button:hover {
	color: #f8ecc2;
	border-color: rgba(212, 175, 55, 0.85);
	transform: translateY(-2px);
	box-shadow:
		0 8px 22px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(212, 175, 55, 0.25),
		0 0 18px rgba(212, 175, 55, 0.18);
}

/* Active — polished metallic gold pill, dark text, soft glow. */
.filter-button-group.ptcf-enhanced .button.active {
	color: #1c1608;
	border-color: transparent;
	background: linear-gradient(
		135deg,
		var(--ptcf-gold-1) 0%,
		var(--ptcf-gold-2) 32%,
		var(--ptcf-gold-3) 58%,
		var(--ptcf-gold-4) 76%,
		var(--ptcf-gold-2) 100%
	);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
	box-shadow:
		0 0 26px rgba(212, 175, 55, 0.5),
		0 10px 28px rgba(201, 162, 75, 0.42),
		inset 0 1px 1px rgba(255, 255, 255, 0.65),
		inset 0 -2px 3px rgba(120, 80, 20, 0.35);
}

.filter-button-group.ptcf-enhanced .button.active:hover {
	color: #1c1608;
	transform: translateY(-2px);
	box-shadow:
		0 0 34px rgba(212, 175, 55, 0.7),
		0 12px 30px rgba(201, 162, 75, 0.5),
		inset 0 1px 1px rgba(255, 255, 255, 0.7),
		inset 0 -2px 3px rgba(120, 80, 20, 0.4);
}

/* Keyboard focus visibility. */
.filter-button-group.ptcf-enhanced .button:focus-visible {
	outline: 2px solid rgba(212, 175, 55, 0.9);
	outline-offset: 3px;
}

/* Sub-filter buttons: same finish, slightly smaller and lighter. */
.filter-button-group.ptcf-enhanced .wrap.ptcf-children .button {
	padding: 9px 19px;
	font-size: 11.5px;
	letter-spacing: 0.16em;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

/* Tablet — allow graceful wrapping, tighten spacing. */
@media screen and (max-width: 1024px) {
	.filter-button-group.ptcf-enhanced {
		gap: 15px;
	}

	.filter-button-group.ptcf-enhanced .button {
		padding: 11px 19px;
		letter-spacing: 0.16em;
	}
}

/* Tablet & mobile — keep every bar on a SINGLE line and scroll horizontally
 * when there are too many tabs (hidden scrollbar). */
@media screen and (max-width: 782px) {
	.filter-button-group.ptcf-enhanced {
		gap: 12px;
		padding: 0 10px; /* keep the bars off the screen edges */
	}

	.filter-button-group.ptcf-enhanced .wrap.ptcf-parents,
	.filter-button-group.ptcf-enhanced .wrap.ptcf-children.is-visible {
		flex-wrap: nowrap;          /* one line */
		justify-content: flex-start;
		width: 100%;
		max-width: 100%;
		padding: 7px 10px;
		border-radius: 30px;
		overflow-x: auto;           /* horizontal scroll */
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;      /* Firefox */
		-ms-overflow-style: none;   /* IE/Edge */
	}

	/* Hide the scrollbar (Chrome/Safari). */
	.filter-button-group.ptcf-enhanced .wrap.ptcf-parents::-webkit-scrollbar,
	.filter-button-group.ptcf-enhanced .wrap.ptcf-children::-webkit-scrollbar {
		display: none;
	}

	/* Buttons keep their size and never shrink, so they scroll instead. */
	.filter-button-group.ptcf-enhanced .button {
		flex: 0 0 auto;
		padding: 9px 16px;
		font-size: 11px;
		letter-spacing: 0.1em;
		white-space: nowrap;
	}

	.filter-button-group.ptcf-enhanced .wrap.ptcf-children .button {
		padding: 8px 14px;
		font-size: 10.5px;
	}
}

/* Small phones — shrink the labels a touch. */
@media screen and (max-width: 420px) {
	.filter-button-group.ptcf-enhanced .button {
		padding: 8px 13px;
		font-size: 10px;
		letter-spacing: 0.06em;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.filter-button-group.ptcf-enhanced .wrap.ptcf-children,
	.filter-button-group.ptcf-enhanced .button,
	.filter-button-group.ptcf-enhanced .button::before {
		transition: none;
	}
}