/* =========================================================
   ENVISION THEME - Search (Header Builder > Search element, the mobile search bar, [envision_search], the search widget)

   Nine designs. Every one of them takes its colours from the text colour of the place it sits in (currentColor), so the
   same markup reads on a white header, a dark header, a header in the primary colour and in the dark theme - nothing is
   hard-coded to "white box on dark" or "dark box on white".
     pill | minimal (underline) | boxed | filled | soft | bubble | split | icon-toggle | overlay
   Markup (inc/search.php):
     .envision-search.envision-search-style--X
        form.envision-search-form.envision-search--X > input.envision-search-field + button.envision-search-submit
        .envision-search-results (live suggestions, filled by search.js)
   ========================================================= */

.envision-search {
	--es-w: 240px;                          /* total width (Header Builder > Search > Width) */
	--es-h: 42px;                           /* height of the control */
	--es-btn: 34px;                         /* round / square button inside the control */
	--es-line: rgba(128, 128, 128, .42);
	--es-line-strong: rgba(128, 128, 128, .7);
	--es-fill: rgba(128, 128, 128, .1);
	--es-fill-strong: rgba(128, 128, 128, .18);
	--es-muted: rgba(128, 128, 128, .95);
	--es-ring: rgba(214, 40, 40, .3);
	position: relative;
	display: block;
	width: var(--es-w);
	max-width: 100%;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.2;
	text-align: start;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.envision-search {
		--es-line: color-mix(in srgb, currentColor 24%, transparent);
		--es-line-strong: color-mix(in srgb, currentColor 46%, transparent);
		--es-fill: color-mix(in srgb, currentColor 7%, transparent);
		--es-fill-strong: color-mix(in srgb, currentColor 8%, transparent);   /* soft: light enough for white text on the brand red (4.5:1) */
		--es-muted: color-mix(in srgb, currentColor 72%, transparent);
		--es-ring: color-mix(in srgb, var(--envision-accent, #d62828) 32%, transparent);
	}
}

/* ---------- shared parts ---------- */
.envision-search .envision-search-form {
	display: flex;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: var(--es-h);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	overflow: hidden;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.envision-search .envision-search-field {
	flex: 1 1 auto;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
}
/* other stylesheets (WordPress admin, page builders, plugins) restyle inputs on focus / hover: keep the field flat, the bar carries the ring */
.envision-search .envision-search-field:focus,
.envision-search .envision-search-field:hover { border: 0; background: transparent; box-shadow: none; outline: 0; color: inherit; }
.envision-search .envision-search-field::placeholder { color: var(--es-muted); opacity: 1; }
.envision-search .envision-search-field::-webkit-search-decoration,
.envision-search .envision-search-field::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.envision-search .envision-search-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: var(--es-btn);
	height: var(--es-btn);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
	transition: background-color .2s ease, color .2s ease, transform .15s ease, opacity .2s ease, filter .2s ease;
}
.envision-search .envision-search-submit svg { width: 18px; height: 18px; flex: none; pointer-events: none; }
.envision-search .envision-search-submit:focus-visible { outline: 2px solid var(--envision-accent, #d62828); outline-offset: 2px; }
.envision-search .envision-search-label { display: none; }
/* the [envision_search] wrapper may sit in a flex row: let it shrink with its column instead of pushing it wider */
.envision-shortcode-search { max-width: 100%; min-width: 0; }
.envision-search .envision-search-form:focus-within { outline: 0; }

/* ---------- 1. Pill: soft fill + hairline, round button that turns to the primary colour ---------- */
.envision-search .envision-search--pill { border: 1px solid var(--es-line); background: var(--es-fill); }
.envision-search .envision-search--pill .envision-search-field { padding-inline: 18px 6px; }
.envision-search .envision-search--pill .envision-search-submit { margin-inline-end: 3px; }
.envision-search .envision-search--pill .envision-search-submit:hover,
.envision-search .envision-search--pill .envision-search-submit:focus-visible { background: var(--envision-accent, #d62828); color: var(--envision-accent-ink, #fff); }
.envision-search .envision-search--pill:focus-within { border-color: var(--envision-accent, #d62828); background: transparent; box-shadow: 0 0 0 3px var(--es-ring); }

/* ---------- 2. Underline: no box, the primary-colour line grows from the middle when you click ---------- */
.envision-search .envision-search--minimal { border-radius: 0; overflow: visible; }
.envision-search .envision-search--minimal::before,
.envision-search .envision-search--minimal::after { content: ''; position: absolute; bottom: 0; height: 1.5px; pointer-events: none; }
.envision-search .envision-search--minimal::before { inset-inline: 0; background: var(--es-line-strong); }
.envision-search .envision-search--minimal::after { left: 50%; right: 50%; height: 2px; background: var(--envision-accent, #d62828); transition: left .3s ease, right .3s ease; z-index: 1; }
.envision-search .envision-search--minimal:focus-within::after { left: 0; right: 0; }
.envision-search .envision-search--minimal .envision-search-submit { order: -1; width: 34px; height: 100%; border-radius: 0; opacity: .7; }
.envision-search .envision-search--minimal .envision-search-submit:hover,
.envision-search .envision-search--minimal .envision-search-submit:focus-visible { opacity: 1; color: var(--envision-accent, #d62828); }
.envision-search .envision-search--minimal .envision-search-field { padding-inline: 6px 4px; }

/* ---------- 3. Boxed: square corners, a solid button joined to the field ---------- */
.envision-search .envision-search--boxed { border: 1.5px solid var(--es-line-strong); border-radius: 4px; }
.envision-search .envision-search--boxed .envision-search-field { padding-inline: 14px 8px; }
.envision-search .envision-search--boxed .envision-search-submit { width: calc(var(--es-h) - 3px); height: calc(100% + 3px); margin: -1.5px; margin-inline-start: 0; border-radius: 0; background: var(--envision-accent, #d62828); color: var(--envision-accent-ink, #fff); }
.envision-search .envision-search--boxed .envision-search-submit:hover,
.envision-search .envision-search--boxed .envision-search-submit:focus-visible { filter: brightness(.9); }
.envision-search .envision-search--boxed:focus-within { border-color: var(--envision-accent, #d62828); box-shadow: 0 0 0 3px var(--es-ring); }

/* ---------- 4. Filled: the whole bar in the primary colour (text is white or near-black, whichever reads) ---------- */
.envision-search .envision-search--filled {
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	background: var(--envision-accent, #d62828);
	color: var(--envision-accent-ink, #fff);
	box-shadow: 0 10px 22px -12px var(--envision-accent, #d62828);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.envision-search .envision-search--filled { border: 1px solid rgba(255, 255, 255, .3); }
}
.envision-search .envision-search--filled .envision-search-field::placeholder { color: inherit; opacity: .78; }
.envision-search .envision-search--filled .envision-search-field { padding-inline: 18px 6px; }
.envision-search .envision-search--filled .envision-search-submit { margin-inline-end: 3px; }
.envision-search .envision-search--filled .envision-search-submit:hover,
.envision-search .envision-search--filled .envision-search-submit:focus-visible { background: rgba(128, 128, 128, .32); }
.envision-search .envision-search--filled:focus-within { box-shadow: 0 0 0 3px var(--es-ring); }

/* ---------- 5. Soft: no outline, a tinted rounded box, icon on the left ---------- */
.envision-search .envision-search--soft { border: 1px solid transparent; border-radius: 12px; background: var(--es-fill-strong); }
.envision-search .envision-search--soft .envision-search-submit { order: -1; width: 42px; height: 100%; border-radius: 0; opacity: .65; }
.envision-search .envision-search--soft .envision-search-field { padding-inline: 0 14px; }
.envision-search .envision-search--soft:focus-within { border-color: var(--envision-accent, #d62828); background: transparent; box-shadow: 0 0 0 3px var(--es-ring); }
.envision-search .envision-search--soft:focus-within .envision-search-submit { opacity: 1; color: var(--envision-accent, #d62828); }

/* ---------- 6. Bubble: outline pill with a round primary-colour button inside ---------- */
.envision-search-style--bubble { --es-h: 46px; --es-btn: 36px; }
.envision-search .envision-search--bubble { border: 1.5px solid var(--es-line-strong); }
.envision-search .envision-search--bubble .envision-search-field { padding-inline: 20px 8px; }
.envision-search .envision-search--bubble .envision-search-submit { margin-inline-end: 4px; background: var(--envision-accent, #d62828); color: var(--envision-accent-ink, #fff); box-shadow: 0 6px 14px -6px var(--envision-accent, #d62828); }
.envision-search .envision-search--bubble .envision-search-submit:hover,
.envision-search .envision-search--bubble .envision-search-submit:focus-visible { transform: scale(1.08); }
.envision-search .envision-search--bubble:focus-within { border-color: var(--envision-accent, #d62828); box-shadow: 0 0 0 3px var(--es-ring); }

/* ---------- 7. Split: a bordered field and a labelled button ---------- */
.envision-search-style--split { --es-w: 290px; }
.envision-search .envision-search--split { border: 1.5px solid var(--es-line-strong); border-radius: 8px; }
.envision-search .envision-search--split .envision-search-field { padding-inline: 14px 8px; }
.envision-search .envision-search--split .envision-search-submit {
	width: auto; height: calc(100% + 3px); margin: -1.5px; margin-inline-start: 0; padding: 0 18px; border-radius: 0;
	background: var(--envision-accent, #d62828); color: var(--envision-accent-ink, #fff); font-weight: 600; letter-spacing: .02em;
}
.envision-search .envision-search--split .envision-search-label { display: inline; }
.envision-search .envision-search--split .envision-search-submit:hover,
.envision-search .envision-search--split .envision-search-submit:focus-visible { filter: brightness(.9); }
.envision-search .envision-search--split:focus-within { border-color: var(--envision-accent, #d62828); box-shadow: 0 0 0 3px var(--es-ring); }

/* ---------- 8. Icon only (the field opens beside the icon) ---------- */
.envision-search-style--icon-toggle,
.envision-search-style--overlay { width: auto; --es-w: auto; }
.envision-search .envision-search--icon-toggle { width: var(--es-h); overflow: visible; border-radius: 50%; }
.envision-search .envision-search--icon-toggle .envision-search-submit { width: var(--es-h); height: var(--es-h); border: 1px solid var(--es-line); background: var(--es-fill); position: relative; z-index: 1; }
.envision-search .envision-search--icon-toggle .envision-search-submit:hover,
.envision-search .envision-search--icon-toggle .envision-search-submit:focus-visible,
.envision-search .envision-search--icon-toggle.is-expanded .envision-search-submit { background: var(--envision-accent, #d62828); border-color: var(--envision-accent, #d62828); color: var(--envision-accent-ink, #fff); }
.envision-search .envision-search--icon-toggle .envision-search-field,
.envision-search .envision-search--icon-toggle .envision-search-field:focus,
.envision-search .envision-search--icon-toggle .envision-search-field:hover {
	position: absolute; top: 0; inset-inline-end: calc(var(--es-h) + 8px); width: 0; max-width: none; height: var(--es-h); padding: 0; opacity: 0; pointer-events: none; /* max-width: the theme caps every input at 100% of its box (the 42px icon) */
	border: 1px solid var(--envision-line, #e5e3dc); border-radius: 999px; background: var(--envision-surface, #fff); color: var(--envision-ink, #14151a);
	box-shadow: 0 12px 30px rgba(20, 21, 26, .2); transition: width .25s ease, opacity .2s ease, padding .25s ease;
}
.envision-search .envision-search--icon-toggle.is-expanded .envision-search-field { width: 250px; padding: 0 18px; opacity: 1; pointer-events: auto; }
.envision-search .envision-search--icon-toggle .envision-search-field::placeholder { color: var(--envision-slate, #6b7280); }

/* ---------- 9. Icon only (a full-width search bar drops down under the header) ---------- */
.envision-search-style--overlay { position: static; }
.envision-search-open {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--es-h, 42px); height: var(--es-h, 42px); margin: 0; padding: 0;
	border: 1px solid var(--es-line); border-radius: 50%; background: var(--es-fill); color: inherit; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.envision-search-open svg { width: 18px; height: 18px; pointer-events: none; }
.envision-search-open:hover,
.envision-search-open:focus-visible,
.envision-search-open[aria-expanded="true"] { background: var(--envision-accent, #d62828); border-color: var(--envision-accent, #d62828); color: var(--envision-accent-ink, #fff); outline: 0; }
.envision-search-open:focus-visible { box-shadow: 0 0 0 3px var(--es-ring); }
.envision-search-panel {
	display: none; position: absolute; top: 100%; left: 50%; z-index: 120; box-sizing: border-box; width: 100vw; max-width: 100vw; transform: translateX(-50%);
	padding: 22px 24px 26px; background: var(--envision-paper, #fff); color: var(--envision-ink, #14151a);
	border-top: 1px solid var(--envision-line, #e5e3dc); border-bottom: 1px solid var(--envision-line, #e5e3dc); box-shadow: 0 22px 40px rgba(20, 21, 26, .14);
}
.envision-search-panel.is-open { display: block; }
.envision-search-panel-inner { position: relative; display: flex; align-items: center; gap: 14px; max-width: 880px; margin: 0 auto; }
.envision-search-panel .envision-search-form { --es-h: 54px; --es-btn: 44px; height: var(--es-h); border: 0; border-radius: 0; overflow: visible; flex: 1 1 auto; }
.envision-search-panel .envision-search-form::before { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--es-line-strong); }
.envision-search-panel .envision-search-form::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--envision-accent, #d62828); transition: left .3s ease, right .3s ease; }
.envision-search-panel .envision-search-form:focus-within::after { left: 0; right: 0; }
.envision-search-panel .envision-search-field { padding-inline: 4px 12px; font-size: 20px; }
.envision-search-panel .envision-search-submit { order: -1; width: 44px; border-radius: 0; opacity: .75; }
.envision-search-panel .envision-search-submit svg { width: 22px; height: 22px; }
.envision-search-panel .envision-search-submit:hover,
.envision-search-panel .envision-search-submit:focus-visible { color: var(--envision-accent, #d62828); opacity: 1; }
.envision-search-close {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%;
	background: var(--es-fill); color: inherit; font-size: 24px; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.envision-search-close:hover,
.envision-search-close:focus-visible { background: var(--envision-accent, #d62828); color: var(--envision-accent-ink, #fff); outline: 0; }
.envision-search-panel .envision-search-results { position: static; width: 100%; max-width: 880px; margin: 16px auto 0; box-shadow: none; }

/* ---------- Live results (search.js) ---------- */
.envision-search-results {
	position: absolute; z-index: 95; top: calc(100% + 8px); inset-inline-start: 0; box-sizing: border-box; width: max(100%, 360px); max-width: min(94vw, 460px);
	background: var(--envision-surface, #fff); color: var(--envision-ink, #14151a); border: 1px solid var(--envision-line, #e5e3dc); border-radius: 12px;
	box-shadow: 0 18px 44px rgba(20, 21, 26, .22); overflow: hidden; text-align: start; font-size: 14px; line-height: 1.3;
}
.envision-search-results[hidden] { display: none; }
.envision-header-col--right .envision-search-results { inset-inline-start: auto; inset-inline-end: 0; }
.envision-search-result { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: inherit; text-decoration: none; transition: background-color .15s ease; }
.envision-search-result + .envision-search-result { border-top: 1px solid var(--envision-line, #e5e3dc); }
.envision-search-result:hover,
.envision-search-result.is-active { background: var(--envision-paper, #f7f6f2); color: inherit; }
.envision-search-result.is-active { box-shadow: inset 3px 0 0 var(--envision-accent, #d62828); }
.envision-search-result-img { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--envision-line, #e5e3dc); }
.envision-search-result-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.envision-search-result-title { font-weight: 600; overflow-wrap: anywhere; }
.envision-search-result-meta { font-size: 13px; color: var(--envision-slate, #6b7280); }
.envision-search-result-meta del { opacity: .65; margin-inline-end: 6px; }
.envision-search-result-price { color: var(--envision-accent, #d62828); font-weight: 600; }
.envision-search-all { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--envision-line, #e5e3dc); font-size: 13px; font-weight: 600; color: var(--envision-accent, #d62828); text-decoration: none; }
.envision-search-all:hover,
.envision-search-all.is-active { background: var(--envision-paper, #f7f6f2); }
.envision-search-empty { padding: 16px 14px; color: var(--envision-slate, #6b7280); }

/* ---------- Where the search sits inside something else ---------- */
.envision-mobile-search .envision-search,
.envision-mobile-search-panel .envision-search,
.envision-menu-wrap .envision-search { width: 100%; --es-w: 100%; }
.envision-mobile-search .envision-search-results,
.envision-mobile-search-panel .envision-search-results,
.envision-menu-wrap .envision-search-results { position: static; width: 100%; max-width: none; margin-top: 10px; box-shadow: none; }
.envision-search-widget .envision-search { width: 100%; --es-w: 100%; }

@media (max-width: 782px) {
	.envision-search .envision-search-field,
	.envision-search .envision-search-field:focus { font-size: 16px; } /* 16px: iOS zooms into smaller fields */
	.envision-search-panel { padding: 14px 16px 18px; }
	.envision-search-panel .envision-search-field { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
	.envision-search *, .envision-search-panel, .envision-search-open { transition: none !important; }
}