/* ═══════════════════════════════════════════════════════════════════════
 *  FILTER CHIPS  —  the quick tabs above every tour grid
 *
 *  Every page wrote its own chip styles, and the parent theme's
 *  `.traveltour-body button` rule (0,1,1) outranked them (0,1,0) — which is
 *  why every chip rendered filled orange, as if all of them were selected.
 *  These rules are `html body :is(…)` so they win without !important, and one
 *  set covers all 13 families.
 *
 *  On a phone the row becomes a native select (built by assets/js/epl-filters.js):
 *  nine chips stacked take most of a screen before a single tour shows up.
 * ═══════════════════════════════════════════════════════════════════════ */

html body :is(.eab-chip, .eos-chip, .epbg-chip, .epca-chip, .epc-chip, .epcl-chip,
	.epct-chip, .epk-chip, .eplx-chip, .epnc-chip, .ept-chip, .eth-chip, .etp-chip) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1.5px solid var(--epl-line);
	border-radius: 100px;
	background: transparent;
	/* The theme paints every <button> white, so without an explicit colour the
	   unselected chips rendered white text on the cream ground. */
	color: var(--epl-ink-70);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
html body :is(.eab-chip, .eos-chip, .epbg-chip, .epca-chip, .epc-chip, .epcl-chip,
	.epct-chip, .epk-chip, .eplx-chip, .epnc-chip, .ept-chip, .eth-chip, .etp-chip):hover {
	border-color: var(--epl-accent);
	color: var(--epl-accent-dk);
	background: transparent;
}
html body :is(.eab-chip, .eos-chip, .epbg-chip, .epca-chip, .epc-chip, .epcl-chip,
	.epct-chip, .epk-chip, .eplx-chip, .epnc-chip, .ept-chip, .eth-chip, .etp-chip):focus-visible {
	outline: 2px solid var(--epl-accent);
	outline-offset: 2px;
}
html body :is(.eab-chip, .eos-chip, .epbg-chip, .epca-chip, .epc-chip, .epcl-chip,
	.epct-chip, .epk-chip, .eplx-chip, .epnc-chip, .ept-chip, .eth-chip, .etp-chip).is-active {
	background: var(--epl-accent);
	border-color: var(--epl-accent);
	color: #fff;
}
/* the little count some families print inside the chip */
html body :is(.epk-chip-count, .epca-chip-count, .epcl-chip-count, .epbg-chip-count,
	.epct-chip-count, .epnc-chip-count, .eplx-chip-count, .eth-chip-count, .etp-chip-count) {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--epl-ink-30);
	background: none;
	padding: 0;
}
html body :is(.eab-chip, .eos-chip, .epbg-chip, .epca-chip, .epc-chip, .epcl-chip,
	.epct-chip, .epk-chip, .eplx-chip, .epnc-chip, .ept-chip, .eth-chip, .etp-chip).is-active
	:is(.epk-chip-count, .epca-chip-count, .epcl-chip-count, .epbg-chip-count,
	.epct-chip-count, .epnc-chip-count, .eplx-chip-count, .eth-chip-count, .etp-chip-count) {
	color: rgba(255, 255, 255, .78);
}

/* ── the phone version: one select instead of a wall of chips ── */
.epl-filter-select {
	display: none;
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--epl-ink);
	background: #fff;
	border: 1.5px solid var(--epl-line);
	border-radius: 12px;
	padding: 12px 40px 12px 14px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b86c3c'%3E%3Cpath d='M8 11.2 2.8 6l1.1-1.1L8 9l4.1-4.1L13.2 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}
.epl-filter-select:focus-visible { outline: 2px solid var(--epl-accent); outline-offset: 2px; }

@media (max-width: 760px) {
	.epl-filter-select { display: block; }
	.epl-filter-select + [data-epl-chips] { display: none; }
}

/* ═══ One chip row everywhere (2026-09-12) ═══════════════════════════════
 *  The cairo-day-tours row is the house design: bare pills on the page, no
 *  container. The nine hubs had wrapped theirs in a white card with a
 *  "Filter:" label and a count bubble per chip; those go, so every filter
 *  row on the site reads the same. The markup and the per-page scripts are
 *  untouched — the ids the scripts hang off are still there.
 * ══════════════════════════════════════════════════════════════════════ */
html body :is(.epk-filter-wrap, .epca-filter-wrap, .epcl-filter-wrap, .epbg-filter-wrap, .epct-filter-wrap, .epnc-filter-wrap, .eplx-filter-wrap, .eth-filter-wrap, .etp-filter-wrap) {
	background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; position: static;
}
html body :is(.epk-filter-bar, .epca-filter-bar, .epcl-filter-bar, .epbg-filter-bar, .epct-filter-bar, .epnc-filter-bar, .eplx-filter-bar, .eth-filter-bar, .etp-filter-bar) {
	display: flex; flex-wrap: wrap; justify-content: left; gap: 5px; margin: 0 0 20px;
}
html body :is(.epk-filter-label, .epca-filter-label, .epcl-filter-label, .epbg-filter-label, .epct-filter-label, .epnc-filter-label, .eplx-filter-label, .eth-filter-label, .etp-filter-label), html body :is(.epk-chip-count, .epca-chip-count, .epcl-chip-count, .epbg-chip-count, .epct-chip-count, .epnc-chip-count, .eplx-chip-count, .eth-chip-count, .etp-chip-count) { display: none; }

/* the homepage "ways to plan" tabs are the same control, and were rendering
   solid orange for the same reason the chips once did — the parent theme
   paints every button. They keep their centred row. */
html body .eh-tab {
	display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
	border: 1.5px solid var(--epl-line); border-radius: 100px; background: transparent;
	color: var(--epl-ink-70); font-family: inherit; font-size: 14px; font-weight: 500;
	line-height: 1.2; letter-spacing: 0; text-transform: none; cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
html body .eh-tab:hover { border-color: var(--epl-accent); color: var(--epl-accent-dk); background: transparent; }
html body .eh-tab[aria-selected="true"] { background: var(--epl-accent); border-color: var(--epl-accent); color: #fff; }
html body .eh-tabs { gap: 5px; margin-bottom: 20px; }