/* GP Bottom Navigation Menu
   ------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------ */
:root {
	--gp-bn-orange: #ff6a00;
	--gp-bn-orange-tint: rgba(255, 106, 0, 0.12);
	--gp-bn-orange-tint-soft: rgba(255, 106, 0, 0.08);
	--gp-bn-ink: #6b7280;
	--gp-bn-ink-strong: #1f2430;
	--gp-bn-bg: #ffffff;
	--gp-bn-border: rgba(15, 23, 42, 0.08);
	--gp-bn-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
	--gp-bn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------
   Container
   ------------------------------------------------------------------ */
.gp-bottom-menu {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--gp-bn-bg);
	border-top: 1px solid var(--gp-bn-border);
	box-shadow: var(--gp-bn-shadow);
	font-family: var(--gp-bn-font);
	transform: translateY(0);
	opacity: 1;
	transition: transform 0.3s ease, opacity 0.3s ease;
	will-change: transform;
}

.gp-bottom-menu.gp-bn-hidden {
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.gp-bottom-menu {
		transition: none;
	}
}

.gp-bn-item {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--gp-bn-ink);
	outline-offset: -2px;
}

.gp-bn-item:focus-visible {
	outline: 2px solid var(--gp-bn-orange);
	border-radius: 10px;
}

.gp-bn-icon {
	width: 22px;
	height: 22px;
	display: block;
	flex-shrink: 0;
}

.gp-bn-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/* ------------------------------------------------------------------
   Mobile row (default, < 992px) — 5 items, stacked icon/label
   ------------------------------------------------------------------ */
.gp-bn-row--mobile {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: stretch;
	padding-bottom: max(4px, env(safe-area-inset-bottom));
}

.gp-bn-row--mobile .gp-bn-item {
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	padding: 8px 2px 7px;
	transition: color 0.15s ease;
}

.gp-bn-row--mobile .gp-bn-icon-wrap {
	width: 42px;
	height: 26px;
	border-radius: 13px;
}

.gp-bn-row--mobile .gp-bn-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gp-bn-row--mobile .gp-bn-item.is-active {
	color: var(--gp-bn-orange);
}

.gp-bn-row--mobile .gp-bn-item.is-active .gp-bn-icon-wrap {
	background: var(--gp-bn-orange-tint);
	transform: translateY(-2px);
}

.gp-bn-row--desktop {
	display: none;
}

/* ------------------------------------------------------------------
   Desktop / tablet row (>= 992px) — full item set, inline icon+label,
   utility group (Messages / Account / Sign in-up) pinned right
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
	.gp-bn-row--mobile {
		display: none;
	}

	.gp-bn-row--desktop {
		display: flex;
		align-items: center;
		max-width: 1240px;
		margin: 0 auto;
		padding: 0 28px;
		height: 62px;
		gap: 4px;
	}

	.gp-bn-row--desktop .gp-bn-item {
		flex-direction: row;
		gap: 8px;
		padding: 9px 14px;
		border-radius: 9px;
		font-size: 13.5px;
		font-weight: 600;
		transition: color 0.15s ease, background-color 0.15s ease;
	}

	.gp-bn-row--desktop .gp-bn-icon {
		width: 18px;
		height: 18px;
	}

	.gp-bn-row--desktop .gp-bn-item:hover {
		background: rgba(15, 23, 42, 0.045);
		color: var(--gp-bn-ink-strong);
	}

	.gp-bn-row--desktop .gp-bn-item.is-active {
		color: var(--gp-bn-orange);
		background: var(--gp-bn-orange-tint-soft);
	}

	/* Invisible spacer: pushes Messages / Account / Sign in-up to the right,
	   keeping Home...Saved anchored left. */
	.gp-bn-sep {
		flex: 1 1 auto;
	}

	.gp-bn-row--desktop .gp-bn-item--utility {
		font-size: 13px;
	}

	.gp-bn-row--desktop .gp-bn-item--utility.is-active,
	.gp-bn-row--desktop a[href*="action=signup"].gp-bn-item {
		color: var(--gp-bn-orange);
	}

	/* Sign Up styled as a filled pill so it reads as the primary CTA
	   when the visitor is logged out. */
	.gp-bn-row--desktop a[href*="action=register"].gp-bn-item {
		background: var(--gp-bn-orange);
		color: #ffffff;
	}

	.gp-bn-row--desktop a[href*="action=register"].gp-bn-item:hover {
		background: #e85d00;
	}
}