/* DWX Mobile Bottom Nav
 * Colors are driven by CSS variables printed inline in <head>.
 * --------------------------------------------------------------- */

.dwx-mbn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99990;
	background: var(--dwx-mbn-bg, #ffffff);
	border-top: 1px solid var(--dwx-mbn-border, #e5e7eb);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
	/* iPhone notch / home indicator safe area */
	padding-bottom: env(safe-area-inset-bottom, 0px);
	-webkit-tap-highlight-color: transparent;
}

.dwx-mbn__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
}

.dwx-mbn__item {
	flex: 1 1 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.dwx-mbn__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 9px 4px;
	min-height: 56px;
	text-decoration: none;
	color: var(--dwx-mbn-label, #4b5563);
	font-size: 11px;
	line-height: 1.2;
	font-weight: 500;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.dwx-mbn__link:hover,
.dwx-mbn__link:focus,
.dwx-mbn__link:active {
	color: var(--dwx-mbn-active, #2563eb);
	background-color: color-mix(in srgb, var(--dwx-mbn-active, #2563eb) 8%, transparent);
}

.dwx-mbn__link:focus-visible {
	outline: 2px solid var(--dwx-mbn-active, #2563eb);
	outline-offset: -2px;
}

.dwx-mbn__icon {
	position: relative; /* anchor for the pulse ring */
	display: inline-flex;
	color: var(--dwx-mbn-icon, #1f2937);
}

.dwx-mbn__link:hover .dwx-mbn__icon,
.dwx-mbn__link:focus .dwx-mbn__icon,
.dwx-mbn__link:active .dwx-mbn__icon {
	color: var(--dwx-mbn-active, #2563eb);
}

.dwx-mbn__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.dwx-mbn__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dwx-mbn--no-labels .dwx-mbn__link {
	min-height: 52px;
}

/* Push page content up so the bar never hides the footer / last elements. */
body.dwx-mbn-pad {
	padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* -----------------------------------------------------------------
 * Attention nudge
 *
 * dwx-mobile-nav.js adds .is-nudging once, after the configured delay.
 * The style comes from data-nudge on the bar, and each tab waits for the
 * one before it to finish (--dwx-mbn-step per style, multiplied by the
 * tab's index in --dwx-mbn-i) so the tabs fire strictly one after another
 * and the eye is led across the bar rather than everything moving at once.
 *
 * Every style pairs its motion with a flash to the active colour and a ring
 * leaving the icon: colour is what actually catches the eye, movement alone
 * is easy to miss on a small screen. Only transform, opacity and colour are
 * animated, so nothing here causes layout work or delays a tap.
 * -------------------------------------------------------------- */
.dwx-mbn {
	--dwx-mbn-step: 520ms; /* gap between tabs = one tab's animation length */
}

.dwx-mbn[data-nudge="wiggle"] { --dwx-mbn-step: 640ms; }
.dwx-mbn[data-nudge="pulse"]  { --dwx-mbn-step: 600ms; }

/* The ring that leaves each icon. Shared by all three styles. */
.dwx-mbn__icon::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2.5px solid var(--dwx-mbn-active, #2563eb);
	opacity: 0;
	transform: scale(0.5);
	pointer-events: none;
}

.dwx-mbn.is-nudging .dwx-mbn__icon::after {
	animation: dwx-mbn-ring 0.6s ease-out 1;
	animation-delay: calc(var(--dwx-mbn-i, 0) * var(--dwx-mbn-step, 520ms));
}

/* The label lifts to the active colour with its icon. */
.dwx-mbn.is-nudging .dwx-mbn__label {
	animation: dwx-mbn-label 0.6s ease-out 1;
	animation-delay: calc(var(--dwx-mbn-i, 0) * var(--dwx-mbn-step, 520ms));
}

@keyframes dwx-mbn-ring {
	0%   { opacity: 0.95; transform: scale(0.5); }
	100% { opacity: 0;    transform: scale(2.1); }
}

@keyframes dwx-mbn-label {
	0%, 100% { color: var(--dwx-mbn-label, #4b5563); }
	30%, 60% { color: var(--dwx-mbn-active, #2563eb); }
}

/* Bounce: the icon springs up, lands, and settles with a small second hop. */
.dwx-mbn.is-nudging[data-nudge="bounce"] .dwx-mbn__icon {
	animation: dwx-mbn-bounce 0.62s cubic-bezier(0.28, 1.5, 0.45, 1) 1;
	animation-delay: calc(var(--dwx-mbn-i, 0) * var(--dwx-mbn-step, 520ms));
}

@keyframes dwx-mbn-bounce {
	0%   { transform: translateY(0) scale(1);          color: var(--dwx-mbn-icon, #1f2937); }
	22%  { transform: translateY(-14px) scale(1.22);   color: var(--dwx-mbn-active, #2563eb); }
	48%  { transform: translateY(0) scale(1);          color: var(--dwx-mbn-active, #2563eb); }
	66%  { transform: translateY(-6px) scale(1.09);    color: var(--dwx-mbn-active, #2563eb); }
	100% { transform: translateY(0) scale(1);          color: var(--dwx-mbn-icon, #1f2937); }
}

/* Wiggle: a firm double shake, like a phone ringing on a table. */
.dwx-mbn.is-nudging[data-nudge="wiggle"] .dwx-mbn__icon {
	animation: dwx-mbn-wiggle-color 0.72s ease-out 1;
	animation-delay: calc(var(--dwx-mbn-i, 0) * var(--dwx-mbn-step, 640ms));
}

.dwx-mbn.is-nudging[data-nudge="wiggle"] .dwx-mbn__icon svg {
	transform-origin: 50% 62%;
	animation: dwx-mbn-wiggle 0.72s ease-in-out 1;
	animation-delay: calc(var(--dwx-mbn-i, 0) * var(--dwx-mbn-step, 640ms));
}

@keyframes dwx-mbn-wiggle {
	0%, 100% { transform: rotate(0) scale(1); }
	12%      { transform: rotate(-22deg) scale(1.16); }
	26%      { transform: rotate(20deg) scale(1.16); }
	40%      { transform: rotate(-16deg) scale(1.12); }
	54%      { transform: rotate(13deg) scale(1.08); }
	68%      { transform: rotate(-8deg) scale(1.04); }
	82%      { transform: rotate(4deg) scale(1.02); }
}

@keyframes dwx-mbn-wiggle-color {
	0%, 100% { color: var(--dwx-mbn-icon, #1f2937); }
	15%, 65% { color: var(--dwx-mbn-active, #2563eb); }
}

/* Pulse: one firm heartbeat, held at the active colour a moment longer. */
.dwx-mbn.is-nudging[data-nudge="pulse"] .dwx-mbn__icon {
	animation: dwx-mbn-beat 0.68s ease-out 1;
	animation-delay: calc(var(--dwx-mbn-i, 0) * var(--dwx-mbn-step, 600ms));
}

@keyframes dwx-mbn-beat {
	0%   { transform: scale(1);    color: var(--dwx-mbn-icon, #1f2937); }
	20%  { transform: scale(1.3);  color: var(--dwx-mbn-active, #2563eb); }
	42%  { transform: scale(1.02); color: var(--dwx-mbn-active, #2563eb); }
	60%  { transform: scale(1.16); color: var(--dwx-mbn-active, #2563eb); }
	100% { transform: scale(1);    color: var(--dwx-mbn-icon, #1f2937); }
}

@media (prefers-reduced-motion: reduce) {
	.dwx-mbn__link {
		transition: none;
	}

	.dwx-mbn.is-nudging .dwx-mbn__icon,
	.dwx-mbn.is-nudging .dwx-mbn__icon svg,
	.dwx-mbn.is-nudging .dwx-mbn__icon::after,
	.dwx-mbn.is-nudging .dwx-mbn__label {
		animation: none;
	}
}