/* TechComp Global Section Drawer — isolated from Salient's off-canvas system. */

.tcgsd-drawer,
.tcgsd-drawer *,
.tcgsd-trigger,
.tcgsd-trigger * {
	box-sizing: border-box;
}

/* Hide only Salient's original hamburger when enabled in plugin settings. */
.tcgsd-hide-salient-toggle .slide-out-widget-area-toggle {
	display: none !important;
}

.tcgsd-trigger-item {
	display: flex !important;
	align-items: center;
	justify-content: center;
	list-style: none;
	margin-left: 10px !important;
}

.tcgsd-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--tcgsd-trigger-bg, #061521);
	color: var(--tcgsd-trigger-lines, #fff);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 180ms ease, filter 180ms ease;
}

.tcgsd-trigger:hover {
	filter: brightness(1.15);
	transform: translateY(-1px);
}

.tcgsd-trigger:focus-visible,
.tcgsd-drawer__close:focus-visible,
.tcgsd-drawer__panel:focus-visible {
	outline: 2px solid #48a8ff;
	outline-offset: 3px;
}

.tcgsd-trigger__lines {
	display: grid;
	gap: 5px;
	width: 24px;
}

.tcgsd-trigger__lines span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
}

html.tcgsd-drawer-open,
html.tcgsd-drawer-open body {
	overflow: hidden !important;
}

.tcgsd-drawer {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear var(--tcgsd-visibility-delay, 380ms);
}

.tcgsd-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.tcgsd-drawer__backdrop {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(0 0 0 / var(--tcgsd-overlay-opacity, 0.58));
	opacity: 0;
	-webkit-backdrop-filter: blur(0) grayscale(0) brightness(100%) saturate(100%);
	backdrop-filter: blur(0) grayscale(0) brightness(100%) saturate(100%);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		opacity var(--tcgsd-backdrop-duration, 300ms) var(--tcgsd-easing, ease),
		-webkit-backdrop-filter var(--tcgsd-backdrop-duration, 300ms) var(--tcgsd-easing, ease),
		backdrop-filter var(--tcgsd-backdrop-duration, 300ms) var(--tcgsd-easing, ease);
}

.tcgsd-drawer.is-open .tcgsd-drawer__backdrop {
	opacity: 1;
	-webkit-backdrop-filter:
		blur(var(--tcgsd-backdrop-blur, 0px))
		grayscale(var(--tcgsd-backdrop-grayscale, 0%))
		brightness(var(--tcgsd-backdrop-brightness, 100%))
		saturate(var(--tcgsd-backdrop-saturation, 100%));
	backdrop-filter:
		blur(var(--tcgsd-backdrop-blur, 0px))
		grayscale(var(--tcgsd-backdrop-grayscale, 0%))
		brightness(var(--tcgsd-backdrop-brightness, 100%))
		saturate(var(--tcgsd-backdrop-saturation, 100%));
}

.tcgsd-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(var(--tcgsd-width, 560px), 100vw);
	max-width: 100%;
	height: 100vh;
	height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--tcgsd-bg, #061521);
	box-shadow: -24px 0 60px rgb(0 0 0 / 0.24);
	overflow: hidden;
	opacity: var(--tcgsd-panel-start-opacity, 1);
	transform: translate3d(100%, 0, 0);
	transition:
		transform var(--tcgsd-panel-duration, 380ms) var(--tcgsd-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--tcgsd-panel-delay, 0ms),
		opacity var(--tcgsd-panel-duration, 380ms) var(--tcgsd-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--tcgsd-panel-delay, 0ms);
}

.tcgsd-drawer.is-open .tcgsd-drawer__panel {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.tcgsd-drawer__content {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.tcgsd-drawer__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.24);
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 180ms ease, transform 180ms ease;
}

.tcgsd-drawer__close:hover {
	background: rgb(0 0 0 / 0.42);
	transform: rotate(5deg);
}

.tcgsd-drawer__close span,
.tcgsd-drawer__close span::before {
	position: absolute;
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	content: "";
	transform: rotate(45deg);
}

.tcgsd-drawer__close span::before {
	transform: rotate(90deg);
}

@media (max-width: 690px) {
	.tcgsd-drawer__panel {
		width: min(var(--tcgsd-mobile-width, 92vw), 100vw);
	}

	.tcgsd-trigger {
		width: 44px;
		height: 44px;
		border-radius: 9px;
	}

	.tcgsd-drawer__close {
		top: 14px;
		right: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcgsd-trigger,
	.tcgsd-drawer,
	.tcgsd-drawer__backdrop,
	.tcgsd-drawer__panel,
	.tcgsd-drawer__close {
		transition-duration: 1ms !important;
	}
}