/**
 * izebuy mobile bottom navigation (A8).
 * Fixed tab bar: Home · Stores · Submit Ad · Login|Profile
 * Hidden on tablet / desktop (min-width: 768px).
 * Depends on: tokens.css
 */

/* Tab bar shell ------------------------------------------------------------ */
.ize-bottom-nav {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: var(--ize-z-bottom-nav);
	display: flex;
	align-items: stretch;
	height: calc(var(--ize-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--ize-surface);
	border-top: 1px solid var(--ize-line);
	box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.06);
}

/* Tab items — inactive ─────────────────────────────────────────────────────
 * Specificity must beat body.ize a:hover (0,2,2) in base.css.
 * .ize-bottom-nav .ize-bottom-nav__item = (0,2,0); adding :hover etc. = (0,3,0)
 * We also target <span> and <i> directly so inheritance can never leak in
 * blue from the global link colour. */
.ize-bottom-nav .ize-bottom-nav__item,
.ize-bottom-nav .ize-bottom-nav__item:link,
.ize-bottom-nav .ize-bottom-nav__item:visited,
.ize-bottom-nav .ize-bottom-nav__item:hover,
.ize-bottom-nav .ize-bottom-nav__item:focus,
.ize-bottom-nav .ize-bottom-nav__item:active {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 6px 0;
	font-size: var(--ize-fs-xs);
	font-weight: 600;
	color: var(--ize-ink-2);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* Icon — explicit colour so it ignores inherited colour changes.
 * font-weight: normal prevents browsers from synthesizing a bold version of
 * the icon font, which changes the glyph shape (the "different icon" symptom
 * on the active tab). */
.ize-bottom-nav .ize-bottom-nav__item i,
.ize-bottom-nav .ize-bottom-nav__item:hover i,
.ize-bottom-nav .ize-bottom-nav__item:focus i,
.ize-bottom-nav .ize-bottom-nav__item:active i {
	/* Force Font Awesome 6 solid (weight 900) so the solid-only glyphs (fa-home /
	 * fa-plus) render, even if another plugin's Font Awesome tries to override the
	 * family or weight. */
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	font-size: var(--ize-fs-lg);
	line-height: 1;
	color: var(--ize-ink-2);
}

/* Label text — explicit colour so it can't inherit blue from a:hover */
.ize-bottom-nav .ize-bottom-nav__item span,
.ize-bottom-nav .ize-bottom-nav__item:hover span,
.ize-bottom-nav .ize-bottom-nav__item:focus span,
.ize-bottom-nav .ize-bottom-nav__item:active span {
	color: var(--ize-ink-2);
}

/* Tab items — ACTIVE (green). Declared after inactive so it wins source-order
 * for equal specificity rules, and covers every interaction state. */
.ize-bottom-nav .ize-bottom-nav__item.is-active,
.ize-bottom-nav .ize-bottom-nav__item.is-active:hover,
.ize-bottom-nav .ize-bottom-nav__item.is-active:focus,
.ize-bottom-nav .ize-bottom-nav__item.is-active:active {
	font-weight: 700;
	color: var(--ize-success);
}
.ize-bottom-nav .ize-bottom-nav__item.is-active i,
.ize-bottom-nav .ize-bottom-nav__item.is-active:hover i,
.ize-bottom-nav .ize-bottom-nav__item.is-active:focus i,
.ize-bottom-nav .ize-bottom-nav__item.is-active:active i {
	color: var(--ize-success);
	font-weight: normal;
}
.ize-bottom-nav .ize-bottom-nav__item.is-active span,
.ize-bottom-nav .ize-bottom-nav__item.is-active:hover span,
.ize-bottom-nav .ize-bottom-nav__item.is-active:focus span,
.ize-bottom-nav .ize-bottom-nav__item.is-active:active span {
	color: var(--ize-success);
}

/* Keyboard focus ring for tab items (browser-default colour, offset out) */
.ize-bottom-nav .ize-bottom-nav__item:focus-visible {
	outline-offset: 2px;
}

/* Hide on desktop — the desktop header nav replaces it */
@media (min-width: 768px) {
	.ize-bottom-nav { display: none; }
}