/**
 * SR Pet Mart — Mobile Bottom Navigation
 * All tunable values arrive as CSS custom properties from the plugin settings.
 * Everything here is namespaced under .srbn so it cannot leak into the theme.
 */

.srbn,
.srbn * {
	box-sizing: border-box;
}

.srbn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var( --srbn-offset, 0px );
	z-index: var( --srbn-z, 9990 );
	width: 100%;
	max-width: var( --srbn-max, 640px );
	margin: 0 auto;
	background: var( --srbn-bg, #fff );
	border-radius: var( --srbn-radius, 22px ) var( --srbn-radius, 22px ) 0 0;
	box-shadow: var( --srbn-shadow, 0 -8px 28px rgba( 16, 24, 40, 0.09 ) );
	padding-bottom: var( --srbn-safe, 0px );
	-webkit-tap-highlight-color: transparent;
	/* Keeps the bar off the compositor's animated layers so it never drifts
	   or repaints while a page loads. */
	transform: translateZ( 0 );
	/* NOTE: never add `contain: paint` or `overflow: hidden` here — the centre
	   button deliberately overhangs the top edge and would be clipped. */
}

.srbn__list {
	display: grid;
	align-items: end;
	height: var( --srbn-height, 64px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.srbn__cell {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	position: relative;
}

.srbn__cell::before,
.srbn__cell::marker {
	content: none;
}

.srbn__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 100%;
	height: var( --srbn-height, 64px );
	padding: 4px 2px 0;
	color: var( --srbn-inactive, #8a93a3 );
	text-decoration: none;
	box-shadow: none;
	border: 0;
	background: none;
	transition: color 0.18s ease;
}

.srbn__item:hover,
.srbn__item:focus {
	text-decoration: none;
	box-shadow: none;
}

.srbn__item:focus-visible {
	outline: 2px solid var( --srbn-active, #ff6b2b );
	outline-offset: -4px;
	border-radius: 14px;
}

/* Active indicator */
.srbn__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 3px;
	border-radius: 0 0 4px 4px;
	background: var( --srbn-active, #ff6b2b );
	transform: translateX( -50% ) scaleX( 0 );
	transition: transform 0.18s ease;
}

.srbn__item.is-active::before {
	transform: translateX( -50% ) scaleX( 1 );
}

.srbn__icon {
	display: grid;
	place-items: center;
	width: calc( var( --srbn-icon, 23px ) + 19px );
	height: calc( var( --srbn-icon, 23px ) + 7px );
	border-radius: 12px;
	transition: background-color 0.18s ease, transform 0.12s ease;
}

.srbn__icon svg {
	display: block;
	width: var( --srbn-icon, 23px );
	height: var( --srbn-icon, 23px );
	max-width: none;
}

.srbn__item.is-active {
	color: var( --srbn-active, #ff6b2b );
}

.srbn__item.is-active .srbn__icon {
	background: var( --srbn-active-bg, rgba( 255, 107, 43, 0.12 ) );
}

.srbn__label {
	display: block;
	font-size: var( --srbn-label, 11.5px );
	font-weight: var( --srbn-label-weight, 700 );
	line-height: 1;
	letter-spacing: 0.1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	text-align: center;
	color: inherit;
}

/* ---------- Centre floating button ---------- */

.srbn__item--fab {
	justify-content: flex-end;
	padding-bottom: 9px;
}

.srbn__item--fab::before {
	display: none;
}

.srbn__fab {
	position: absolute;
	left: 50%;
	bottom: calc( var( --srbn-height, 64px ) - var( --srbn-fab-lift, 34px ) );
	transform: translateX( -50% );
	display: grid;
	place-items: center;
	width: var( --srbn-fab, 58px );
	height: var( --srbn-fab, 58px );
	border-radius: 50%;
	background: linear-gradient( 160deg, var( --srbn-fab-bg, #ff6b2b ) 0%, var( --srbn-fab-bg-2, #f2571a ) 100% );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.22 ), 0 0 0 var( --srbn-fab-ring, 5px ) var( --srbn-bg, #fff );
	color: var( --srbn-fab-color, #fff );
	transition: transform 0.16s ease;
}

.srbn__fab svg {
	display: block;
	width: var( --srbn-fab-icon, 26px );
	height: var( --srbn-fab-icon, 26px );
	fill: currentColor;
	stroke: currentColor;
}

.srbn__fab svg[fill="none"] {
	fill: none;
}

.srbn__item--fab.is-active .srbn__label {
	color: var( --srbn-active, #ff6b2b );
}

/* ---------- Press feedback (no page-transition motion) ---------- */

.srbn__item:active .srbn__icon {
	transform: scale( 0.94 );
}

.srbn__item--fab:active .srbn__fab {
	transform: translateX( -50% ) scale( 0.95 );
}

/* ---------- Responsive ---------- */

@media ( max-width: 360px ) {
	.srbn__label {
		font-size: calc( var( --srbn-label, 11.5px ) - 1px );
		letter-spacing: 0;
	}

	.srbn__icon {
		width: calc( var( --srbn-icon, 23px ) + 12px );
	}
}

@media ( max-height: 430px ) and ( orientation: landscape ) {
	.srbn__list,
	.srbn__item {
		height: calc( var( --srbn-height, 64px ) - 10px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.srbn *,
	.srbn *::before {
		transition: none !important;
	}
}

/* Respect dark UA styling without inheriting theme text colours. */
@media print {
	.srbn {
		display: none !important;
	}
}

/* Used by the admin live preview to mirror the "indicator off" setting. */
.srbn--no-indicator .srbn__item::before {
	display: none;
}