/* Firearms/Optics/Silencers Finder — panel + slide-out drawer styles.
   Palette follows the site's design system (Wulfys-Armory-PRD_1.md §5.1): amber #C6791F as
   the accent/CTA color, pine #33513F as a secondary accent, kept on a dark charcoal panel to
   match the Lipsey's reference UI Wulfy asked this to mirror. */

.wla-finder,
.wla-finder *,
.wla-finder *::before,
.wla-finder *::after {
	box-sizing: border-box; /* Without this, padding was pushing the panel wider than its
		320px drawer and forcing an unwanted horizontal scrollbar — see finder.js/README. */
}

.wla-finder {
	background: #262b27;
	color: #fff;
	padding: 22px;
	border-radius: 6px;
	max-width: 420px;
	font-family: inherit;
}

.wla-finder-title {
	position: relative;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0 0 18px;
	padding-bottom: 14px;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.wla-finder-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 42px;
	height: 2px;
	background: #c6791f;
}

/* All Items / In-Stock Only segmented toggle */
.wla-finder-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	padding: 5px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 8px;
}

.wla-finder-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 11px 12px;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.03em;
	line-height: 1;
	cursor: pointer;
	text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease;
}

.wla-finder-toggle-btn:hover {
	color: #fff;
}

.wla-finder-toggle-btn.is-active {
	background: #c6791f;
	color: #fff;
}

.wla-finder-dropdowns {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 18px;
}

.wla-finder-select-wrap {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.wla-finder-select {
	flex: 1;
	min-width: 0;
	width: 100%;
	padding: 12px 34px 12px 14px !important;
	height: auto !important;
	border-radius: 5px !important;
	border: 1px solid transparent !important;
	background-color: #fff !important;
	color: #222 !important;
	font-size: 14px;
	line-height: 1.3 !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	transition: box-shadow 0.15s ease;
}

.wla-finder-select:hover {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.wla-finder-select:focus {
	outline: none;
	border-color: #c6791f !important;
	box-shadow: 0 0 0 2px rgba(198, 121, 31, 0.35);
}

.wla-finder-select:disabled {
	background-color: #e4e4e4 !important;
	color: #999 !important;
	cursor: not-allowed;
}

/* Clear-x sits outside the dropdown, to its right, only when a value is picked — the
   dropdown itself doesn't need to make room for it internally. */
.wla-finder-clear {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: #c0392b;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wla-finder-select-wrap.has-value .wla-finder-clear {
	display: flex;
}

.wla-finder-clear:hover {
	background: #d9483a;
}

.wla-finder-count {
	display: flex;
	align-items: baseline;
	gap: 9px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 10px;
}

.wla-finder-count-number {
	font-size: 26px;
	font-weight: 800;
	color: #c6791f;
	line-height: 1;
}

.wla-finder-count-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.wla-finder-actions {
	display: flex;
	gap: 8px;
}

.wla-finder-btn {
	flex: 1;
	padding: 12px 10px;
	border-radius: 5px;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	text-align: center;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.wla-finder-reset {
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.wla-finder-reset:hover {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.wla-finder-display {
	background: #c6791f;
	border: 1px solid #c6791f;
	color: #fff;
}

.wla-finder-display:hover {
	background: #d98a2b;
	border-color: #d98a2b;
}

/* Slide-out drawer — matches Lipsey's own dealer-portal Firearms Finder, Wulfy's reference.
   Fixed to the left edge, slides in over whatever page is underneath. */
.wla-finder-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(10, 12, 10, 0.55);
	backdrop-filter: blur(1.5px);
	z-index: 99998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.wla-finder-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

.wla-finder-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 320px;
	max-width: 88vw;
	z-index: 99999;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	box-shadow: 6px 0 24px rgba(0, 0, 0, 0.35);
	/* Deliberately no overflow/scroll here — the close button below is a direct child of
	   THIS element, positioned absolute. If the drawer itself scrolled, the close button
	   would scroll away with the content and become unreachable once you scrolled past the
	   dropdowns (real bug, found 2026-08-15). The inner panel scrolls instead, so the close
	   button stays pinned top-right no matter how far the content inside is scrolled. */
}

.wla-finder-drawer.is-open {
	transform: translateX(0);
}

.wla-finder-drawer .wla-finder--drawer-inner {
	max-width: none;
	border-radius: 0;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	/* Hide the scrollbar chrome (Wulfy: no visible "sizing bars") while staying scrollable
	   on short viewports. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wla-finder-drawer .wla-finder--drawer-inner::-webkit-scrollbar {
	display: none;
}

.wla-finder-drawer .wla-finder--drawer-inner .wla-finder-title {
	padding-right: 42px; /* room for the close button, which sits top-right */
}

.wla-finder-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wla-finder-close:hover {
	background: #c6791f;
	border-color: #c6791f;
	color: #fff;
}

/* Prevent background scroll while a drawer is open. */
body.wla-finder-drawer-open {
	overflow: hidden;
}