/* Overrides on top of the WordPress snapshot. Loaded after every theme and
   block stylesheet; snapshot.py links it in, so it survives a re-snapshot.
   Keep the incumbent look: Maxis green #40c706, deep green #03432e, Poppins
   headings, Lato body. These rules fix defects; they do not restyle. */

:root {
	--rm-accent: #40c706;
	--rm-deep: #03432e;
	/* Height of the sticky header (logo row + nav row): 103px mobile, 104px desktop. */
	--rm-header: 104px;
}

/* The fade-left animations start each card 100px to the right of its final
   spot. Until a card animates in it sticks out past the viewport, making the
   page wider than the screen (white strip on the right, page zoomed out on
   phones). Clip horizontally at the page level; the animation still runs. */
html,
body {
	overflow-x: hidden;
}
@supports (overflow: clip) {
	html,
	body {
		overflow-x: clip;
	}
}

/* The header is sticky, so anchor jumps (nav links, every CTA -> #register)
   used to land with the section's top hidden under it. */
html {
	scroll-padding-top: calc(var(--rm-header) + 8px);
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Browser surfaces in the brand colour instead of default blue. */
::selection {
	background: var(--rm-accent);
	color: #fff;
}
a:focus-visible,
button:focus-visible,
select:focus-visible,
[role="tab"]:focus-visible {
	outline: 2px solid var(--rm-accent);
	outline-offset: 2px;
}

/* Lead form: a visible focus state on fields (was browser default). */
.stws-form input:focus,
.stws-form select:focus {
	border-color: var(--rm-accent);
	box-shadow: 0 0 0 3px rgba(64, 199, 6, 0.25);
	outline: none;
}
.stws-form .stws-submit {
	transition: filter 0.15s ease-out;
}
.stws-form .stws-submit:hover {
	filter: brightness(0.94);
}

/* Promo prices and product names: never break mid-word ("RM30/mont h"). */
.uagb-block-0d5d14e3 .uagb-ifb-title,
.uagb-block-3b88b425 .uagb-ifb-title,
.uagb-block-eeaa2cba .uagb-ifb-title,
.uagb-block-1debcdcf .uagb-ifb-title {
	white-space: nowrap;
}

/* Footer credit: the separator only makes sense on one line. */
.rm-credit {
	white-space: nowrap;
}

@media (max-width: 767px) {
	:root {
		--rm-header: 103px;
	}

	/* Promo: both product names on one line so the two images line up. */
	.uagb-block-eeaa2cba .uagb-ifb-title,
	.uagb-block-1debcdcf .uagb-ifb-title,
	.uagb-block-0d5d14e3 .uagb-ifb-title,
	.uagb-block-3b88b425 .uagb-ifb-title {
		font-size: clamp(17px, 5vw, 22px);
	}

	/* Tabs: a compact grid instead of a tall stack of full-width rows
	   (packages 2x2, devices 3 across). Same colours, same active state. */
	.uagb-tabs__wrap > .uagb-tabs__panel {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		padding: 4px !important;
	}
	#devices .uagb-tabs__wrap > .uagb-tabs__panel {
		grid-template-columns: repeat(3, 1fr);
	}
	.uagb-tabs__wrap > .uagb-tabs__panel .uagb-tab {
		margin: 0 !important;
		width: auto !important;
	}
	.uagb-tabs__wrap > .uagb-tabs__panel .uagb-tabs-list {
		height: 100%;
		padding: 10px 8px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13.5px;
		line-height: 1.3;
	}

	.rm-credit-sep {
		display: none;
	}
	.rm-credit {
		display: block;
	}
}