/**
 * Bottom Navigation — Floating Dynamic Pill.
 *
 * @package PasionGift_App
 */

.pg-bottom-navigation {
	--pg-bottom-nav-indicator-bg: var(--pg-color-brand-rose);
	--pg-bottom-nav-item-color: var(--pg-color-text-muted);
	--pg-bottom-nav-item-color-active: var(--pg-color-brand-wine);
	--pg-bottom-nav-pill-shadow: 0 4px 24px rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.1);

	display: flex;
	justify-content: center;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding-block: var(--pg-space-xs) var(--pg-space-sm);
	box-sizing: border-box;
}

.pg-bottom-navigation__pill {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 100%;
	padding: var(--pg-space-xs);
	border: 1px solid rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.08);
	border-radius: var(--pg-radius-full);
	background-color: var(--pg-color-surface);
	box-shadow: var(--pg-bottom-nav-pill-shadow);
	box-sizing: border-box;
}

.pg-bottom-navigation__indicator {
	position: absolute;
	top: var(--pg-space-xs);
	left: 0;
	z-index: 0;
	width: var(--pg-bottom-nav-indicator-width, 20%);
	height: calc(100% - (var(--pg-space-xs) * 2));
	border-radius: var(--pg-radius-full);
	background-color: var(--pg-bottom-nav-indicator-bg);
	transform: translateX(var(--pg-bottom-nav-indicator-x, 0));
	transition:
		transform var(--pg-transition-fast) var(--pg-transition-ease),
		width var(--pg-transition-fast) var(--pg-transition-ease);
	pointer-events: none;
}

.pg-bottom-navigation__list {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-bottom-navigation__item {
	flex: 1 1 0;
	min-width: 0;
}

.pg-bottom-navigation__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	width: 100%;
	min-height: var(--pg-touch-target);
	padding: var(--pg-space-xs) var(--pg-bottom-nav-link-padding-x);
	border: 0;
	border-radius: var(--pg-radius-full);
	background: transparent;
	color: var(--pg-bottom-nav-item-color);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition:
		color var(--pg-transition-fast) var(--pg-transition-ease),
		background-color var(--pg-transition-fast) var(--pg-transition-ease);
}

.pg-bottom-navigation__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--pg-bottom-nav-icon-size);
	height: var(--pg-bottom-nav-icon-size);
	color: inherit;
	transition: transform 0.1s ease;
}

.pg-bottom-navigation__icon svg {
	width: 100%;
	height: 100%;
}

.pg-bottom-navigation__label {
	max-width: 100%;
	overflow: hidden;
	font-family: var(--pg-font-family);
	font-size: var(--pg-bottom-nav-label-size);
	font-weight: var(--pg-font-weight-medium);
	line-height: var(--pg-line-height-tight);
	letter-spacing: 0.01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pg-bottom-navigation__item.is-active .pg-bottom-navigation__label {
	font-weight: var(--pg-font-weight-semibold);
}

.pg-bottom-navigation__item.is-active .pg-bottom-navigation__link,
.pg-bottom-navigation__item.is-active .pg-bottom-navigation__link:hover {
	color: var(--pg-bottom-nav-item-color-active);
}

.pg-bottom-navigation__item.is-active .pg-bottom-navigation__label {
	font-weight: var(--pg-font-weight-semibold);
	color: var(--pg-color-brand-black);
}

.pg-bottom-navigation__link:hover {
	color: var(--pg-bottom-nav-item-color-active);
	background-color: rgba(var(--pg-color-brand-rose-rgb, 217, 140, 163), 0.16);
}

.pg-bottom-navigation__link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(var(--pg-color-brand-rose-rgb, 217, 140, 163), 0.55);
}

.pg-bottom-navigation__link:active .pg-bottom-navigation__icon {
	transform: scale(0.96);
}

@media (max-width: 767px) {
	.pg-bottom-navigation__pill {
		width: 100%;
		max-width: none;
	}

	.pg-bottom-navigation__item--explore,
	.pg-bottom-navigation__item--search {
		flex: 1 1 0;
	}

	.pg-bottom-navigation__item--categories,
	.pg-bottom-navigation__item--favorites {
		flex: 0.9 1 0;
	}

	.pg-bottom-navigation__item--account {
		flex: 1.2 1 0;
	}

	.pg-bottom-navigation__item--categories .pg-bottom-navigation__label,
	.pg-bottom-navigation__item--favorites .pg-bottom-navigation__label {
		letter-spacing: -0.035em;
	}

	.pg-bottom-navigation__item--account .pg-bottom-navigation__label {
		letter-spacing: -0.01em;
		overflow: visible;
		text-overflow: clip;
		white-space: nowrap;
	}
}

@media (max-width: 359px) {
	.pg-bottom-navigation {
		padding-block: var(--pg-space-xs);
	}

	.pg-bottom-navigation__pill {
		padding: 0.125rem;
	}

	.pg-bottom-navigation__indicator {
		top: 0.125rem;
		height: calc(100% - 0.25rem);
	}

	.pg-bottom-navigation__link {
		gap: 0;
		padding-block: 0.1875rem;
	}
}

@media (min-width: 768px) {
	.pg-bottom-navigation__pill {
		max-width: var(--pg-max-width);
		margin-inline: auto;
	}

	.pg-bottom-navigation__item--categories,
	.pg-bottom-navigation__item--favorites,
	.pg-bottom-navigation__item--account {
		flex: 1 1 0;
	}
}

@media (min-width: 1024px) {
	.pg-bottom-navigation {
		display: none;
	}
}

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

	.pg-bottom-navigation__link:active .pg-bottom-navigation__icon {
		transform: none;
	}
}