/* ==========================================================================
   Book Holiday Lodge - 2026 Search (search.php) and Lodges Near Me
   (lodges-near-me.php). Header from pages.css, lodge cards (.near)
   from lodge.css, region tiles from pages.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header with the search box
   -------------------------------------------------------------------------- */

.findHero .pageHero__inner { padding-bottom: clamp(56px, 7vw, 90px); }
.findHero .pageHero__lead { max-width: 680px; }
.findLead { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; }

.findForm { max-width: 760px; margin-top: 26px; box-shadow: var(--shadow-lg); animation: fadeUp 1s .3s var(--ease-out) both; }
.findForm .btn { gap: 8px; }
.findForm .btn .icon { width: 18px; height: 18px; }

.findTry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.findTry span + a::before { content: " B7"; margin-right: 8px; color: rgba(255, 255, 255, .5); text-decoration: none; display: inline-block; }
.findTry a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--gold-200); text-decoration: underline; text-underline-offset: 3px; }
.findTry a:hover { color: #fff; }
.findTry .icon { width: 15px; height: 15px; }

/* Lodges Near Me: distance and "Use my location" */

.findNearOptions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }

.findMiles {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 6px 0 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
}
.findMiles select {
	-webkit-appearance: none;
	appearance: none;
	height: 100%;
	border: 0;
	padding: 0 28px 0 4px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9cf9a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 13px;
	font: 700 14.5px var(--font-body);
	color: #fff;
	cursor: pointer;
}
.findMiles select option { color: var(--ink); }
.findMiles:focus-within { box-shadow: 0 0 0 3px rgba(255, 120, 17, .5); }

.findLocate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: #fff;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--forest-800);
	transition: background-color .2s, color .2s, transform .35s var(--ease-out);
}
.findLocate[hidden] { display: none; }
.findLocate .icon { width: 17px; height: 17px; color: var(--cta); }
.findLocate:hover { background: var(--cream); transform: translateY(-2px); }
.findLocate.is-busy { opacity: .7; pointer-events: none; }

.findLocateNote { min-height: 0; margin: 10px 0 0; font-size: 14px; color: var(--gold-200); }
.findLocateNote:empty { display: none; }

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */

.findHead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 18px; }

.findShowing { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.2; color: var(--forest-800); }
.findShowing em { font-style: italic; color: var(--forest-600); }

.findCount { font-size: 15px; color: var(--ink-2); }
.findCount strong { font-size: 17px; color: var(--ink); }

.findSuggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; }
.findSuggest > span { margin-right: 4px; font-size: 14px; font-weight: 700; color: var(--ink-2); }

.findSection + .findSection { margin-top: clamp(40px, 5vw, 60px); }

.findTitle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.15;
	color: var(--forest-800);
}
.findTitle > .icon { width: 24px; height: 24px; flex: none; color: var(--gold-700); }
.findTitle > span { padding: 2px 10px; border-radius: 999px; background: var(--paper-2); font-family: var(--font-body); font-size: 14px; font-weight: 800; color: var(--forest-700); }

.findGrid { margin-top: 0; }
.findGrid .near[hidden] { display: none; }

.near__note { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; line-height: 1.4; color: var(--forest-700); }
.near__note .icon { width: 15px; height: 15px; margin-top: 2px; flex: none; color: var(--gold-700); }

.findMore { display: flex; margin: 22px auto 0; gap: 8px; }
.findMore .icon { width: 18px; height: 18px; }

.findEmpty p { max-width: 560px; margin-left: auto; margin-right: auto; }
.findEmpty__hint { font-size: 15px; color: var(--ink-2); }

/* Chips: suggestions and popular searches */

.findChips { display: flex; flex-wrap: wrap; gap: 8px; }

.findChip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid var(--line);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	transition: border-color .2s, background-color .2s, color .2s, transform .35s var(--ease-out);
}
.findChip .icon { width: 15px; height: 15px; color: var(--gold-700); }
.findChip:hover { border-color: var(--forest-700); background: var(--forest-800); color: #fff; transform: translateY(-2px); }
.findChip:hover .icon { color: var(--gold-200); }

/* --------------------------------------------------------------------------
   Popular searches and regions
   -------------------------------------------------------------------------- */

.findBrowse .findPopular { margin-bottom: clamp(40px, 5vw, 60px); }
.findBrowse .regionTiles { margin-top: 0; }

@media (max-width: 760px) {
	.findForm { margin-top: 20px; padding-left: 14px; }
	.findForm input { height: 54px; font-size: 16px; }
	.findForm .btn { height: 54px; padding: 0 16px; }
	.findForm .btn span { display: none; }
	.findHead { margin-bottom: 14px; }
}

/* --------------------------------------------------------------------------
   Page not found and Lodge not available (scripts/404-page*.php)
   -------------------------------------------------------------------------- */

.notFound { max-width: 860px; padding: clamp(26px, 4vw, 46px); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.notFound__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.1; color: var(--forest-800); }
.notFound__sub { margin-top: 10px; font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; line-height: 1.4; color: var(--ink-2); }
.notFound p { margin: 0 0 .6em; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.notFound p a { font-weight: 700; color: var(--forest-600); text-decoration: underline; text-underline-offset: 3px; }
.notFound p a:hover { color: var(--cta); }
.notFound .notFound__lede { font-family: var(--font-display); font-size: clamp(19px, 1.9vw, 22px); line-height: 1.6; color: var(--ink); }
.notFound__search { margin: 24px 0; }
.notFound__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.notFound__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 4px; }
.notFound__similar { margin-top: clamp(40px, 5vw, 60px); }
.notFound__regionsLead { margin: -6px 0 22px; font-size: 16.5px; color: var(--ink-2); }
.findBrowse .secHead { margin-bottom: 0; }

@media (max-width: 760px) {
	.notFound__search { padding-left: 14px; }
	.notFound__search input { height: 54px; font-size: 16px; }
	.notFound__search .btn { height: 54px; padding: 0 16px; }
	.notFound__search .btn span { display: none; }
}