/**
 * ESS Theme — Super Speedy Search + Filters integration overrides.
 *
 * Adapts SSS/SSF plugin styles to the ESS design system:
 * - Colors: accent #E8792B, primary #1E3A5F
 * - Font: DM Sans (inherited from body)
 * - Border-radius: ESS tokens
 * - Shadows: ESS tokens
 *
 * @package eshoppingsalerno
 */

/* ==========================================================================
   0. SUPER SPEEDY SEARCH — Form in header (rounded to match ESS design)
   ========================================================================== */

/* ---- SSS form in header: override the plugin's default 4px rectangle ---- */

/* Outer wrapper: pill-shaped, neutral background like our old form */
.ess-header__search .super-speedy-search-form,
.ess-header__mobile-search .super-speedy-search-form {
	width: 100%;
	border-radius: var(--ess-radius-full, 999px) !important;
	border: 1px solid var(--ess-color-neutral-200, #D5DAE0) !important;
	background: var(--ess-color-neutral-50, #F8F9FA);
	transition: border-color var(--ess-transition-fast, 150ms), box-shadow var(--ess-transition-fast, 150ms);
}

.ess-header__search .super-speedy-search-form:focus-within,
.ess-header__mobile-search .super-speedy-search-form:focus-within {
	border-color: var(--ess-color-primary, #1E3A5F) !important;
	background: var(--ess-color-white, #fff);
	box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* Inner flex wrapper: inherit pill, no extra border */
.ess-header__search .ssswrapper,
.ess-header__mobile-search .ssswrapper {
	border-radius: var(--ess-radius-full, 999px) !important;
	overflow: hidden;
}

/* Text input: transparent, no border, DM Sans */
.ess-header__search .ssstext,
.ess-header__mobile-search .ssstext {
	background: transparent !important;
	font-family: var(--ess-font-body, 'DM Sans', sans-serif) !important;
	font-size: var(--ess-text-sm, 0.875rem);
	color: var(--ess-color-body-text, #3A4A5C);
	min-height: 44px;
}

.ess-header__search .ssstext::placeholder {
	color: var(--ess-color-neutral-400, #8A97A5);
}

/* Search button: circular blue, inside the pill */
.ess-header__search .super-speedy-search-form button[type="submit"],
.ess-header__mobile-search .super-speedy-search-form button[type="submit"] {
	background: var(--ess-color-primary, #1E3A5F) !important;
	color: var(--ess-color-white, #fff) !important;
	border-radius: var(--ess-radius-full, 999px) !important;
	width: 36px;
	height: 36px;
	min-width: 36px;
	margin: 0 4px;
	flex: 0 0 auto !important;
	transition: background var(--ess-transition-fast, 150ms);
}

.ess-header__search .super-speedy-search-form button[type="submit"]:hover {
	background: var(--ess-color-primary-hover, #152D4A) !important;
}

/* Clear/reset button */
.ess-header__search .super-speedy-search-form button[type="reset"],
.ess-header__mobile-search .super-speedy-search-form button[type="reset"] {
	color: var(--ess-color-neutral-400, #8A97A5);
}

/* Close button: hide in header context */
.ess-header__search .sss_maybe_close_button,
.ess-header__mobile-search .sss_maybe_close_button {
	display: none;
}

/* Mobile: slightly less rounded */
.ess-header__mobile-search .super-speedy-search-form {
	border-radius: var(--ess-radius-lg, 0.875rem) !important;
}

.ess-header__mobile-search .ssswrapper {
	border-radius: var(--ess-radius-lg, 0.875rem) !important;
}

.ess-header__mobile-search .ssstext {
	font-size: 1rem;
	min-height: 48px;
}

/* ==========================================================================
   1. SUPER SPEEDY SEARCH — Dropdown & Results
   ========================================================================== */

/* Force DM Sans on all SSS elements */
.super-speedy-search-form,
.sssresults,
.sss_suggestions_container,
.sss_items_container {
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
}

/* ---- Results dropdown panel ---- */
.sssresults.sssajax {
	border-radius: var(--ess-radius-lg, 0.875rem);
	box-shadow: var(--ess-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
	border: 1px solid var(--ess-color-border, #E2E6EA);
	overflow: hidden;
}

/* ---- Suggestions column ---- */
.sss_suggestions_container ul.sss-suggestions {
	background: var(--ess-color-neutral-50, #F8F9FA);
}

.sss_suggestions_container ul.sss-taxonomies {
	background: var(--ess-color-bg-sec, #F0F2F5);
}

.sss_suggestions_container a:hover,
.sss_suggestions_container a:focus {
	background: var(--ess-color-blue-pale, #EBF2FA);
	color: var(--ess-color-primary, #1E3A5F);
}

/* Highlight matched text */
.sssresults strong,
.sss-suggestion strong,
.sss-taxonomy strong {
	color: var(--ess-color-accent, #E8792B);
	font-weight: var(--ess-weight-semibold, 600);
}

/* ---- Section headers ---- */
.sss_list_header {
	font-size: var(--ess-text-sm, 0.875rem);
	font-weight: var(--ess-weight-semibold, 600);
	color: var(--ess-color-heading, #1E2B3A);
	border-bottom: 1px solid var(--ess-color-border, #E2E6EA);
	padding: var(--ess-space-3, 0.75rem) var(--ess-space-4, 1rem) var(--ess-space-2, 0.5rem);
}

/* ---- "See All" link ---- */
.sss_see_all a,
.bottom_see_all_wrapper a {
	color: var(--ess-color-accent, #E8792B);
	font-weight: var(--ess-weight-medium, 500);
	font-size: var(--ess-text-sm, 0.875rem);
	text-decoration: none;
	transition: color var(--ess-transition-fast, 150ms);
}

.sss_see_all a:hover,
.bottom_see_all_wrapper a:hover {
	color: var(--ess-color-accent-hover, #C86620);
}

/* ---- Product cards in dropdown ---- */
.sss-grid-item,
.sss-list-item {
	border-radius: var(--ess-radius-md, 0.5rem);
	transition: background var(--ess-transition-fast, 150ms);
}

.sss-grid-item:hover,
.sss-list-item:hover {
	background: var(--ess-color-neutral-50, #F8F9FA);
}

.sss-grid-item a,
.sss-list-item a {
	text-decoration: none;
	color: var(--ess-color-body-text, #3A4A5C);
}

/* Product title */
.sss-title {
	color: var(--ess-color-heading, #1E2B3A);
	font-weight: var(--ess-weight-medium, 500);
}

/* Price */
.sss_price,
.sss_price .woocommerce-Price-amount {
	color: var(--ess-color-accent, #E8792B);
	font-weight: var(--ess-weight-semibold, 600);
}

/* Sale badge */
.sssresults .onsale,
.sssresults .sss_flash .onsale {
	background: var(--ess-color-accent, #E8792B);
	color: var(--ess-color-white, #fff);
	border-radius: var(--ess-radius-sm, 0.25rem);
	font-size: var(--ess-text-xs, 0.75rem);
	font-weight: var(--ess-weight-semibold, 600);
}

/* Product images */
.sssresults .wp-post-image {
	border-radius: var(--ess-radius-md, 0.5rem);
}

/* ---- Overlay ---- */
.sss-overlay {
	background: rgba(30, 58, 95, 0.4);
}

/* ---- Powered by (hide) ---- */
.sss_poweredby {
	display: none !important;
}

/* ---- Keyboard focus ---- */
.sss-focusable:focus-visible {
	outline: 2px solid var(--ess-color-focus-ring, #4A90D9);
	outline-offset: 2px;
}


/* ==========================================================================
   2. SUPER SPEEDY FILTERS — Widgets & Controls
   ========================================================================== */

/* Force DM Sans */
.fwwfilter,
.fwwcontainer,
.ssf.dialog-container {
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
}

/* ---- Popout/Popover buttons ---- */
.fwwpopout,
.fwwpopover {
	border-color: var(--ess-color-border, #E2E6EA);
	border-radius: var(--ess-radius-md, 0.5rem);
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
	font-size: var(--ess-text-sm, 0.875rem);
	color: var(--ess-color-body-text, #3A4A5C);
	transition: border-color var(--ess-transition-fast, 150ms), box-shadow var(--ess-transition-fast, 150ms);
}

.fwwpopout:hover,
.fwwpopover:hover {
	border-color: var(--ess-color-primary, #1E3A5F);
}

.fwwpopout:focus-visible,
.fwwpopover:focus-visible {
	outline: 2px solid var(--ess-color-focus-ring, #4A90D9);
	outline-offset: 2px;
}

/* ---- Popout panel ---- */
.fwwcontainer.open .popout-container {
	border-radius: var(--ess-radius-lg, 0.875rem);
	box-shadow: var(--ess-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
	border: 1px solid var(--ess-color-border, #E2E6EA);
}

/* ---- Dialog/Popover modal ---- */
.ssf .dialog-content {
	border-radius: var(--ess-radius-lg, 0.875rem);
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
}

.ssf .dialog-overlay {
	background: rgba(30, 58, 95, 0.4);
}

.ssf-close-popover {
	color: var(--ess-color-neutral-500, #5A6B7D);
	font-size: 1.5rem;
	transition: color var(--ess-transition-fast, 150ms);
}

.ssf-close-popover:hover {
	color: var(--ess-color-accent, #E8792B);
}

/* ---- Category/Attribute list items ---- */
.fwwfilter .product-categories.awdff li a {
	color: var(--ess-color-body-text, #3A4A5C);
	font-size: var(--ess-text-sm, 0.875rem);
	transition: color var(--ess-transition-fast, 150ms);
}

.fwwfilter .product-categories.awdff li a:hover {
	color: var(--ess-color-primary, #1E3A5F);
}

.fwwfilter .product-categories.awdff li.selected > a {
	color: var(--ess-color-accent, #E8792B);
	font-weight: var(--ess-weight-semibold, 600);
}

/* Counts */
.fwwfilter .count,
.fwwfilter .categorycount {
	color: var(--ess-color-text-sec, #5A6B7D);
	font-size: var(--ess-text-xs, 0.75rem);
}

/* ---- Checkbox/Radio custom icons ---- */
.fwwfilter ul.checkboxlist li a:before,
.fwwfilter ul.radio li a:before {
	color: var(--ess-color-neutral-400, #8A97A5);
}

.fwwfilter ul.checkboxlist li.selected a:before,
.fwwfilter ul.radio li.selected a:before {
	color: var(--ess-color-accent, #E8792B);
}

/* ---- Color swatches ---- */
.fwwfilter .colour-style {
	border: 2px solid var(--ess-color-border, #E2E6EA);
	transition: border-color var(--ess-transition-fast, 150ms);
}

.fwwfilter li.selected .colour-style {
	border-color: var(--ess-color-accent, #E8792B);
	box-shadow: 0 0 0 2px var(--ess-color-accent, #E8792B);
}

/* ---- Inline search within filters ---- */
.fww-inline-search {
	border-color: var(--ess-color-border, #E2E6EA);
	border-radius: var(--ess-radius-md, 0.5rem);
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
	font-size: var(--ess-text-sm, 0.875rem);
}

.fww-inline-search:focus {
	border-color: var(--ess-color-primary, #1E3A5F);
	box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
	outline: none;
}

/* ---- Toggle switches ---- */
.fww-toggle-switch-text {
	font-size: var(--ess-text-sm, 0.875rem);
	color: var(--ess-color-body-text, #3A4A5C);
}

/* ---- Apply button ---- */
.apply-filter-button {
	background: var(--ess-color-accent, #E8792B);
	color: var(--ess-color-white, #fff);
	border: none;
	border-radius: var(--ess-radius-md, 0.5rem);
	padding: var(--ess-space-2, 0.5rem) var(--ess-space-4, 1rem);
	font-family: var(--ess-font-body, 'DM Sans', sans-serif);
	font-size: var(--ess-text-sm, 0.875rem);
	font-weight: var(--ess-weight-semibold, 600);
	cursor: pointer;
	min-height: 44px;
	transition: background var(--ess-transition-fast, 150ms);
}

.apply-filter-button:hover {
	background: var(--ess-color-accent-hover, #C86620);
}

.apply-filter-button:focus-visible {
	outline: 2px solid var(--ess-color-focus-ring, #4A90D9);
	outline-offset: 2px;
}

/* ---- Price slider (noUiSlider) override ---- */
.fwwfilter .noUi-connect {
	background: var(--ess-color-accent, #E8792B);
}

.fwwfilter .noUi-handle {
	border-color: var(--ess-color-accent, #E8792B);
	box-shadow: 0 0 0 3px rgba(232, 121, 43, 0.2);
}

/* ---- Loading spinner ---- */
.wpi-fww-spinner-circle-clipper .wpi-fww-spinner-circle {
	border-color: var(--ess-color-accent, #E8792B);
}

/* ---- Widget titles in sidebar ---- */
.fwwfilter .widget-title,
.fwwfilter .widgettitle {
	font-size: var(--ess-text-base, 1rem);
	font-weight: var(--ess-weight-semibold, 600);
	color: var(--ess-color-heading, #1E2B3A);
	margin-bottom: var(--ess-space-3, 0.75rem);
}


/* ==========================================================================
   3. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767px) {
	/* Full-width search results on mobile */
	.sssresults.sssajax {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		border-radius: 0 0 var(--ess-radius-lg, 0.875rem) var(--ess-radius-lg, 0.875rem);
	}

	/* Stack suggestions and products vertically on mobile */
	.sss_scroll_container {
		flex-direction: column;
	}

	.sss_suggestions_container,
	.sss_items_container {
		width: 100% !important;
	}

	/* SSF dialog full-width on mobile */
	.ssf .dialog-content {
		width: 100%;
		max-width: 100%;
		border-radius: var(--ess-radius-lg, 0.875rem) var(--ess-radius-lg, 0.875rem) 0 0;
		max-height: 85vh;
	}
}