/**
 * Location: /assets/css/search-style/search-style.css
 * Purpose:
 * - Frontend CSS for Search Bar settings.
 * - Values are applied through CSS variables set by /assets/js/search-style/search-style.js.
 *
 * Related PHP:
 * - /inc/features/search-style/search-style.php
 *
 * @package SuntechMallVPro
 */

/* ==========================================================================
   Search Style Variables
   ========================================================================== */

.stm-header .stm-mb-search {
	--stm-ss-desktop-width: 700px;
	--stm-ss-tablet-width: 100%;
	--stm-ss-mobile-width: 100%;

	--stm-ss-height: 46px;
	--stm-ss-mobile-height: 44px;
	--stm-ss-border-width: 2px;
	--stm-ss-border-radius: 25px;

	--stm-ss-background: #ffffff;
	--stm-ss-border-color: #ff7a00;
	--stm-ss-input-text: #111111;
	--stm-ss-placeholder-color: #6b7280;

	--stm-ss-category-bg: #ffffff;
	--stm-ss-category-text: #111111;
	--stm-ss-category-border: #ff7a00;
	--stm-ss-category-width: 210px;

	--stm-ss-button-bg: #ff7a00;
	--stm-ss-button-bg-hover: #e56f00;
	--stm-ss-button-icon: #ffffff;
	--stm-ss-button-width: 56px;
	--stm-ss-mobile-button-width: 52px;

	--stm-ss-dropdown-bg: #ffffff;
	--stm-ss-dropdown-border: #eeeeee;
	--stm-ss-dropdown-radius: 14px;
	--stm-ss-focus-ring: #ff7a00;

	width: var(--stm-ss-desktop-width);
	max-width: 100%;
	margin: 0 auto;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent;
}

/* ==========================================================================
   Search Shell
   ========================================================================== */

.stm-header .stm-mb-search__inner {
	width: 100%;
	min-height: var(--stm-ss-height);
	border-width: var(--stm-ss-border-width);
	border-style: solid;
	border-color: var(--stm-ss-border-color);
	border-radius: var(--stm-ss-border-radius);
	background: var(--stm-ss-background);
	outline: 0 !important;
	box-shadow: none;
}

/*
 * Important:
 * Removes unwanted external black outline/border caused by browser/theme focus
 * styles or inherited form rules. Focus ring stays orange and controlled.
 */
.stm-header .stm-mb-search,
.stm-header .stm-mb-search:focus,
.stm-header .stm-mb-search:focus-within,
.stm-header .stm-mb-search__inner,
.stm-header .stm-mb-search__inner:focus,
.stm-header .stm-mb-search__inner:focus-visible {
	border-color: var(--stm-ss-border-color);
	outline: 0 !important;
}

.stm-header .stm-mb-search__inner:focus-within {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--stm-ss-focus-ring) 18%, transparent);
}

/* Fallback for browsers without color-mix support. */
@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
	.stm-header .stm-mb-search__inner:focus-within {
		box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.16);
	}
}

/* ==========================================================================
   Category Dropdown
   ========================================================================== */

.stm-header .stm-mb-search__cat {
	flex-basis: var(--stm-ss-category-width);
	border-right-width: var(--stm-ss-border-width);
	border-right-style: solid;
	border-right-color: color-mix(in srgb, var(--stm-ss-category-border) 22%, transparent);
	background: var(--stm-ss-category-bg);
}

@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
	.stm-header .stm-mb-search__cat {
		border-right-color: rgba(255, 122, 0, 0.22);
	}
}

.stm-header .stm-mb-search__select {
	height: var(--stm-ss-height);
	border: 0 !important;
	outline: 0 !important;
	background-color: var(--stm-ss-category-bg);
	color: var(--stm-ss-category-text);
	box-shadow: none !important;
}

.stm-header .stm-mb-search__select:focus,
.stm-header .stm-mb-search__select:focus-visible {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

/* ==========================================================================
   Input
   ========================================================================== */

.stm-header .stm-mb-search__input {
	height: var(--stm-ss-height);
	border: 0 !important;
	outline: 0 !important;
	background: var(--stm-ss-background);
	color: var(--stm-ss-input-text);
	box-shadow: none !important;
}

.stm-header .stm-mb-search__input:focus,
.stm-header .stm-mb-search__input:focus-visible {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.stm-header .stm-mb-search__input::placeholder {
	color: var(--stm-ss-placeholder-color);
	opacity: 1;
}

/* ==========================================================================
   Button
   ========================================================================== */

.stm-header .stm-mb-search__btn {
	min-width: var(--stm-ss-button-width);
	min-height: var(--stm-ss-height);
	border: 0 !important;
	outline: 0 !important;
	background: var(--stm-ss-button-bg);
	color: var(--stm-ss-button-icon);
	box-shadow: none !important;
}

.stm-header .stm-mb-search__btn:hover {
	background: var(--stm-ss-button-bg-hover);
	opacity: 1;
}

.stm-header .stm-mb-search__btn:focus,
.stm-header .stm-mb-search__btn:focus-visible {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35) !important;
}

.stm-header .stm-mb-search__btnIcon {
	background: var(--stm-ss-button-icon);
}

/* ==========================================================================
   Live Dropdown
   ========================================================================== */

.stm-header .stm-mb-search__dropdown {
	background: var(--stm-ss-dropdown-bg);
	border-color: var(--stm-ss-dropdown-border);
	border-radius: var(--stm-ss-dropdown-radius);
}

.stm-header .stm-mb-search.stm-search-style--dropdown-shadow .stm-mb-search__dropdown {
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);
}

.stm-header .stm-mb-search:not(.stm-search-style--dropdown-shadow) .stm-mb-search__dropdown {
	box-shadow: none;
}

/* ==========================================================================
   Behavior States
   ========================================================================== */

.stm-header .stm-mb-search.stm-search-style--live-disabled .stm-mb-search__dropdown {
	display: none !important;
}

.stm-header .stm-mb-search.stm-search-style--category-hidden .stm-mb-search__cat {
	display: none !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
	.stm-header .stm-mb-search {
		width: var(--stm-ss-tablet-width);
		max-width: 100%;
	}

	.stm-header .stm-mb-search__inner {
		min-height: var(--stm-ss-mobile-height);
	}

	.stm-header .stm-mb-search__input,
	.stm-header .stm-mb-search__select {
		height: var(--stm-ss-mobile-height);
	}

	.stm-header .stm-mb-search__btn {
		min-height: var(--stm-ss-mobile-height);
		min-width: var(--stm-ss-mobile-button-width);
	}
}

@media (max-width: 767px) {
	.stm-header .stm-mb-search {
		width: var(--stm-ss-mobile-width);
		max-width: 100%;
	}

	.stm-header .stm-mb-search:not(.stm-search-style--category-mobile-visible) .stm-mb-search__cat {
		display: none !important;
	}

	.stm-header .stm-mb-search.stm-search-style--category-mobile-visible .stm-mb-search__cat {
		display: block;
		flex-basis: min(var(--stm-ss-category-width), 42%);
	}
}