/* ==========================================================================
   Hyundai Smart Search — Frontend Styles v1.7.5
   Fix in v1.7.5: .hss-inner switched from overflow:hidden to a horizontal
   scroll so chips (and their × remove button) pushed past the visible edge
   by several active filters stay reachable instead of being clipped off.
   Fix in v1.7.4: theme/page-builder CSS (e.g. Elementor's Kit stylesheet)
   styles bare <button> elements globally via a class+type selector such as
   ".elementor-kit-169 button", which beats a plain single-class selector
   like ".hss-search-btn" on specificity alone — so it silently overrode our
   background/color/font-family no matter what the admin colour settings or
   CSS variables said. Added !important to those properties on every real
   <button> we render (.hss-search-btn, .hss-clear-btn, .hss-chip-remove) so
   our styling always wins regardless of the theme's global button reset.
   .hss-fused is the single bordered "pill" that owns border, radius,
   background, and shadow — .hss-bar and .hss-search-btn are borderless
   interior regions that fuse into one continuous control inside it.
   .hss-outer stays overflow:visible (just the positioning anchor) so the
   absolutely-positioned .hss-dropdown below it is never clipped — .hss-fused
   is the ONLY element with overflow:hidden, and the dropdown lives outside it.
   ========================================================================== */

/* ── Box model scope ────────────────────────────────────────────────────── */
.hss-outer,
.hss-outer * {
	box-sizing: border-box;
}

/* ── Outer: positioning anchor only — must stay overflow:visible ───────── */
.hss-outer {
	position:    relative;   /* dropdown anchor */
	width:       100%;
	max-width:   820px;
	margin:      0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Hyundai Sans', 'Segoe UI', Arial, sans-serif;
}

/* ── Fused control: bar + button share this one border/radius/shadow ───── */
.hss-fused {
	display:       flex;
	align-items:   stretch;
	gap:           0;
	width:         100%;
	border:        1px solid var(--hss-border-default, #d0d5dd);
	border-radius: 10px;       /* overridden by inline style */
	overflow:      hidden;     /* clips bar/button corners to this radius */
	transition:    border-color 0.2s;
}

/* Idle → focused swap. Driven by CSS custom properties set inline on
   .hss-outer from the admin colour settings — see search-bar.php. */
.hss-outer:focus-within .hss-fused {
	border-color: var(--hss-border-focus, #00AAD2);
}

/* ── Input region (.hss-bar) — chips + input live here ──────────────────── */
/* No border/radius of its own — .hss-fused provides both, this is purely
 * the white interior to the left of the fused Search button. */
.hss-bar {
	flex:           1;
	min-width:      0;
	display:        flex !important;   /* fight theme overrides */
	align-items:    center !important;
	flex-wrap:      nowrap !important;
	padding:        6px 8px 6px 14px;
	min-height:     44px;
}

/* ── Magnifying-glass icon ──────────────────────────────────────────────── */
.hss-search-icon {
	flex-shrink:  0;
	display:      flex;
	align-items:  center;
	color:        #9aa3b0;
	margin-right: 6px;
	line-height:  1;
	pointer-events: none;
}

/* ── Inner flex: chips + input, fills available bar width ──────────────── */
/* Was overflow:hidden — with several chips active that silently clipped
 * the earliest ones (and their × remove button) past the visible edge
 * with no way to reach them. Scrolls horizontally instead so every chip
 * stays reachable; the row's own scrollbar is kept slim so it doesn't
 * fight the fused pill's rounded corners. */
.hss-inner {
	flex:                       1;
	min-width:                  0;
	display:                    flex;
	align-items:                center;
	flex-wrap:                  nowrap;
	gap:                        6px;
	overflow-x:                 auto;
	overflow-y:                 hidden;
	scrollbar-width:            auto;   
	-webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
}

.hss-inner::-webkit-scrollbar {
	height: 4px;
}

.hss-inner::-webkit-scrollbar-thumb {
	background:    #d0d5dd;
	border-radius: 4px;
}

.hss-inner::-webkit-scrollbar-track {
	background: transparent;
}

/* ── Chips wrapper ──────────────────────────────────────────────────────── */
.hss-chips {
	display:     flex;
	flex-wrap:   nowrap;
	gap:         5px;
	flex-shrink: 0;
	align-items: center;
}

/* ── Individual chip ────────────────────────────────────────────────────── */
.hss-chip {
	display:        inline-flex;
	align-items:    center;
	gap:            4px;
	padding:        4px 8px 4px 11px;
	border-radius:  20px;
	background:     #002C5F;
	color:          #fff;
	font-size:      12.5px;
	font-weight:    600;
	letter-spacing: 0.01em;
	white-space:    nowrap;
	user-select:    none;
	line-height:    1.3;
}

.hss-chip-label {
	pointer-events: none;
}

.hss-chip-remove {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           16px;
	height:          16px;
	background:      rgba(255,255,255,0.25) !important;
	border:          none !important;
	border-radius:   50% !important;
	color:           #fff !important;
	cursor:          pointer;
	font-size:       12px;
	font-family:     inherit !important;
	line-height:     1;
	padding:         0;
	transition:      background 0.15s;
	flex-shrink:     0;
}

.hss-chip-remove:hover {
	background: rgba(255,255,255,0.45) !important;
}

/* ── Text input — hard reset to override any theme styles ───────────────── */
.hss-outer .hss-input,
.hss-outer .hss-input:focus,
.hss-outer .hss-input:active {
	flex:              1 !important;
	min-width:         80px !important;
	border:            none !important;
	border-radius:     0 !important;
	outline:           none !important;
	box-shadow:        none !important;
	-webkit-appearance: none !important;
	appearance:        none !important;
	background:        transparent !important;
	font-size:         15px !important;
	color:             #1a1a1a !important;
	padding:           4px 0 !important;
	margin:            0 !important;
	font-family:       inherit !important;
	line-height:       normal !important;
	height:            auto !important;
}

.hss-outer .hss-input::placeholder {
	color:       #aab0bb !important;
	font-weight: 400 !important;
}

/* ── Clear button ───────────────────────────────────────────────────────── */
.hss-clear-btn {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           26px;
	height:          26px;
	background:      none !important;
	border:          none !important;
	border-radius:   50% !important;
	color:           #aab0bb !important;
	font-family:     inherit !important;
	cursor:          pointer;
	padding:         0;
	margin-left:     2px;
	transition:      background 0.15s, color 0.15s;
	box-shadow:      none !important;
}

.hss-clear-btn:hover {
	background: #f0f2f5 !important;
	color:      #002C5F !important;
}

/* ── Search button — sibling of .hss-bar, inside .hss-fused ─────────────── */
/*
 * A sibling element within .hss-fused's flex row (not .hss-outer directly).
 * No border-radius of its own — it's flush against .hss-bar and clipped
 * to .hss-fused's radius via that parent's overflow:hidden. This is what
 * makes the button read as part of the same control, sharing one border.
 *
 * !important on background/color/font-family/border-radius: page builders
 * (Elementor's Kit CSS in particular) style bare <button> elements globally
 * via a class+type selector like ".elementor-kit-169 button", which has
 * HIGHER specificity than a single class like ".hss-search-btn" and silently
 * wins the cascade — so var(--hss-btn-default) never even gets a chance to
 * apply. Forcing !important here is what makes the idle/focus colour scheme
 * actually reliable regardless of what global button styling a theme ships.
 */
.hss-search-btn {
	flex-shrink:    0;
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	gap:            7px;
	padding:        10px 20px;
	background:     var(--hss-btn-default, #002C5F) !important;
	color:          #fff !important;
	border:         none !important;
	border-radius:  0 !important;
	font-size:      14px;
	font-weight:    700;
	font-family:    inherit !important;
	cursor:         pointer;
	white-space:    nowrap;
	letter-spacing: 0.03em;
	transition:     background 0.2s, filter 0.15s;
	box-shadow:     none !important;
}

.hss-search-btn:hover  { filter: brightness(1.15); }
.hss-search-btn:active { filter: brightness(0.88); }

/* Search button follows the same idle → focused scheme as the bar border. */
.hss-outer:focus-within .hss-search-btn {
	background: var(--hss-btn-focus, #00AAD2) !important;
}

/* ── Dropdown ───────────────────────────────────────────────────────────── */
/* Position relative to .hss-outer (which is position:relative) */
.hss-dropdown {
	position:      absolute;
	top:           calc(100% + 6px);
	left:          0;
	right:         0;
	z-index:       99990;
	background:    #fff;
	border:        1px solid #dce2eb;
	border-radius: 10px;
	box-shadow:    0 10px 32px rgba(0,0,0,0.14);
	max-height:    420px;
	overflow-y:    auto;
	scroll-behavior: smooth;
}

.hss-dropdown-inner { padding: 6px 0; }

/* ── Dropdown groups ────────────────────────────────────────────────────── */
.hss-group {
	padding:       4px 0;
	border-bottom: 1px solid #f0f2f5;
}
.hss-group:last-child { border-bottom: none; }

.hss-group-label {
	padding:        5px 16px 3px;
	font-size:      10.5px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color:          #9aa3b0;
}

/* ── Result rows ────────────────────────────────────────────────────────── */
.hss-result {
	display:     flex;
	align-items: center;
	gap:         9px;
	padding:     9px 16px;
	cursor:      pointer;
	transition:  background 0.12s;
	outline:     none;
}

.hss-result:hover,
.hss-result:focus { background: #f4f7fc; }

/* ── Model preview thumbnail (Model-level results only) ─────────────────── */
.hss-result-thumb {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          30px;
	border-radius:   5px;
	overflow:        hidden;
	background:      #f0f2f5;
}

.hss-result-thumb img {
	width:      100%;
	height:     100%;
	object-fit: contain;
	display:    block;
}

.hss-badge {
	display:        inline-block;
	padding:        2px 8px;
	border-radius:  12px;
	font-size:      10px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          #fff;
	flex-shrink:    0;
	line-height:    1.6;
}

.hss-result-name {
	flex:        1;
	font-size:   14px;
	font-weight: 500;
	color:       #1a1a2e;
}

.hss-result-name mark {
	background:    transparent;
	color:         #00AAD2;
	font-weight:   700;
	border-bottom: 2px solid #00AAD2;
}

/* Passive selectors (year on Model rows; model + year on Trim rows) shown
   inline right next to the active name — never pinned to the far right.
   Darkened from the old far-right gray for better legibility on white. */
.hss-result-year {
	color:       #5b6472;
	font-weight: 500;
	font-size:   13px;
	margin-left: 4px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.hss-bar { padding: 5px 6px 5px 10px; min-height: 42px; }

	.hss-search-btn { padding: 0 14px; width: 68px; }

	.hss-outer .hss-input { font-size: 14px !important; min-width: 60px !important; }

	.hss-chip { font-size: 11.5px; padding: 3px 7px 3px 9px; }

	.hss-result-thumb { width: 36px; height: 26px; }
}

/* ── Scrollbar (dropdown) ───────────────────────────────────────────────── */
.hss-dropdown::-webkit-scrollbar        { width: 5px; }
.hss-dropdown::-webkit-scrollbar-track  { background: transparent; }
.hss-dropdown::-webkit-scrollbar-thumb  { background: #d0d6e0; border-radius: 99px; }