/* 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: not shown on screen, but kept in the page so screen
   readers and crawlers still find the link (not display:none). */
.rm-credit-sep {
	display: none;
}
.rm-credit {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@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;
	}
}

/* Switch to Maxis section (Unifi users): same deep-green promo look as the
   new-user promo above, with the RM1 iPad poster on the left. */
.rm-switch {
	background: var(--rm-deep);
	color: #fff;
	padding: 80px 40px 90px;
}
.rm-switch__inner {
	max-width: 1024px;
	margin: 0 auto;
}
.rm-switch mark {
	background: none;
	color: var(--rm-accent);
}
.rm-switch__eyebrow {
	margin: 0 0 6px;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 22px;
	color: var(--rm-accent);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.rm-switch__title {
	margin: 0;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 4.2vw, 48px);
	line-height: 1.15;
	color: #fff;
}
.rm-switch__lede {
	margin: 8px 0 28px;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: clamp(20px, 2.6vw, 30px);
	line-height: 1.3;
	color: #fff;
}
.rm-switch__box {
	display: grid;
	grid-template-columns: minmax(0, 340px) 1fr;
	gap: 40px;
	align-items: center;
	border: 1px solid var(--rm-accent);
	border-radius: 12px;
	padding: 24px;
}
.rm-switch__pic {
	margin: 0;
}
.rm-switch__pic img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.rm-switch__deal {
	text-align: center;
}
.rm-switch__tag {
	margin: 0 0 14px;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--rm-accent);
}
.rm-switch__item {
	margin: 0;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #fff;
}
.rm-switch__price {
	margin: 10px 0 0;
	font-family: Poppins, sans-serif;
	font-weight: 800;
	font-size: clamp(40px, 5vw, 56px);
	line-height: 1.1;
	color: #fff;
	white-space: nowrap;
}
.rm-switch__plan {
	margin: 4px 0 0;
	font-weight: 700;
	font-size: 17px;
}
.rm-switch__note {
	margin: 14px 0 22px;
	font-size: 13px;
	opacity: 0.8;
}
.rm-switch__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--rm-accent);
	color: #fff;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	transition: filter 0.15s ease-out;
}
.rm-switch__cta:hover,
.rm-switch__cta:focus {
	color: #fff;
	filter: brightness(0.94);
}
.rm-switch__cta svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Switch packages: four cards (100 / 300 + iPad / 300 / 500) on one row. */
#switch-packages > .uagb-container-inner-blocks-wrap {
	--inner-content-custom-width: min(100%, 1200px);
}
@media (min-width: 977px) {
	#switch-packages .uagb-layout-grid {
		grid-template-columns: repeat(4, minmax(1px, 1fr)) !important;
		column-gap: 16px !important;
	}
	#switch-packages .uagb-layout-grid > * {
		grid-column: span 1 !important;
	}
}
#switch-packages .rm-ipad-card .uagb-ifb-title {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.rm-switch {
		padding: 56px 20px 64px;
	}
	.rm-switch__box {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 16px;
	}
	.rm-switch__pic {
		max-width: 300px;
		margin: 0 auto;
	}
	.rm-switch__eyebrow {
		font-size: 18px;
	}
}

/* Mobile nav: the three links on one row ("SWITCH TO MAXIS" is longer than
   the old "DEVICES" and pushed TESTIMONIAL onto a second line). */
@media (max-width: 767px) {
	#ast-hf-menu-2-mobile {
		flex-wrap: nowrap !important;
		justify-content: space-between;
	}
	#ast-hf-menu-2-mobile > li {
		flex: 0 0 auto !important;
		width: auto !important;
	}
	#ast-hf-menu-2-mobile .menu-link {
		padding-left: 4px !important;
		padding-right: 4px !important;
		font-size: clamp(11.5px, 3.5vw, 14px) !important;
		white-space: nowrap;
	}
}

/* Postpaid new-user cards: the lifetime rebate sits directly above the price
   box, so the three rebates line up on one row. */
.rm-rebate.rm-rebate--row {
	margin: auto 10px -8px !important;
	align-self: stretch;
	width: auto !important;
}

/* Contact: one help card that opens WhatsApp. */
.rm-help {
	background: var(--rm-deep);
	padding: 72px 20px;
}
.rm-help__card {
	max-width: 720px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #dfe3dc;
	border-radius: 14px;
	padding: 32px;
}
.rm-help__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1f8a3c;
}
.rm-help__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #e8f5e4;
	color: #1f8a3c;
}
.rm-help__chip svg {
	width: 20px;
	height: 20px;
}
.rm-help__title {
	margin: 0 0 10px;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 3vw, 28px);
	line-height: 1.25;
	color: #16241b;
}
.rm-help__lede {
	margin: 0 0 22px;
	font-size: 17px;
	line-height: 1.5;
	color: #5b6660;
}
.rm-help__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 20px;
	border-radius: 10px;
	background: var(--rm-accent);
	color: #fff;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.15s ease-out;
}
.rm-help__cta:hover,
.rm-help__cta:focus {
	color: #fff;
	filter: brightness(0.94);
}
.rm-help__cta svg {
	width: 22px;
	height: 22px;
	flex: none;
}
.rm-help__points {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 15px;
	color: #5b6660;
	text-align: center;
}
.rm-help__points svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: #1f8a3c;
}
.rm-help__contacts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid #e6e9e3;
}
.rm-help__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 16px;
	color: #16241b;
	text-decoration: none;
}
.rm-help__contacts a:hover {
	color: #1f8a3c;
}
.rm-help__contacts svg {
	width: 16px;
	height: 16px;
	color: #1f8a3c;
}
@media (max-width: 767px) {
	.rm-help {
		padding: 48px 16px;
	}
	.rm-help__card {
		padding: 22px 18px;
	}
	.rm-help__cta {
		font-size: 16px;
	}
	.rm-help__points {
		font-size: 13px;
	}
}

/* Switch packages: the 3-year iPad deal card stands out the same way as the
   new-user 300 MBPS RM99 best seller (blue border, lifted). */
#switch-packages .rm-ipad-card,
.rm-hot-card {
	border: 3px solid #567eff !important;
	background-color: #eef2ff !important;
	box-shadow: 0 20px 30px 0 #00000070 !important;
}
@media (min-width: 977px) {
	#switch-packages .rm-ipad-card,
	.rm-hot-card {
		transform: scale(1.04) !important;
		z-index: 1;
	}
}
/* Badge: bigger and in the same blue as the border. */
#switch-packages .rm-ipad-card h6.uagb-ifb-title,
.rm-hot-card h6.uagb-ifb-title {
	font-size: 15px !important;
	letter-spacing: 0.08em;
}
/* The free iPad line as a solid blue tag so it reads first. */
#switch-packages .rm-ipad-card .rm-ipad-gift,
.rm-hot-card .rm-ipad-gift {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 8px;
	background: #567eff;
	color: #fff;
	line-height: 1.35;
}

/* Lead form: note under the package select about the Unifi-only deal. */
.rm-unifi-note {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #03432e;
	font-weight: 700;
}
