/*
 * LC Médical — Comptoir : bottom tab bar (below 1000px). A strip of five labelled drawer pulls: 44px minimum targets,
 * safe-area aware. The page reserves its height through body.lc-has-tabbar (base.css).
 */

.lc-tabbar {
	display: none;
}

@media (max-width: 999.98px) {
	.lc-tabbar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 95;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		block-size: calc(var(--lc-tabbar-h) + var(--lc-safe-bottom));
		padding-block-end: var(--lc-safe-bottom);
		background: var(--lc-paper);
		border-block-start: 1px solid var(--lc-line-strong);
		box-shadow: var(--lc-shadow-up);
	}

	.lc-tab {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-block-size: var(--lc-tap);
		padding: 4px 2px;
		border: 0;
		background: transparent;
		color: var(--lc-ink-2);
		font: 600 0.75rem/1.1 var(--lc-font-label);
		letter-spacing: 0.05em;
		text-decoration: none;
		text-transform: uppercase;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.lc-tab:hover {
		color: var(--lc-link);
	}

	.lc-tab--wa .lc-icon {
		color: var(--lc-ok);
	}

	.lc-tab__icon {
		position: relative;
		display: grid;
		place-items: center;
	}

	.lc-tab__icon .lc-icon {
		inline-size: 1.5rem;
		block-size: 1.5rem;
	}

	.lc-tab.is-current,
	.lc-tab[aria-expanded='true'] {
		color: var(--lc-link);
	}

	/* Current page: a navy tab above the label. */
	.lc-tab.is-current::before,
	.lc-tab[aria-expanded='true']::before {
		content: '';
		position: absolute;
		inset-block-start: -1px;
		inset-inline: 28%;
		block-size: 3px;
		background: var(--lc-action);
		border-end-start-radius: 2px;
		border-end-end-radius: 2px;
	}

	.lc-tab .lc-cart-count {
		inset-block-start: -8px;
		inset-inline-end: -13px;
	}
}