/*
 * Atomware Toolkit – mobile tab bar (footer template 30, section "Mobile Float", element fbce2cb).
 * Loaded on every front-end page by includes/class-atk-mobile-tabbar.php.
 * Every rule is inside @media (max-width: 1024px) (Elementor tablet + mobile; the bar is
 * elementor-hidden-desktop) and scoped to .elementor-30 .elementor-element-fbce2cb.
 * No display rules: on the builder page (8070) builder-fixes.css keeps the bar hidden.
 * Colours: #CC9933 only (the site gold). No !important (selectors out-rank post-30.css).
 * Elementor Pro's sticky spacer is a hidden clone of the section, so it gets the same
 * padding and keeps the same height as the bar.
 */
@media (max-width: 1024px) {

	/* 1. iPhone safe area. Elementor sets padding 6px (tablet/mobile); keep 6px and add the
	 *    inset. env() is 0 without viewport-fit=cover (added by the module via Hello's
	 *    viewport filter), so this is harmless anywhere else. */
	.elementor-30 .elementor-element.elementor-element-fbce2cb.elementor-section {
		padding-right: calc(6px + env(safe-area-inset-right, 0px));
		padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
		padding-left: calc(6px + env(safe-area-inset-left, 0px));
	}

	/* 2. 48px tap rows. Each tab cell is at least 48px high, and the label link is
	 *    stretched over the whole cell (icon included) so a tap anywhere in it works.
	 *    The cell (.elementor-widget-wrap) is position: relative in Elementor's CSS. */
	.elementor-30 .elementor-element-fbce2cb > .elementor-container > .elementor-column > .elementor-widget-wrap {
		min-height: 48px;
	}

	.elementor-30 .elementor-element-fbce2cb > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading,
	.elementor-30 .elementor-element-fbce2cb > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading > .elementor-widget-container {
		position: static;
	}

	.elementor-30 .elementor-element-fbce2cb .elementor-widget-heading .elementor-heading-title > a::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	/* 3. Subtle pressed state: the whole tab (icon, label, Builder pill) dims while pressed. */
	.elementor-30 .elementor-element-fbce2cb > .elementor-container > .elementor-column:active > .elementor-widget-wrap {
		opacity: 0.7;
	}

	/* 4. Current page: gold icon + label.
	 *    Home = page 2 (/), Packages = shop archive /packages/ (the tab itself opens popup 3669),
	 *    Rates = page 4322 (/rates/), Contact = page 67 (/contact-us/).
	 *    Activities opens a popup and Builder is the gold pill, so neither gets a state. */
	body.page-id-2 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-c0b8404 .elementor-icon,
	body.page-id-2 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-cb6d886 .elementor-heading-title,
	body.page-id-2 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-cb6d886 .elementor-heading-title > a,
	body.post-type-archive-product .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-2dd857c .elementor-icon,
	body.post-type-archive-product .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-3551c38 .elementor-heading-title,
	body.post-type-archive-product .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-3551c38 .elementor-heading-title > a,
	body.page-id-4322 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-5f46126 .elementor-icon,
	body.page-id-4322 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-76362b3 .elementor-heading-title,
	body.page-id-4322 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-76362b3 .elementor-heading-title > a,
	body.page-id-67 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-ee38871 .elementor-icon,
	body.page-id-67 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-e3f17df .elementor-heading-title,
	body.page-id-67 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-e3f17df .elementor-heading-title > a {
		color: #CC9933;
	}

	/* Same, if the icons are ever switched to inline SVG (Elementor "inline font icons"). */
	body.page-id-2 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-c0b8404 .elementor-icon svg,
	body.post-type-archive-product .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-2dd857c .elementor-icon svg,
	body.page-id-4322 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-5f46126 .elementor-icon svg,
	body.page-id-67 .elementor-30 .elementor-element-fbce2cb .elementor-element.elementor-element-ee38871 .elementor-icon svg {
		fill: #CC9933;
	}

	/* 5. (1.1.8, QA qa-20261009.md #5) One tap target per tab. The label link already covers the whole cell
	 *    (rule 2, at least 48px high); the small 20px icon link above it no longer takes taps of its own, so a tap
	 *    on the icon, the label or the space around them always goes to the one cell-sized link. The 9px label
	 *    size is unchanged (Chappy). */
	.elementor-30 .elementor-element-fbce2cb > .elementor-container > .elementor-column > .elementor-widget-wrap {
		min-width: 44px;
	}

	.elementor-30 .elementor-element-fbce2cb .elementor-widget-icon a.elementor-icon {
		pointer-events: none;
	}
}