/* ═══════════════════════════════════════════════════════════════════════════
 *  EGYPT TOURS FINDER  (.epf-*)  —  page-egypt-tours-finder.php
 *
 *  Every control on this page is a link, so everything here styles anchors and
 *  list items rather than form controls. The checkbox squares are drawn, not
 *  native, because a real checkbox would imply a submit step that does not
 *  exist: one click is one navigation.
 *
 *  Tokens come from epl-base.css. The tour cards are the shared component.
 * ═══════════════════════════════════════════════════════════════════════════ */

.epf-root { background: #fff; color: var(--epl-ink); }
.epf-wrap { max-width: var(--epl-container); margin: 0 auto; padding-inline: var(--epl-gutter); }

/* ── the header ─────────────────────────────────────────────────────────── */
.epf-head { padding: 40px 0 28px; border-bottom: 1px solid var(--epl-line); }
.epf-kicker {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
	color: var(--epl-accent-dk); margin-bottom: 12px;
}
.epf-kicker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--epl-accent); }
.epf-h1 { margin: 0 0 12px; letter-spacing: -.03em; }
.epf-lede { max-width: 68ch; margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--epl-ink-70); }

/* ── the two columns ────────────────────────────────────────────────────── */
.epf-layout {
	display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 40px;
	align-items: start; padding-top: 30px; padding-bottom: 40px;
}

/* ── the filter panel ───────────────────────────────────────────────────── */
.epf-side { position: sticky; top: 22px; }
.epf-panel { border: 1px solid var(--epl-line); border-radius: 14px; background: #fff; overflow: hidden; }
.epf-panel-top {
	display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer;
	font-size: 14px; font-weight: 600; list-style: none; background: var(--epl-cream);
	border-bottom: 1px solid var(--epl-line);
}
.epf-panel-top::-webkit-details-marker { display: none; }
.epf-panel-title { flex: 1; }
.epf-panel-n {
	min-width: 21px; height: 21px; padding: 0 6px; border-radius: 100px;
	background: var(--epl-accent); color: #fff; font-size: 12px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	font-variant-numeric: tabular-nums;
}
/* the disclosure arrow, drawn so it can rotate with the state */
.epf-panel-top::after {
	content: ""; width: 8px; height: 8px; flex: none;
	border-right: 2px solid var(--epl-ink-50); border-bottom: 2px solid var(--epl-ink-50);
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.epf-panel[open] .epf-panel-top::after { transform: rotate(-135deg) translate(-2px, -2px); }
.epf-panel-body { padding: 4px 16px 16px; }
/* 35 options stand taller than any screen, which would stop the sticky
   column sticking to anything. The list scrolls inside the panel instead,
   so the filters stay beside the results however far down you read. */
@media (min-width: 901px) {
	.epf-panel-body { max-height: calc(100vh - 118px); overflow-y: auto; overscroll-behavior: contain; }
}

.epf-clear {
	display: inline-block; margin: 12px 0 2px; font-size: 13px; font-weight: 600;
	color: var(--epl-accent-dk); text-decoration: underline; text-underline-offset: 3px;
}

.epf-group { border: 0; padding: 0; margin: 18px 0 0; }
.epf-group + .epf-group { border-top: 1px solid var(--epl-line-lt, var(--epl-line)); padding-top: 16px; }
.epf-group-title {
	padding: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--epl-ink); margin-bottom: 3px;
}
.epf-group-hint { margin: 0 0 9px; font-size: 12px; line-height: 1.45; color: var(--epl-ink-30); }

.epf-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.epf-opt > a,
.epf-opt.is-off {
	display: flex; align-items: center; gap: 9px; padding: 6px 8px; margin-inline: -8px;
	border-radius: 7px; font-size: 14px; line-height: 1.4; color: var(--epl-ink-70);
	text-decoration: none;
}
.epf-opt > a:hover { background: var(--epl-cream); color: var(--epl-ink); }
.epf-opt > a:focus-visible { outline: 2px solid var(--epl-accent); outline-offset: 1px; }
.epf-opt.is-on > a { color: var(--epl-ink); font-weight: 600; }
.epf-opt.is-off { color: var(--epl-ink-30); }

.epf-box {
	width: 15px; height: 15px; flex: none; border: 1.5px solid var(--epl-line);
	border-radius: 4px; background: #fff; position: relative;
}
.epf-opt.is-on .epf-box { background: var(--epl-accent); border-color: var(--epl-accent); }
.epf-opt.is-on .epf-box::after {
	content: ""; position: absolute; left: 3px; top: 3.5px; width: 7px; height: 3.5px;
	border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg);
}
.epf-opt-label { flex: 1; }
.epf-opt-n { font-size: 12.5px; color: var(--epl-ink-30); font-variant-numeric: tabular-nums; }
.epf-opt.is-on .epf-opt-n { color: var(--epl-accent-dk); }

/* ── the results column ─────────────────────────────────────────────────── */
.epf-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap; margin-bottom: 16px;
}
.epf-count { margin: 0; font-size: 15px; color: var(--epl-ink-70); }
.epf-count b { font-size: 21px; font-weight: 700; color: var(--epl-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.epf-sort { position: relative; }
.epf-sort > summary {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
	border: 1.5px solid var(--epl-line); border-radius: 100px; padding: 8px 14px;
	font-size: 13.5px; color: var(--epl-ink-70); background: #fff;
}
.epf-sort > summary::-webkit-details-marker { display: none; }
.epf-sort > summary::after {
	content: ""; width: 6px; height: 6px; border-right: 1.8px solid var(--epl-accent-dk);
	border-bottom: 1.8px solid var(--epl-accent-dk); transform: rotate(45deg) translate(-1px, -1px);
}
.epf-sort > summary:hover { border-color: var(--epl-accent); }
.epf-sort-lbl { color: var(--epl-ink-30); }
.epf-sort-cur { font-weight: 600; color: var(--epl-ink); }
.epf-sort ul {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 214px;
	list-style: none; margin: 0; padding: 6px; background: #fff;
	border: 1px solid var(--epl-line); border-radius: 12px;
	box-shadow: 0 4px 12px rgba(16,16,16,.08), 0 24px 48px rgba(16,16,16,.12);
}
.epf-sort li a {
	display: block; padding: 8px 11px; border-radius: 7px; font-size: 14px;
	color: var(--epl-ink-70); text-decoration: none;
}
.epf-sort li a:hover { background: var(--epl-cream); color: var(--epl-ink); }
.epf-sort li.is-on a { color: var(--epl-ink); font-weight: 600; }

.epf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; }
.epf-chip {
	display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 12px;
	border: 1.5px solid var(--epl-accent); border-radius: 100px; background: var(--epl-cream);
	font-size: 13.5px; color: var(--epl-ink); text-decoration: none; line-height: 1.4;
}
.epf-chip:hover { background: var(--epl-accent); color: #fff; border-color: var(--epl-accent); }
.epf-chip:hover .epf-chip-grp, .epf-chip:hover .epf-chip-x { color: rgba(255,255,255,.8); }
.epf-chip-grp { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--epl-ink-30); }
.epf-chip-x { font-size: 15px; line-height: 1; color: var(--epl-accent-dk); }

/* ── the empty state ────────────────────────────────────────────────────── */
.epf-empty {
	border: 1px dashed var(--epl-line); border-radius: 14px; padding: 36px 28px;
	text-align: center; background: var(--epl-cream);
}
.epf-empty h2 { margin: 0 0 10px; }
.epf-empty p { margin: 0 auto 20px; max-width: 52ch; color: var(--epl-ink-70); line-height: 1.6; }
.epf-empty-do { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.epf-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 22px; border-radius: 100px; font-size: 14.5px; font-weight: 600;
	text-decoration: none; border: 1.5px solid transparent;
}
.epf-btn-primary { background: var(--epl-accent); color: #fff; }
.epf-btn-primary:hover { background: var(--epl-accent-dk); color: #fff; }
.epf-btn-wa { background: #fff; color: var(--epl-ink); border-color: var(--epl-line); }
.epf-btn-wa:hover { border-color: var(--epl-accent); color: var(--epl-accent-dk); }

/* ── the collections, which are the pages that actually rank ────────────── */
.epf-hubs { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--epl-line); }
.epf-hubs-h { margin: 0 0 14px; }
.epf-hubs ul {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px;
}
.epf-hubs a {
	display: block; padding: 12px 15px; border: 1px solid var(--epl-line); border-radius: 10px;
	font-size: 14.5px; color: var(--epl-ink-70); text-decoration: none; background: #fff;
}
.epf-hubs a:hover { border-color: var(--epl-accent); color: var(--epl-accent-dk); background: var(--epl-cream); }

/* ── phones: the panel folds away and the sort menu goes full width ─────── */
@media (max-width: 900px) {
	.epf-layout { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
	.epf-side { position: static; }
	.epf-panel { border-radius: 12px; }
	.epf-panel:not([open]) { background: var(--epl-cream); }
	.epf-head { padding: 28px 0 22px; }
	.epf-bar { margin-bottom: 12px; }
	.epf-sort ul { right: auto; left: 0; min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
	.epf-sort-lbl { display: none; }
	.epf-empty { padding: 26px 18px; }
	.epf-empty-do .epf-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.epf-panel-top::after { transition: none; }
}