.bottom-bar {
	--bottom-bar-height: 4rem;
	--bottom-bar-bg: var(--white-color, #FFFFFF);
	--bottom-bar-border: #e8e4df;
	--bottom-bar-muted: #8a8680;
	--bottom-bar-active: var(--primary-color, #7C2033);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	display: flex;
	align-items: stretch;
	justify-content: space-around;
	gap: 0.25rem;
	min-height: var(--bottom-bar-height);
	padding: 0.375rem 0.5rem calc(0.375rem + env(safe-area-inset-bottom, 0px));
	background-color: var(--bottom-bar-bg);
	border-top: 1px solid var(--bottom-bar-border);
	box-shadow: 0 -4px 16px rgba(32, 32, 32, 0.06);
}

.bottom-bar__item {
	display: inline-flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-width: 0;
	padding: 0.35rem 0.25rem;
	border: 0;
	background: transparent;
	color: var(--bottom-bar-muted);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
}

.bottom-bar__item:hover,
.bottom-bar__item:focus-visible {
	color: var(--bottom-bar-active);
	text-decoration: none;
}

.bottom-bar__item--active {
	color: var(--bottom-bar-active);
}

.bottom-bar__item--disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.bottom-bar__tooltip {
	display: inline-flex;
	flex: 1 1 0;
	min-width: 0;
}

.bottom-bar__tooltip .bottom-bar__item {
	width: 100%;
	pointer-events: auto;
	cursor: not-allowed;
}

.bottom-bar [x-cloak] {
	display: none !important;
}

.bottom-bar__icon-wrap {
	position: relative;
	display: inline-flex;
	line-height: 1;
}

.bottom-bar__badge {
	position: absolute;
	top: -0.35rem;
	right: -0.45rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background-color: var(--bs-danger, #dc3545);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1rem;
	text-align: center;
	pointer-events: none;
}

.bottom-bar__label {
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.bottom-bar__item .phosphor-icon {
	font-size: 1.35rem;
	line-height: 1;
}

@media (max-width: 767.98px) {
	body {
		padding-bottom: calc(var(--bottom-bar-height, 4rem) + env(safe-area-inset-bottom, 0px));
	}
}