/**
 * JezPress Smart Search — front-end styles.
 *
 * Styles the [jpss_search] form/results and the instant-search dropdown. Driven
 * by CSS custom properties output from the Appearance settings (--jpss-accent,
 * --jpss-radius, --jpss-fs, --jpss-font, --jpss-rowpad, --jpss-th), so the look
 * is configurable without theme code. Falls back to sensible defaults.
 */

.jpss-search,
.jpss-instant {
	--jpss-accent: #5b3df5;
	--jpss-radius: 14px;
	--jpss-fs: 15px;
	--jpss-font: inherit;
	--jpss-rowpad: 11px;
	--jpss-th: 38px;
	--jpss-card: #fff;
	--jpss-ink: #16141f;
	--jpss-muted: #6c6880;
	--jpss-line: #eceaf2;
	--jpss-bg: #f3f2f7;
}

.jpss-search.jpss-is-dark,
.jpss-instant.jpss-is-dark {
	--jpss-card: #191b22;
	--jpss-ink: #f3f4f7;
	--jpss-muted: #9aa1ad;
	--jpss-line: #262932;
	--jpss-bg: #0e0f14;
}

/* ---- shortcode form ---- */
.jpss-search { font-family: var(--jpss-font); font-size: var(--jpss-fs); }
.jpss-search__form { display: flex; gap: 8px; max-width: 560px; }
.jpss-search__form input[type="search"] {
	flex: 1; padding: 12px 16px; border: 1px solid var(--jpss-line); border-radius: var(--jpss-radius);
	font: inherit; color: var(--jpss-ink); background: var(--jpss-card);
}
.jpss-search__form input[type="search"]:focus {
	outline: none; border-color: var(--jpss-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jpss-accent) 22%, transparent);
}
.jpss-search__form button {
	border: none; background: var(--jpss-accent); color: #fff; border-radius: var(--jpss-radius);
	padding: 0 18px; font: inherit; font-weight: 600; cursor: pointer;
}
.jpss-search__results { list-style: none; margin: 22px 0 0; padding: 0; }
.jpss-search__result { padding: 14px 0; border-bottom: 1px solid var(--jpss-line); }
.jpss-search__result a { font-weight: 600; color: var(--jpss-accent); text-decoration: none; font-size: calc(var(--jpss-fs) + 1px); }
.jpss-search__result a:hover { text-decoration: underline; }
.jpss-search__excerpt { color: var(--jpss-muted); margin: 4px 0 0; }
.jpss-search__empty { color: var(--jpss-muted); }
.jpss-search__pagination { display: flex; gap: 16px; margin-top: 22px; }
.jpss-search__pagination a { color: var(--jpss-accent); text-decoration: none; font-weight: 600; }

/* ---- instant dropdown ---- */
.jpss-instant { position: relative; font-family: var(--jpss-font); }
.jpss-instant__panel {
	position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 9999;
	background: var(--jpss-card); color: var(--jpss-ink); border: 1px solid var(--jpss-line);
	border-radius: var(--jpss-radius); overflow-y: auto; overflow-x: hidden;
	max-height: min(70vh, 560px); box-shadow: 0 16px 44px -20px rgba(0,0,0,.35);
	overscroll-behavior: contain;
}
.jpss-instant__group { font-size: calc(var(--jpss-fs) - 4px); font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--jpss-muted); padding: 12px 14px 5px; }
.jpss-instant__row { display: flex; gap: 11px; align-items: center; padding: var(--jpss-rowpad) 14px;
	text-decoration: none; color: inherit; cursor: pointer; }
.jpss-instant__row.is-active, .jpss-instant__row:hover { background: color-mix(in srgb, var(--jpss-accent) 8%, transparent); }
.jpss-instant__thumb { width: var(--jpss-th); height: var(--jpss-th); border-radius: calc(var(--jpss-radius) * .6);
	flex: 0 0 auto; object-fit: cover; background: color-mix(in srgb, var(--jpss-accent) 12%, transparent); }
.jpss-instant__thumb.is-hidden { display: none; }
.jpss-instant__m { flex: 1; min-width: 0; }
.jpss-instant__title { font-weight: 600; font-size: var(--jpss-fs); margin: 0; }
.jpss-instant__title mark { background: color-mix(in srgb, var(--jpss-accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.jpss-instant__meta { display: flex; align-items: baseline; gap: 8px; font-size: calc(var(--jpss-fs) - 3px);
	color: var(--jpss-muted); margin-top: 2px; }
.jpss-instant__meta.is-hidden { display: none; }
.jpss-instant__excerpt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jpss-instant__price { flex: 0 0 auto; color: var(--jpss-accent); font-weight: 600; }
.jpss-instant__foot { display: block; text-align: center; padding: 12px; border-top: 1px solid var(--jpss-line);
	font-weight: 600; color: var(--jpss-accent); text-decoration: none; font-size: calc(var(--jpss-fs) - 1px); cursor: pointer; }
.jpss-instant__foot:hover { background: color-mix(in srgb, var(--jpss-accent) 8%, transparent); }
.jpss-instant__state { padding: 22px 16px; text-align: center; color: var(--jpss-muted); font-size: calc(var(--jpss-fs) - 1px); }

@media (prefers-reduced-motion: reduce) { .jpss-instant *, .jpss-search * { transition: none !important; } }