/*
 * The tab bar at the bottom of a phone's screen, as in an app (Kirill, 2026-10-23): Каталог, Избранное, Корзина, Кабинет,
 * Поддержка (the support chat). Its markup and which pages get it: storefront.php; its counts, links and the cart's tab:
 * js/tabbar.js. The tabs are equal cells with the icon centred, so the icons are evenly spaced whatever the labels' length
 * (Kirill, 2026-10-24); a label too long for its cell ends in an ellipsis.
 *
 * It takes the header's wishlist, cart and cabinet icons and the chat's floating button, and on a product page lifts the
 * add-to-cart button into a row over it (product.css). A solid bar of the panels' grey, at the screen's bottom edge:
 * Safari on iOS 26 and later floats its own buttons over the page, puts a fixed element's bottom above them and paints
 * the zone under them in the colour of a fixed element at that edge, so the bar and Safari's buttons read as one bottom.
 * No blur or fade: Safari switches a masked blur on at once, and its edge showed over light pictures.
 */

:root {
	--gp-tabbar-height: 58px;
	--gp-tabbar-action: 60px; /* the product page's row over the tabs: its 48px button, 10px above it and 2px below */
}

.gp-tabbar {
	display: none;
}

@media (max-width: 767px) {
	.gp-tabbar {
		position: fixed;
		inset: auto 0 0;
		z-index: 998; /* under the add-to-cart button (999), the cookie banner and the header (1000), every panel */
		display: flex;
		box-sizing: border-box;
		height: var(--gp-tabbar-height);
		background-color: var(--gp-panel-background); /* overlays.css */
	}

	.gp-tab {
		position: relative;
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--custom-font-gray);
		font: 400 11px/1.2 Onest, sans-serif;
		text-decoration: none;
		cursor: pointer;
		transition: color var(--gp-hover-out) ease; /* global.css */
	}

	.gp-tab[aria-current="page"] {
		color: var(--wp--preset--color--primary);
	}

	.gp-tab::before {
		content: "";
		width: 22px;
		height: 22px;
		background-color: currentColor;
		-webkit-mask: center / 22px no-repeat;
		mask: center / 22px no-repeat;
	}

	.gp-tab[data-gp-tab="catalog"]::before {
		-webkit-mask-image: var(--gp-icon-grid);
		mask-image: var(--gp-icon-grid);
	}

	.gp-tab[data-gp-tab="wishlist"]::before {
		-webkit-mask-image: var(--gp-icon-heart);
		mask-image: var(--gp-icon-heart);
	}

	.gp-tab[data-gp-tab="cart"]::before {
		-webkit-mask-image: var(--gp-icon-cart);
		mask-image: var(--gp-icon-cart);
	}

	.gp-tab[data-gp-tab="account"]::before {
		-webkit-mask-image: var(--gp-icon-user);
		mask-image: var(--gp-icon-user);
	}

	.gp-tab[data-gp-tab="chat"]::before {
		-webkit-mask-image: var(--gp-icon-chat);
		mask-image: var(--gp-icon-chat);
	}

	.gp-tab__label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The count: the header's (its size and centring: header.css), on the icon's top right, ringed in the bar's grey */
	.gp-tab__count {
		position: absolute;
		top: 6px;
		left: calc(50% + 3px);
		background: var(--wp--preset--color--primary);
		box-shadow: 0 0 0 2px var(--gp-panel-background);
		color: #121212;
	}

	.gp-tab__count[hidden] {
		display: none;
	}

	@media (hover: hover) {
		.gp-tab:hover {
			color: var(--wp--preset--color--primary);
			transition-duration: var(--gp-hover-in);
		}
	}

	/* What the bar replaces: the header's wishlist, cart and cabinet icons (the mini cart's drawer is outside its block
	   and still opens from the cart's tab) and the chat's floating button (gp-chat hides it by this variable) */
	body:has(.gp-tabbar) .header-buttons > :is(.header-wishlist, .header-cart, .header-accounticon) {
		display: none;
	}

	body:has(.gp-tabbar) #gp-support-widget {
		--sw-launcher-display: none;
	}

	/* Over the bar: the cookie banner 10px above it (snippet 214's 70px was over the round buttons), the footer's last
	   line clear of it */
	body:has(.gp-tabbar) #cookieWidget {
		bottom: calc(var(--gp-tabbar-height) + 10px);
	}

	body:has(.gp-tabbar) footer .footer-copyright {
		margin-bottom: calc(var(--gp-tabbar-height) + 10px) !important; /* over product.css's 70px */
	}
}

/* A product page on a phone: the add-to-cart button in a row over the tabs, on the same grey (the button: product.css) */
@media (max-width: 480px) {
	body:has(div.product form.cart .single_add_to_cart_button) .gp-tabbar {
		height: calc(var(--gp-tabbar-height) + var(--gp-tabbar-action));
		padding-top: var(--gp-tabbar-action);
	}

	body:has(div.product form.cart .single_add_to_cart_button) #cookieWidget {
		bottom: calc(var(--gp-tabbar-height) + var(--gp-tabbar-action) + 10px);
	}

	body:has(div.product form.cart .single_add_to_cart_button) footer .footer-copyright {
		margin-bottom: calc(var(--gp-tabbar-height) + var(--gp-tabbar-action) + 10px) !important;
	}
}