/**
 * 3D Isometric Interactive Navbar Styles
 * High-performance GPU-accelerated 3D effects for Elementor
 */

.wfs-3d-navbar-wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}

.wfs-3d-navbar-wrapper .wfs-3d-nav-container {
	position: relative;
	display: flex;
	box-sizing: border-box;
	perspective: var(--wfs-nav-perspective, 1000px);
	transform-style: preserve-3d;
	padding: var(--wfs-nav-padding, 12px 16px);
	background: var(--wfs-nav-bg, rgba(10, 10, 20, 0.75));
	border: var(--wfs-nav-border-w, 1px) solid var(--wfs-nav-border-col, rgba(138, 43, 226, 0.4));
	border-radius: var(--wfs-nav-radius, 10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(138, 43, 226, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	gap: var(--wfs-nav-gap, 10px);
}

/* Horizontal Layout */
.wfs-3d-navbar-wrapper .wfs-nav-horizontal {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: var(--wfs-nav-justify, center);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.wfs-3d-navbar-wrapper .wfs-nav-horizontal::-webkit-scrollbar {
	display: none;
}

/* Vertical Layout */
.wfs-3d-navbar-wrapper .wfs-nav-vertical {
	flex-direction: column;
	width: 100%;
	max-width: var(--wfs-nav-v-max-width, 320px);
	margin: 0 auto;
}

/* 3D Button Item */
.wfs-3d-navbar-wrapper .wfs-3d-nav-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--wfs-btn-padding, 12px 22px);
	text-decoration: none;
	color: var(--wfs-text-col, #ffffff);
	font-size: var(--wfs-font-size, 15px);
	font-weight: var(--wfs-font-weight, 600);
	letter-spacing: 0.5px;
	white-space: nowrap;
	border-radius: var(--wfs-btn-radius, 6px);
	background: var(--wfs-btn-bg, rgba(20, 15, 38, 0.9));
	border: var(--wfs-btn-border-w, 2px) solid var(--wfs-btn-border-col, #8a2be2);
	box-shadow:
		0 4px 10px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.15),
		0 0 12px rgba(138, 43, 226, 0.25);
	cursor: pointer;
	box-sizing: border-box;
	transform-style: preserve-3d;
	will-change: transform, box-shadow;
	transform: translateZ(0) rotateX(var(--wfs-tilt-x, 0deg)) rotateY(var(--wfs-tilt-y, 0deg));
	transition:
		transform var(--wfs-transition-dur, 0.3s) cubic-bezier(0.175, 0.885, 0.32, 1.275),
		background-color 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.3s ease,
		color 0.25s ease;
}

/* Isometric 3D Extrusion Effect (Top / Side Face) */
.wfs-3d-navbar-wrapper .wfs-3d-nav-btn::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 4px;
	right: -4px;
	height: 6px;
	background: linear-gradient(90deg, rgba(138, 43, 226, 0.6), rgba(186, 85, 211, 0.8));
	transform: skewX(-45deg);
	transform-origin: top left;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	opacity: var(--wfs-3d-extrusion-opacity, 0.7);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
	border-radius: 2px 2px 0 0;
}

.wfs-3d-navbar-wrapper .wfs-3d-nav-btn::after {
	content: '';
	position: absolute;
	top: -3px;
	right: -6px;
	bottom: 3px;
	width: 6px;
	background: linear-gradient(180deg, rgba(138, 43, 226, 0.8), rgba(75, 0, 130, 0.9));
	transform: skewY(-45deg);
	transform-origin: top right;
	opacity: var(--wfs-3d-extrusion-opacity, 0.7);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
	border-radius: 0 2px 2px 0;
}

/* Icon */
.wfs-3d-navbar-wrapper .wfs-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wfs-icon-size, 16px);
	color: var(--wfs-icon-col, #ba55d3);
	transition: transform 0.3s ease, color 0.25s ease;
}

.wfs-3d-navbar-wrapper .wfs-btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Text */
.wfs-3d-navbar-wrapper .wfs-btn-title {
	position: relative;
	z-index: 2;
}

/* --- HOVER POP-OUT EFFECT ("GETS OUT OF SCREEN") --- */
.wfs-3d-navbar-wrapper .wfs-3d-nav-btn:hover {
	transform:
		translateZ(var(--wfs-pop-z, 35px))
		translateY(var(--wfs-pop-y, -10px))
		translateX(var(--wfs-pop-x, 0px))
		scale(var(--wfs-pop-scale, 1.06));
	background: var(--wfs-btn-hover-bg, rgba(40, 25, 70, 0.95));
	border-color: var(--wfs-btn-hover-border, #d87093);
	color: var(--wfs-hover-text-col, #ffffff);
	box-shadow:
		0 20px 35px rgba(0, 0, 0, 0.75),
		0 0 25px var(--wfs-glow-col, rgba(186, 85, 211, 0.8)),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	z-index: 100;
}

.wfs-3d-navbar-wrapper .wfs-3d-nav-btn:hover::before {
	opacity: 1;
	background: linear-gradient(90deg, rgba(186, 85, 211, 0.9), rgba(255, 105, 180, 0.9));
}

.wfs-3d-navbar-wrapper .wfs-3d-nav-btn:hover::after {
	opacity: 1;
	background: linear-gradient(180deg, rgba(186, 85, 211, 0.95), rgba(138, 43, 226, 1));
}

.wfs-3d-navbar-wrapper .wfs-3d-nav-btn:hover .wfs-btn-icon {
	color: var(--wfs-hover-icon-col, #ffffff);
	transform: scale(1.15);
}

/* Active State */
.wfs-3d-navbar-wrapper .wfs-3d-nav-btn.is-active {
	background: var(--wfs-active-bg, rgba(138, 43, 226, 0.35));
	border-color: var(--wfs-active-border, #da70d6);
	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.6),
		0 0 18px rgba(218, 112, 214, 0.6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.wfs-3d-navbar-wrapper .wfs-3d-nav-container {
		padding: 8px 12px;
		gap: 8px;
	}

	.wfs-3d-navbar-wrapper .wfs-3d-nav-btn {
		padding: 9px 15px;
		font-size: 13px;
	}

	.wfs-3d-navbar-wrapper .wfs-3d-nav-btn:hover {
		transform:
			translateZ(15px)
			translateY(-5px)
			scale(1.03);
	}
}