/**
 * Plan Heavy search page.
 *
 * Inherits all tokens from listing.css.
 *
 * Mobile: two tab rows (type chips then action row).
 *         Map toggle = pink pill when active.
 *         Open Now / Nearby = underline active.
 * Desktop: type chips in tab bar; Open Now + Nearby in sidebar above Area;
 *          Map toggle stays in... no tab row on desktop sidebar.
 *          Two-column: 280px sidebar + results.
 *         Dietary: 2-col grid with icons.
 *         Inspiration chips row above first card.
 */

/* ══ Page ═══════════════════════════════════════════════════ */
.ph-search { background: var(--ph-color-bg); min-height: 80vh; }

/* ══ Search bar ═════════════════════════════════════════════ */
.ph-search__barwrap {
	background: var(--ph-color-surface);
	border-bottom: 1px solid var(--ph-color-line);
	padding: var(--ph-space-3) 0;
}
.ph-search__form {
	display: flex; align-items: center;
	border: 1.5px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill);
	background: var(--ph-color-surface); overflow: hidden;
	transition: border-color 0.15s;
}
.ph-search__form:focus-within { border-color: var(--ph-color-primary); }
.ph-search__form-icon {
	color: var(--ph-color-ink-soft); font-size: 17px; width: 17px; height: 17px;
	margin: 0 var(--ph-space-2) 0 var(--ph-space-4); flex-shrink: 0;
}
.ph-search__form-input {
	flex: 1; border: none; background: transparent;
	padding: 12px var(--ph-space-2) 12px 0;
	font-size: var(--ph-text-body); font-family: inherit;
	outline: none; min-width: 0; color: var(--ph-color-ink);
}
.ph-search__form-input::placeholder { color: var(--ph-color-ink-soft); }
.ph-search__form-submit {
	flex-shrink: 0; border: none;
	background: var(--ph-color-primary); color: #fff;
	padding: 0 var(--ph-space-5); font-size: var(--ph-text-small);
	font-weight: 600; font-family: inherit; cursor: pointer;
	min-height: 44px;
	border-radius: 0 var(--ph-radius-pill) var(--ph-radius-pill) 0;
	transition: opacity 0.15s; white-space: nowrap;
}
.ph-search__form-submit:hover { opacity: 0.88; }

/* ══ Tab bar - row 1 (type chips) ════════════════════════════ */
.ph-search__tabs {
	position: -webkit-sticky; position: sticky; top: 0; z-index: 10;
	background: var(--ph-color-surface);
	border-top: 1px solid var(--ph-color-line);
	border-bottom: 2px solid var(--ph-color-line);
}
body.admin-bar .ph-search__tabs { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .ph-search__tabs { top: 46px; } }

.ph-search__tabs-inner {
	display: flex; align-items: stretch;
	gap: var(--ph-space-3); min-height: 44px;
}
.ph-search__chips {
	display: flex; gap: var(--ph-space-4); flex: 1; min-width: 0;
	align-items: center;
	overflow-x: auto; overflow-y: hidden;
	-ms-overflow-style: none; scrollbar-width: none;
}
.ph-search__chips::-webkit-scrollbar { display: none; }
/* Chip = tab-list link style (identical to ph-lh__tablist a) */
.ph-chip {
	flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
	padding: var(--ph-space-3) 0;
	color: var(--ph-color-ink-soft);
	font-size: 10.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.06em;
	white-space: nowrap; background: none; border: none;
	border-bottom: 2px solid transparent; margin-bottom: -2px;
	font-family: inherit; cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}
.ph-chip.is-active, .ph-chip:hover {
	color: var(--ph-color-primary); border-bottom-color: var(--ph-color-primary);
}

/* Map toggle in tab bar, far left of the type chips. Underline-tab style to
   match the type chips, with a divider after it. Desktop only (mobile uses the
   Map button in the action row instead). */
.ph-chip--map {
	flex-shrink: 0;
	width: 280px; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 0;
	border: 0;
	border-right: 1px solid var(--ph-color-line);
	border-bottom: 2px solid transparent;
	background: transparent;
	font-size: var(--ph-text-small); font-weight: 700; font-family: inherit;
	text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--ph-color-ink-soft); cursor: pointer;
	border-radius: 0;
	transition: color 0.15s, border-color 0.15s;
}
.ph-chip--map:hover { color: var(--ph-color-primary); }
.ph-chip--map.is-active {
	color: var(--ph-color-primary);
	box-shadow: inset 0 -2px 0 0 var(--ph-color-primary);
}
.ph-chip--map.is-active .dashicons { color: var(--ph-color-primary); }
.ph-chip--map .dashicons { font-size: 15px; width: 15px; height: 15px; }

/* Video feed button: pinned far right, solid pink backgrounded button so it
   reads as a distinct action, not a tab. It sits in its own fixed space at the
   right of the tab row (outside the scrolling chips), so the type tabs never
   slide underneath it. Visible on both desktop and mobile. */
.ph-search__videobtn {
	flex-shrink: 0; align-self: center;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px;
	background: var(--ph-color-ink); color: #fff;
	border: none; border-radius: var(--ph-radius-sm);
	font-size: 11px; font-weight: 700; font-family: inherit;
	text-transform: uppercase; letter-spacing: 0.05em;
	white-space: nowrap; cursor: pointer;
	transition: background 0.15s, transform 0.1s;
}
.ph-search__videobtn:hover { background: var(--ph-color-ink-soft, #5a5f73); }
.ph-search__videobtn:active { transform: scale(0.97); }
.ph-search__videobtn .dashicons { font-size: 15px; width: 15px; height: 15px; color: #fff; }

.ph-search__tabsright {
	display: flex; align-items: center; gap: var(--ph-space-2); flex-shrink: 0;
}
.ph-search__count {
	font-size: var(--ph-text-label); color: var(--ph-color-ink-soft); white-space: nowrap;
}
.ph-search__count strong { color: var(--ph-color-primary); }
.ph-search__reset-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	border: 1px solid var(--ph-color-line); background: var(--ph-color-surface);
	color: var(--ph-color-ink-soft); cursor: pointer;
	transition: border-color 0.15s;
}
.ph-search__reset-btn:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-search__filterbtm {
	display: inline-flex; align-items: center; gap: 4px;
	min-height: 30px; padding: 4px var(--ph-space-3);
	border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-pill);
	background: var(--ph-color-surface); color: var(--ph-color-ink-soft);
	font-size: var(--ph-text-label); font-weight: 600; font-family: inherit;
	cursor: pointer; white-space: nowrap; transition: border-color 0.15s, color 0.15s;
}
.ph-search__filterbtm:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-search__filterbtm .dashicons { font-size: 13px; width: 13px; height: 13px; }

/* ══ Action row - row 2 (Open Now | Nearby | Map + count/filter) ═ */
.ph-search__actionrow {
	background: var(--ph-color-surface);
	border-bottom: 1px solid var(--ph-color-line);
}
.ph-search__actionrow-inner {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 40px; gap: var(--ph-space-2);
	flex-wrap: nowrap;
	overflow-x: auto;
	-ms-overflow-style: none; scrollbar-width: none;
}
.ph-search__actionrow-inner::-webkit-scrollbar { display: none; }
.ph-search__toggles {
	display: flex; align-items: center; gap: 0; flex-shrink: 0;
}
/* Open Now and Nearby: underline-style toggle (same as chips) */
.ph-search__toggle {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 10px var(--ph-space-3) 10px 0;
	margin-right: var(--ph-space-3);
	color: var(--ph-color-ink-soft);
	font-size: 10.5px; font-weight: 600; font-family: inherit;
	text-transform: uppercase; letter-spacing: 0.06em;
	white-space: nowrap; background: none; border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.ph-search__toggle .dashicons { font-size: 13px; width: 13px; height: 13px; }
/* Open Now and Nearby active = underline */
.ph-search__toggle.is-active {
	color: var(--ph-color-primary); border-bottom-color: var(--ph-color-primary);
}
/* Map toggle = pill fill when active */
.ph-search__toggle--map {
	padding: 7px var(--ph-space-3);
	border: 1.5px solid var(--ph-color-line);
	border-bottom: 1.5px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill);
	margin-right: var(--ph-space-4);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ph-search__toggle--map.is-active {
	background: var(--ph-color-primary);
	border-color: var(--ph-color-primary);
	color: #fff;
}
.ph-search__toggle--map.is-active .dashicons { color: #fff; }
.ph-search__actionright {
	display: flex; align-items: center; gap: var(--ph-space-2); flex-shrink: 0;
}
.ph-search__count--mob {
	font-size: var(--ph-text-label); color: var(--ph-color-ink-soft); white-space: nowrap;
}
.ph-search__count--mob strong { color: var(--ph-color-primary); }

/* ══ Desktop two-column layout ══════════════════════════════ */
.ph-search__layout {
	display: grid; grid-template-columns: 280px 1fr;
	gap: var(--ph-space-6); align-items: start;
	padding-top: var(--ph-space-4);
}

/* ══ Sidebar ════════════════════════════════════════════════ */
.ph-search__sidebar {
	position: sticky; top: 54px;
	height: calc(100vh - 54px); overflow-y: auto;
	background: var(--ph-color-surface);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-md);
	box-shadow: var(--ph-shadow-card);
}
body.admin-bar .ph-search__sidebar { top: 86px; height: calc(100vh - 86px); }

/* Sidebar Open Now + Nearby toggles (above Area, desktop only) */
.ph-sf__toggles {
	display: flex; gap: 0;
	padding: 0;
	border-bottom: 1px solid var(--ph-color-line);
}
/* Vertical divider between the two toggles, matching the uploaded design. */
.ph-sf__toggle + .ph-sf__toggle {
	border-left: 1px solid var(--ph-color-line);
}
/* Open Now / Nearby rendered as two equal-width underline tabs, matching the
   uploaded design: active is pink with a pink underline, inactive is grey. */
.ph-sf__toggle {
	flex: 1 1 0;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 16px var(--ph-space-2);
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent; color: var(--ph-color-ink-soft);
	font-size: 11px; font-weight: 700; font-family: inherit;
	text-transform: uppercase; letter-spacing: 0.05em;
	cursor: pointer; white-space: nowrap;
	border-radius: 0;
	transition: color 0.15s, border-color 0.15s;
}
.ph-sf__toggle .dashicons { font-size: 14px; width: 14px; height: 14px; }
.ph-sf__toggle:hover { color: var(--ph-color-primary); }
.ph-sf__toggle.is-active {
	color: var(--ph-color-primary);
	border-bottom-color: var(--ph-color-primary);
}
.ph-sf__toggle.is-active .dashicons { color: var(--ph-color-primary); }

/* Accordion sections */
.ph-sf__section { border-bottom: 1px solid var(--ph-color-line); }
.ph-sf__section:last-child { border-bottom: none; }
.ph-sf__section--area    .ph-sf__head { background: rgba(232,86,138,0.04); }
.ph-sf__section--dietary .ph-sf__head { background: rgba(76,154,76,0.05); }
.ph-sf__section--cuisine .ph-sf__head { background: rgba(43,182,196,0.05); }
.ph-sf__section--features .ph-sf__head { background: rgba(224,166,56,0.04); }
.ph-sf__head {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; padding: 11px var(--ph-space-4);
	font-size: 10.5px; font-weight: 700; font-family: inherit;
	text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--ph-color-ink); cursor: pointer; border: none; text-align: left;
}
.ph-sf__head--clickable:hover { background: rgba(0,0,0,0.03) !important; }
.ph-sf__chevron { font-size: 12px; width: 12px; height: 12px; transition: transform 0.2s; flex-shrink: 0; color: var(--ph-color-ink-soft); }
.ph-sf__head[aria-expanded="true"] .ph-sf__chevron { transform: rotate(180deg); }
.ph-sf__body { padding: var(--ph-space-2) var(--ph-space-3) var(--ph-space-3); }
.ph-sf__body--closed { display: none; }
.ph-sf__list { display: flex; flex-direction: column; }
.ph-sf__check {
	display: flex; align-items: center; gap: var(--ph-space-2);
	padding: 7px var(--ph-space-2); border-radius: var(--ph-radius-sm);
	font-size: var(--ph-text-small); color: var(--ph-color-ink);
	cursor: pointer; transition: background 0.1s; user-select: none;
}
.ph-sf__check:hover { background: var(--ph-color-bg); }
.ph-sf__check input { width: 14px; height: 14px; flex-shrink: 0; accent-color: var(--ph-color-primary); cursor: pointer; margin: 0; }

/* Dietary 2-col grid with icons */
.ph-sf__dietary-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.ph-sf__dcheck {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: var(--ph-space-3) var(--ph-space-2);
	border: 1.5px solid var(--ph-color-line); border-radius: var(--ph-radius-sm);
	cursor: pointer; transition: border-color 0.15s, background 0.1s;
	user-select: none; text-align: center; position: relative;
}
.ph-sf__dcheck:hover { background: var(--ph-color-bg); border-color: var(--ph-color-primary); }
.ph-sf__dcheck.is-checked { border-color: var(--ph-color-primary); background: rgba(232,86,138,0.06); }
.ph-sf__dcheck input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ph-sf__dcheck-icon { width: 22px; height: 22px; color: var(--ph-color-ink-soft); }
.ph-sf__dcheck.is-checked .ph-sf__dcheck-icon { color: var(--ph-color-primary); }
.ph-sf__dcheck-label { font-size: 10.5px; font-weight: 600; color: var(--ph-color-ink-soft); line-height: 1.2; }
.ph-sf__dcheck.is-checked .ph-sf__dcheck-label { color: var(--ph-color-primary); }

/* Area tree */
.ph-area__group { margin-bottom: 1px; }
.ph-area__parent {
	display: flex; align-items: center; gap: var(--ph-space-2);
	padding: 7px var(--ph-space-2); border-radius: var(--ph-radius-sm);
	font-size: var(--ph-text-small); font-weight: 600; color: var(--ph-color-ink);
	cursor: pointer; user-select: none; transition: background 0.1s;
}
.ph-area__parent:hover { background: var(--ph-color-bg); }
.ph-area__parent input { width: 14px; height: 14px; accent-color: var(--ph-color-primary); flex-shrink: 0; margin: 0; cursor: pointer; }
.ph-area__parent-label { flex: 1; }
.ph-area__toggler { font-size: 12px; width: 12px; height: 12px; color: var(--ph-color-ink-soft); transition: transform 0.18s; flex-shrink: 0; cursor: pointer; }
.ph-area__toggler.is-open { transform: rotate(90deg); }
.ph-area__children { display: none; flex-direction: column; padding-left: var(--ph-space-4); }
.ph-area__children.is-open { display: flex; }
.ph-area__child {
	display: flex; align-items: center; gap: var(--ph-space-2);
	padding: 6px var(--ph-space-2); border-radius: var(--ph-radius-sm);
	font-size: var(--ph-text-small); color: var(--ph-color-ink-soft);
	cursor: pointer; user-select: none; transition: background 0.1s;
}
.ph-area__child:hover { background: var(--ph-color-bg); }
.ph-area__child input { width: 14px; height: 14px; accent-color: var(--ph-color-primary); flex-shrink: 0; margin: 0; cursor: pointer; }

/* ══ Results column ═════════════════════════════════════════ */
.ph-search__results { min-width: 0; }

/* ══ Boxed map ══════════════════════════════════════════════ */
.ph-search__mapbox {
	background: var(--ph-color-surface);
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-md);
	box-shadow: var(--ph-shadow-card);
	overflow: hidden; margin-bottom: var(--ph-space-4);
	position: relative;
	opacity: 0; transform: translateY(-6px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}
.ph-search__mapbox.ph-mapbox--visible { opacity: 1; transform: translateY(0); }
.ph-search__mapbox[hidden] { display: none; }
/* Desktop: map stays pinned below the sticky toolbar while results scroll. */
@media (min-width: 1024px) {
	.ph-search__mapbox {
		position: sticky;
		top: 0;
		z-index: 5;
	}
}
.ph-search__map-head {
	position: absolute; top: var(--ph-space-2); right: var(--ph-space-2); z-index: 10;
	display: flex; justify-content: flex-end; padding: 0; background: transparent; border: 0;
}
.ph-search__map-close {
	font-size: var(--ph-text-label);
	background: var(--ph-color-surface);
	border: 1px solid var(--ph-color-line);
	box-shadow: var(--ph-shadow-card);
	border-radius: 999px; padding: 6px 12px;
}
.ph-search__map-canvas { width: 100%; height: 320px; display: block; }

/* Mobile-only video chip in tabs row: hidden at desktop widths. */
.ph-search__video-mobile { display: none; }

/* ══ Inspiration chips ══════════════════════════════════════ */
.ph-search__inspo { display: flex; gap: var(--ph-space-2); }
/* Mobile: single horizontal-scroll line, smaller pills, never wraps.
   Even vertical padding so the gap above the pills matches the gap below
   them (down to the first card). */
.ph-search__inspo.ph-search__inspo--mobile {
	flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
	-ms-overflow-style: none; scrollbar-width: none;
	background: var(--ph-color-bg);
	padding: 20px var(--ph-space-4) 20px;
	margin: 0;
}
.ph-search__inspo--mobile::-webkit-scrollbar { display: none; }
/* Desktop: in results column, wraps, sits above the grid/map */
/* Desktop: single horizontal-scroll line (matches mobile), more pills visible
   given the wider space. Hidden scrollbar. */
.ph-search__inspo--desktop {
	flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
	-ms-overflow-style: none; scrollbar-width: none;
	margin-bottom: var(--ph-space-3);
}
.ph-search__inspo--desktop::-webkit-scrollbar { display: none; }
.ph-inspo-chip {
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 7px 14px;
	background: var(--ph-color-surface);
	border: 1.5px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill);
	font-size: var(--ph-text-small); font-weight: 600; font-family: inherit;
	color: var(--ph-color-ink); cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	white-space: nowrap; box-shadow: 0 1px 3px rgba(33,37,58,0.06);
}
.ph-inspo-chip:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-inspo-chip.is-active { background: var(--ph-color-primary); border-color: var(--ph-color-primary); color: #fff; }
/* Mobile pills: smaller, single line */
.ph-search__inspo--mobile .ph-inspo-chip {
	flex-shrink: 0; padding: 5px 12px; font-size: var(--ph-text-label); box-shadow: none;
}

/* ══ Card grid ══════════════════════════════════════════════ */
.ph-search__grid { display: flex; flex-direction: column; gap: var(--ph-space-3); }
.ph-search__empty { color: var(--ph-color-ink-soft); font-size: var(--ph-text-body); padding: var(--ph-space-6) 0; text-align: center; }

/* ══ Card ═══════════════════════════════════════════════════ */
.ph-scard {
	background: var(--ph-color-surface); border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-md); box-shadow: var(--ph-shadow-card);
	overflow: hidden; transition: box-shadow 0.15s;
}
.ph-scard:hover { box-shadow: 0 8px 32px rgba(33,37,58,0.12); }
.ph-scard--featured { outline: 2px solid var(--ph-color-featured); }
.ph-scard--draft { opacity: 0.78; outline: 2px dashed var(--ph-color-ink-soft); }
.ph-scard__inner { display: flex; align-items: stretch; }
.ph-scard__media-wrap { flex-shrink: 0; width: 200px; position: relative; }
.ph-scard__media { display: block; width: 100%; height: 100%; min-height: 160px; background: var(--ph-color-bg); }
.ph-scard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-scard__img--placeholder { display: block; min-height: 160px; background: var(--ph-color-line); }
.ph-scard__logo {
	position: absolute; left: 8px; bottom: -26px;
	width: 52px; height: 52px; border-radius: 50%;
	border: 2px solid var(--ph-color-surface); background: var(--ph-color-surface);
	object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.ph-scard__status {
	position: absolute; left: 6px; top: 6px;
	background: var(--ph-color-ink); color: #fff;
	font-size: 10px; font-weight: 700; text-transform: uppercase;
	padding: 2px 6px; border-radius: var(--ph-radius-sm);
}
.ph-scard__body { flex: 1; min-width: 0; padding: var(--ph-space-3) var(--ph-space-4); padding-top: var(--ph-space-5); display: flex; flex-direction: column; gap: 4px; }

/* Fully-vegan / fully-vegetarian bar. Desktop: a slim vertical strip between
   the image and the body, with the label reading bottom to top. Mobile: it
   becomes a full-width banner across the top of the card (see the 900px rule).
   Flex order places the strip between media (0) and body so DOM order is free. */
.ph-scard__dietbar {
	order: 1;
	flex: 0 0 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ph-color-diet-vegetarian);
}
.ph-scard__dietbar--vegan { background: var(--ph-color-diet-vegan); }
.ph-scard__dietbar--vegetarian { background: var(--ph-color-diet-vegetarian); }
.ph-scard__dietbar-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ph-scard__body { order: 2; }
.ph-scard__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ph-space-2); }
.ph-scard__title { font-size: var(--ph-text-body); font-weight: 600; color: var(--ph-color-ink); text-decoration: none; line-height: 1.3; }
.ph-scard__title:hover { color: var(--ph-color-primary); }
.ph-scard__fav {
	flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid var(--ph-color-line); background: var(--ph-color-surface);
	color: var(--ph-color-primary); font-size: 14px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s;
}
.ph-scard__fav.is-fav { background: var(--ph-color-primary); color: #fff; border-color: var(--ph-color-primary); }
.ph-scard__desc { margin: 0; font-size: var(--ph-text-small); color: var(--ph-color-ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }
.ph-scard__rating { display: flex; align-items: center; gap: 5px; }
.ph-scard__stars { color: #f5a623; font-size: 12px; letter-spacing: 0.5px; }
.ph-scard__rcount { font-size: 11px; color: var(--ph-color-ink-soft); }
.ph-scard__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ph-space-2); margin-top: 2px; }
.ph-scard__col-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ph-scard__col-right { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-scard__row { margin: 0; font-size: var(--ph-text-small); color: var(--ph-color-ink); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-scard__row .dashicons { font-size: 13px; width: 13px; height: 13px; color: var(--ph-color-primary); flex-shrink: 0; }
.ph-scard__dtag { font-size: 11px; color: var(--ph-color-ink-soft); line-height: 1.5; display: inline-flex; align-items: center; gap: 4px; }
.ph-scard__dtag-icon { display: inline-flex; flex-shrink: 0; }
.ph-scard__dtag-icon svg { width: 13px; height: 13px; }
/* Footer is a vertical stack: top row (city + status + Show on map) then an
   optional stations row spanning the full width underneath. */
.ph-scard__foot { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ph-color-line); padding: 8px var(--ph-space-4); background: var(--ph-color-bg); }
/* Top row: city + status together on the left, Show on map pushed to the right. */
.ph-scard__foot-top { display: flex; align-items: center; gap: var(--ph-space-2); flex-wrap: nowrap; min-width: 0; }
.ph-scard__area { font-size: var(--ph-text-label); font-weight: 700; color: var(--ph-color-ink); flex-shrink: 0; }
.ph-scard__open, .ph-scard__closed { flex-shrink: 0; }
/* Stations row: full width under the top row, horizontal scroll, never wraps. */
.ph-scard__stations { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 5px; min-width: 0; width: 100%; -ms-overflow-style: none; scrollbar-width: none; }
.ph-scard__stations::-webkit-scrollbar { display: none; }
.ph-scard__station { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--ph-color-ink-soft); background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-pill); padding: 2px 7px; white-space: nowrap; }
.ph-tube-icon { flex-shrink: 0; }
.ph-scard__open  { font-size: 11px; font-weight: 700; color: var(--ph-color-open); }
.ph-scard__open--closing { color: #fff; background: #ea8c00; padding: 2px 7px; border-radius: var(--ph-radius-pill); }
.ph-scard__closed{ font-size: 11px; font-weight: 600; color: var(--ph-color-ink-soft); }
.ph-scard__dist  { font-size: 11px; color: var(--ph-color-ink-soft); }
/* Show on map: pushed to the far right of the top row via auto margin. */
.ph-scard__pin { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: var(--ph-text-label); color: var(--ph-color-primary); cursor: pointer; }
.ph-scard__pin .dashicons { font-size: 15px; width: 15px; height: 15px; }
.ph-scard__pin-label { font-weight: 600; }
.ph-scard__directions { font-size: var(--ph-text-label); font-weight: 600; color: var(--ph-color-primary); text-decoration: underline; }

/* ══ Pagination ═════════════════════════════════════════════ */
.ph-search__pagination { display: flex; justify-content: center; gap: var(--ph-space-2); margin-top: var(--ph-space-6); flex-wrap: wrap; }
.ph-page { min-width: 34px; padding: 6px 9px; border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-sm); background: var(--ph-color-surface); font-family: inherit; font-size: var(--ph-text-small); cursor: pointer; }
.ph-page.is-current { background: var(--ph-color-primary); border-color: var(--ph-color-primary); color: #fff; font-weight: 700; }
.ph-page:disabled { opacity: 0.4; cursor: default; }
.ph-page__dots { align-self: center; color: var(--ph-color-ink-soft); }

/* ══ Sheets ═════════════════════════════════════════════════ */
.ph-sheet { position: fixed; inset: 0; background: rgba(17,24,39,0.45); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.ph-sheet[hidden] { display: none; }
.ph-sheet__panel { background: var(--ph-color-surface); width: 100%; max-width: 560px; max-height: 88vh; border-radius: var(--ph-radius-md) var(--ph-radius-md) 0 0; display: flex; flex-direction: column; }
.ph-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: var(--ph-space-3) var(--ph-space-4); border-bottom: 1px solid var(--ph-color-line); }
.ph-sheet__title { margin: 0; font-size: var(--ph-text-body); font-weight: 700; }
.ph-sheet__close { border: none; background: none; font-size: 26px; line-height: 1; color: var(--ph-color-ink-soft); cursor: pointer; padding: 0 4px; }
.ph-sheet__body { padding: var(--ph-space-4); overflow-y: auto; flex: 1; }
.ph-sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ph-space-3); padding: var(--ph-space-3) var(--ph-space-4); border-top: 1px solid var(--ph-color-line); }
.ph-sheet__checklist { display: flex; flex-direction: column; }
.ph-sheet__checklist label { display: flex; align-items: center; gap: var(--ph-space-2); padding: 8px var(--ph-space-2); border-radius: var(--ph-radius-sm); font-size: var(--ph-text-small); color: var(--ph-color-ink); cursor: pointer; user-select: none; }
.ph-sheet__checklist label:hover { background: var(--ph-color-bg); }
.ph-sheet__checklist input { width: 14px; height: 14px; accent-color: var(--ph-color-primary); flex-shrink: 0; margin: 0; cursor: pointer; }

/* Sheet dietary 2-col */
.ph-sheet__dietary-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--ph-space-2);
}
.ph-sheet__dcheck {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: var(--ph-space-3) var(--ph-space-2);
	border: 1.5px solid var(--ph-color-line); border-radius: var(--ph-radius-sm);
	cursor: pointer; text-align: center; position: relative;
	transition: border-color 0.15s, background 0.1s; user-select: none;
}
.ph-sheet__dcheck:hover { background: var(--ph-color-bg); border-color: var(--ph-color-primary); }
.ph-sheet__dcheck.is-checked { border-color: var(--ph-color-primary); background: rgba(232,86,138,0.06); }
.ph-sheet__dcheck input { position: absolute; opacity: 0; pointer-events: none; }
.ph-sheet__dcheck-icon { width: 20px; height: 20px; color: var(--ph-color-ink-soft); }
.ph-sheet__dcheck.is-checked .ph-sheet__dcheck-icon { color: var(--ph-color-primary); }
.ph-sheet__dcheck-label { font-size: 10.5px; font-weight: 600; color: var(--ph-color-ink-soft); line-height: 1.2; }
.ph-sheet__dcheck.is-checked .ph-sheet__dcheck-label { color: var(--ph-color-primary); }

.ph-mf__section { border-bottom: 1px solid var(--ph-color-line); }
.ph-mf__section:last-child { border-bottom: none; }
.ph-mf__section--dietary { background: rgba(76,154,76,0.03); }
.ph-mf__head { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; font-size: 10.5px; font-weight: 700; font-family: inherit; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ph-color-ink); cursor: pointer; user-select: none; background: none; border: none; width: 100%; }
.ph-mf__head[aria-expanded="true"] .ph-sf__chevron { transform: rotate(180deg); }
.ph-mf__body { padding-bottom: var(--ph-space-3); }
.ph-mf__body--closed { display: none; }
body.ph-sheet-open { overflow: hidden; }

/* ══ Mobile ═════════════════════════════════════════════════ */
@media (max-width: 900px) {
	/* Desktop Map chip hidden on mobile (Map lives in the action row instead).
	   The Video feed button stays visible, pinned far right of the tab row. */
	.ph-search__map-toggle-desktop { display: none; }
	.ph-search__inspo--desktop { display: none; }
	/* Search bar tighter on mobile */
	.ph-search__barwrap { padding: var(--ph-space-2) 0; }
	.ph-search__form-input { font-size: 14px; padding: 10px var(--ph-space-2) 10px 0; }
	.ph-search__form-submit { min-height: 40px; padding: 0 var(--ph-space-4); font-size: 13px; }
	.ph-search__form-icon { font-size: 15px; width: 15px; height: 15px; margin-left: var(--ph-space-3); }

	/* Type chips: at phone width all five tabs plus the video button must fit
	   without clipping or scrolling (per the design). Tabs are slightly smaller
	   and tighter on mobile to make room. No fade mask, no scroll. */
	.ph-search__chips {
		flex: 1; min-width: 0; gap: var(--ph-space-2);
		overflow: visible; justify-content: space-between;
	}
	.ph-search__chips .ph-chip {
		font-size: 9px; letter-spacing: 0.02em; gap: 2px;
	}

	/* Video feed button: compact, two-line label ("Video / Feed"), pinned far
	   right, sized so the tabs to its left are never clipped. */
	.ph-search__videobtn {
		flex-shrink: 0;
		padding: 5px 12px; font-size: 9.5px; line-height: 1.05;
		margin-left: var(--ph-space-2);
		text-align: left;
	}
	.ph-search__videobtn .ph-search__videobtn-label {
		display: inline-block; max-width: 4.5em; white-space: normal;
	}
	.ph-search__videobtn .dashicons { font-size: 14px; width: 14px; height: 14px; flex-shrink: 0; }

	/* Desktop filter button hidden (action row has its own) */
	.ph-search__tabsright .ph-search__filterbtm { display: none; }
	.ph-search__tabsright .ph-search__reset-btn { display: none; }
	.ph-search__tabsright .ph-search__count { display: none; }

	/* Layout: single column */
	.ph-search__layout { grid-template-columns: 1fr; padding-top: 0; gap: 0; }
	.ph-search__sidebar { display: none; }

	/* Mobile map: full width of the page, edge to edge. It loads inline at the
	   top of the results (first child of .ph-search__results, above the pills)
	   and sticks to the top just below the tab bar as the results scroll. No
	   side margins (full bleed), no drop shadow, no floating: it is part of the
	   page flow, exactly like the desktop map but spanning the full width. */
	.ph-search__mapbox {
		position: -webkit-sticky; position: sticky;
		top: 47px; /* tab bar: 44px min-height + 1px top + 2px bottom border */
		z-index: 6;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		margin-bottom: var(--ph-space-3);
		border-left: none; border-right: none;
		border-radius: 0;
		box-shadow: none;
	}
	body.admin-bar .ph-search__mapbox { top: 93px; } /* 46px admin bar + 47px tab bar */
	.ph-search__map-canvas { height: 240px; }

	.ph-search__results { padding: 0 0 var(--ph-space-3); }
	.ph-search__grid { padding: 0 var(--ph-space-4); }
	.ph-search__inspo { padding: 0 var(--ph-space-4); }
	.ph-search__pagination { padding: 0 var(--ph-space-4); }

	/* Cards: narrower image on mobile */
	.ph-scard__media-wrap { width: 130px; }
	.ph-scard__img--placeholder { min-height: 130px; }
	.ph-scard__cols { grid-template-columns: 1fr; gap: 2px; }

	/* Diet bar: full-width banner across the top of the card, horizontal text.
	   flex-wrap lets it take its own row above the image and body. */
	.ph-scard__inner { flex-wrap: wrap; }
	.ph-scard__dietbar {
		order: -1;
		flex: 0 0 100%;
		width: 100%;
		padding: 4px 0;
	}
	.ph-scard__dietbar-text {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: 11px;
	}

	/* Full-screen sheets on mobile */
	.ph-sheet { align-items: stretch; }
	.ph-sheet__panel { max-width: none; max-height: none; border-radius: 0; height: 100%; }

	/* Show filter button in action row */
	.ph-search__filterbtm { display: inline-flex; }

	/* Mobile action row: drop the outline borders so the controls read as flat
	   text/icon buttons. The map toggle keeps its pink fill when active. */
	.ph-search__toggle--map { border: none; padding-left: 0; padding-right: 0; }
	.ph-search__toggle--map.is-active { padding-left: var(--ph-space-3); padding-right: var(--ph-space-3); }
	.ph-search__filterbtm { border: none; background: none; padding-left: 0; padding-right: 0; }
	.ph-search__reset-btn { border: none; background: none; }

	/* Equal spacing across all five controls (Map, Open Now, Nearby, Filter,
	   Reset). The two wrapper divs collapse with display:contents so every
	   control becomes a direct flex child of the row, then space-between
	   distributes them evenly. Per-control side margins are removed so the only
	   spacing comes from the even distribution. */
	.ph-search__toggles,
	.ph-search__actionright { display: contents; }
	.ph-search__actionrow-inner { justify-content: space-between; gap: var(--ph-space-2); }
	.ph-search__toggle { margin-right: 0; padding-right: 0; }
}

@media (min-width: 901px) {
	/* Action row hidden on desktop (sidebar has toggles, tab bar has chips) */
	.ph-search__actionrow { display: none; }
	/* Mobile inspo row hidden on desktop (desktop inspo lives in results column) */
	.ph-search__inspo--mobile { display: none; }
	/* Desktop: filter button in tab bar */
	.ph-search__filterbtm { display: none; }
}

/* ══ Chips tab bar: soft distinguishing background ══════════ */
/* Gives the Activity/Bar/Cafe/Restaurant/Plans row a subtle tint so the three
   bars stacked above each other (search, chips, action row) are visually
   distinct without being heavy. */
.ph-search__tabs {
	background: var(--ph-color-bg);
}

/* ══ Map marker popup ═══════════════════════════════════════ */
/* Used by Leaflet, Mapbox, and Google Maps. The popup HTML is built in
   popupHtml() in listings.js. Featured image on top, logo overlapping
   the bottom-left of the image, linked title, price band and area in
   small meta, open/closed status underneath. */
/* One design for every viewport (desktop matches mobile): the text block sits
   on the left with the logo stacked above the name, price, cuisine and area,
   then the open/closed status. The featured image bleeds in from the right
   behind a left-hand fade so it melts into the card behind the text. */
.ph-mpop {
	display: block;
	position: relative;
	width: 250px;
	min-height: 96px;
	background: #fff;
	font-family: inherit;
	overflow: hidden;
	border-radius: var(--ph-radius-md);
}
.ph-mpop--noimg { width: 200px; min-height: 0; }
.ph-mpop__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58%;
	display: block;
	background-size: cover;
	background-position: center;
	background-color: var(--ph-color-line);
	text-decoration: none;
}
.ph-mpop__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #fff 6%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0) 100%);
}
.ph-mpop__body {
	position: relative;
	z-index: 1;
	width: 80%;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.ph-mpop--noimg .ph-mpop__body { width: 100%; }
.ph-mpop__logo {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--ph-color-line);
	object-fit: cover;
	background: #fff;
	margin-bottom: 2px;
}
.ph-mpop__title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--ph-color-ink);
	text-decoration: none;
	line-height: 1.25;
}
.ph-mpop__title:hover { color: var(--ph-color-primary); }
.ph-mpop__meta {
	font-size: 11.5px;
	color: var(--ph-color-ink-soft);
}
.ph-mpop__open  { font-size: 11px; font-weight: 700; color: var(--ph-color-open); }
.ph-mpop__closed{ font-size: 11px; font-weight: 600; color: var(--ph-color-ink-soft); }


/* Leaflet popup: tighten default padding so the card fits neatly */
.leaflet-popup-content-wrapper { padding: 0; border-radius: var(--ph-radius-md); overflow: hidden; }
.leaflet-popup-content { margin: 0; }
.leaflet-popup-tip-container { display: none; }

/* Google InfoWindow: by default Google caps the bubble height and scrolls the
   inner container, which clipped the bottom of the card (the open/closed line).
   Let the bubble grow to the whole card and stop the inner scroll. The inline
   max-height/overflow Google sets via JS are overridden by these !important
   rules, so the entire card shows with no scrollbar. */
.gm-style .gm-style-iw-c {
	max-height: none !important;
	overflow: visible !important;
}
.gm-style .gm-style-iw-d {
	max-height: none !important;
	overflow: visible !important;
}

/* ══ Card flash (scroll-to-card from map marker click) ══════ */
@keyframes ph-flash {
	0%   { box-shadow: 0 0 0 3px var(--ph-color-primary); }
	60%  { box-shadow: 0 0 0 3px var(--ph-color-primary); }
	100% { box-shadow: var(--ph-shadow-card); }
}
.ph-scard--flash {
	animation: ph-flash 1.6s ease forwards;
}