/* =========================================================
   Grande Navbar - minimal bottom navigation
   ========================================================= */

.gnb-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	z-index: 9999;
}

.gnb-wrap.gnb-fixed {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 16px;
	padding: 0 16px;
	pointer-events: none;
}

.gnb-wrap.gnb-fixed .gnb-bar {
	pointer-events: auto;
}

.gnb-wrap.gnb-static {
	position: relative;
}

.gnb-bar {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	background: #fff;
}

.gnb-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-decoration: none;
	cursor: pointer;
	flex: 0 0 auto;
	-webkit-tap-highlight-color: transparent;
	transition-property: transform;
	transition-timing-function: ease;
}

/* -----------------------------------------------------------
   The circle. Width and height are ALWAYS set to the exact
   same value by a single Elementor control (circle_size), and
   border-radius uses a fixed large px value (not 50%) which is
   a bulletproof way to force a full circle/pill shape on any
   box regardless of padding, borders, or box-sizing edge cases.
   ----------------------------------------------------------- */
.gnb-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	border-radius: 999px;
	overflow: hidden;
	transition-property: background-color, color, transform;
	transition-timing-function: ease;
}

.gnb-circle i,
.gnb-circle svg {
	display: block;
	line-height: 1;
	transition: inherit;
	color: inherit;
	fill: currentColor;
}

.gnb-circle svg * {
	fill: currentColor !important;
}

.gnb-label {
	display: block;
	white-space: nowrap;
	line-height: 1.2;
	transition-property: color, transform;
	transition-timing-function: ease;
}

.gnb-bar.gnb-no-label .gnb-label {
	display: none;
}

/* =========================================================
   Animations - minimal
   ========================================================= */
.gnb-anim-scale .gnb-item:active {
	transform: scale(0.92);
}
.gnb-anim-scale .gnb-item.gnb-active .gnb-circle {
	transform: scale(1.06);
}

.gnb-anim-lift .gnb-item.gnb-active {
	transform: translateY(-3px);
}
.gnb-anim-lift .gnb-item:active {
	transform: translateY(-1px);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 480px) {
	.gnb-wrap.gnb-fixed {
		bottom: 10px;
		padding: 0 10px;
	}
	.gnb-label {
		font-size: 10px;
	}
}