/*!
 * Smart Search Pro — front end styles
 * Every colour/size reads from a CSS custom property with a hard coded
 * fallback, so an Elementor control (or the plugin settings) can override it
 * without fighting the cascade. Selectors are kept to a single class so any
 * `{{WRAPPER}} .ssp-*` rule from Elementor always wins.
 */

/* -------------------------------------------------- base */
.ssp {
	position: relative;
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	font-size: var(--ssp-font-size, 14px);
	line-height: 1.5;
	text-align: start;
}

.ssp *,
.ssp *::before,
.ssp *::after {
	box-sizing: border-box;
}

.ssp-modal[hidden],
.ssp-panel[hidden],
.ssp-clear[hidden],
.ssp-voice[hidden],
.ssp-suggest__block[hidden] {
	display: none !important;
}

.ssp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.ssp-svg {
	display: block;
	width: var(--ssp-icon-size, 18px);
	height: var(--ssp-icon-size, 18px);
	flex: 0 0 auto;
}

/* -------------------------------------------------- form */
.ssp-form {
	position: relative;
	width: var(--ssp-width, 100%);
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.ssp-field {
	display: flex;
	align-items: center;
	gap: var(--ssp-field-gap, 6px);
	width: 100%;
	min-width: 0;
	padding: var(--ssp-field-pad, 0 10px);
	background: var(--ssp-input-bg, #fff);
	border: var(--ssp-input-bw, 1px) solid var(--ssp-input-border, #e5e7eb);
	border-radius: var(--ssp-radius, 10px);
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ssp-field:focus-within {
	border-color: var(--ssp-accent, #2563eb);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ssp-accent, #2563eb) 18%, transparent);
}

.ssp-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: var(--ssp-input-h, 44px);
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	color: var(--ssp-input-color, var(--ssp-text, #111827));
	font-family: inherit;
	font-size: inherit;
	line-height: normal;
	appearance: none;
	-webkit-appearance: none;
}

.ssp-input:focus {
	outline: none;
	box-shadow: none;
}

.ssp-input::placeholder {
	color: var(--ssp-input-ph, var(--ssp-muted, #9ca3af));
	opacity: 1;
}

.ssp-input::-webkit-search-cancel-button,
.ssp-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.ssp--size-sm .ssp-field { --ssp-input-h: 36px; }
.ssp--size-md .ssp-field { --ssp-input-h: 44px; }
.ssp--size-lg .ssp-field { --ssp-input-h: 56px; }

.ssp-icon {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--ssp-icon-color, var(--ssp-muted, #9ca3af));
	pointer-events: none;
}

.ssp-cat {
	flex: 0 0 auto;
	max-width: 45%;
	height: calc(var(--ssp-input-h, 44px) - 10px);
	margin: 0;
	padding: 0 6px;
	background: transparent;
	border: 0;
	border-inline-end: 1px solid var(--ssp-input-border, #e5e7eb);
	color: var(--ssp-text, #111827);
	font-family: inherit;
	font-size: .92em;
	cursor: pointer;
	outline: none;
}

.ssp-clear,
.ssp-voice {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--ssp-muted, #9ca3af);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.ssp-clear:hover,
.ssp-voice:hover {
	background: var(--ssp-hover-bg, #f3f4f6);
	color: var(--ssp-text, #111827);
}

.ssp-voice.is-listening {
	color: #dc2626;
	animation: sspPulse 1.1s ease-in-out infinite;
}

.ssp-clear .ssp-svg,
.ssp-voice .ssp-svg {
	width: 15px;
	height: 15px;
}

.ssp-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 0 0 auto;
	height: calc(var(--ssp-input-h, 44px) - 10px);
	margin: 0;
	padding: 0 14px;
	background: var(--ssp-btn-bg, var(--ssp-accent, #2563eb));
	border: 0;
	border-radius: calc(var(--ssp-radius, 10px) - 3px);
	color: var(--ssp-btn-color, #fff);
	font-family: inherit;
	font-size: .95em;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}

.ssp-submit:hover,
.ssp-submit:focus {
	background: var(--ssp-btn-bg-h, var(--ssp-accent, #2563eb));
	color: var(--ssp-btn-color-h, #fff);
	opacity: .92;
}

.ssp-submit--icon {
	width: calc(var(--ssp-input-h, 44px) - 10px);
	padding: 0;
}

.ssp-submit .ssp-svg {
	width: 17px;
	height: 17px;
}

/* -------------------------------------------------- spinner */
.ssp-spinner {
	display: none;
	flex: 0 0 auto;
	width: var(--ssp-spinner-size, 16px);
	height: var(--ssp-spinner-size, 16px);
	border: 2px solid rgba(127, 127, 127, .28);
	border-top-color: var(--ssp-spinner-color, var(--ssp-accent, #2563eb));
	border-radius: 50%;
}

.ssp.is-loading .ssp-spinner {
	display: block;
	animation: sspSpin .7s linear infinite;
}

/* -------------------------------------------------- panel */
.ssp-panel {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + var(--ssp-panel-gap, 8px));
	z-index: var(--ssp-z, 9999);
	max-height: var(--ssp-panel-max, 420px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--ssp-panel-pad, 6px);
	background: var(--ssp-panel-bg, #fff);
	border: 1px solid var(--ssp-panel-border, var(--ssp-border, #e5e7eb));
	border-radius: var(--ssp-radius, 10px);
	box-shadow: 0 12px 34px rgba(15, 23, 42, .14);
	scrollbar-width: thin;
	scrollbar-color: var(--ssp-scroll-thumb, #cbd5e1) var(--ssp-scroll-track, transparent);
	text-align: start;
}

.ssp-panel::-webkit-scrollbar {
	width: var(--ssp-scroll-w, 8px);
}

.ssp-panel::-webkit-scrollbar-track {
	background: var(--ssp-scroll-track, transparent);
}

.ssp-panel::-webkit-scrollbar-thumb {
	background: var(--ssp-scroll-thumb, #cbd5e1);
	border-radius: 99px;
}

.ssp--pos-top .ssp-panel {
	top: auto;
	bottom: calc(100% + var(--ssp-panel-gap, 8px));
}

.ssp--layout-fullwidth .ssp-panel {
	width: var(--ssp-panel-w, min(94vw, 760px));
	margin-inline: auto;
}

.ssp--layout-inline .ssp-panel {
	position: static;
	max-height: none;
	margin-top: var(--ssp-panel-gap, 8px);
	box-shadow: none;
}

.ssp--layout-modal .ssp-panel {
	position: static;
	margin-top: 10px;
	box-shadow: none;
}

/* animations */
.ssp--anim-fade .ssp-panel.is-open { animation: sspFade .16s ease both; }
.ssp--anim-fade-up .ssp-panel.is-open { animation: sspUp .18s ease both; }
.ssp--anim-zoom .ssp-panel.is-open { animation: sspZoom .18s ease both; }

/* -------------------------------------------------- results */
.ssp-results__head {
	padding: 8px 10px;
	color: var(--ssp-meta-color, var(--ssp-muted, #6b7280));
	font-size: .86em;
}

.ssp-group + .ssp-group {
	margin-top: 6px;
}

.ssp-group__title {
	padding: 7px 10px;
	background: var(--ssp-group-bg, transparent);
	border-radius: 6px;
	color: var(--ssp-group-color, var(--ssp-muted, #6b7280));
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ssp-list {
	display: flex;
	flex-direction: column;
	gap: var(--ssp-item-gap, 0px);
}

.ssp-item-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: var(--ssp-item-sep-w, 1px) solid var(--ssp-item-sep, var(--ssp-border, #f1f5f9));
	border-radius: 8px;
}

.ssp-item-wrap:last-child {
	border-bottom: 0;
}

.ssp-item {
	display: flex;
	align-items: center;
	gap: var(--ssp-thumb-gap, 12px);
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--ssp-item-pad, 9px 10px);
	background: var(--ssp-item-bg, transparent);
	border-radius: 8px;
	color: var(--ssp-text, #111827);
	text-decoration: none;
	box-shadow: none;
	transition: background-color .14s ease, transform .14s ease;
}

.ssp-item:hover,
.ssp-item:focus,
.ssp-item.is-active {
	background: var(--ssp-item-bg-h, var(--ssp-hover-bg, #f3f4f6));
	color: var(--ssp-text, #111827);
	text-decoration: none;
	outline: none;
	transform: translateX(var(--ssp-item-shift, 0px));
}

.ssp--rtl .ssp-item:hover,
.ssp--rtl .ssp-item:focus,
.ssp--rtl .ssp-item.is-active {
	transform: translateX(calc(var(--ssp-item-shift, 0px) * -1));
}

.ssp-item.is-active {
	box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .35);
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ssp-accent, #2563eb) 35%, transparent);
}

/* thumbnail */
.ssp-thumb {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--ssp-thumb-size, 56px);
	overflow: hidden;
	background: var(--ssp-hover-bg, #f3f4f6);
	border-radius: 8px;
	line-height: 0;
}

.ssp-thumb--1-1 { aspect-ratio: 1 / 1; }
.ssp-thumb--4-3 { aspect-ratio: 4 / 3; }
.ssp-thumb--3-4 { aspect-ratio: 3 / 4; }
.ssp-thumb--16-9 { aspect-ratio: 16 / 9; }
.ssp-thumb--auto { aspect-ratio: auto; }

.ssp-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	object-fit: var(--ssp-thumb-fit, cover);
	border-radius: inherit;
	transition: opacity .18s ease, transform .25s ease;
}

.ssp-thumb__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--ssp-muted, #9ca3af);
}

.ssp-thumb__placeholder .ssp-svg {
	width: 45%;
	height: 45%;
}

/* body */
.ssp-item__body {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.ssp-item__badge {
	display: inline-block;
	margin-bottom: 3px;
	padding: 1px 7px;
	background: rgba(37, 99, 235, .12);
	background: var(--ssp-badge-bg, color-mix(in srgb, var(--ssp-accent, #2563eb) 12%, transparent));
	border-radius: 99px;
	color: var(--ssp-badge-color, var(--ssp-accent, #2563eb));
	font-size: .72em;
	font-weight: 600;
	line-height: 1.6;
}

.ssp-item__title {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--ssp-title-color, var(--ssp-text, #111827));
	font-size: 1em;
	font-weight: 600;
	line-height: 1.45;
	transition: color .14s ease;
	overflow-wrap: anywhere;
}

.ssp-item:hover .ssp-item__title,
.ssp-item.is-active .ssp-item__title {
	color: var(--ssp-title-color-h, var(--ssp-accent, #2563eb));
}

.ssp-item__excerpt {
	display: block;
	margin-top: 2px;
	color: var(--ssp-excerpt-color, var(--ssp-muted, #6b7280));
	font-size: .88em;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.ssp-item__title,
.ssp-item__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ssp-item__title { -webkit-line-clamp: var(--ssp-title-clamp, 2); }
.ssp-item__excerpt { -webkit-line-clamp: var(--ssp-excerpt-clamp, 2); }

.ssp-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	color: var(--ssp-meta-color, var(--ssp-muted, #9ca3af));
	font-size: .8em;
}

.ssp-meta__sep {
	opacity: .6;
}

.ssp-item__commerce {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.ssp-item__price {
	color: var(--ssp-price-color, var(--ssp-accent, #2563eb));
	font-size: .92em;
	font-weight: 700;
}

.ssp-item__price del {
	margin-inline-end: 4px;
	color: var(--ssp-muted, #9ca3af);
	font-weight: 400;
	opacity: .8;
}

.ssp-item__price ins {
	text-decoration: none;
}

.ssp-item__stock {
	font-size: .8em;
	font-weight: 600;
}

.ssp-item__stock.is-in { color: #16a34a; }
.ssp-item__stock.is-out { color: #dc2626; }

.ssp-stars {
	position: relative;
	display: inline-block;
	direction: ltr;
	color: var(--ssp-scroll-track, #d1d5db);
	font-size: 12px;
	line-height: 1;
	letter-spacing: 1px;
}

.ssp-stars::before {
	content: "\2605\2605\2605\2605\2605";
}

.ssp-stars::after {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: var(--ssp-rating, 0%);
	overflow: hidden;
	color: var(--ssp-star-color, #f59e0b);
	white-space: nowrap;
}

.ssp-item__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	padding-inline-end: 8px;
}

.ssp-cart-btn {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	background: var(--ssp-cart-bg, var(--ssp-accent, #2563eb));
	border: 0;
	border-radius: 999px;
	color: var(--ssp-cart-color, #fff);
	font-size: .82em;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.ssp-cart-btn:hover,
.ssp-cart-btn:focus {
	background: var(--ssp-cart-bg-h, var(--ssp-accent, #1d4ed8));
	color: var(--ssp-cart-color-h, #fff);
	text-decoration: none;
}

.ssp-cart-btn.loading { opacity: .6; }
.ssp-cart-btn.added::after { content: " ✓"; }

/* highlight */
.ssp-mark {
	padding: 0 1px;
	background: var(--ssp-mark-bg, #fef08a);
	border-radius: 3px;
	color: var(--ssp-mark-color, inherit);
	font-weight: 700;
}

/* view all */
.ssp-viewall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 4px;
	padding: var(--ssp-viewall-pad, 10px 12px);
	background: var(--ssp-viewall-bg, transparent);
	border-top: 1px solid var(--ssp-item-sep, var(--ssp-border, #f1f5f9));
	border-radius: 0 0 8px 8px;
	color: var(--ssp-viewall-color, var(--ssp-accent, #2563eb));
	font-size: .9em;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.ssp-viewall:hover,
.ssp-viewall:focus {
	background: var(--ssp-viewall-bg-h, var(--ssp-hover-bg, #f3f4f6));
	color: var(--ssp-viewall-color-h, var(--ssp-accent, #1d4ed8));
	text-decoration: none;
}

.ssp-viewall__arrow .ssp-svg {
	width: 15px;
	height: 15px;
}

.ssp--rtl .ssp-viewall__arrow {
	transform: rotate(180deg);
}

/* empty / hint */
.ssp-empty,
.ssp-hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 22px 16px;
	color: var(--ssp-empty-color, var(--ssp-muted, #6b7280));
	font-size: .92em;
	text-align: center;
}

.ssp-empty__icon {
	display: block;
	width: 34px;
	height: 34px;
	opacity: .5;
}

.ssp-empty__icon .ssp-svg {
	width: 100%;
	height: 100%;
}

.ssp-empty__suggest {
	margin-top: 6px;
	font-size: .9em;
	font-weight: 600;
}

/* suggestions */
.ssp-suggest {
	display: block;
}

.ssp-suggest__block + .ssp-suggest__block {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--ssp-item-sep, var(--ssp-border, #f1f5f9));
}

.ssp-suggest__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	color: var(--ssp-muted, #6b7280);
	font-size: .8em;
	font-weight: 700;
	text-transform: uppercase;
}

.ssp-suggest__clear {
	padding: 0;
	background: none;
	border: 0;
	color: var(--ssp-accent, #2563eb);
	font: inherit;
	font-size: .95em;
	text-transform: none;
	cursor: pointer;
}

.ssp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 4px 10px 8px;
}

.ssp-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding: 5px 11px;
	background: var(--ssp-chip-bg, var(--ssp-hover-bg, #f3f4f6));
	border: 0;
	border-radius: 999px;
	color: var(--ssp-chip-color, var(--ssp-text, #374151));
	font: inherit;
	font-size: .85em;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.ssp-chip:hover,
.ssp-chip:focus {
	background: rgba(37, 99, 235, .12);
	background: var(--ssp-chip-bg-h, color-mix(in srgb, var(--ssp-accent, #2563eb) 14%, transparent));
	color: var(--ssp-chip-color, var(--ssp-text, #374151));
}

.ssp-chip .ssp-svg {
	width: 13px;
	height: 13px;
	opacity: .65;
}

/* -------------------------------------------------- modal layout */
.ssp-trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 12px;
	background: transparent;
	border: 0;
	border-radius: var(--ssp-radius, 10px);
	color: var(--ssp-text, #111827);
	font: inherit;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.ssp-trigger:hover {
	background: var(--ssp-hover-bg, #f3f4f6);
}

.ssp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 16px 16px;
}

.ssp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .55);
	backdrop-filter: blur(2px);
	animation: sspFade .15s ease both;
}

.ssp-modal__box {
	position: relative;
	width: min(92vw, 620px);
	max-height: 80vh;
	overflow: visible;
	animation: sspUp .2s ease both;
}

.ssp-modal__close {
	position: absolute;
	top: -38px;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: rgba(255, 255, 255, .15);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

.ssp-modal__close:hover {
	background: rgba(255, 255, 255, .28);
}

.ssp--layout-modal .ssp-modal .ssp-form {
	width: 100%;
}

.ssp--layout-modal .ssp-modal .ssp-panel {
	max-height: min(60vh, var(--ssp-panel-max, 420px));
}

body.ssp-modal-open {
	overflow: hidden;
}

/* -------------------------------------------------- dark skin */
.ssp--skin-dark {
	--ssp-text: #e5e7eb;
	--ssp-muted: #9ca3af;
	--ssp-border: #374151;
	--ssp-input-bg: #111827;
	--ssp-input-border: #374151;
	--ssp-panel-bg: #111827;
	--ssp-panel-border: #374151;
	--ssp-hover-bg: #1f2937;
	--ssp-item-sep: #1f2937;
	--ssp-mark-bg: #f59e0b;
	--ssp-mark-color: #111827;
	--ssp-scroll-thumb: #4b5563;
	--ssp-scroll-track: #1f2937;
}

@media (prefers-color-scheme: dark) {
	.ssp--skin-auto {
		--ssp-text: #e5e7eb;
		--ssp-muted: #9ca3af;
		--ssp-border: #374151;
		--ssp-input-bg: #111827;
		--ssp-input-border: #374151;
		--ssp-panel-bg: #111827;
		--ssp-panel-border: #374151;
		--ssp-hover-bg: #1f2937;
		--ssp-item-sep: #1f2937;
		--ssp-mark-bg: #f59e0b;
		--ssp-mark-color: #111827;
		--ssp-scroll-thumb: #4b5563;
		--ssp-scroll-track: #1f2937;
	}
}

.ssp--skin-dark .ssp-panel,
.ssp--skin-dark .ssp-field {
	box-shadow: none;
}

.ssp--skin-dark .ssp-panel {
	box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}

/* -------------------------------------------------- rtl */
.ssp--rtl {
	direction: rtl;
	text-align: right;
}

.ssp--rtl .ssp-input,
.ssp--rtl .ssp-panel,
.ssp--rtl .ssp-item {
	text-align: right;
}

/* -------------------------------------------------- small screens */
@media (max-width: 640px) {
	.ssp-panel {
		max-height: min(70vh, var(--ssp-panel-max, 420px));
	}

	.ssp--layout-fullwidth .ssp-panel {
		width: 100%;
	}

	.ssp-cat {
		max-width: 34%;
	}

	.ssp-modal {
		padding-top: 6vh;
	}

	.ssp-item__actions {
		display: none;
	}
}

/* -------------------------------------------------- motion */
@keyframes sspSpin {
	to { transform: rotate(360deg); }
}

@keyframes sspFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sspUp {
	from { opacity: 0; transform: translateY(-7px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes sspZoom {
	from { opacity: 0; transform: scale(.97); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes sspPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
	.ssp-panel.is-open,
	.ssp-modal__box,
	.ssp-modal__backdrop {
		animation: none !important;
	}

	.ssp-item,
	.ssp-field,
	.ssp-submit {
		transition: none !important;
	}
}