/**
 * Smart Search for WooCommerce — frontend styles.
 *
 * Everything reads from the CSS custom properties printed by
 * class-ssw-frontend.php (print_theme_variables), so changing the admin
 * "Design" tab restyles the whole widget with zero code. Fallback values are
 * provided here for the (rare) case JS/inline styles are stripped.
 */

.ssw-search {
	--ssw-bar-bg: var( --ssw-bar-bg, #ffffff );
	--ssw-bar-text: var( --ssw-bar-text, #1f2328 );
	--ssw-bar-border: var( --ssw-bar-border, #e2dfe8 );
	--ssw-bar-radius: var( --ssw-bar-radius, 12px );
	--ssw-accent: var( --ssw-accent, #6b2c91 );
	--ssw-suggestion-bg: var( --ssw-suggestion-bg, #ffffff );
	--ssw-suggestion-hover: var( --ssw-suggestion-hover, #f3eff7 );
	--ssw-suggestion-text: var( --ssw-suggestion-text, #1f2328 );
	--ssw-font-family: var( --ssw-font-family, inherit );
	--ssw-font-size: var( --ssw-font-size, 15px );
	--ssw-py: var( --ssw-py, 10px );
	--ssw-px: var( --ssw-px, 16px );
	--ssw-gap: var( --ssw-gap, 8px );
	--ssw-icon-size: var( --ssw-icon-size, 18px );
	--ssw-shadow-form: var( --ssw-shadow-form, 0 1px 2px rgba( 16, 12, 24, 0.05 ) );
	--ssw-shadow-panel: var( --ssw-shadow-panel, 0 16px 40px rgba( 16, 12, 24, 0.16 ) );
	--ssw-z-index: var( --ssw-z-index, 9999 );

	position: relative;
	width: 100%;
	font-family: var( --ssw-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif );
	font-size: var( --ssw-font-size );
	box-sizing: border-box;
}
.ssw-search *,
.ssw-search *::before,
.ssw-search *::after {
	box-sizing: border-box;
}

/* ---------- Form / input ---------- */
.ssw-search__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: var( --ssw-gap );
	background: var( --ssw-bar-bg );
	color: var( --ssw-bar-text );
	border: 1px solid var( --ssw-bar-border );
	border-radius: var( --ssw-bar-radius );
	padding: calc( var( --ssw-py ) / 2 ) var( --ssw-px );
	box-shadow: var( --ssw-shadow-form );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ssw-search__form:focus-within {
	border-color: var( --ssw-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --ssw-accent ) 18%, transparent ), var( --ssw-shadow-form );
}

.ssw-search__icon {
	display: inline-flex;
	color: var( --ssw-bar-text );
	opacity: 0.6;
	flex-shrink: 0;
}
.ssw-search__icon-trigger {
	align-items: center;
	justify-content: center;
	width: calc( var( --ssw-icon-size ) + 12px );
	height: calc( var( --ssw-icon-size ) + 12px );
	margin: calc( ( var( --ssw-icon-size ) + 12px ) / -4 ) 0;
	margin-inline-start: calc( var( --ssw-px ) * -0.4 );
	border: 0;
	background: transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}
.ssw-search__icon-trigger:hover,
.ssw-search__icon-trigger:focus-visible {
	background: var( --ssw-suggestion-hover );
	opacity: 1;
}
.ssw-search__icon-trigger svg {
	width: var( --ssw-icon-size );
	height: var( --ssw-icon-size );
}

.ssw-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	padding: var( --ssw-py ) 0;
	outline: none;
}
.ssw-search__input::placeholder {
	color: currentColor;
	opacity: 0.5;
}

.ssw-search__clear {
	border: 0;
	background: transparent;
	color: inherit;
	opacity: 0.5;
	cursor: pointer;
	font-size: 1.2em;
	line-height: 1;
	padding: 4px;
}
.ssw-search__clear:hover {
	opacity: 1;
}

.ssw-search__preloader {
	width: 14px;
	height: 14px;
	border: 2px solid var( --ssw-bar-border );
	border-top-color: var( --ssw-accent );
	border-radius: 50%;
	animation: ssw-spin 0.6s linear infinite;
	flex-shrink: 0;
}
@keyframes ssw-spin {
	to {
		transform: rotate( 360deg );
	}
}

.ssw-search__submit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: var( --ssw-accent );
	color: #fff;
	border-radius: calc( var( --ssw-bar-radius ) * 0.7 );
	padding: calc( var( --ssw-py ) * 0.7 ) calc( var( --ssw-px ) * 0.9 );
	cursor: pointer;
	flex-shrink: 0;
	/* A subtle colored "lift" instead of a flat fill — small but noticeable
	   part of the more premium default look. */
	box-shadow: 0 2px 8px color-mix( in srgb, var( --ssw-accent ) 45%, transparent );
}
.ssw-search__submit:hover {
	filter: brightness( 0.92 );
}

/* ---------- Results panel ---------- */
.ssw-search__panel {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	right: 0;
	/* Configurable via Design tab → "Dropdown z-index" (default 9999), for
	   themes whose sticky header/cookie banner/modal sits on something even
	   higher and would otherwise bury the results. */
	z-index: var( --ssw-z-index );
	background: var( --ssw-suggestion-bg );
	color: var( --ssw-suggestion-text );
	border: 1px solid var( --ssw-bar-border );
	border-radius: var( --ssw-bar-radius );
	box-shadow: var( --ssw-shadow-panel );
	max-height: 70vh;
	overflow: hidden;
}
.ssw-search__panel:not( [hidden] ) {
	animation: ssw-panel-in 0.16s ease;
}
@keyframes ssw-panel-in {
	from {
		opacity: 0;
		transform: translateY( -6px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.ssw-search__panel:not( [hidden] ) {
		animation: none;
	}
}
.ssw-anim-none .ssw-search__panel:not( [hidden] ) {
	animation: none;
}
.ssw-anim-fade .ssw-search__panel:not( [hidden] ) {
	animation: ssw-panel-fade 0.16s ease;
}
@keyframes ssw-panel-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ---------- Submit button shape (Design tab → Button shape) ---------- */
.ssw-btn-pill .ssw-search__submit {
	border-radius: 999px;
}
.ssw-btn-square .ssw-search__submit {
	border-radius: 4px;
}

.ssw-results {
	display: grid;
	grid-template-columns: minmax( 0, 1.3fr ) minmax( 0, 1fr );
	max-height: 70vh;
}
.ssw-results__list {
	overflow-y: auto;
	padding: 10px;
	border-right: 1px solid var( --ssw-bar-border );
}
.ssw-details {
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.ssw-details__media {
	display: block;
}
.ssw-details__image {
	max-width: 160px;
	max-height: 160px;
	object-fit: contain;
	margin-bottom: 12px;
}
.ssw-details__title-link {
	color: inherit;
	text-decoration: none;
}
.ssw-details__title {
	margin: 0 0 4px;
	font-size: 1.05em;
}
.ssw-details__sku {
	opacity: 0.6;
	font-size: 0.85em;
	margin-bottom: 8px;
}
.ssw-details__price {
	font-weight: 600;
	color: var( --ssw-accent );
	margin-bottom: 10px;
}
.ssw-details__excerpt {
	font-size: 0.85em;
	opacity: 0.8;
	margin-bottom: 12px;
}
.ssw-details__cart {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
.ssw-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var( --ssw-bar-border );
	border-radius: calc( var( --ssw-bar-radius ) * 0.6 );
	overflow: hidden;
	flex-shrink: 0;
}
.ssw-qty-btn {
	border: 0;
	background: transparent;
	color: inherit;
	width: 28px;
	height: 32px;
	cursor: pointer;
	font-size: 1em;
	line-height: 1;
}
.ssw-qty-btn:hover {
	background: var( --ssw-suggestion-hover );
}
.ssw-qty-input {
	width: 34px;
	height: 32px;
	border: 0;
	border-left: 1px solid var( --ssw-bar-border );
	border-right: 1px solid var( --ssw-bar-border );
	text-align: center;
	background: transparent;
	color: inherit;
	font: inherit;
}
.ssw-add-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	border: 0;
	background: var( --ssw-accent );
	color: #fff;
	border-radius: calc( var( --ssw-bar-radius ) * 0.6 );
	padding: 8px 14px;
	font-weight: 600;
	font-size: 0.88em;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2px 8px color-mix( in srgb, var( --ssw-accent ) 40%, transparent );
	transition: filter 0.15s ease, background-color 0.15s ease;
}
.ssw-add-to-cart:hover {
	filter: brightness( 0.94 );
	color: #fff;
}
.ssw-add-to-cart.is-loading {
	opacity: 0.7;
	cursor: default;
}
.ssw-add-to-cart.is-added {
	background: #2e7d32;
	box-shadow: none;
}

.ssw-group__label {
	text-transform: uppercase;
	font-size: 0.72em;
	letter-spacing: 0.06em;
	opacity: 0.55;
	padding: 8px 10px 4px;
}

.ssw-terms {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
}
.ssw-terms li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: calc( var( --ssw-bar-radius ) * 0.6 );
	color: inherit;
	text-decoration: none;
}
.ssw-terms li a:hover {
	background: var( --ssw-suggestion-hover );
}
.ssw-terms img {
	border-radius: 4px;
	object-fit: cover;
}

.ssw-products {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Subtle cascade instead of every row popping in at once — small, but a
   recognizable "premium app" touch (Raycast/Spotlight-style launchers do the
   same). Delay only, not duration, so it stays snappy rather than sluggish;
   capped at the 8th row so a long result list doesn't keep animating for a
   visibly long time. Disabled together with the rest of the panel's motion
   via .ssw-anim-none and prefers-reduced-motion. */
.ssw-products > li {
	animation: ssw-row-in 0.22s ease both;
}
.ssw-products > li:nth-child( 1 ) { animation-delay: 0ms; }
.ssw-products > li:nth-child( 2 ) { animation-delay: 22ms; }
.ssw-products > li:nth-child( 3 ) { animation-delay: 44ms; }
.ssw-products > li:nth-child( 4 ) { animation-delay: 66ms; }
.ssw-products > li:nth-child( 5 ) { animation-delay: 88ms; }
.ssw-products > li:nth-child( 6 ) { animation-delay: 110ms; }
.ssw-products > li:nth-child( 7 ) { animation-delay: 132ms; }
.ssw-products > li:nth-child( n+8 ) { animation-delay: 154ms; }
@keyframes ssw-row-in {
	from { opacity: 0; transform: translateY( 4px ); }
	to { opacity: 1; transform: translateY( 0 ); }
}
.ssw-anim-none .ssw-products > li {
	animation: none;
}
@media ( prefers-reduced-motion: reduce ) {
	.ssw-products > li {
		animation: none;
	}
}
.ssw-product a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: calc( var( --ssw-bar-radius ) * 0.6 );
	color: inherit;
	text-decoration: none;
	position: relative;
	transition: background-color 0.12s ease;
}
.ssw-product img {
	width: var( --ssw-image-size, 40px );
	height: var( --ssw-image-size, 40px );
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	background: var( --ssw-suggestion-hover );
}
.ssw-terms img {
	width: calc( var( --ssw-image-size, 40px ) * 0.6 );
	height: calc( var( --ssw-image-size, 40px ) * 0.6 );
}
.ssw-product.is-active a,
.ssw-product a:hover {
	background: var( --ssw-suggestion-hover );
}
.ssw-product__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}
.ssw-product__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ssw-product__sku,
.ssw-product__excerpt {
	font-size: 0.78em;
	opacity: 0.55;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ssw-product__price {
	font-weight: 600;
	flex-shrink: 0;
	white-space: nowrap;
}
.ssw-badge {
	font-size: 0.7em;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 999px;
	background: var( --ssw-suggestion-hover );
	margin-left: 6px;
	white-space: nowrap;
}
.ssw-badge--oos {
	background: #fbe4e4;
	color: #a33;
}
.ssw-badge--backorder {
	background: #fdf1da;
	color: #93650b;
}
.ssw-badge--sale {
	background: #e8f5e9;
	color: #2e7d32;
}

/* The part of a title/term name that matched the typed search term —
   deliberately not the browser's default yellow <mark> background, just a
   bolder accent-colored word, so it reads as "smart" rather than "highlighted
   like a highlighter pen". */
.ssw-match {
	background: transparent;
	color: var( --ssw-accent );
	font-weight: 700;
}

.ssw-view-all {
	display: block;
	text-align: center;
	padding: 10px;
	margin-top: 4px;
	font-weight: 600;
	color: var( --ssw-accent );
	text-decoration: none;
	border-top: 1px solid var( --ssw-bar-border );
}

.ssw-empty {
	padding: 24px 16px;
	text-align: center;
	opacity: 0.75;
}
.ssw-suggestion {
	border: 0;
	background: transparent;
	color: var( --ssw-accent );
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}

.ssw-history {
	list-style: none;
	margin: 0;
	padding: 0 4px 6px;
}
.ssw-history__item {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	color: inherit;
	padding: 6px 10px;
	border-radius: calc( var( --ssw-bar-radius ) * 0.6 );
	cursor: pointer;
}
.ssw-history__item:hover {
	background: var( --ssw-suggestion-hover );
}

/* ---------- Skeleton loading ----------
   Shown only for the first fetch in a session (see frontend.js fetchResults)
   instead of a blank panel + spinner — a shimmering placeholder reads as
   "working on it" more clearly than an empty box does. */
.ssw-skeleton {
	list-style: none;
	margin: 0;
	padding: 10px;
}
.ssw-skeleton-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
}
.ssw-skeleton-thumb {
	width: var( --ssw-image-size, 40px );
	height: var( --ssw-image-size, 40px );
	border-radius: 6px;
	flex-shrink: 0;
}
.ssw-skeleton-lines {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.ssw-skeleton-line {
	height: 9px;
	border-radius: 4px;
}
.ssw-skeleton-line--title {
	width: 65%;
}
.ssw-skeleton-line--sub {
	width: 35%;
}
.ssw-skeleton-thumb,
.ssw-skeleton-line {
	background: linear-gradient( 90deg, var( --ssw-suggestion-hover ) 25%, color-mix( in srgb, var( --ssw-suggestion-hover ) 45%, transparent ) 37%, var( --ssw-suggestion-hover ) 63% );
	background-size: 400% 100%;
	animation: ssw-shimmer 1.4s ease infinite;
}
@keyframes ssw-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
@media ( prefers-reduced-motion: reduce ) {
	.ssw-skeleton-thumb,
	.ssw-skeleton-line {
		animation: none;
	}
}

/* ---------- Branding footer ----------
   Deliberately quiet — smaller and lower-contrast than every other line in
   the dropdown, so it reads as a small credit rather than an ad. Controlled
   server-side via the `ssw_show_branding` filter (see class-ssw-frontend.php),
   not a settings-tab toggle, since this build is 100% free. */
.ssw-branding {
	text-align: center;
	font-size: 0.68em;
	padding: 6px 10px 4px;
	margin-top: 2px;
	opacity: 0.45;
	border-top: 1px solid var( --ssw-bar-border );
	letter-spacing: 0.02em;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* ---------- Shadow depth (Design tab → Shadow) ---------- */
.ssw-shadow-none {
	--ssw-shadow-form: none;
	--ssw-shadow-panel: 0 8px 20px rgba( 16, 12, 24, 0.12 );
}
.ssw-shadow-soft {
	--ssw-shadow-form: 0 1px 2px rgba( 16, 12, 24, 0.05 );
	--ssw-shadow-panel: 0 16px 40px rgba( 16, 12, 24, 0.16 );
}
.ssw-shadow-medium {
	--ssw-shadow-form: 0 2px 8px rgba( 16, 12, 24, 0.10 );
	--ssw-shadow-panel: 0 20px 48px rgba( 16, 12, 24, 0.20 );
}
.ssw-shadow-strong {
	--ssw-shadow-form: 0 6px 18px rgba( 16, 12, 24, 0.18 );
	--ssw-shadow-panel: 0 28px 64px rgba( 16, 12, 24, 0.28 );
}

/* ---------- Style presets (starting points — fully overridable via Design tab) ---------- */
/* "modern" (default): the only preset with no extra rules here — it *is*
   the refined base look (soft shadow, generous radius, indigo accent). It
   exists as its own named option, distinct from "minimal", so switching
   between them is a deliberate choice rather than "minimal" secretly being
   the only real default. */
.ssw-theme-minimal .ssw-search__form {
	box-shadow: none;
}
.ssw-theme-minimal .ssw-search__panel {
	box-shadow: 0 8px 20px rgba( 16, 12, 24, 0.10 );
}
.ssw-theme-sharp .ssw-search__form,
.ssw-theme-sharp .ssw-search__panel {
	border-radius: 0 !important;
}
.ssw-theme-rounded .ssw-search__form,
.ssw-theme-rounded .ssw-search__panel {
	border-radius: 999px;
}
.ssw-theme-rounded .ssw-search__panel {
	border-radius: 18px;
}
.ssw-theme-glass .ssw-search__form {
	background: color-mix( in srgb, var( --ssw-bar-bg ) 65%, transparent );
	backdrop-filter: blur( 10px );
}
.ssw-theme-glass .ssw-search__panel {
	background: color-mix( in srgb, var( --ssw-suggestion-bg ) 85%, transparent );
	backdrop-filter: blur( 14px );
}
.ssw-theme-command-palette .ssw-search__form {
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );
}
.ssw-theme-command-palette::after {
	content: '⌘K';
	position: absolute;
	right: var( --ssw-px );
	top: 50%;
	transform: translateY( -50% );
	font-size: 0.75em;
	opacity: 0.4;
	pointer-events: none;
}

/* ---------- Layouts ---------- */
/* "icon": a compact icon that expands into an inline input in place — ideal
   for a header nav item that shouldn't take up permanent width. */
.ssw-layout-icon .ssw-search__form,
.ssw-layout-overlay .ssw-search__form {
	padding-inline-start: calc( var( --ssw-px ) * 0.5 );
}
.ssw-layout-icon .ssw-search__input,
.ssw-layout-overlay .ssw-search__input {
	/* flex-grow:1 from the base rule would otherwise force this back to
	   full width regardless of width:0 — a flex item's width property is
	   secondary to its grow factor, so the grow factor has to be killed
	   too or the "collapsed" state never actually collapses. */
	flex: 0 0 auto;
	width: 0;
	padding: 0;
	transition: width 0.2s ease;
}
.ssw-layout-icon.ssw-focused .ssw-search__input,
.ssw-layout-icon .ssw-search__form:focus-within .ssw-search__input {
	flex: 0 0 auto;
	width: 220px;
	padding: var( --ssw-py ) 0;
}

/* "overlay": same collapsed icon trigger, but opening it drops a centered
   command-palette-style modal over the whole page instead of expanding
   inline — better suited to a header icon on busy/narrow layouts. */
.ssw-layout-overlay.ssw-panel-open,
.ssw-layout-overlay.ssw-focused {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 10vh 16px 16px;
	background: rgba( 15, 13, 20, 0.5 );
	backdrop-filter: blur( 2px );
}
.ssw-layout-overlay.ssw-panel-open .ssw-search__form,
.ssw-layout-overlay.ssw-focused .ssw-search__form {
	width: min( 640px, 100% );
	box-shadow: 0 24px 64px rgba( 0, 0, 0, 0.35 );
	flex-shrink: 0;
}
.ssw-layout-overlay.ssw-panel-open .ssw-search__input,
.ssw-layout-overlay.ssw-focused .ssw-search__input {
	width: 100%;
	padding: var( --ssw-py ) 0;
}
.ssw-layout-overlay.ssw-panel-open .ssw-search__panel {
	position: static;
	width: min( 640px, 100% );
	margin-top: 8px;
}

/* ---------- Mobile overlay, responsive layouts, and per-breakpoint sizing ----------
   These all depend on the admin's configurable "Breakpoint" value, so the
   actual @media rules are generated dynamically in PHP
   (class-ssw-frontend.php → print_theme_variables) instead of being
   hardcoded here. A hardcoded 992px here previously meant the Breakpoint
   field in the admin did nothing — fixed by moving this to PHP. */

/* ---------- Dark mode ----------
   Actual dark-mode colors (not just `color-scheme`) are now generated
   dynamically in PHP (class-ssw-frontend.php → print_theme_variables),
   from the admin's own configured dark palette and dark_mode choice
   (auto/on/off) — not hardcoded here, same reasoning as the breakpoint
   rules below. */