/* ============================================================
   IFAD Filters — catalog sidebar (accordion sections + custom
   checkboxes + facet counts). Navy brand, no native controls.
   ============================================================ */

.ifad-filters {
	--nv: #0e0e31;
	--line: #ececf0;
	--muted: #9a9aa8;
	font-size: 14px;
	color: var(--nv);
}

.ifad-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 20px;
}
.ifad-filters__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 600;
}
.ifad-filters__reset {
	font-size: 13px;
	color: #b12222;
	text-decoration: none;
}
.ifad-filters__reset:hover { text-decoration: underline; }
.ifad-filters__reset.is-hidden { display: none; }

/* --- Section (accordion) --- */
.ifad-filter-section { border-top: 1px solid var(--line); }
.ifad-filter-section:first-of-type { border-top: 0; }
.ifad-filter-section__head {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 22px 2px;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	color: var(--nv);
	text-align: left;
}
.ifad-filter-section__caret {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 1px solid #100d30;
	border-bottom: 1px solid #100d30;
	transform: rotate(45deg);
	transition: transform .2s ease, margin-top .2s ease;
}
.ifad-filter-section.is-open .ifad-filter-section__caret { transform: rotate(-135deg); margin-top: 2px; }

.ifad-filter-section__label { display: inline-flex; align-items: center; gap: 6px; }

/* --- "?" tooltip popover --- */
.ifad-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: help;
}
.ifad-tip__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border: 1.5px solid #100d30;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #100d30;
	transition: background .15s ease, color .15s ease;
}
.ifad-tip:hover .ifad-tip__mark,
.ifad-tip:focus-within .ifad-tip__mark { background: #100d30; color: #fff; }
.ifad-tip__pop {
	position: absolute;
	top: calc(100% + 10px);
	left: -10px;
	width: 250px;
	max-width: 72vw;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 5px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--nv);
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
	z-index: 60;
	pointer-events: none;
}
.ifad-tip:hover .ifad-tip__pop,
.ifad-tip:focus .ifad-tip__pop,
.ifad-tip:focus-within .ifad-tip__pop {
	opacity: 1;
	visibility: visible;
	transform: none;
}
/* Arrow points UP at the icon (popover sits below). */
.ifad-tip__pop::before,
.ifad-tip__pop::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 16px;
	border: 6px solid transparent;
}
.ifad-tip__pop::before { border-bottom-color: var(--line); margin-bottom: 1px; }
.ifad-tip__pop::after { border-bottom-color: #fff; }

.ifad-filter-section__body { display: none; padding: 0 2px 12px; }
.ifad-filter-section.is-open .ifad-filter-section__body { display: block; }

.ifad-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 264px;
	overflow: auto;
}
.ifad-filter-list::-webkit-scrollbar { width: 6px; }
.ifad-filter-list::-webkit-scrollbar-thumb { background: #d7d7de; border-radius: 3px; }

/* --- Custom checkbox row --- */
.ifad-filter-item label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 2px;
	cursor: pointer;
}
.ifad-filter-item input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.ifad-filter-item__box {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1.5px solid #c3c3ce;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, border-color .15s ease;
}
.ifad-filter-item input:checked + .ifad-filter-item__box {
	background: var(--nv);
	border-color: var(--nv);
}
.ifad-filter-item input:checked + .ifad-filter-item__box::after {
	content: "";
	width: 5px;
	height: 9px;
	margin-top: -2px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ifad-filter-item input:focus-visible + .ifad-filter-item__box {
	outline: 2px solid var(--nv);
	outline-offset: 2px;
}
.ifad-filter-item__label { flex: 1 1 auto; }
.ifad-filter-item__count { color: var(--muted); font-size: 13px; }

.ifad-filter-item.is-empty { opacity: .38; }
.ifad-filter-item.is-empty label { cursor: default; }

/* --- Tiles (Shape icons / Colour letters) --- */
.ifad-filter-tiles {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 2px 0;
}
/* minmax(0,1fr) — NOT 1fr — so wide content can't blow a column wider than its
   equal share. This is what makes every Shape/Colour tile the same width. */
.ifad-filter-tiles.is-icons { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Shape tiles: identical width (grid) + identical height (fixed, not min). */
.is-icons .ifad-filter-tile__inner { height: 74px; min-height: 0; }
.ifad-filter-tiles.is-letters { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ifad-filter-tiles.is-buttons { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
/* Fixed height (not min) → every button tile is the same height regardless of
   how many lines its label wraps to. */
.is-buttons .ifad-filter-tile__inner { height: 56px; min-height: 0; gap: 0; padding: 6px 5px; overflow: hidden; }
.is-buttons .ifad-filter-tile__label { font-size: 12px; }

.ifad-filter-tile { margin: 0; }
.ifad-filter-tile label { display: block; cursor: pointer; margin: 0; }
.ifad-filter-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.ifad-filter-tile__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	min-height: 58px;
	padding: 8px 4px;
	box-sizing: border-box;
	background: #f4f4f7;
	border: 1px solid #e7e7ee;
	border-radius: 5px;
	text-align: center;
	transition: border-color .15s ease, background .15s ease;
}
.is-letters .ifad-filter-tile__inner { min-height: 44px; gap: 0; }
.ifad-filter-tile__inner img { width: 26px; height: 26px; object-fit: contain; }
.ifad-filter-tile__label { font-size: 11px; line-height: 1.15; color: var(--nv); }
.is-letters .ifad-filter-tile__label { font-size: 13px; }

.ifad-filter-tile input:hover + .ifad-filter-tile__inner { border-color: #c3c3ce; background: #ececf1; }
.ifad-filter-tile input:checked + .ifad-filter-tile__inner {
	border-color: var(--nv);
	background: var(--nv);
}
.ifad-filter-tile input:checked + .ifad-filter-tile__inner .ifad-filter-tile__label { color: #fff; }
.ifad-filter-tile input:checked + .ifad-filter-tile__inner img { filter: brightness(0) invert(1); }
.ifad-filter-tile input:focus-visible + .ifad-filter-tile__inner { outline: 2px solid var(--nv); outline-offset: 2px; }
.ifad-filter-tile.is-empty { opacity: .35; }
.ifad-filter-tile.is-empty label { cursor: default; }

/* --- Tile hover tooltip (custom; replaces the native title=) --- */
.ifad-filter-tile__lbl { position: relative; }
.ifad-filter-tile__lbl[data-tip]::after,
.ifad-filter-tile__lbl[data-tip]::before {
	position: absolute;
	left: 50%;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(4px);
	transition: opacity .14s ease, visibility .14s ease, transform .14s ease;
	pointer-events: none;
	z-index: 60;
}
.ifad-filter-tile__lbl[data-tip]::after {
	content: attr(data-tip);
	bottom: calc(100% + 8px);
	width: max-content;
	max-width: 160px;
	padding: 5px 9px;
	background: #fff;
	color: var(--nv);
	border: 1px solid var(--line);
	border-radius: 5px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	white-space: normal;
}
.ifad-filter-tile__lbl[data-tip]::before {
	content: "";
	bottom: calc(100% + 3px);
	border: 5px solid transparent;
	border-top-color: #fff;
	filter: drop-shadow(0 1px 0 var(--line));
	z-index: 61;
}
.ifad-filter-tile__lbl:hover::after,
.ifad-filter-tile__lbl:hover::before,
.ifad-filter-tile__lbl:focus-within::after,
.ifad-filter-tile__lbl:focus-within::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* --- Step slider (ordered scale: Poor→Excellent) --- */
.ifad-step { padding: 2px 0 4px; }
.ifad-step__labels {
	display: flex;
	gap: 9px; /* same gap as the track, so each label cell aligns with its segment */
	align-items: flex-end;
	/* 11px side inset matches the range track so the handle's 10.5px overhang stays
	   inside the container (was 4px → the handle spilled out and caused a few px of
	   horizontal scroll in the mobile filter drawer). Labels + track share the inset
	   so each label stays centred over its segment. */
	margin: 0 11px 10px;
}
.ifad-step__label {
	flex: 1 1 0;
	min-width: 0;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	color: var(--muted);
	transition: color .15s ease;
}
.ifad-step__label.is-in { color: var(--nv); }

.ifad-step__track {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	height: 6px;
	margin: 0 11px 4px; /* see .ifad-step__labels — keep the handle inside the box */
}
.ifad-step__seg {
	flex: 1 1 0;
	height: 6px;
	background: #fff;
	border: 1px solid #cfcfe0;
	border-radius: 3px;
	transition: background .12s ease, border-color .12s ease;
}
.ifad-step__seg.is-on {
	background: var(--nv);
	border-color: var(--nv);
}
.ifad-step__handle {
	position: absolute;
	top: 50%;
	width: 21px;
	height: 21px;
	margin: -12.5px 0 0 -10.5px;
	border-radius: 50%;
	border: 1px solid #7f7faa;
	background-color: var(--nv);
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.03598 3.07739L4.07817 6.27496L2.6141 3.07739H1.03598ZM5.00004 6.78809L6.70473 3.07587H3.29535L5.00004 6.78809ZM2.6266 2.46224L3.62192 0.615271H2.34379L0.937541 2.46224H2.6266ZM5.92348 6.26887L8.96567 3.0713H7.38754L5.92348 6.26887ZM3.33442 2.46224H6.6641L5.66879 0.615271H4.33129L3.33442 2.46224ZM7.37348 2.46224H9.06254L7.65629 0.615271H6.3766L7.37348 2.46224ZM8.06098 0.124978L9.93598 2.5871C9.98143 2.6443 10.0045 2.71539 10.0011 2.78765C9.99763 2.85991 9.96791 2.92861 9.91723 2.98147L5.22973 7.90419C5.20118 7.93582 5.16574 7.96085 5.126 7.97744C5.08627 7.99404 5.04324 8.00178 5.00004 8.00012C4.95689 8.00146 4.91396 7.99357 4.87427 7.977C4.83459 7.96042 4.79912 7.93557 4.77035 7.90419L0.0828541 2.98147C0.031262 2.92701 0.00181844 2.8561 4.15999e-05 2.782C-0.00485771 2.71006 0.0179887 2.63892 0.0641041 2.58253L1.9391 0.12041C1.96642 0.0812512 2.00363 0.0496114 2.04715 0.028542C2.09066 0.00747267 2.13902 -0.00231561 2.18754 0.000121053H7.81254C7.86153 -0.00197714 7.91022 0.00844128 7.9538 0.0303429C7.99738 0.0522446 8.03433 0.0848683 8.06098 0.124978Z' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center center;
	cursor: grab;
	touch-action: none;
	z-index: 2;
}
.ifad-step__handle:active { cursor: grabbing; }
.ifad-step__handle:focus-visible { outline: 2px solid var(--nv); outline-offset: 2px; }

/* --- AJAX loading state --- */
.ifad-catalog__main.is-loading {
	position: relative;
	opacity: .45;
	pointer-events: none;
	transition: opacity .15s ease;
}

/* --- Range slider (Carat + numeric fields) --- */
.ifad-range { padding: 4px 0 2px; }
.ifad-range__track {
	position: relative;
	height: 6px;
	margin: 0 11px 16px;
	background: #fff;
	border: 1px solid #7f7faa;
	border-radius: 5px;
}
.ifad-range__fill {
	position: absolute;
	top: -1px;
	bottom: -1px;
	background: var(--nv);
	border-radius: 5px;
}
.ifad-range__handle {
	position: absolute;
	top: 50%;
	width: 21px;
	height: 21px;
	margin: -10.5px 0 0 -10.5px;
	border-radius: 50%;
	border: 1px solid #7f7faa;
	background-color: var(--nv);
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.03598 3.07739L4.07817 6.27496L2.6141 3.07739H1.03598ZM5.00004 6.78809L6.70473 3.07587H3.29535L5.00004 6.78809ZM2.6266 2.46224L3.62192 0.615271H2.34379L0.937541 2.46224H2.6266ZM5.92348 6.26887L8.96567 3.0713H7.38754L5.92348 6.26887ZM3.33442 2.46224H6.6641L5.66879 0.615271H4.33129L3.33442 2.46224ZM7.37348 2.46224H9.06254L7.65629 0.615271H6.3766L7.37348 2.46224ZM8.06098 0.124978L9.93598 2.5871C9.98143 2.6443 10.0045 2.71539 10.0011 2.78765C9.99763 2.85991 9.96791 2.92861 9.91723 2.98147L5.22973 7.90419C5.20118 7.93582 5.16574 7.96085 5.126 7.97744C5.08627 7.99404 5.04324 8.00178 5.00004 8.00012C4.95689 8.00146 4.91396 7.99357 4.87427 7.977C4.83459 7.96042 4.79912 7.93557 4.77035 7.90419L0.0828541 2.98147C0.031262 2.92701 0.00181844 2.8561 4.15999e-05 2.782C-0.00485771 2.71006 0.0179887 2.63892 0.0641041 2.58253L1.9391 0.12041C1.96642 0.0812512 2.00363 0.0496114 2.04715 0.028542C2.09066 0.00747267 2.13902 -0.00231561 2.18754 0.000121053H7.81254C7.86153 -0.00197714 7.91022 0.00844128 7.9538 0.0303429C7.99738 0.0522446 8.03433 0.0848683 8.06098 0.124978Z' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center center;
	cursor: grab;
	touch-action: none;
	z-index: 2;
}
.ifad-range__handle:active { cursor: grabbing; }
.ifad-range__handle:focus-visible { outline: 2px solid var(--nv); outline-offset: 2px; }

/* RTL: handles are positioned from the physical right (see filters.js), so the
   centering margin moves to the right side too. */
[dir="rtl"] .ifad-step__handle { margin-left: 0; margin-right: -10.5px; }
[dir="rtl"] .ifad-range__handle { margin-left: 0; margin-right: -10.5px; }
.ifad-range__inputs {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.ifad-range__in {
	flex: 0 0 auto;
	width: 84px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 5px;
	font-size: 13px;
	color: var(--nv);
	background: #fff;
	box-sizing: border-box;
}
.ifad-range__in:focus { border-color: var(--nv); outline: none; }
.ifad-range__hidden { display: none; }

.ifad-filters__apply { margin-top: 14px; }
.ifad-filters__apply-btn {
	width: 100%;
	padding: 10px;
	background: var(--nv);
	color: #fff;
	border: 0;
	border-radius: 5px;
	font-size: 14px;
	cursor: pointer;
}