/**
 * Mobile Filter Drawer CSS for Jaelectrical / Nexostdio Filter
 */

/* Trigger Button */
.nexostdio-filter-trigger-wrap,
.jaelectrical-filter-trigger-wrap {
	display: none; /* Controlled via media query JS / CSS */
	margin-bottom: 16px;
}

/* Floating Trigger Button Modes */
.nexostdio-filter-trigger-wrap.is-floating {
	position: fixed !important;
	z-index: 9999;
	margin: 0 !important;
}

.nexostdio-filter-trigger-wrap.is-floating.floating-left {
	left: 0;
}

.nexostdio-filter-trigger-wrap.is-floating.floating-right {
	right: 0;
}

.nexostdio-filter-trigger-wrap.is-floating.floating-center {
	left: 50%;
	transform: translateX(-50%);
}

.nexostdio-filter-trigger-wrap.is-floating.floating-middle {
	top: 50%;
	transform: translateY(-50%);
}

.nexostdio-filter-trigger-wrap.is-floating.floating-middle.floating-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.nexostdio-filter-trigger-wrap.is-floating.floating-bottom {
	bottom: 24px;
}

.nexostdio-filter-trigger-wrap.is-floating.floating-top {
	top: 120px;
}

/* Floating button edge tab style */
.nexostdio-filter-trigger-wrap.is-floating.floating-left .nexostdio-filter-trigger-btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.2);
}

.nexostdio-filter-trigger-wrap.is-floating.floating-right .nexostdio-filter-trigger-btn {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: -2px 4px 15px rgba(0, 0, 0, 0.2);
}

/* Inline alignments */
.nexostdio-filter-trigger-wrap.align-left {
	text-align: left;
}
.nexostdio-filter-trigger-wrap.align-center {
	text-align: center;
}
.nexostdio-filter-trigger-wrap.align-right {
	text-align: right;
}
.nexostdio-filter-trigger-wrap.align-justify .nexostdio-filter-trigger-btn {
	width: 100%;
}

.nexostdio-filter-trigger-btn,
.jaelectrical-filter-trigger-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--nexostdio-primary, #0073aa);
	color: #ffffff;
	border: none;
	padding: 10px 18px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.nexostdio-filter-trigger-btn:hover {
	background-color: var(--nexostdio-primary-hover, #005177);
}

.nexostdio-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 14px;
	line-height: 1;
}

.nexostdio-trigger-icon svg,
.nexostdio-trigger-icon i {
	width: 100%;
	height: 100%;
	font-size: inherit;
	stroke: currentColor;
	fill: currentColor;
}

.nexostdio-trigger-badge {
	background-color: #ffffff;
	color: var(--nexostdio-primary, #0073aa);
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 10px;
	line-height: 1.2;
}

/* Off-Canvas Backdrop Overlay */
.nexostdio-drawer-backdrop {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background-color: rgba(15, 23, 42, 0.5);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 99998;
	opacity: 0;
	visibility: hidden;
	display: none !important;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

.nexostdio-drawer-backdrop.is-active {
	display: block !important;
	opacity: 1;
	visibility: visible;
}

/* Off-Canvas Drawer Container */
.nexostdio-mobile-drawer {
	position: fixed !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 340px;
	max-width: 85vw;
	height: 100vh !important;
	background-color: #ffffff;
	z-index: 99999;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	display: none !important;
	flex-direction: column;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

/* Position Left */
.nexostdio-mobile-drawer.position-left {
	left: 0 !important;
	transform: translateX(-100%);
}

/* Position Right */
.nexostdio-mobile-drawer.position-right {
	right: 0 !important;
	transform: translateX(100%);
}

.nexostdio-mobile-drawer.is-open {
	display: flex !important;
	transform: translateX(0) !important;
}

/* Drawer Header */
.nexostdio-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--nexostdio-border, #e2e4e7);
	flex-shrink: 0;
}

.nexostdio-drawer-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--nexostdio-text, #2c3338);
	margin: 0;
}

.nexostdio-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: #f1f5f9;
	border: none;
	border-radius: 50%;
	color: #64748b;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nexostdio-drawer-close:hover {
	background-color: #e2e8f0;
	color: #0f172a;
}

.nexostdio-drawer-close svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

/* Drawer Body (Scrollable Content) */
.nexostdio-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	-webkit-overflow-scrolling: touch;
}

#nexostdio-mobile-drawer .nexostdio-drawer-body .nexostdio-brand-list,
#nexostdio-mobile-drawer .nexostdio-drawer-body .jaelectrical-brand-list {
	max-height: 260px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

/* Drawer Footer */
.nexostdio-drawer-footer {
	padding: 16px 20px;
	border-top: 1px solid var(--nexostdio-border, #e2e4e7);
	display: flex;
	gap: 10px;
	background-color: #ffffff;
	flex-shrink: 0;
}

.nexostdio-drawer-apply-btn {
	flex: 1;
	background-color: var(--nexostdio-primary, #0073aa);
	color: #ffffff;
	border: none;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
}

.nexostdio-drawer-reset-btn {
	background-color: #f1f5f9;
	color: #475569;
	border: 1px solid #cbd5e1;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* Body Scroll Lock */
body.nexostdio-drawer-open {
	overflow: hidden !important;
	touch-action: none;
}

/* Drawer widgets display guarantee */
#nexostdio-mobile-drawer .nexostdio-drawer-body > div,
#nexostdio-mobile-drawer .nexostdio-drawer-body .nexostdio-drawer-widget-item,
#nexostdio-mobile-drawer .nexostdio-drawer-body .elementor-widget,
#nexostdio-mobile-drawer .nexostdio-drawer-body [class*="elementor-element"],
#nexostdio-mobile-drawer .nexostdio-drawer-body .elementor-widget-container,
#nexostdio-mobile-drawer .nexostdio-drawer-body .nexostdio-filter-widget,
#nexostdio-mobile-drawer .nexostdio-drawer-body .jaelectrical-filter-widget {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Active filters widget hides itself only when empty */
#nexostdio-mobile-drawer .nexostdio-drawer-body .nexostdio-active-filters-widget.is-empty,
#nexostdio-mobile-drawer .nexostdio-drawer-body .jaelectrical-active-filters-widget.is-empty {
	display: none !important;
}

/* Category Filter: full native height, no slider / scroll */
#nexostdio-mobile-drawer .nexostdio-drawer-body .nexostdio-filter-category-tree-container,
#nexostdio-mobile-drawer .nexostdio-drawer-body .jaelectrical-filter-category-tree-container {
	max-height: none !important;
	overflow: visible !important;
}

/* Brand Filter: keep desktop max-height with internal scroll */
#nexostdio-mobile-drawer .nexostdio-drawer-body .nexostdio-brand-list,
#nexostdio-mobile-drawer .nexostdio-drawer-body .jaelectrical-brand-list {
	display: block !important;
	max-height: 260px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
	-webkit-overflow-scrolling: touch;
	position: relative !important;
}