/**
 * Petopia mobile bottom nav — Woodmart sticky toolbar overrides.
 * Scoped to body.petopia-redesign-v1
 */

@media (max-width: 1024px) {
	body.petopia-redesign-v1 {
		--petopia-nav-icon-shop: url("../img/nav-mobile/shop.svg");
		--petopia-nav-icon-wishlist: url("../img/nav-mobile/wishlist.svg");
		--petopia-nav-icon-cart: url("../img/nav-mobile/cart.svg");
		--petopia-nav-icon-account: url("../img/nav-mobile/account.svg");

		--petopia-nav-bar-height: 66px;
		--petopia-nav-bar-radius: 16px;
		--petopia-nav-bar-inset-x: 16px;
		--petopia-nav-bar-inset-bottom: 12px;
		--petopia-nav-icon-color: #002fb3;
		--petopia-nav-label-color: #666666;
		--petopia-nav-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
	}

	/* Floating pill bar — Nav-Mobile.pdf: 358×66, r16, detached from edges */
	body.petopia-redesign-v1 .wd-toolbar {
		inset-inline: var(--petopia-nav-bar-inset-x);
		bottom: calc(var(--petopia-nav-bar-inset-bottom) + env(safe-area-inset-bottom, 0px));
		height: var(--petopia-nav-bar-height);
		padding: 12px 0 14px;
		margin: 0;
		border-radius: var(--petopia-nav-bar-radius);
		background-color: #ffffff !important;
		box-shadow: var(--petopia-nav-shadow) !important;
		overflow: visible;
		align-items: stretch;
		justify-content: space-between;
	}

	/* Remove legacy Theme Settings decorative underline */
	body.petopia-redesign-v1 .wd-toolbar.wd-toolbar-label-show::after {
		display: none !important;
		content: none !important;
	}

	/* 4 equal columns */
	body.petopia-redesign-v1 .wd-toolbar > a,
	body.petopia-redesign-v1 .wd-toolbar > div {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Icon + label vertical stack */
	body.petopia-redesign-v1 .wd-toolbar > a,
	body.petopia-redesign-v1 .wd-toolbar > div a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: auto;
		min-height: 0;
		padding: 0 !important;
		gap: 4px;
		color: var(--petopia-nav-icon-color);
		text-decoration: none;
	}

	body.petopia-redesign-v1 .wd-toolbar .wd-tools-icon {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		font-size: 0;
		line-height: 0;
	}

	body.petopia-redesign-v1 .wd-toolbar .wd-tools-icon::before,
	body.petopia-redesign-v1 .wd-toolbar .wd-tools-icon::after {
		display: none !important;
		content: none !important;
	}

	/* Uploaded Nav-Mobile icons */
	body.petopia-redesign-v1 .wd-toolbar .wd-toolbar-shop .wd-tools-icon {
		background-image: var(--petopia-nav-icon-shop);
	}

	body.petopia-redesign-v1 .wd-toolbar .wd-header-wishlist .wd-tools-icon {
		background-image: var(--petopia-nav-icon-wishlist);
	}

	body.petopia-redesign-v1 .wd-toolbar .wd-header-cart .wd-tools-icon {
		background-image: var(--petopia-nav-icon-cart);
	}

	body.petopia-redesign-v1 .wd-toolbar .wd-header-my-account .wd-tools-icon {
		background-image: var(--petopia-nav-icon-account);
	}

	/* Hide Woodmart custom-icon img if set in theme settings — CSS icons take precedence */
	body.petopia-redesign-v1 .wd-toolbar .wd-tools-icon .wd-custom-icon,
	body.petopia-redesign-v1 .wd-toolbar .wd-tools-icon img {
		display: none !important;
	}

	/* Labels — 12px #666, always visible, in normal flow */
	body.petopia-redesign-v1 .wd-toolbar .wd-toolbar-label {
		position: static;
		inset: auto;
		display: block !important;
		margin: 0;
		padding: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
		font-family: "YekanBakhFaNum", "Yekan Bakh FaNum", sans-serif;
		font-size: 12px;
		font-weight: 500;
		line-height: 1;
		color: var(--petopia-nav-label-color);
		text-align: center;
	}

	/* Cart count — compact; not in Figma but keep functional */
	body.petopia-redesign-v1 .wd-toolbar .wd-tools-count {
		top: -4px;
		inset-inline-end: -6px;
		min-width: 14px;
		height: 14px;
		font-size: 9px;
		line-height: 14px;
		background: var(--petopia-nav-icon-color);
		color: #fff;
	}

	/* Page bottom space for floating bar */
	body.petopia-redesign-v1.sticky-toolbar-on {
		padding-bottom: calc(
			var(--petopia-nav-bar-height) + var(--petopia-nav-bar-inset-bottom) + 16px + env(safe-area-inset-bottom, 0px)
		);
	}

	body.petopia-redesign-v1.sticky-toolbar-on .wd-sticky-btn {
		bottom: calc(
			var(--petopia-nav-bar-height) + var(--petopia-nav-bar-inset-bottom) + 8px + env(safe-area-inset-bottom, 0px)
		);
	}

	body.petopia-redesign-v1.sticky-toolbar-on .scrollToTop {
		bottom: calc(
			var(--petopia-nav-bar-height) + var(--petopia-nav-bar-inset-bottom) + 20px + env(safe-area-inset-bottom, 0px)
		);
	}
}