/*
 * RahkarTheme — Mobile bottom navigation styles.
 *
 * App-style 3-tab dock: Home / Cart / Account. Loaded on every page where
 * rahkar_bottom_nav_is_active_page() returns true (i.e. everywhere except
 * single-product). Bytes are gated by a top-level media query so desktop
 * visitors download — but never paint — the rules.
 *
 * The Cart/Account icons are the SAME svg markup as the header's own
 * (class="rh-icon", no hardcoded stroke-width — see header.tpl's
 * {rh_cart}/{rh_account}), so --rh-icon-stroke is set locally to match the
 * dock's own Home icon weight. The cart badge likewise reuses the header's
 * own .rh-cart__count (see header.css) — both are kept in sync by the same
 * two scripts (cart.js on every PS `updateCart`, chrome-islands.js on first
 * paint / bfcache restore) — so only its position/size are overridden here
 * for the dock's small icon box.
 */

/* =====================================================================
 *  Visibility — show on ≤1024px only
 * ===================================================================== */
.rh-bnav,
.rh-bnav-empty {
	display: none;
}

@media (max-width: 1024px) {

	/* The dock's full rendered height, safe area included. Shared so other
	   chrome can line up with it (footer.css tucks the felorshop footer's
	   colour under the dock with it). The bottom pad never drops below 10px:
	   on phones without a home indicator the labels would otherwise sit on
	   the very edge, and on iPhones the inset alone left the dock looking
	   short. */
	:root {
		--rh-bnav-pad: max(env(safe-area-inset-bottom, 0px), 10px);
		--rh-bnav-h: calc(66px + var(--rh-bnav-pad));
	}

	/* Lift the page so the last bit of content isn't covered by the dock.
	   viewport-fit=cover (head.tpl) lets content reach the notch sides in
	   landscape, so keep it clear of them here. */
	body {
		padding-bottom: var(--rh-bnav-h);
		padding-left: env(safe-area-inset-left, 0px);
		padding-right: env(safe-area-inset-right, 0px);
	}

	/* ===================================================================
	 *  Dock
	 * =================================================================== */
	.rh-bnav {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 950;
		/* Frosted glass — the owner's own values, picked live with a temporary
		   glass tuner: a much clearer, lighter pane than the shared
		   glass.css tokens, so it no longer reads them. No visible edge; the
		   shadow alone separates it from the page. */
		/* Back to the owner's tuned values (an interim 0.82/16px/140% was
		   reverted at the owner's request). */
		background: rgba(255, 255, 255, 0.18);
		-webkit-backdrop-filter: blur(4px) saturate(79%);
		backdrop-filter: blur(4px) saturate(79%);
		border-top: 1px solid transparent;
		padding-bottom: var(--rh-bnav-pad);
		box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.11);
		contain: layout paint;
	}
	/* Solid fallback where backdrop-filter isn't supported. */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.rh-bnav { background: rgba(255, 255, 255, 0.96); }
	}

	.rh-bnav__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
	}

	.rh-bnav__item {
		display: flex;
	}

	.rh-bnav__btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 10px 6px 8px;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--text, #1a1d23);
		font-family: inherit;
		font-size: 11px;
		line-height: 1.4;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: color 150ms ease;
	}
	.rh-bnav__btn:hover,
	.rh-bnav__btn:focus-visible {
		color: var(--wp--preset--color--primary, #0a66c2);
	}
	.rh-bnav__btn.is-active {
		color: var(--wp--preset--color--primary, #0a66c2);
	}

	.rh-bnav__icon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		--rh-icon-stroke: 1.8;
	}
	/* Height-constrained, width auto: the cart/account icons carry a
	   portrait viewBox (20x26 / 20x23, same as the header's), so forcing a
	   square box here would stretch them out of shape. */
	.rh-bnav__icon svg {
		height: 22px;
		width: auto;
		max-width: 24px;
		/* The bag's right stroke ends ~0.3 units from its viewBox edge; with
		   the scaled-down box some browsers (iOS Safari) round the SVG's
		   width down and shave that stroke off («از راست بریده شده»). Let
		   strokes paint past the box instead of clipping them. */
		overflow: visible;
	}

	.rh-bnav__label {
		font-size: 11px;
		font-weight: var(--rh-fw-base);
		white-space: nowrap;
	}

	/* Cart badge — repositioned as a corner badge over the icon; the base
	   size/color/hide-on-empty rules come from .rh-cart__count in
	   header.css, shared with the header's own cart icon. */
	.rh-bnav .rh-cart__count {
		position: absolute;
		top: -4px;
		left: -6px;
		margin-inline-start: 0;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		line-height: 16px;
		font-size: 10px;
		box-shadow: 0 0 0 2px var(--wp--preset--color--base, #fff);
	}

	/* ===================================================================
	 *  Cart-empty sheet — opened by bottom-nav.js when the cart badge is 0
	 * =================================================================== */
	.rh-bnav-empty {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1010;
		pointer-events: none;
	}
	.rh-bnav-empty[data-state="open"] {
		pointer-events: auto;
	}
	.rh-bnav-empty__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(15, 17, 21, 0.45);
		opacity: 0;
		transition: opacity 200ms ease-out;
		cursor: pointer;
	}
	.rh-bnav-empty[data-state="open"] .rh-bnav-empty__backdrop {
		opacity: 1;
	}
	.rh-bnav-empty__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 18px 22px calc(22px + env(safe-area-inset-bottom, 0px));
		background: var(--wp--preset--color--base, #fff);
		color: var(--wp--preset--color--text, #1a1d23);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -8px 32px rgba(15, 17, 21, 0.18);
		transform: translateY(100%);
		transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
	}
	.rh-bnav-empty[data-state="open"] .rh-bnav-empty__panel {
		transform: translateY(0);
	}
	.rh-bnav-empty__handle {
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: var(--wp--preset--color--border, #e2e4e9);
		margin: 0 0 8px;
	}
	.rh-bnav-empty__icon {
		color: var(--wp--preset--color--text-muted, #5b6271);
		margin: 4px 0 4px;
	}
	.rh-bnav-empty__title {
		margin: 0;
		font-size: 16px;
		font-weight: var(--rh-fw-strong);
	}
	.rh-bnav-empty__text {
		margin: 0;
		font-size: 13px;
		color: var(--wp--preset--color--text-muted, #5b6271);
		text-align: center;
	}
	.rh-bnav-empty__actions {
		width: 100%;
		display: flex;
		gap: 8px;
		margin-top: 14px;
	}
	.rh-bnav-empty__btn {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0 16px;
		border: 0;
		border-radius: 10px;
		font-family: inherit;
		font-size: 14px;
		font-weight: var(--rh-fw-strong);
		text-decoration: none;
		cursor: pointer;
	}
	.rh-bnav-empty__btn--primary {
		background: var(--wp--preset--color--primary, #0a66c2);
		color: #fff;
	}
	.rh-bnav-empty__btn--primary:hover {
		background: var(--wp--preset--color--primary-dark, #074a8d);
		color: #fff;
	}

	/* When the sheet is open, prevent body scroll behind it. JS toggles
	   .rh-bnav-lock on <html>. */
	html.rh-bnav-lock,
	html.rh-bnav-lock body {
		overflow: hidden;
		touch-action: none;
	}
}

/* Reduce-motion: skip slide/fade animations */
@media (prefers-reduced-motion: reduce) {
	.rh-bnav__btn,
	.rh-bnav-empty__panel,
	.rh-bnav-empty__backdrop {
		transition: none !important;
	}
}