/**
 * M M Sanidaz — Global mobile bottom navigation
 * ------------------------------------------------------------------
 * Markup: inc/bottom-nav.php (printed once, from wp_footer). Shown below
 * 768px only — tablets and desktops keep the header navigation, the same
 * breakpoint the legacy Elementor bar used (hidden on tablet + desktop).
 *
 * Fixed-UI layering (bottom of the screen, phones) — one deliberate stack:
 *
 *   z 999999  OceanWP mobile menu (#sidr), Woomotiv notice ... plugins' own
 *   z 100000  Quick Add, Cart Drawer, Shop Filters — modal, with backdrop
 *   top layer Size Guide, wholesale sheet + quote form (<dialog>)
 *   z   9999  #site-header (top edge), OceanWP side cart
 *   z   9000  THIS BAR                                   bottom: 0
 *   z   8990  Wholesale "Get Best Quote" dock             bottom: bar height
 *   z   1000  Chaty, OceanWP scroll-to-top                bottom: above both
 *
 * Nothing floats over the bar: every other bottom-anchored widget is lifted
 * by --mmsc-float-offset (the bar's height + the safe area, plus the dock's
 * height on the wholesale page). Modals sit above the bar on purpose — they
 * have their own backdrop and close control.
 *
 * Legacy Additional CSS worth knowing here: `body a:hover { color: rose }`
 * (sticky on touch — the link colors below restate their own :hover), and
 * `body { font-weight: 900 }` at ≤480px from the OceanWP Customizer
 * (weights are set explicitly).
 */

:root {
	--mmsc-bnav-h: 60px;
}

/* Matches the legacy `.chaty-channel { bottom: 60px !important }` rule's
   own breakpoint (Additional CSS, @media max-width: 768px). */
@media (max-width: 768px) {
	:root {
		--mmsc-chaty-legacy: 60px;
	}
}

.mmsc-bnav {
	display: none;
}

@media (max-width: 767px) {

	body.mmsc-has-bnav {
		--mmsc-bnav-offset: calc(var(--mmsc-bnav-h) + env(safe-area-inset-bottom, 0px));
		--mmsc-float-offset: var(--mmsc-bnav-offset);
		/* Keeps the last content (footer copyright, Cart totals…) clear of the bar. */
		padding-bottom: var(--mmsc-bnav-offset);
	}

	#mmsc-bnav.mmsc-bnav {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9000;
		margin: 0;
		padding: 0 0 env(safe-area-inset-bottom, 0px);
		background: rgba(255, 255, 255, 0.97);
		border-top: 1px solid var(--mmsc-color-border);
		box-shadow: 0 -8px 24px rgba(45, 38, 35, 0.05);
		font-family: var(--mmsc-font-body);
		font-weight: 400;
		transform: translateY(0);
		transition: transform var(--mmsc-transition-base), visibility var(--mmsc-transition-base);
	}

	/* Barely-there frosting: enough that content scrolling underneath reads
	   as texture, never as a legible shape competing with the icons. */
	@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
		#mmsc-bnav.mmsc-bnav {
			background: rgba(255, 255, 255, 0.95);
			-webkit-backdrop-filter: saturate(1.2) blur(16px);
			backdrop-filter: saturate(1.2) blur(16px);
		}
	}

	/* While the on-screen keyboard is up (a text field has focus — see
	   bottom-nav.js) the bar steps aside so it can never ride up over the
	   field being typed into. */
	html.mmsc-kb-open #mmsc-bnav.mmsc-bnav {
		transform: translateY(100%);
		visibility: hidden;
	}

	#mmsc-bnav .mmsc-bnav__list {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		height: var(--mmsc-bnav-h);
		margin: 0 auto;
		padding: 0 var(--mmsc-space-1);
		max-width: 560px;
		list-style: none;
	}

	#mmsc-bnav .mmsc-bnav__item {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#mmsc-bnav .mmsc-bnav__link,
	#mmsc-bnav .mmsc-bnav__link:hover,
	#mmsc-bnav .mmsc-bnav__link:focus {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		height: 100%;
		min-height: 48px;
		padding: 6px 2px 5px;
		color: var(--mmsc-color-text-muted);
		text-decoration: none;
		background: transparent;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}

	/* Active: espresso ink, a filled icon, a heavier label and a small rose
	   rule on the bar's top edge — four cues, so it never relies on color. */
	#mmsc-bnav .mmsc-bnav__link.is-active,
	#mmsc-bnav .mmsc-bnav__link.is-active:hover,
	#mmsc-bnav .mmsc-bnav__link.is-active:focus {
		color: var(--mmsc-color-text);
	}

	#mmsc-bnav .mmsc-bnav__link.is-active::before {
		content: '';
		position: absolute;
		top: -1px;
		left: 50%;
		width: 22px;
		height: 2px;
		border-radius: 0 0 2px 2px;
		background: var(--mmsc-color-primary);
		transform: translateX(-50%);
	}

	#mmsc-bnav .mmsc-bnav__link:focus-visible {
		outline: 2px solid var(--mmsc-color-accent);
		outline-offset: -3px;
		border-radius: var(--mmsc-radius-md);
	}

	#mmsc-bnav .mmsc-bnav__icon {
		position: relative;
		display: block;
		width: 24px;
		height: 24px;
		transition: transform 120ms ease;
	}

	#mmsc-bnav .mmsc-bnav__link:active .mmsc-bnav__icon {
		transform: scale(0.9);
	}

	#mmsc-bnav .mmsc-bnav__svg {
		display: block;
		width: 24px;
		height: 24px;
		overflow: visible;
	}

	#mmsc-bnav .mmsc-bnav__link.is-active .mmsc-bnav__svg {
		fill: rgba(185, 121, 132, 0.18);
		stroke-width: 1.75;
	}

	#mmsc-bnav .mmsc-bnav__link.is-active .mmsc-bnav__nofill {
		fill: none;
	}

	#mmsc-bnav .mmsc-bnav__label {
		display: block;
		max-width: 100%;
		overflow: hidden;
		font-family: var(--mmsc-font-body);
		font-size: 11px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0.01em;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: inherit;
	}

	#mmsc-bnav .mmsc-bnav__link.is-active .mmsc-bnav__label {
		font-weight: 600;
	}

	/* Count badge (cart, wishlist): espresso with a white ring — white-on-rose
	   would be under 4.5:1 at this size. Hidden while empty or zero. */
	#mmsc-bnav .mmsc-bnav__meta {
		position: absolute;
		top: -6px;
		left: 14px;
	}

	#mmsc-bnav .mmsc-bnav__badge {
		display: block;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: var(--mmsc-radius-pill);
		background: var(--mmsc-color-dark);
		box-shadow: 0 0 0 2px var(--mmsc-color-surface);
		color: var(--mmsc-color-surface);
		font-family: var(--mmsc-font-body);
		font-size: 10px;
		font-weight: 600;
		line-height: 18px;
		text-align: center;
		font-variant-numeric: tabular-nums;
	}

	#mmsc-bnav .mmsc-bnav__meta[data-count="0"],
	#mmsc-bnav .mmsc-bnav__badge:empty {
		display: none;
	}

	#mmsc-bnav .mmsc-bnav__meta.is-bumped .mmsc-bnav__badge {
		animation: mmsc-bnav-bump 320ms ease;
	}

	@keyframes mmsc-bnav-bump {
		0% { transform: scale(1); }
		40% { transform: scale(1.25); }
		100% { transform: scale(1); }
	}

	/* ---- Other bottom-anchored widgets: lifted above the bar ----
	   !important only where the widget's own rule already uses it.

	   Chaty: the legacy Additional CSS already lifts every `.chaty-channel`
	   60px inside the widget (`bottom: 60px !important` at ≤768px) — that
	   was its clearance for the old 60px Elementor bar. The widget itself is
	   positioned here, so that legacy 60px is subtracted rather than
	   counted twice (--mmsc-chaty-legacy, below). */

	body.mmsc-has-bnav .chaty-widget {
		bottom: calc(var(--mmsc-float-offset) + 12px - var(--mmsc-chaty-legacy, 0px)) !important;
	}

	/* Chaty's always-on "Contact us" pill (~110px wide, beside the button)
	   was the part sitting over full-width controls such as Buy Now or
	   Proceed to Checkout as they scroll past; the round chat button itself
	   stays, as the recognisable, compact entry point. */
	body.mmsc-has-bnav .chaty-widget .on-hover-text {
		display: none;
	}

	body.mmsc-has-bnav #scroll-top {
		bottom: calc(var(--mmsc-float-offset) + 76px) !important;
	}

	body.mmsc-has-bnav .woomotiv-popup {
		bottom: calc(var(--mmsc-float-offset) + 12px) !important;
	}
}

@media (max-width: 359px) {
	#mmsc-bnav .mmsc-bnav__label {
		font-size: 10px;
		letter-spacing: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#mmsc-bnav.mmsc-bnav,
	#mmsc-bnav .mmsc-bnav__icon {
		transition: none;
	}

	#mmsc-bnav .mmsc-bnav__meta.is-bumped .mmsc-bnav__badge {
		animation: none;
	}
}