/* =========================================================
   Skymovo — Base styles
   ========================================================= */

:root {
	--sm-color-text: #17171C;
	--sm-color-text-muted: #6B7280;
	--sm-color-accent: #2968F6;
	--sm-color-border: #E7EAF4;
	--sm-color-hero-from: #F0F7FF;
	--sm-color-hero-to: #C8DAEF;
	--sm-color-page-tint: #E7EAF4;
	--sm-color-pdp-tint: #F4F6F7;
	--sm-color-footer-bg: #17171C;
	--sm-color-footer-text: #9CA3AF;
	--sm-color-footer-heading: #FFFFFF;
	--sm-color-white: #FFFFFF;

	--sm-radius-card: 12px;
	--sm-radius-btn: 8px;
	--sm-radius-pill: 999px;

	--sm-header-height: 70px;
	--sm-header-padding-y: 10px;
	--sm-header-total-height: calc(var(--sm-header-height) + (2 * var(--sm-header-padding-y)));
	--sm-container-width: 1120px;
	--sm-gutter: 16px;

	--sm-font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, Tahoma, sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	height: 100%;
}

body {
	margin: 0;
	font-family: var(--sm-font-sans);
	color: var(--sm-color-text);
	background: var(--sm-color-white);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	height: 100%;
}

/* Sticky footer: #page (header.php's <div id="page">, closed in footer.php)
   is a full-viewport-height column so .site-main grows to fill whatever
   space a short page leaves over, keeping the footer pinned to the bottom
   of the screen instead of floating up with a gap under it. */
#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-weight: 700;
	line-height: 1.2;
}

/* Same gutter steps as .site-gutter/the header (16/32/48px), but capped at
   48px rather than following it all the way to 160px - .container is
   already centered by its own max-width, so it doesn't need a gutter that
   large on top of that. */
.container {
	width: 100%;
	max-width: var(--sm-container-width);
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
}

@media (min-width: 768px) {
	.container {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (min-width: 1024px) {
	.container {
		padding-left: 48px;
		padding-right: 48px;
	}
}

/* Fluid full-width gutter (no max-width cap) — used by the header. */
.site-gutter {
	padding-left: var(--sm-gutter);
	padding-right: var(--sm-gutter);
}

@media (min-width: 768px) {
	:root {
		--sm-gutter: 32px;
	}
}

@media (min-width: 1024px) {
	:root {
		--sm-gutter: 48px;
	}
}

@media (min-width: 1280px) {
	:root {
		--sm-gutter: 160px;
	}
}

.section {
	padding: 48px 0;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 10px 16px;
	background: var(--sm-color-white);
	color: var(--sm-color-text);
	border-radius: var(--sm-radius-btn);
	z-index: 10000;
	clip: auto;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--sm-radius-btn);
	font-weight: 600;
	font-size: 14px;
	border: 1px solid transparent;
	transition: opacity .2s ease, transform .15s ease;
	white-space: nowrap;
	/* Without this, an <input type="submit"> (e.g. the Contact form's send
	   button) keeps the browser's native button chrome underneath our
	   background - it briefly paints white/grey while the mouse is held
	   down, since the native "pressed" state renders on top of it. */
	-webkit-appearance: none;
	appearance: none;
}

.btn:hover {
	opacity: .88;
}

.btn--dark {
	background: var(--sm-color-text);
	color: var(--sm-color-white);
}

.btn--outline {
	background: transparent;
	border-color: var(--sm-color-border);
	color: var(--sm-color-text);
}

.btn--accent {
	background: var(--sm-color-accent);
	color: var(--sm-color-white);
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--sm-color-white);
	border-bottom: 1px solid transparent;
	padding-top: var(--sm-header-padding-y);
	padding-bottom: var(--sm-header-padding-y);
	transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Same padding whether scrolled or not — only the shadow/border switch on. */
.site-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(23, 23, 28, 0.06);
	border-bottom-color: var(--sm-color-border);
}

/* Homepage only: the header starts transparent so it overlays the hero's
   gradient banner (matching esim.io's first-load look) instead of sitting
   above it as a solid white bar. It still switches to the normal solid
   header — same scroll behavior as every other page — once .is-scrolled
   is toggled on (see main.js). The hero is pulled up under the header's
   reserved space with a matching negative margin below. */
.home .site-header:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--sm-header-height);
	padding-left: var(--sm-gutter);
	padding-right: var(--sm-gutter);
}

.site-branding {
	flex-shrink: 0;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	font-size: 18px;
	color: var(--sm-color-text);
	height: 35px;
}

.site-logo__badge {
	display: inline-flex;
	align-items: center;
	background: var(--sm-color-text);
	color: var(--sm-color-white);
	padding: 6px 12px;
	border-radius: var(--sm-radius-pill);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: capitalize;
}

.site-logo__text {
	font-weight: 700;
	letter-spacing: -0.01em;
}

.site-logo--light .site-logo__badge {
	background: var(--sm-color-white);
	color: var(--sm-color-text);
}

.site-logo--light .site-logo__text {
	color: var(--sm-color-white);
}

.custom-logo-link img {
	max-height: 40px;
	width: auto;
}

/* The logo is a wide horizontal lockup (icon + wordmark + tagline, ~3.2:1),
   so scaling it up to the desired 76px tall on a narrow phone header would
   make it wider than the header has room for (it was pushing the currency
   switcher and mobile menu button off-screen). Scale it up gradually as
   the header gains width instead of jumping straight to 76px. */
@media (min-width: 480px) {
	.custom-logo-link img {
		max-height: 52px;
	}
}

@media (min-width: 640px) {
	.custom-logo-link img {
		max-height: 64px;
	}
}

/* 64px (not larger) on desktop so the seven-item primary menu fits on
   one line between the logo and the account/currency actions. */
@media (min-width: 1024px) {
	.custom-logo-link img {
		max-height: 64px;
	}
}

/* Primary nav (desktop) */
.main-navigation {
	flex: 1;
	display: flex;
	justify-content: center;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 20px;
}

.nav-menu > li {
	position: relative;
}

.nav-menu > li > a {
	display: inline-block;
	padding: 10px 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: var(--sm-color-text);
	white-space: nowrap;
	transition: color .15s ease;
}

.nav-menu > li > a:hover {
	color: var(--sm-color-accent);
}

/* Current page in the header and mobile menus (as on the old site). */
.nav-menu > .current-menu-item > a,
.nav-menu > .current-menu-ancestor > a,
.mobile-menu .current-menu-item > a {
	color: var(--sm-color-accent);
	font-weight: 600;
}

.nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	box-shadow: 0 12px 24px rgba(23, 23, 28, 0.08);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.nav-menu .menu-item-has-children:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-menu .sub-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 400;
}

.nav-menu .sub-menu a:hover {
	background: #F5F6FA;
}

/* Header actions */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.header-account-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--sm-color-text);
}

.icon-user {
	font-size: 15px;
}

/* Logged-in header account menu - same toggle/panel pattern as the currency
   switcher below, with links instead of currency buttons. Guests get a
   plain link instead (see .header-account-link) since there's nothing to
   log out of. */
.header-account {
	position: relative;
}

.header-account__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	font-size: 14px;
	font-weight: 500;
	color: var(--sm-color-text);
	padding: 6px 4px;
}

.header-account__toggle[aria-expanded="true"] .icon-chevron {
	transform: rotate(180deg);
}

.header-account__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	box-shadow: 0 12px 24px rgba(23, 23, 28, 0.08);
	padding: 6px;
	min-width: 150px;
	z-index: 20;
}

.header-account__panel a {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 14px;
	color: var(--sm-color-text);
}

.header-account__panel a:hover {
	background: #F5F6FA;
}

.currency-switcher {
	position: relative;
}

.currency-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	font-size: 14px;
	font-weight: 500;
	color: var(--sm-color-text);
	padding: 6px 4px;
}

.icon-chevron {
	font-size: 10px;
	transition: transform .15s ease;
}

.currency-switcher__toggle[aria-expanded="true"] .icon-chevron {
	transform: rotate(180deg);
}

.currency-switcher__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	box-shadow: 0 12px 24px rgba(23, 23, 28, 0.08);
	padding: 6px;
	min-width: 130px;
	z-index: 20;
}

.currency-switcher__panel button {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 14px;
}

.currency-switcher__panel button:hover {
	background: #F5F6FA;
}

.mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	padding: 0;
	font-size: 18px;
	color: var(--sm-color-text);
}

/* Mobile menu — right-side drawer. */
.mobile-menu-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(23, 23, 28, .45);
	opacity: 0;
	visibility: hidden;
	z-index: 1050;
	transition: opacity .3s ease, visibility .3s ease;
}

.mobile-menu-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

.mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(85vw, 360px);
	background: var(--sm-color-white);
	z-index: 1100;
	padding: 20px 24px 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%);
	transition: transform .3s ease;
}

/* Shadow only while open - the closed drawer sits just off-canvas at
   right: 0, so a permanent shadow leaked onto the page's right edge. */
.mobile-menu.is-open {
	transform: translateX(0);
	box-shadow: -12px 0 32px rgba(23, 23, 28, .12);
}

.mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.mobile-menu__header .custom-logo-link img {
	max-height: 36px;
}

.mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: #F5F6FA;
	border: none;
	border-radius: var(--sm-radius-pill);
	color: var(--sm-color-text);
	font-size: 16px;
}

.mobile-menu__list li a {
	display: block;
	padding: 12px 0;
	font-size: 15px;
	font-weight: 400;
	border-bottom: 1px solid var(--sm-color-border);
}

.mobile-menu__list .sub-menu {
	padding-left: 16px;
	display: none;
}

.mobile-menu__list .menu-item-has-children.is-open .sub-menu {
	display: block;
}

body.mobile-menu-open {
	overflow: hidden;
}

@media (max-width: 1279px) {
	.main-navigation {
		display: none;
	}

	.mobile-menu-toggle {
		display: flex;
	}
}

@media (min-width: 1280px) {
	.mobile-menu-backdrop,
	.mobile-menu {
		display: none;
	}
}

@media (max-width: 420px) {
	.header-account-link span:last-child,
	.header-account__toggle span {
		display: none;
	}
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(to top, var(--sm-color-hero-from), var(--sm-color-hero-to));
	padding-top: 40px;
}

@media (min-width: 769px) {
	.hero {
		height: 480px;
	}
}

@media (max-width: 768px) {
	.hero {
		padding-bottom: 230px;
	}
}

/* Homepage only: pull the hero up behind the (now transparent) sticky
   header, and push its content down by the same amount so the search box
   and headline still clear the header — the gradient just extends up
   behind it instead of the header sitting above on a plain white bar. */
.home .hero {
	margin-top: calc(-1 * var(--sm-header-total-height));
	padding-top: calc(40px + var(--sm-header-total-height));
}

@media (min-width: 769px) {
	.home .hero {
		height: calc(480px + var(--sm-header-total-height));
	}
}

/* Desktop: two images, each exactly half the hero, meeting seamlessly in
   the middle via object-fit: contain + inward object-position. */
.hero__illustration--desktop {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

@media (min-width: 769px) {
	.hero__illustration--desktop {
		display: block;
	}
}

.hero__illustration-half {
	position: absolute;
	top: 68px;
	bottom: 0;
	width: 50%;
	height: 100%;
}

.hero__illustration-half--left {
	left: 0;
}

.hero__illustration-half--right {
	right: 0;
}

.hero__illustration-half img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.hero__illustration-half--left img {
	object-position: right bottom;
}

.hero__illustration-half--right img {
	object-position: left bottom;
}

/* Mobile: single full-width image */
.hero__illustration--mobile {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	z-index: 1;
	pointer-events: none;
}

@media (min-width: 769px) {
	.hero__illustration--mobile {
		display: none;
	}
}

.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* .hero-search is just a positioning wrapper now - the pill itself is
   either the [airalo_destinations_search] shortcode's own search bar
   (.aws-directory__search, restyled below to match) or, if that plugin
   isn't active, the plain .hero-search__fallback form. */
.hero-search {
	position: relative;
	width: 100%;
	max-width: 736px;
	margin-bottom: 32px;
}

.hero-search .aws-directory__search-wrap {
	max-width: none;
	margin: 0;
}

.hero-search .aws-directory__search,
.hero-search__fallback {
	height: 56px;
	background: var(--sm-color-white);
	border: 2px solid var(--sm-color-text);
	border-radius: var(--sm-radius-card);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
}

.hero-search .aws-directory__search svg {
	color: var(--sm-color-text);
}

.hero-search__icon {
	display: inline-flex;
	color: var(--sm-color-text);
	flex-shrink: 0;
}

.hero-search .aws-directory__search-input,
.hero-search__fallback input {
	flex: 1;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--sm-font-sans);
	font-size: 16px;
	color: var(--sm-color-text);
}

.hero-search .aws-directory__search-input::placeholder,
.hero-search__fallback input::placeholder {
	color: var(--sm-color-text-muted);
}

.hero-title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
}

.hero-title__line {
	display: block;
}

.hero-title__line--dark {
	color: var(--sm-color-text);
}

.hero-title__line--accent {
	color: var(--sm-color-accent);
}

@media (min-width: 640px) {
	.hero-title {
		font-size: 40px;
	}
}

@media (max-width: 768px) {
	.hero-search .aws-directory__search,
	.hero-search__fallback {
		height: 44px;
		border-radius: var(--sm-radius-btn);
	}
}

/* =========================================================
   Footer
   ========================================================= */

.single-product .site-footer {
	padding-bottom: 96px;
}

.site-footer {
	background: var(--sm-color-footer-bg);
	color: var(--sm-color-footer-text);
	padding: 48px 0 24px;
	font-size: 14px;
}

.site-footer a {
	color: var(--sm-color-white);
	transition: color .15s ease;
}

.site-footer a:hover {
	color: var(--sm-color-footer-text);
}

.footer-grid--main {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 32px;
	padding-bottom: 32px;
}

.footer-col--brand .site-footer__logo {
	margin-bottom: 16px;
}

.footer-col--brand .site-footer__logo .custom-logo-link img,
.footer-col--brand .site-footer__logo .site-logo img {
	max-height: 70px;
	width: auto;
}

.footer-tagline {
	font-size: 14px;
	line-height: 21px;
	color: var(--sm-color-footer-text);
	margin: 0 0 20px;
	max-width: 32ch;
}

.footer-col-title {
	display: block;
	width: 100%;
	color: var(--sm-color-footer-heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	margin-bottom: 16px;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	font-family: inherit;
}

.footer-col-title__chevron {
	display: none;
}

.footer-link-list li {
	margin-bottom: 12px;
}

.footer-link-list a {
	font-size: 14px;
	line-height: 21px;
}

.footer-social {
	display: flex;
	gap: 12px;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	font-size: 14px;
}

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
}

.footer-copyright {
	margin: 0;
	color: var(--sm-color-footer-text);
	font-size: 13px;
}

.footer-legal-links__list {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.footer-legal-links__list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.footer-legal-links__list li + li::before {
	content: "|";
	color: rgba(255, 255, 255, 0.3);
}

.footer-legal-links__list a {
	color: var(--sm-color-footer-text);
	font-size: 13px;
	font-weight: 400;
}

.footer-legal-links__list a:hover {
	color: var(--sm-color-white);
}

/* iPad range (and other tablet-ish widths down to 641px): brand keeps its
   own full-width row, but Destinations/Company/Support go three-across in
   one row instead of wrapping to two - a 2-column grid left Support alone
   on its own row. */
@media (max-width: 1024px) {
	.footer-grid--main {
		grid-template-columns: repeat(3, 1fr);
	}

	.footer-col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.footer-grid--main {
		grid-template-columns: 1fr;
	}

	/* Destinations/Company/Support columns collapse into accordions. */
	.footer-col--accordion {
		border-top: 1px solid rgba(255, 255, 255, .1);
		padding-top: 16px;
	}

	.footer-col--accordion .footer-col-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.footer-col-title__chevron {
		display: block;
		flex-shrink: 0;
		transition: transform .2s ease;
	}

	.footer-col-title[aria-expanded="true"] .footer-col-title__chevron {
		transform: rotate(180deg);
	}

	.footer-col-content {
		display: grid;
		grid-template-rows: 0fr;
		overflow: hidden;
		transition: grid-template-rows .25s ease;
	}

	.footer-col-content.is-open {
		grid-template-rows: 1fr;
	}

	.footer-col-content > ul {
		overflow: hidden;
		min-height: 0;
	}

	.footer-col-content.is-open .footer-link-list {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.footer-col-content .footer-link-list li:last-child {
		margin-bottom: 0;
	}
}

/* =========================================================
   Destinations
   ========================================================= */

.destinations {
	background: var(--sm-color-white);
}

.destinations__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Grid + card markup below come from the Airalo sync plugin's
   [airalo_destinations] shortcode (see AWS_Destinations) — classnames are
   plugin-owned ("aws-" prefix), styled here to match the site design. */

.aws-destinations {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	width: 100%;
	margin-bottom: 24px;
}

@media (min-width: 1024px) {
	.aws-destinations {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}
}

.aws-destination {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 10px;
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	transition: background-color .2s ease, color .2s ease;
}

@media (min-width: 640px) {
	.aws-destination {
		gap: 12px;
		padding: 16px;
	}
}

.aws-destination:hover {
	background: var(--sm-color-text);
	color: var(--sm-color-white);
}

.aws-destination .aws-destination__flag {
	flex-shrink: 0;
	overflow: hidden;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	font-size: inherit;
	line-height: normal;
}

@media (min-width: 640px) {
	.aws-destination .aws-destination__flag {
		width: 32px;
		height: 32px;
	}
}

.aws-destination__label {
	min-width: 0;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (min-width: 640px) {
	.aws-destination__label {
		font-size: 16px;
	}
}

.aws-destination__chevron {
	flex-shrink: 0;
	margin-left: auto;
	color: var(--sm-color-text-muted);
	transition: transform .2s ease, color .2s ease;
}

.aws-destination:hover .aws-destination__chevron {
	color: var(--sm-color-white);
	transform: translateX(3px);
}

.destinations__view-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px;
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	font-size: 16px;
	font-weight: 600;
	transition: background-color .2s ease, color .2s ease;
}

.destinations__view-all:hover {
	background: var(--sm-color-text);
	color: var(--sm-color-white);
}

/* =========================================================
   Destinations directory page (/destinations/)
   Grid/tabs/search markup comes from the Airalo sync plugin's
   [airalo_destinations_directory] shortcode (AWS_Destinations) —
   classnames are plugin-owned ("aws-" prefix), styled here.
   ========================================================= */

.destinations-hero {
	background: var(--sm-color-page-tint);
	padding: 56px 0 32px;
	text-align: center;
}

.destinations-hero__title {
	max-width: 46rem;
	margin: 0 auto;
	font-size: 24px;
	line-height: 1.3;
}

@media (min-width: 640px) {
	.destinations-hero__title {
		font-size: 32px;
	}
}

/* Side gutters matching .container/.aws-directory__content below - without
   these the search box and tabs ran edge-to-edge on narrow phone screens
   (e.g. Android), unlike every other section on the page. */
.aws-directory__filters {
	background: var(--sm-color-page-tint);
	padding: 8px 16px 32px;
}

@media (min-width: 768px) {
	.aws-directory__filters {
		padding-left: 48px;
		padding-right: 48px;
	}
}

.aws-directory__search-wrap {
	position: relative;
	max-width: 640px;
	margin: 0 auto 24px;
}

.aws-directory__search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	padding: 0 16px;
	background: var(--sm-color-white);
	border: 2px solid var(--sm-color-text);
	border-radius: var(--sm-radius-card);
}

.aws-directory__search-input {
	flex: 1;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--sm-font-sans);
	font-size: 16px;
	color: var(--sm-color-text);
}

.aws-directory__search-input::placeholder {
	color: var(--sm-color-text-muted);
}

.aws-directory__search svg {
	flex-shrink: 0;
	color: var(--sm-color-text-muted);
}

.aws-directory__search-clear {
	display: inline-flex;
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 4px;
	color: var(--sm-color-text-muted);
}

.aws-directory__search-clear[hidden] {
	display: none;
}

.aws-directory__search-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 360px;
	overflow-y: auto;
	padding: 16px;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	box-shadow: 0 16px 32px rgba(23, 23, 28, 0.12);
	text-align: left;
}

.aws-directory__search-results[hidden] {
	display: none;
}

.aws-directory__search-group + .aws-directory__search-group {
	margin-top: 16px;
}

.aws-directory__search-group-label {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sm-color-text-muted);
}

.aws-directory__search-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
}

.aws-directory__search-item:hover .aws-directory__search-item-title {
	color: var(--sm-color-accent);
}

.aws-directory__search-item .aws-directory__search-flag {
	flex-shrink: 0;
	overflow: hidden;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	font-size: inherit;
	line-height: normal;
}

.aws-directory__search-flag--region {
	background: #F5F6FA;
}

.aws-directory__search-item-title {
	flex: 1;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: var(--sm-color-text);
	transition: color .15s ease;
}

.aws-directory__search-item-chevron {
	flex-shrink: 0;
	color: var(--sm-color-text-muted);
}

.aws-directory__search-empty {
	margin: 0;
	font-size: 14px;
	color: var(--sm-color-text-muted);
	text-align: center;
}

.aws-directory__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	max-width: 640px;
	margin: 0 auto;
	padding: 4px;
	background: #F5F6FA;
	border-radius: var(--sm-radius-btn);
}

.aws-directory__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
	min-width: 88px;
	padding: 8px 12px;
	background: none;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sm-color-text-muted);
	transition: background-color .2s ease, color .2s ease;
}

@media (min-width: 640px) {
	.aws-directory__tab {
		font-size: 14px;
	}
}

.aws-directory__tab-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.aws-directory__tab.is-active {
	background: var(--sm-color-text);
	color: var(--sm-color-white);
}

.aws-directory__content {
	background: var(--sm-color-page-tint);
	padding: 32px 0 64px;
}

.aws-directory__content > * {
	max-width: var(--sm-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

@media (min-width: 768px) {
	.aws-directory__content > * {
		padding-left: 48px;
		padding-right: 48px;
	}
}

.aws-directory__section-title {
	font-size: 20px;
	margin-bottom: 20px;
}

.aws-directory__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.aws-directory__grid[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.aws-directory__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.aws-directory__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
}

.aws-directory__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 12px;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-btn);
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.aws-directory__card[hidden] {
	display: none;
}

.aws-directory__card:hover {
	background: var(--sm-color-hero-from);
	border-color: var(--sm-color-accent);
	box-shadow: 0 8px 20px rgba(23, 23, 28, 0.08);
}

.aws-directory__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.aws-directory__flag {
	flex-shrink: 0;
	overflow: hidden;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	font-size: inherit;
	line-height: normal;
}

.aws-directory__flag--region {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--sm-color-text-muted);
	color: var(--sm-color-text-muted);
}

.aws-directory__flag--region svg {
	width: 16px;
	height: 16px;
}

.aws-directory__chevron {
	flex-shrink: 0;
	color: var(--sm-color-text-muted);
}

.aws-directory__name {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aws-directory__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.aws-directory__price-label {
	font-size: 12px;
	color: var(--sm-color-text-muted);
}

.aws-directory__price-value {
	font-size: 14px;
	font-weight: 600;
	color: #15803D;
}

.aws-directory__empty {
	text-align: center;
	padding: 48px 0;
	color: var(--sm-color-text-muted);
}

/* =========================================================
   Why Skymovo (homepage section 3)
   Layout matches esim.io's "Why eSIM io?" spotlight card.
   ========================================================= */

.why-skymovo {
	background: #F5F6FA;
}

.why-skymovo__heading {
	margin: 0 0 24px;
	font-size: 28px;
	text-align: center;
}

@media (min-width: 640px) {
	.why-skymovo__heading {
		font-size: 32px;
	}
}

.why-skymovo__card {
	display: flex;
	flex-direction: column-reverse;
	max-width: 928px;
	margin: 0 auto;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: 24px;
	overflow: hidden;
}

@media (min-width: 768px) {
	.why-skymovo__card {
		flex-direction: row;
	}
}

.why-skymovo__card-text {
	padding: 32px;
	flex: 1;
}

@media (min-width: 768px) {
	.why-skymovo__card-text {
		padding: 48px;
	}
}

.why-skymovo__card-heading {
	margin: 0 0 16px;
	max-width: 400px;
	font-size: 28px;
	line-height: 1.2;
}

@media (min-width: 768px) {
	.why-skymovo__card-heading {
		font-size: 42px;
	}
}

.why-skymovo__card-description {
	margin: 0 0 20px;
	max-width: 420px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--sm-color-text);
}

.why-skymovo__bullets {
	margin: 0 0 24px;
}

.why-skymovo__bullets li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 15px;
}

.why-skymovo__bullets li:last-child {
	margin-bottom: 0;
}

.why-skymovo__bullets svg {
	flex-shrink: 0;
	color: var(--sm-color-accent);
}

.why-skymovo__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	background: var(--sm-color-white);
	color: var(--sm-color-text);
	border: 1px solid var(--sm-color-text);
	border-radius: var(--sm-radius-btn);
	font-size: 14px;
	font-weight: 600;
	transition: background-color .2s ease;
}

.why-skymovo__button:hover {
	background: #F5F6FA;
}

.why-skymovo__card-art {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.why-skymovo__card-art img {
	width: 100%;
	height: 220px;
	object-fit: contain;
	object-position: center;
	display: block;
}

@media (min-width: 768px) {
	.why-skymovo__card-art {
		width: 42%;
	}

	.why-skymovo__card-art img {
		height: 100%;
		max-height: 340px;
	}
}

/* Reviews slider. */

.reviews__heading {
	margin: 0 0 24px;
	font-size: 28px;
	text-align: center;
}

@media (min-width: 640px) {
	.reviews__heading {
		font-size: 32px;
	}
}

.reviews__slider {
	position: relative;
}

.reviews__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 4px 8px;
	margin: 0 -4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
}

.reviews__track::-webkit-scrollbar {
	display: none;
}

/* While actively dragging with the mouse: snap and smooth-scroll would
   otherwise fight the pointer for control of scrollLeft, so both are
   switched off for the duration of the drag (see main.js). */
.reviews__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

.reviews__card {
	flex: 0 0 280px;
	scroll-snap-align: start;
	background: #F4F6F7;
	border-radius: var(--sm-radius-card);
	padding: 20px;
	display: flex;
	flex-direction: column;
}

@media (min-width: 640px) {
	.reviews__card {
		flex-basis: 320px;
		padding: 24px;
	}
}

.reviews__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.reviews__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--sm-color-text);
}

.reviews__stars {
	display: flex;
	gap: 2px;
	flex-shrink: 0;
	color: var(--sm-color-border);
}

.reviews__stars .is-filled {
	color: #FFAB00;
}

.reviews__card-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--sm-color-text);
}

.reviews__card-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--sm-color-text-muted);
}

.reviews__controls {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

.reviews__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sm-radius-pill);
	border: 1px solid var(--sm-color-border);
	background: var(--sm-color-white);
	color: var(--sm-color-text);
	transition: background-color .2s ease, border-color .2s ease;
}

.reviews__arrow:hover {
	background: #F5F6FA;
	border-color: var(--sm-color-text);
}

.reviews__arrow:disabled {
	opacity: .35;
	cursor: default;
	background: var(--sm-color-white);
	border-color: var(--sm-color-border);
}


/* How It Works — "Get Your eSIM in Minutes". */

.how-it-works {
	background: #FAFAFC;
}

.how-it-works__eyebrow-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 14px;
}

.how-it-works__eyebrow-line {
	width: 28px;
	height: 1px;
	background: var(--sm-color-accent);
	opacity: .35;
}

.how-it-works__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sm-color-accent);
}

.how-it-works__heading {
	margin: 0 0 12px;
	font-size: 30px;
	font-weight: 800;
	text-align: center;
}

@media (min-width: 640px) {
	.how-it-works__heading {
		font-size: 38px;
	}
}

.how-it-works__subheading {
	margin: 0 auto 48px;
	max-width: 520px;
	font-size: 16px;
	color: var(--sm-color-text-muted);
	text-align: center;
}

.how-it-works__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 768px) {
	.how-it-works__cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}

.how-it-works__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px 24px 28px;
	background: var(--sm-color-white);
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(23, 23, 28, .05);
	transition: transform .25s ease, box-shadow .25s ease;
}

.how-it-works__card:hover,
.how-it-works__card:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px rgba(41, 104, 246, .16);
}

.how-it-works__card-number {
	position: absolute;
	top: -20px;
	left: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(41, 104, 246, .1);
	color: var(--sm-color-accent);
	font-size: 18px;
	font-weight: 800;
	box-shadow: 0 6px 16px rgba(41, 104, 246, .12);
}

.how-it-works__card-illustration {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 170px;
	margin: 24px 0 20px;
	overflow: hidden;
}

@media (min-width: 640px) {
	.how-it-works__card-illustration {
		height: 210px;
	}
}

.how-it-works__card-illustration img {
	max-width: 100%;
	height: 100%;
	width: auto;
	object-fit: contain;
	display: block;
	transition: transform .3s ease;
}

.how-it-works__card:hover .how-it-works__card-illustration img {
	transform: scale(1.05);
}

.how-it-works__card-title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 800;
	color: var(--sm-color-text);
}

.how-it-works__card-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sm-color-text-muted);
}

/* =========================================================
   Product page (PDP) — woocommerce/content-single-product.php
   ========================================================= */

.pdp {
	/* Continuous page background behind the hero and the plan grid alike,
	   matching the reference's own single tone for the whole PDP (lighter
	   and more neutral than the destinations directory's page tint). */
	background: var(--sm-color-pdp-tint);
}

.pdp-hero {
	padding: 40px 0;
}

.pdp-hero__inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pdp-hero__flag {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sm-color-white);
	box-shadow: 0 0 0 1px var(--sm-color-border);
}

.pdp-hero__flag .fi {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	border-radius: 0;
}

.pdp-hero__flag svg {
	width: 28px;
	height: 28px;
	color: var(--sm-color-text-muted);
}

.pdp-hero__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
}

@media (min-width: 640px) {
	.pdp-hero__title {
		font-size: 30px;
	}
}

.pdp-body {
	padding-top: 24px;
	padding-bottom: 96px;
}

.pdp-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 13.5px;
	color: var(--sm-color-text-muted);
}

.pdp-breadcrumb a {
	color: inherit;
}

.pdp-breadcrumb a:hover {
	color: var(--sm-color-accent);
}

.pdp-breadcrumb [aria-current] {
	color: var(--sm-color-text);
	font-weight: 600;
}

.pdp-section-title {
	margin: 32px 0 16px;
	font-size: 18px;
}

.pdp-section-title:first-of-type {
	margin-top: 0;
}

.pdp-plan-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 640px) {
	.pdp-plan-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.pdp-plan-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pdp-plan-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background: var(--sm-color-white);
	border: 1.5px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.pdp-plan-card:hover {
	border-color: var(--sm-color-text);
}

.pdp-plan-card.is-selected {
	border-color: var(--sm-color-text);
	border-width: 2px;
	box-shadow: 0 4px 12px rgba(23, 23, 28, 0.08);
}

.pdp-plan-card__label {
	font-size: 15px;
	font-weight: 700;
}

.pdp-plan-card__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-size: 16px;
	font-weight: 700;
	color: #15803D;
}

.pdp-plan-card__rate {
	font-size: 12px;
	font-weight: 500;
	color: var(--sm-color-text-muted);
}

/* The real WooCommerce variation form: the plan cards above drive its
   hidden <select> (see assets/js/pdp.js) — its own dropdown/qty UI stays
   in the DOM for stock/price logic but is never shown. */
.pdp .variations,
.pdp .woocommerce-variation-description,
.pdp .woocommerce-variation-availability,
.pdp .reset_variations {
	display: none !important;
}

.pdp .quantity {
	display: none !important;
}

/* The reference shows no price line in the bar itself - the plan cards
   already show it - just the two (or one, pre-selection) buttons. */
.pdp-sticky-bar .woocommerce-variation-price {
	display: none !important;
}

/* Fixed to the viewport (not just the end of the content column) and
   visible from the start - matches the reference, which always shows a
   "Select a Plan" prompt bar, then swaps to Package Details + Buy once a
   card is picked, rather than appearing only after a selection.
   .is-footer-visible (toggled by an IntersectionObserver in pdp.js) hides
   it once the footer scrolls into view, same as the reference; the
   z-index below is just a fallback if that JS doesn't run. */
.pdp-sticky-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-top: 1px solid var(--sm-color-border);
	box-shadow: 0 -8px 24px rgba(23, 23, 28, 0.08);
}

.pdp-sticky-bar.is-footer-visible {
	display: none;
}

.pdp-sticky-bar__inner {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	max-width: var(--sm-container-width);
	margin: 0 auto;
	padding: 12px 16px;
}

/* The <form class="variations_form"> - not the button inside it - is the
   actual flex child of .pdp-sticky-bar__inner, so ordering/sizing has to
   go on the form itself for "order"/"flex" to have any effect. Equal,
   fixed-width buttons on desktop (matching the reference exactly); full
   width and stacked evenly on narrow screens instead of a fixed 320px that
   wouldn't fit. Hidden until a plan is picked - see .pdp-sticky-bar__prompt
   below for why a real WooCommerce add-to-cart button isn't shown before
   that (it'd risk WooCommerce's own "please select an option" alert). */
.pdp-sticky-bar__inner .variations_form {
	order: 2;
	flex: 1 1 auto;
	display: none;
	/* !important: WooCommerce's own default form spacing (.woocommerce
	   div.product form.cart) is more specific than this selector, and is
	   what shows up as extra space under the button once selected - it's
	   meant for a standalone product page, not this compact sticky bar. */
	margin: 0 !important;
}

.pdp-sticky-bar.has-selection .variations_form {
	display: block;
}

@media (min-width: 768px) {
	.pdp-sticky-bar__inner .variations_form {
		flex: 0 0 320px;
	}
}

.pdp-sticky-bar .single_add_to_cart_button {
	width: 100%;
	height: 48px;
	/* !important: WooCommerce's own stylesheet targets this button with
	   higher selector specificity (.woocommerce button.button), so a plain
	   override here loses the cascade otherwise. */
	background: var(--sm-color-text) !important;
	color: var(--sm-color-white) !important;
	border: none !important;
	border-radius: var(--sm-radius-btn) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	opacity: 1 !important;
	cursor: pointer !important;
}

.pdp-sticky-bar .single_add_to_cart_button:hover {
	background: #000 !important;
}

/* Plain stand-in shown before any plan is picked, in the real button's
   place (same order/flex sizing) - deliberately not the WooCommerce
   button, so a click can never reach WooCommerce's own "please select an
   option" validation (bound to .single_add_to_cart_button's click,
   independent of the form's submit event - see pdp.js). */
.pdp-sticky-bar__prompt {
	order: 2;
	flex: 1 1 auto;
	height: 48px;
	background: var(--sm-color-text);
	color: var(--sm-color-white);
	border: none;
	border-radius: var(--sm-radius-btn);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.pdp-sticky-bar__prompt:hover {
	background: #000;
}

@media (min-width: 768px) {
	.pdp-sticky-bar__prompt {
		flex: 0 0 320px;
	}
}

.pdp-sticky-bar.has-selection .pdp-sticky-bar__prompt {
	display: none;
}

.pdp-sticky-bar__details {
	order: 1;
	flex: 1 1 auto;
	height: 48px;
	padding: 0 20px;
	background: var(--sm-color-white);
	border: 1.5px solid var(--sm-color-border);
	border-radius: var(--sm-radius-btn);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--sm-color-text);
	/* Nothing to show until a plan is picked. */
	display: none;
}

@media (min-width: 768px) {
	.pdp-sticky-bar__details {
		flex: 0 0 320px;
	}
}

.pdp-sticky-bar.has-selection .pdp-sticky-bar__details {
	display: block;
}

.pdp-sticky-bar__details:hover {
	border-color: var(--sm-color-text);
}

.pdp-modal[hidden] {
	display: none;
}

.pdp-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

@media (min-width: 640px) {
	.pdp-modal {
		align-items: center;
	}
}

.pdp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(23, 23, 28, 0.5);
}

.pdp-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	max-height: 85vh;
	overflow-y: auto;
	padding: 28px 24px;
	background: var(--sm-color-white);
	border-radius: var(--sm-radius-card) var(--sm-radius-card) 0 0;
}

@media (min-width: 640px) {
	.pdp-modal__panel {
		border-radius: var(--sm-radius-card);
	}
}

.pdp-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	font-size: 18px;
	color: var(--sm-color-text-muted);
}

.pdp-modal__body h3 {
	margin: 0 24px 20px 0;
	font-size: 18px;
}

.pdp-modal__section {
	padding: 16px 0;
	border-top: 1px solid var(--sm-color-border);
}

.pdp-modal__section h4 {
	margin: 0 0 12px;
	font-size: 14px;
}

.pdp-modal__section p,
.pdp-modal__section li {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sm-color-text-muted);
}

.pdp-modal__carrier {
	color: var(--sm-color-text) !important;
	font-weight: 600;
}

.pdp-modal__section ul {
	list-style: disc;
	padding-left: 18px;
}

.pdp-modal__footer {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sm-color-border);
}

.pdp-modal__buy {
	width: 100%;
	height: 48px;
	background: var(--sm-color-text);
	color: var(--sm-color-white);
	border: none;
	border-radius: var(--sm-radius-btn);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.pdp-modal__buy:hover {
	background: #000;
}

body.pdp-modal-open {
	overflow: hidden;
}

.pdp-simple {
	padding: 24px 0;
}

/* =========================================================
   Shared "info page" components — page-hero/page-split/page-eyebrow/
   page-heading are generic building blocks used by more than one simple
   content page (About Us, How It Works, Contact Us, the shared FAQ
   section): a hero band, alternating image+text sections (a real <img> in
   its own column next to the text column - airalo.com's layout), and
   shared label/heading typography.
   ========================================================= */

.page-hero {
	background: var(--sm-color-white);
	padding: 56px 0;
}

.page-hero__title {
	display: inline-block;
	margin: 0 0 16px;
	font-size: 36px;
	line-height: 1.1;
}

@media (min-width: 640px) {
	.page-hero__title {
		font-size: 48px;
	}
}

.page-hero__paragraph {
	margin: 0 0 28px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--sm-color-text-muted);
}

.page-section--tint {
	background: #F5F6FA;
}

/* .page-split — a real <img> in its own column next to the text column
   (airalo.com's own image+text layout): the image reflows naturally at
   every width since it's a normal flex sibling of the text column, instead
   of a full-bleed section background that had to be re-tuned per
   breakpoint to avoid overlapping the text. Used by the About Us, How It
   Works and Contact Us heroes, and the shared FAQ section. */
.page-split__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.page-split__text {
	width: 100%;
}

.page-split__art {
	width: 100%;
	max-width: 420px;
}

.page-split__art img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	border-radius: var(--sm-radius-card);
}

@media (min-width: 900px) {
	.page-split__inner {
		flex-direction: row;
		align-items: center;
		gap: 56px;
	}

	.page-split--reverse .page-split__inner {
		flex-direction: row-reverse;
	}

	.page-split__text {
		flex: 1 1 0;
		min-width: 0;
		max-width: 620px;
	}

	.page-split__art {
		flex: 1 1 0;
		min-width: 0;
		max-width: 560px;
	}
}

/* Extra vertical padding so the tint color shows as breathing room
   above/below the content. */
.page-section--tint.page-split {
	padding: 80px 0;
}

.page-eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sm-color-accent);
}

.page-heading {
	margin: 0 0 20px;
	font-size: 26px;
	line-height: 1.25;
}

@media (min-width: 640px) {
	.page-heading {
		font-size: 32px;
	}
}

.page-media__paragraph {
	margin: 0 0 16px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--sm-color-text-muted);
}

.page-media__paragraph:last-child {
	margin-bottom: 0;
}

/* Plain text block (not a two-column page-split section) - caps line length
   for readability, e.g. How It Works' "What's an eSIM?" copy. */
.page-copy {
	max-width: 640px;
}

.page-subheading {
	margin: 28px 0 12px;
	font-size: 19px;
}

/* =========================================================
   About Us page — page-about.php
   Section rhythm (alternating image+text blocks, a stats band, a
   values-style grid, a closing CTA band) follows airalo.com's own About
   page structure, built with this theme's existing tokens/components.
   ========================================================= */

/* Single-column checklist (Powering Daily Life) - one item per row. */
.about-checklist {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.about-checklist li,
.page-simple-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.about-checklist svg,
.page-simple-list svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--sm-color-accent);
}

.about-checklist span,
.page-simple-list span {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sm-color-text-muted);
}

.about-checklist span strong {
	color: var(--sm-color-text);
}

/* Plain single-column checkmark list - shared by any page that needs a
   short list of points without a two-column layout (About Us' Mission,
   How It Works' Device compatibility). */
.page-simple-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 640px;
	margin-bottom: 16px;
}

/* Values grid (Our Vision) - same "icon/title + short description" idea as
   Airalo's "Our values" grid, built from our own real Vision statements. */
.about-values {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 768px) {
	.about-values {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 40px;
	}
}

.about-values__item strong {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	color: var(--sm-color-text);
}

.about-values__item p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sm-color-text-muted);
}

/* FAQ accordion - smooth height transition via the CSS grid-rows trick
   (same technique as .footer-col-content), one question open at a time
   within the list (enforced in main.js). */
.about-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.about-faq__item {
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	padding: 0 20px;
}

.about-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--sm-color-text);
	text-align: left;
	cursor: pointer;
}

.about-faq__chevron {
	flex-shrink: 0;
	color: var(--sm-color-accent);
	transition: transform 0.2s ease;
}

.about-faq__item.is-open .about-faq__chevron {
	transform: rotate(180deg);
}

.about-faq__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.about-faq__item.is-open .about-faq__answer-wrap {
	grid-template-rows: 1fr;
}

.about-faq__answer-inner {
	overflow: hidden;
	min-height: 0;
}

.about-faq__answer {
	margin: 0;
	padding-bottom: 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sm-color-text-muted);
}

/* =========================================================
   How It Works page — page-how-it-works.php
   Built one section at a time; reuses the shared page-hero/page-split
   components above.
   ========================================================= */

/* What's an eSIM? - text on the left, illustration on the right (the
   reverse of the hero above). A real grid column, same idea as .page-split,
   since this section's copy runs much taller than the image and would
   otherwise overlap it. On mobile the
   image stacks above the text, matching the other sections. The content
   sits in a white rounded box on the tinted band, styled like the
   homepage's How It Works cards. */
.hiw-esim__box {
	padding: 28px 20px;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(23, 23, 28, .05);
}

@media (min-width: 640px) {
	.hiw-esim__box {
		padding: 40px;
	}
}

/* The note paragraph above is :last-child no more, so it keeps its
   bottom margin; this adds a little extra before the button. */
.hiw-esim__button {
	margin-top: 8px;
	padding: 12px 22px;
}

.hiw-esim__media img {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	margin: 0 auto 24px;
}

@media (min-width: 900px) {
	.hiw-esim__box {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px;
		align-items: center;
		padding: 56px;
	}

	.hiw-esim__copy {
		grid-column: 1;
		grid-row: 1;
	}

	.hiw-esim__media {
		grid-column: 2;
		grid-row: 1;
	}

	.hiw-esim__media img {
		margin-bottom: 0;
	}
}

/* Stay connected abroad - image on the left, text on the right,
   alternating with the boxed "What's an eSIM?" section above. The
   illustration is a full scene (not a cut-out), so it gets rounded
   corners. On mobile the image stacks above the text. */
.hiw-abroad__media img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 24px;
	border-radius: 20px;
}

@media (min-width: 900px) {
	.hiw-abroad__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 56px;
		align-items: center;
	}

	.hiw-abroad__media img {
		margin-bottom: 0;
	}
}

/* Avoid roaming charges - text on the left, illustration on the right,
   on the tint band (alternating with Stay connected abroad above). The
   illustration has a transparent background, so it sits directly on the
   tint. On mobile the image stacks above the text. */
.hiw-roaming__media img {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 0 auto 24px;
}

@media (min-width: 900px) {
	.hiw-roaming__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 56px;
		align-items: center;
	}

	.hiw-roaming__copy {
		grid-column: 1;
		grid-row: 1;
	}

	.hiw-roaming__media {
		grid-column: 2;
		grid-row: 1;
	}

	.hiw-roaming__media img {
		margin-bottom: 0;
	}
}

/* How to use SkyMovo - the homepage's section
   (template-parts/front-page/how-it-works.php), recoloured white so the
   bands keep alternating after the tinted Avoid roaming charges section. */
.how-it-works.hiw-steps {
	background: var(--sm-color-white);
}

/* =========================================================
   Compatible Devices page — page-compatible-devices.php
   Reuses the shared page-hero/page-heading components, the How It Works
   page's boxed .hiw-esim block and the About page's FAQ accordion (used
   for both the device brands and the FAQs).
   ========================================================= */

/* Offset in-page jump targets so the sticky header doesn't cover them. */
.cd-anchor {
	scroll-margin-top: calc(var(--sm-header-total-height) + 16px);
}

.cd-hero {
	background: linear-gradient(180deg, var(--sm-color-hero-from) 0%, var(--sm-color-white) 100%);
	text-align: center;
}

.cd-hero .page-hero__paragraph {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.cd-section-heading {
	text-align: center;
}

.cd-section-heading {
	margin-bottom: 32px;
}

/* How to check - two icon cards. */
.cd-check__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	.cd-check__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cd-check__card {
	padding: 28px 24px;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(23, 23, 28, .05);
}

.cd-check__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 50%;
	color: var(--sm-color-accent);
	background: #EAF1FE;
}

.cd-check__icon--chip {
	color: #16A34A;
	background: #E8F7EE;
}

.cd-check__title {
	margin: 0 0 8px;
	font-size: 18px;
}

.cd-check__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sm-color-text-muted);
}

/* What devices support eSIMs? - design follows airalo.com's Device
   compatibility page: the whole list, every brand shown, sits in one
   panel with each brand as a white row (brand rows reuse the About page's
   FAQ accordion). */
.cd-panel {
	max-width: 760px;
	margin: 0 auto;
	padding: 24px 16px;
	background: #F5F6FA;
	border: 1px solid var(--sm-color-border);
	border-radius: 20px;
}

@media (min-width: 640px) {
	.cd-panel {
		padding: 32px;
	}
}

.cd-panel__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin-bottom: 8px;
}

.cd-panel__title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
}

@media (min-width: 640px) {
	.cd-panel__title {
		font-size: 26px;
	}
}

.cd-panel__intro {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sm-color-text-muted);
}

.cd-devices__search {
	position: relative;
	margin-bottom: 16px;
}

.cd-devices__search svg {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	color: var(--sm-color-text-muted);
	pointer-events: none;
}

.cd-devices__search-input {
	width: 100%;
	padding: 13px 16px 13px 46px;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	font: inherit;
	font-size: 15px;
	color: var(--sm-color-text);
}

.cd-devices__search-input:focus {
	outline: none;
	border-color: var(--sm-color-accent);
	box-shadow: 0 0 0 3px rgba(41, 104, 246, .15);
}

.cd-devices__list {
	gap: 10px;
}

.cd-brand {
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(23, 23, 28, .06);
}

.cd-brand .about-faq__question {
	padding: 15px 0;
	font-size: 15px;
}

.cd-brand__title {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.cd-brand__count {
	padding: 3px 10px;
	background: #EEF2FA;
	border-radius: var(--sm-radius-pill);
	font-size: 12px;
	font-weight: 500;
	color: var(--sm-color-text-muted);
}

.cd-brand__models {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 24px;
	margin: 0;
	padding: 2px 0 18px;
	list-style: none;
}

@media (min-width: 640px) {
	.cd-brand__models {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cd-brand__models li {
	position: relative;
	padding-left: 16px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--sm-color-text-muted);
}

.cd-brand__models li::before {
	content: "";
	position: absolute;
	top: .6em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sm-color-accent);
}

.cd-brand__models li[hidden] {
	display: none;
}

.cd-devices__empty,
.cd-devices__note {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sm-color-text-muted);
}

/* FAQs - same layout as the About page's FAQ section (.about-faq-section);
   only the answers differ, since they may hold several paragraphs. */
.cd-faq .about-faq__answer p {
	margin: 0 0 10px;
}

.cd-faq .about-faq__answer p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   Contact Us page — page-contact.php
   Section order follows skymovo.com's old Contact Us page: title +
   banner, three contact cards, then the map beside the Contact Form 7
   form (the form box overlaps the map on desktop).
   ========================================================= */

/* Hero - same component as the About Us hero (.page-hero.page-split: a
   real <img> in its own column next to the text, airalo.com's layout). */

.contact-center {
	text-align: center;
}

/* Contact information cards. */
.contact-info .page-heading {
	margin-bottom: 32px;
}

.contact-info__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

/* Three across only from 1024px - narrower, the email addresses would
   break mid-word. */
@media (min-width: 1024px) {
	.contact-info__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.contact-card {
	padding: 28px 26px;
	background: #F5F6FA;
	border: 1px solid var(--sm-color-border);
	border-radius: 20px;
	transition: transform .25s ease, box-shadow .25s ease;
}

.contact-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(41, 104, 246, .12);
}

.contact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: var(--sm-color-white);
	color: var(--sm-color-accent);
}

.contact-card__title {
	margin: 0 0 10px;
	font-size: 20px;
}

.contact-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	color: var(--sm-color-text-muted);
}

.contact-card__text a {
	color: var(--sm-color-text);
	word-break: break-word;
}

.contact-card__text a:hover {
	color: var(--sm-color-accent);
}

/* Map + message form. Phones/tablets: heading, form, then the map.
   Desktop: a large map filling the full height beside heading + form. */
.contact-message__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"intro"
		"form"
		"map";
	gap: 24px;
}

.contact-message__intro {
	grid-area: intro;
}

.contact-message__form {
	grid-area: form;
}

.contact-message__map {
	grid-area: map;
}

.contact-message__map iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(23, 23, 28, .08);
}

@media (min-width: 1024px) {
	.contact-message__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"map intro"
			"map form";
		grid-template-rows: auto 1fr;
		column-gap: 40px;
		row-gap: 24px;
	}

	.contact-message__map {
		display: flex;
	}

	.contact-message__map iframe {
		height: auto;
		min-height: 560px;
	}
}

.contact-message__intro .page-media__paragraph {
	max-width: 560px;
}

.contact-message__form .wpcf7 {
	padding: 24px 20px;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(23, 23, 28, .08);
}

@media (min-width: 640px) {
	.contact-message__form .wpcf7 {
		padding: 32px;
	}
}

.contact-message__fallback {
	margin: 0;
	color: var(--sm-color-text-muted);
}

/* Contact Form 7 fields (form markup: .sm-cf7__grid / __field / __actions). */
.sm-cf7__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 640px) {
	.sm-cf7__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sm-cf7__field--full {
		grid-column: 1 / -1;
	}
}

.sm-cf7__field {
	display: block;
}

.sm-cf7 .wpcf7-form-control-wrap {
	display: block;
}

.sm-cf7 input[type="text"],
.sm-cf7 input[type="email"],
.sm-cf7 input[type="tel"],
.sm-cf7 textarea {
	width: 100%;
	padding: 14px 16px;
	background: #F8F9FC;
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	font: inherit;
	font-size: 15px;
	color: var(--sm-color-text);
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.sm-cf7 textarea {
	min-height: 160px;
	resize: vertical;
}

/* Scoped to the same types as the base rule above (not a bare "input:focus")
   so this never matches the submit button - that let its native focus state
   paint a white background on click while .btn--accent's text stayed white,
   making the button go blank until focus moved elsewhere. */
.sm-cf7 input[type="text"]:focus,
.sm-cf7 input[type="email"]:focus,
.sm-cf7 input[type="tel"]:focus,
.sm-cf7 textarea:focus {
	outline: none;
	background: var(--sm-color-white);
	border-color: var(--sm-color-accent);
	box-shadow: 0 0 0 3px rgba(41, 104, 246, .15);
}

/* Repeats the base rule's own input[type="..."] selectors (not just
   ".wpcf7-not-valid") so this unambiguously outranks it on specificity -
   a bare ".wpcf7-not-valid" class ties the base rule's specificity, and the
   tie was resolving in the base rule's favour, which kept text/email/
   country/subject inputs grey on error; only the textarea (whose base rule
   has no attribute selector) showed red. */
.sm-cf7 input[type="text"].wpcf7-not-valid,
.sm-cf7 input[type="email"].wpcf7-not-valid,
.sm-cf7 input[type="tel"].wpcf7-not-valid,
.sm-cf7 textarea.wpcf7-not-valid {
	border-color: #DC2626;
}

.sm-cf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #DC2626;
}

.sm-cf7__actions {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

.sm-cf7 .wpcf7-submit {
	min-width: 200px;
	padding: 14px 28px;
	border: 0;
	font-size: 15px;
	cursor: pointer;
}

.sm-cf7 .wpcf7-submit:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* Spinner shown while sending - sits to the right of the button. */
.sm-cf7 .wpcf7-spinner {
	position: absolute;
	right: 0;
	margin: 0;
}

.sm-cf7 .wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 12px 16px !important;
	border-radius: var(--sm-radius-card);
	font-size: 14.5px;
	text-align: center;
}

.sm-cf7.invalid .wpcf7-response-output,
.sm-cf7.unaccepted .wpcf7-response-output,
.sm-cf7.payment-required .wpcf7-response-output {
	border-color: #F59E0B !important;
	background: #FFFBEB;
	color: #92400E;
}

.sm-cf7.sent .wpcf7-response-output {
	border-color: #16A34A !important;
	background: #F0FDF4;
	color: #166534;
}

.sm-cf7.failed .wpcf7-response-output,
.sm-cf7.aborted .wpcf7-response-output,
.sm-cf7.spam .wpcf7-response-output {
	border-color: #DC2626 !important;
	background: #FEF2F2;
	color: #991B1B;
}

/* =========================================================
   Activate eSIM page — page-activate-esim.php
   Platform tabs → installation method list → one step at a time (phone
   frame with the step's video + numbered checklist + Previous/Next).
   Until main.js marks the section .is-ready (or without JavaScript) every
   platform, method and step is simply listed.
   ========================================================= */

.activate__inner {
	max-width: 840px;
	text-align: center;
}

.activate__title {
	margin: 0 0 12px;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
}

@media (min-width: 640px) {
	.activate__title {
		font-size: 48px;
	}
}

.activate__intro {
	margin: 0 auto 28px;
	max-width: 520px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sm-color-text-muted);
}

/* Android / iOS toggle. */
.activate__tabs {
	display: inline-flex;
	gap: 4px;
	margin-bottom: 36px;
	padding: 4px;
	background: #F5F6FA;
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-pill);
}

.activate:not(.is-ready) .activate__tabs {
	display: none;
}

.activate__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 132px;
	justify-content: center;
	padding: 10px 22px;
	background: none;
	border: 0;
	border-radius: var(--sm-radius-pill);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--sm-color-text-muted);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.activate__tab[aria-selected="true"] {
	background: var(--sm-color-white);
	color: var(--sm-color-text);
	box-shadow: 0 4px 12px rgba(23, 23, 28, .08);
}

.activate__tab:focus-visible {
	outline: 2px solid var(--sm-color-accent);
	outline-offset: 2px;
}

/* Visibility once interactive: one platform, and either its method list
   or one open guide showing one step. */
.activate.is-ready .activate__platform:not(.is-active),
.activate.is-ready .activate__platform.is-guide .activate__methods,
.activate.is-ready .activate__guide:not(.is-open),
.activate.is-ready .activate__step:not(.is-current) {
	display: none;
}

.activate:not(.is-ready) .activate__platform + .activate__platform {
	margin-top: 48px;
	padding-top: 48px;
	border-top: 1px solid var(--sm-color-border);
}

.activate:not(.is-ready) .activate__nav,
.activate:not(.is-ready) .activate__back {
	display: none;
}

/* Method list. */
.activate__list-heading {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
}

.activate__list-text {
	margin: 0 0 24px;
	font-size: 15px;
	color: var(--sm-color-text-muted);
}

.activate__method-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.activate__method {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	background: #F5F6FA;
	border: 1px solid var(--sm-color-border);
	border-radius: var(--sm-radius-card);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--sm-color-text);
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.activate__method:hover,
.activate__method:focus-visible {
	border-color: var(--sm-color-accent);
	background: var(--sm-color-white);
	transform: translateY(-2px);
	outline: none;
}

.activate__method-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--sm-color-white);
	color: var(--sm-color-accent);
}

.activate__method-title {
	flex: 1;
}

.activate__method-chevron {
	flex-shrink: 0;
	color: var(--sm-color-accent);
}

.activate:not(.is-ready) .activate__method-chevron {
	display: none;
}

/* Guide (one method's steps). */
.activate__guide {
	outline: none;
}

.activate:not(.is-ready) .activate__guide {
	margin-top: 40px;
}

.activate__guide-method {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sm-color-accent);
}

.activate__step + .activate__step {
	margin-top: 40px;
}

.activate.is-ready .activate__step + .activate__step {
	margin-top: 0;
}

.activate__step-title {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 800;
}

/* Phone frame around the step video. */
.activate__phone {
	position: relative;
	width: 210px;
	aspect-ratio: 9 / 19;
	margin: 0 auto 28px;
	padding: 8px;
	background: var(--sm-color-text);
	border-radius: 34px;
	box-shadow: 0 24px 48px rgba(23, 23, 28, .18);
}

.activate__phone::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 50%;
	z-index: 1;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: var(--sm-color-text);
}

/* Uploaded recordings usually include their own device frame, so the
   CSS frame is only drawn around the placeholder. */
.activate__phone--video {
	width: 230px;
	aspect-ratio: auto;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.activate__phone--video::before {
	display: none;
}

.activate__phone--video .activate__video {
	height: auto;
	border-radius: 0;
	object-fit: contain;
	background: none;
}

.activate__video,
.activate__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 26px;
	object-fit: cover;
	background: #E7EEFB;
}

.activate__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: linear-gradient(180deg, #EAF1FE 0%, #D6E4FD 100%);
	color: var(--sm-color-accent);
}

.activate__placeholder-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: var(--sm-color-white);
	box-shadow: 0 8px 20px rgba(41, 104, 246, .15);
}

.activate__placeholder-icon svg {
	width: 30px;
	height: 30px;
}

.activate__placeholder-step {
	font-size: 14px;
	font-weight: 700;
}

/* Numbered checklist with a connecting line. */
.activate__checklist {
	display: grid;
	gap: 18px;
	max-width: 440px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	counter-reset: activate-step;
	text-align: left;
}

.activate__checklist li {
	position: relative;
	padding-left: 40px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--sm-color-text);
	counter-increment: activate-step;
}

.activate__checklist li::before {
	content: counter(activate-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--sm-color-accent);
	font-size: 13px;
	font-weight: 700;
	color: var(--sm-color-white);
}

.activate__checklist li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 28px;
	bottom: -18px;
	left: 12px;
	width: 2px;
	background: rgba(41, 104, 246, .25);
}

.activate__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

.activate__nav .btn {
	min-width: 132px;
	padding: 12px 22px;
	font-size: 15px;
	cursor: pointer;
}

.activate__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	padding: 6px 4px;
	background: none;
	border: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--sm-color-accent);
	cursor: pointer;
}

.activate__back:hover {
	text-decoration: underline;
}

/* Answers pulled from the FAQs plugin may hold lists and links. */
.faq-section .about-faq__answer p,
.faq-section .about-faq__answer ol,
.faq-section .about-faq__answer ul {
	margin: 0 0 10px;
}

.faq-section .about-faq__answer > :last-child {
	margin-bottom: 0;
}

.faq-section .about-faq__answer ol,
.faq-section .about-faq__answer ul {
	padding-left: 20px;
}

.faq-section .about-faq__answer li + li {
	margin-top: 4px;
}

.faq-section .about-faq__answer a {
	color: var(--sm-color-accent);
	text-decoration: underline;
}

/* =========================================================
   Legal pages — page-legal.php (Privacy Policy, Terms & Conditions, …)
   Title band + the page's editor content in a readable card.
   ========================================================= */

.legal-hero {
	text-align: center;
	background: linear-gradient(180deg, var(--sm-color-hero-from) 0%, var(--sm-color-white) 100%);
}

.legal-hero .page-hero__title {
	margin-bottom: 10px;
}

.legal-hero__updated {
	margin: 0;
	font-size: 14px;
	color: var(--sm-color-text-muted);
}

.legal__card {
	max-width: 820px;
	margin: 0 auto;
	padding: 28px 22px;
	background: var(--sm-color-white);
	border: 1px solid var(--sm-color-border);
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(23, 23, 28, .05);
}

@media (min-width: 640px) {
	.legal__card {
		padding: 48px 56px;
	}
}

.legal__content {
	font-size: 16px;
	line-height: 1.75;
	color: var(--sm-color-text-muted);
}

.legal__content > :first-child {
	margin-top: 0;
}

.legal__content > :last-child {
	margin-bottom: 0;
}

.legal__content p {
	margin: 0 0 18px;
}

.legal__content h2,
.legal__content h3,
.legal__content h4 {
	margin: 36px 0 12px;
	line-height: 1.3;
	color: var(--sm-color-text);
}

.legal__content h2 {
	font-size: 24px;
}

.legal__content h3 {
	font-size: 20px;
}

.legal__content h4 {
	font-size: 17px;
}

.legal__content strong {
	color: var(--sm-color-text);
}

.legal__content ul,
.legal__content ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.legal__content ul {
	list-style: disc;
}

.legal__content ol {
	list-style: decimal;
}

.legal__content li {
	padding-left: 4px;
}

.legal__content li + li {
	margin-top: 8px;
}

.legal__content li::marker {
	color: var(--sm-color-accent);
}

.legal__content a {
	color: var(--sm-color-accent);
	text-decoration: underline;
	word-break: break-word;
}