/* IcaruZen Portfolio Filter — filter bar and country menu
   Shared by both render modes. Every color falls back to a theme token, so
   the controls sit inside the existing design instead of fighting it. */

.izp-toolbar,
.izp-layout {
	--izp-accent: #253d8c;
	--izp-text: var(--e-global-color-primary, inherit);
	--izp-muted: var(--e-global-color-text, #8a8a8a);
	--izp-border: rgba(128, 128, 128, 0.24);
	--izp-on-accent: #fff;
	--izp-surface: #fff;
	--izp-btn-radius: 25px;
	--izp-font-display: "Marcellus", serif;
	--izp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.izp-toolbar *,
.izp-toolbar *::before,
.izp-toolbar *::after,
.izp-side *,
.izp-side *::before,
.izp-side *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------- Filter bar */

.izp-toolbar {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 26px);
	margin: 0 0 clamp(24px, 3vw, 44px);
}

.izp-filter__track {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.izp-toolbar.izp-align-left .izp-filter__track {
	justify-content: flex-start;
}

.izp-toolbar.izp-align-right .izp-filter__track {
	justify-content: flex-end;
}

.izp-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	margin: 0;
	padding: 11px 22px;
	font-family: var(--izp-font-display) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--izp-accent) !important;
	background: transparent !important;
	border: 1px solid var(--izp-accent) !important;
	border-radius: var(--izp-btn-radius) !important;
	box-shadow: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.25s var(--izp-ease), background-color 0.25s var(--izp-ease),
		opacity 0.25s var(--izp-ease);
	-webkit-appearance: none;
	appearance: none;
}

.izp-filter__btn:hover,
.izp-filter__btn:focus-visible {
	background: color-mix(in srgb, var(--izp-accent) 9%, transparent) !important;
	color: var(--izp-accent) !important;
}

.izp-filter__btn:focus-visible,
.izp-side__btn:focus-visible,
.izp-select__btn:focus-visible,
.izp-option:focus-visible {
	outline: 2px solid var(--izp-accent);
	outline-offset: 3px;
}

.izp-filter__btn.is-active {
	color: var(--izp-on-accent) !important;
	background: var(--izp-accent) !important;
	border-color: var(--izp-accent) !important;
	font-weight: 500 !important;
}

/* An option that would return nothing stays visible but reads as unavailable. */
.izp-filter__btn.is-empty,
.izp-side__btn.is-empty,
.izp-option.is-empty {
	opacity: 0.35;
	cursor: not-allowed;
}

.izp-filter__btn.is-empty:hover {
	background: transparent;
}

.izp-count {
	font-size: 12px;
	font-family: inherit;
	font-weight: 600;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--izp-border);
	background: color-mix(in srgb, currentColor 14%, transparent);
	color: inherit;
	opacity: 0.9;
}

.izp-count[hidden] {
	display: none;
}

.izp-filter__btn.is-active .izp-count,
.izp-option.is-active .izp-count {
	background: rgba(255, 255, 255, 0.24);
}

.izp-flag {
	font-size: 1.05em;
	line-height: 1;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Theme mode sets the pills slightly wider, matching the theme's own bar. */
.izp-theme-grid .izp-filter__btn {
	padding: 11px 26px;
}

.izp-results {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: var(--izp-muted);
}

.izp-toolbar.izp-align-left .izp-results {
	text-align: start;
}

.izp-toolbar.izp-align-right .izp-results {
	text-align: end;
}


/* -------------------------------------------------- Moving country strip */

.izp-marquee {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.izp-marquee__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	/* Soften both ends so chips arrive and leave instead of being cut off. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

.izp-marquee__track {
	display: flex;
	width: max-content;
	gap: 10px;
}

.izp-marquee__track.is-running {
	animation: izp-marquee var(--izp-marquee-duration, 30s) linear infinite;
}

[dir="rtl"] .izp-marquee__track.is-running {
	animation-name: izp-marquee-rtl;
}

/* Reading beats motion: stop the strip whenever someone reaches for it. */
.izp-marquee__viewport:hover .izp-marquee__track,
.izp-marquee__track:focus-within,
.izp-marquee__track.is-paused {
	animation-play-state: paused;
}

.izp-marquee__group {
	display: flex;
	gap: 10px;
	padding-inline-end: 10px;
}

@keyframes izp-marquee {
	to {
		transform: translateX(calc(var(--izp-marquee-shift, 50%) * -1));
	}
}

@keyframes izp-marquee-rtl {
	to {
		transform: translateX(var(--izp-marquee-shift, 50%));
	}
}

.izp-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	margin: 0;
	padding: 9px 18px;
	font-family: var(--izp-font-display) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.2;
	color: var(--izp-accent) !important;
	background: transparent !important;
	border: 1px solid var(--izp-accent) !important;
	border-radius: var(--izp-btn-radius) !important;
	box-shadow: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.25s var(--izp-ease), background-color 0.25s var(--izp-ease),
		opacity 0.25s var(--izp-ease);
	-webkit-appearance: none;
	appearance: none;
}

.izp-chip:hover {
	background: color-mix(in srgb, var(--izp-accent) 9%, transparent) !important;
	color: var(--izp-accent) !important;
}

.izp-chip:focus-visible {
	outline: 2px solid var(--izp-accent);
	outline-offset: 3px;
}

.izp-chip.is-active {
	color: var(--izp-on-accent) !important;
	background: var(--izp-accent) !important;
	border-color: var(--izp-accent) !important;
	font-weight: 500 !important;
}

.izp-chip.is-empty {
	opacity: 0.35;
	cursor: not-allowed;
}

.izp-chip.is-empty:hover {
	background: transparent;
}

.izp-chip.is-active .izp-count {
	background: rgba(255, 255, 255, 0.24);
}

/* The "All" chip is pinned outside the strip so it never scrolls away. */
.izp-chip--all {
	flex: none;
}

.izp-marquee .izp-flag {
	font-size: 1.2em;
}

@media (max-width: 600px) {
	.izp-marquee {
		gap: 8px;
	}

	.izp-chip {
		padding: 8px 14px;
		font-size: 14px !important;
	}

	/* On touch, replace the auto-scrolling animation with a plain,
	   hand-scrollable strip — same behaviour as the category row. */
	.izp-marquee__track.is-running {
		animation: none;
	}

	.izp-marquee__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
	}

	.izp-marquee__viewport::-webkit-scrollbar {
		display: none;
	}

	/* The extra clones exist to hide the loop's seam during the animation;
	   once it's off, they'd just repeat the list while scrolling by hand. */
	.izp-marquee__track > [aria-hidden="true"] {
		display: none;
	}
}

/* -------------------------------------------------- Two-column layout */

.izp-layout {
	display: flex;
	align-items: flex-start;
	gap: clamp(26px, 3vw, 48px);
}

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

.izp-side {
	flex: 0 0 clamp(170px, 15vw, 220px);
	position: sticky;
	top: 24px;
}

.izp-side__title {
	margin: 0 0 6px;
	padding: 0 0 12px;
	font-family: var(--izp-font-display);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--izp-text);
	border-bottom: 1px solid var(--izp-border);
}

.izp-side__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.izp-side__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.izp-side__item::before,
.izp-side__item::marker {
	content: none;
}

.izp-side__btn {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	margin: 0;
	padding: 11px 0 11px 10px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
	text-align: start;
	color: var(--izp-muted);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--izp-border);
	border-inline-start: 2px solid transparent;
	cursor: pointer;
	transition: color 0.25s var(--izp-ease), border-color 0.25s var(--izp-ease),
		opacity 0.25s var(--izp-ease);
	-webkit-appearance: none;
	appearance: none;
}

.izp-side__item:last-child .izp-side__btn {
	border-bottom: 0;
}

.izp-side__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.izp-side__btn:hover {
	color: var(--izp-accent);
}

.izp-side__btn.is-active {
	color: var(--izp-accent);
	font-weight: 500;
	border-inline-start-color: var(--izp-accent);
}

.izp-side__btn.is-empty:hover {
	color: var(--izp-muted);
}

/* -------------------------------------------------- Dropdown */

.izp-select {
	position: relative;
}

.izp-select__btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 210px;
	max-width: 100%;
	margin: 0;
	padding: 11px 18px;
	font-family: var(--izp-font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--izp-text);
	background: transparent;
	border: 1px solid var(--izp-border);
	border-radius: var(--izp-btn-radius);
	cursor: pointer;
	text-align: start;
	transition: border-color 0.25s var(--izp-ease), color 0.25s var(--izp-ease);
	-webkit-appearance: none;
	appearance: none;
}

.izp-select__btn:hover,
.izp-select.is-set .izp-select__btn {
	border-color: var(--izp-accent);
	color: var(--izp-accent);
}

.izp-select__value {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.izp-select__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.izp-select__chevron {
	flex: none;
	transition: transform 0.25s var(--izp-ease);
}

.izp-select.is-open .izp-select__chevron {
	transform: rotate(180deg);
}

.izp-select__panel {
	position: absolute;
	z-index: 30;
	inset-inline-start: 0;
	top: calc(100% + 8px);
	width: max(260px, 100%);
	max-width: min(340px, 90vw);
	padding: 8px;
	background: var(--izp-surface);
	border: 1px solid var(--izp-border);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}

.izp-select__panel[hidden] {
	display: none;
}

.izp-select__search {
	padding: 4px 4px 8px;
}

.izp-select__input {
	width: 100%;
	padding: 9px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--izp-text);
	background: transparent;
	border: 1px solid var(--izp-border);
	border-radius: 12px;
	outline: none;
}

.izp-select__input:focus {
	border-color: var(--izp-accent);
}

.izp-select__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 264px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.izp-option {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
	color: var(--izp-text);
	text-align: start;
	background: transparent;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.18s var(--izp-ease), color 0.18s var(--izp-ease);
	-webkit-appearance: none;
	appearance: none;
}

.izp-option[hidden] {
	display: none;
}

.izp-option__text {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.izp-option:hover {
	color: var(--izp-accent);
}

.izp-option.is-active {
	color: var(--izp-on-accent);
	background: var(--izp-accent);
}

.izp-option.is-empty:hover {
	background: transparent;
	color: var(--izp-text);
}

.izp-select__none {
	margin: 6px 0 2px;
	padding: 0 12px 6px;
	font-size: 14px;
	color: var(--izp-muted);
}

.izp-select__none[hidden] {
	display: none;
}

/* -------------------------------------------------- Arabic */

[dir="rtl"] .izp-side__btn {
	padding: 11px 10px 11px 0;
}

/* -------------------------------------------------- Small screens */

@media (max-width: 900px) {
	.izp-layout {
		display: block;
	}

	.izp-side {
		position: static;
		margin: 0 0 26px;
	}

	.izp-side__title {
		padding-bottom: 10px;
		font-size: 16px;
	}

	/* The column folds into a row that scrolls sideways. */
	.izp-side__list {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding: 12px 0 2px;
	}

	.izp-side__list::-webkit-scrollbar {
		display: none;
	}

	.izp-side__item {
		flex: none;
	}

	.izp-side__btn,
	[dir="rtl"] .izp-side__btn,
	.izp-side__item:last-child .izp-side__btn {
		width: auto;
		padding: 9px 18px;
		color: var(--izp-accent);
		white-space: nowrap;
		border: 1px solid var(--izp-accent);
		border-radius: var(--izp-btn-radius);
	}

	.izp-side__btn.is-active {
		color: var(--izp-on-accent);
		background: var(--izp-accent);
	}

	.izp-side__btn.is-active .izp-count {
		background: rgba(255, 255, 255, 0.24);
	}
}

@media (max-width: 600px) {
	/* Only the category row scrolls sideways — the country strip has its own
	   auto-scrolling marquee and shouldn't share a scroll region with it.
	   No negative-margin bleed here: some page builders wrap sections in
	   overflow:hidden, which would just clip a bleeding row instead of
	   letting it scroll. */
	.izp-facet.izp-filter {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.izp-facet.izp-filter::-webkit-scrollbar {
		display: none;
	}

	.izp-filter__track {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: max-content;
		min-width: 100%;
		padding-bottom: 2px;
	}

	.izp-filter__btn,
	.izp-theme-grid .izp-filter__btn {
		padding: 9px 16px;
		font-size: 14px !important;
	}
}

/* -------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	/* Never move the strip on its own; it becomes a plain scrolling row. */
	.izp-marquee__track.is-running {
		animation: none;
	}

	.izp-marquee__viewport {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.izp-filter__btn,
	.izp-side__btn,
	.izp-option,
	.izp-select__btn,
	.izp-select__chevron {
		transition: none !important;
	}
}