/* NXTL v2 modern account overhaul */
:root {
	--nxtl-accent: #ff5e70;
	--nxtl-accent-2: #ff384f;
	--nxtl-surface: #17181d;
	--nxtl-surface-2: #0f1116;
	--nxtl-border: rgba(255, 255, 255, 0.12);
	--nxtl-text: #f5f7fa;
	--nxtl-muted: #aeb5c0;
	--nxtl-success: #3ad68c;
	--nxtl-warning: #f3ba2f;
	--nxtl-danger: #ff6b6b;
	--nxtl-space-1: 8px;
	--nxtl-space-2: 12px;
	--nxtl-space-3: 16px;
	--nxtl-space-4: 20px;
	--nxtl-space-5: 24px;
	--nxtl-radius-sm: 10px;
	--nxtl-radius-md: 14px;
	--nxtl-radius-lg: 18px;
}

.woocommerce-account .woocommerce {
	display: block !important;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 18px 30px;
}

.woocommerce-account #main-header .breadcrumbs,
.woocommerce-account .woocommerce-breadcrumb,
.woocommerce-account .rank-math-breadcrumb,
.woocommerce-account .breadcrumb,
.woocommerce-account .bcn-breadcrumb,
.woocommerce-account .breadcrumbs {
	display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	/* Slim margin-bottom ? was 18-22 which read as a too-big gap above
	   the first dashboard card on standard 1080p monitors. */
	margin: 4px 0 14px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid !important;
	/* Auto-fit grid: pills compress down to 116px before wrapping to a
	   new row. The longest label ("NXTL Tokens") fits comfortably at
	   that width with the 8/14 padding, and 8 pills + 7 gaps ? 10px
	   fit cleanly inside the 1200px container ? no orphan "Profile"
	   pill on a second row at common desktop widths. */
	grid-template-columns: repeat(auto-fit, minmax(min(116px, 100%), 1fr));
	gap: 10px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 12px !important;
	border-radius: 12px;
	text-decoration: none;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	color: #f4f6fa !important;
	border: 1px solid var(--nxtl-border) !important;
	border-bottom: 1px solid var(--nxtl-border) !important;
	background: linear-gradient(160deg, rgba(27, 30, 39, 0.92), rgba(14, 17, 24, 0.94));
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	color: #fff !important;
	border-color: rgba(255, 94, 112, 0.75) !important;
	background: linear-gradient(160deg, rgba(255, 94, 112, 0.36), rgba(255, 56, 79, 0.24));
	box-shadow: 0 10px 18px rgba(255, 56, 79, 0.25);
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form > p,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table,
body.woocommerce-account .woocommerce-MyAccount-content .shop_table,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination,
body.woocommerce-account .woocommerce-MyAccount-content .u-columns {
	border-radius: 14px;
	border: 1px solid var(--nxtl-border) !important;
	background: linear-gradient(165deg, rgba(23, 24, 29, 0.96), rgba(15, 17, 22, 0.98)) !important;
	padding: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td {
	border-color: rgba(255, 255, 255, 0.08) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button,
.woocommerce-account .woocommerce-MyAccount-content input[type='submit'] {
	min-height: 38px;
	padding: 9px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: flex-start;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
	margin: 0 !important;
	min-width: 58px;
	min-height: 36px;
	padding: 8px 14px;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.woocommerce-account .woocommerce-MyAccount-content input[type='text'],
.woocommerce-account .woocommerce-MyAccount-content input[type='email'],
.woocommerce-account .woocommerce-MyAccount-content input[type='password'],
.woocommerce-account .woocommerce-MyAccount-content input[type='number'],
.woocommerce-account .woocommerce-MyAccount-content textarea {
	border-radius: 10px;
}

.nxtl-v2-card-stack {
	display: flex;
	flex-direction: column;
	gap: var(--nxtl-space-5);
	margin-bottom: var(--nxtl-space-5);
}

.nxtl-v2-dashboard.nxtl-v2-card-stack {
	display: flex;
	flex-direction: column;
	gap: var(--nxtl-space-5);
}

.nxtl-v2-card-stack .nxtl-v2-card,
.nxtl-v2-card {
	position: relative;
	margin: 0;
	padding: clamp(24px, 3vw, 32px);
	border-radius: var(--nxtl-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.04);
	background: rgba(255, 255, 255, 0.015);
	box-shadow: none;
}

.nxtl-v2-card::after {
	display: none;
}

.nxtl-v2-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--nxtl-space-2);
	margin-bottom: var(--nxtl-space-2);
}

.nxtl-v2-page-head-content {
	flex: 1 1 auto;
	padding-right: 16px;
}

.nxtl-v2-page-head-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px;
	margin-bottom: 24px;
	border-radius: var(--nxtl-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.04);
	background: rgba(255, 255, 255, 0.015);
	flex-direction: row;
	flex-wrap: wrap;
}

.nxtl-v2-page-head-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--nxtl-space-2);
	flex-wrap: wrap;
	margin-top: 0;
}

.nxtl-v2-hero {
	overflow: hidden;
}

.nxtl-v2-hero .nxtl-v2-kicker {
	margin: 0 0 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--nxtl-accent);
}

.nxtl-v2-hero h2,
.nxtl-v2-page-head h2 {
	margin: 0;
	font-size: clamp(1.95rem, 3vw, 2.45rem);
	line-height: 1.08;
	letter-spacing: -0.024em;
	color: var(--nxtl-text);
}

.nxtl-v2-card h3 {
	margin: 0 0 var(--nxtl-space-3);
	font-size: 1.35rem;
	line-height: 1.22;
	color: var(--nxtl-text);
}

.nxtl-v2-card h4 {
	margin: 0 0 var(--nxtl-space-2);
	font-size: 1.03rem;
	color: var(--nxtl-text);
}

.nxtl-v2-lead,
.nxtl-v2-instruct {
	margin: 6px 0 0;
	max-width: 70ch;
	font-size: 0.96rem;
	line-height: 1.62;
	color: var(--nxtl-muted);
}

.nxtl-v2-inline-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nxtl-space-2);
	margin-top: var(--nxtl-space-3);
}

.nxtl-v2-dashboard-actions {
	/* Inherit-from-parent padding: the wrapping card already provides
	   24-32px of internal padding above the actions, so adding another
	   24px margin-top stacked them ~50px below the pill nav. Set to 0
	   so the actions hug the card's natural top padding. */
	margin-top: 0;
}

.nxtl-v2-quick-buy,
.nxtl-v2-balance-topup-form {
	margin-top: var(--nxtl-space-3);
	padding: var(--nxtl-space-3) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.nxtl-v2-quick-buy > .nxtl-v2-muted,
.nxtl-v2-balance-topup-form > .nxtl-v2-muted {
	margin-top: 12px;
}

.nxtl-v2-action-panel {
	margin-top: 16px;
}

.nxtl-v2-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--nxtl-space-4);
	margin-top: var(--nxtl-space-4);
}

.nxtl-v2-setting-card {
	padding: var(--nxtl-space-3) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nxtl-v2-setting-card:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.nxtl-v2-setting-card h3 {
	margin-bottom: 8px;
}

.nxtl-v2-auto-topup-page .nxtl-v2-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.nxtl-v2-auto-topup-page .nxtl-v2-toggle-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.nxtl-v2-auto-topup-page .nxtl-v2-toggle-copy {
	display: grid;
	gap: 8px;
	flex: 1 1 320px;
}

.nxtl-v2-auto-topup-page .nxtl-v2-toggle-copy strong {
	color: var(--nxtl-text);
	font-size: 1rem;
	margin-bottom: 2px;
}

.nxtl-v2-auto-topup-page .nxtl-v2-toggle-copy small {
	color: var(--nxtl-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

.nxtl-v2-auto-topup-page .nxtl-v2-segmented {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.03);
}

.nxtl-v2-segmented-btn {
	min-height: 40px;
	padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.2);
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
}

.nxtl-v2-segmented-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.25);
}

.nxtl-v2-segmented-btn.is-active {
	color: #fff;
	background: linear-gradient(180deg, var(--nxtl-accent), var(--nxtl-accent-2));
	border-color: var(--nxtl-accent);
	box-shadow: 0 6px 16px rgba(255, 56, 79, 0.25);
}

.nxtl-v2-segmented {
	display: inline-flex;
	gap: 6px;
}

.nxtl-v2-currency-switch {
	margin-top: 12px;
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
}

.nxtl-v2-currency-switch label {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--nxtl-text);
}

.nxtl-v2-currency-switch select {
	min-width: 140px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(9, 10, 14, 0.7);
	color: var(--nxtl-text);
}

/*
 * Site currency selector ([nxtl_v2_currency_selector]).
 *
 * Three layout variants share the `.nxtl-v2-site-currency` root and
 * are differentiated by a BEM modifier:
 *   --inline-flow : sits inside normal flow (footer column / nav bar).
 *   --floating    : fixed to the viewport bottom-right (legacy mode,
 *                   opt-in via shortcode `floating="1"`).
 *
 * And three style variants stacked on top:
 *   --pill   : compact code+chevron button that opens a popover list.
 *   --inline : horizontal row of code chips, one per currency.
 *   --select : native <select> dropdown (accessibility fallback).
 *
 * The previous floating-only widget always set position:fixed on the
 * root, which meant any shortcode placed inside a footer column would
 * teleport to the corner of the viewport. The fixed positioning now
 * only applies when the shortcode opts into floating mode.
 */
.nxtl-v2-site-currency {
	display: inline-block;
	color: var(--nxtl-text, #fff);
}
.nxtl-v2-site-currency--floating {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
}

/* Legacy inner wrapper used only by the original `select` variant
   when rendered as floating. New variants render their own chrome. */
.nxtl-v2-site-currency-inner,
.nxtl-v2-site-currency--floating .nxtl-v2-site-currency__selectbox,
.nxtl-v2-site-currency--floating .nxtl-v2-site-currency__pillbox,
.nxtl-v2-site-currency--floating .nxtl-v2-site-currency__inline {
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: linear-gradient(165deg, rgba(23, 24, 29, 0.95), rgba(15, 17, 22, 0.98));
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
.nxtl-v2-site-currency-inner {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nxtl-v2-site-currency__label,
.nxtl-v2-site-currency-label {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--nxtl-text, #fff);
	white-space: nowrap;
	margin-right: 8px;
}

/* ---------- Style: pill ---------- */
.nxtl-v2-site-currency__pillbox {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.nxtl-v2-site-currency__pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px 6px 9px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.nxtl-v2-site-currency__pill:hover,
.nxtl-v2-site-currency__pill:focus-visible {
	border-color: var(--nxtl-accent, #f44b60);
	background: rgba(244, 75, 96, 0.10);
	color: var(--nxtl-text, #fff);
	outline: none;
}
.nxtl-v2-site-currency__pill[aria-expanded="true"] {
	border-color: var(--nxtl-accent, #f44b60);
	background: rgba(244, 75, 96, 0.10);
}
.nxtl-v2-site-currency__pill-symbol {
	font-weight: 700;
	color: var(--nxtl-accent, #f44b60);
	font-size: 14px;
	line-height: 1;
	min-width: 8px;
	text-align: center;
}
.nxtl-v2-site-currency__pill-code {
	letter-spacing: 0.04em;
}
.nxtl-v2-site-currency__pill-chev {
	margin-left: 1px;
	opacity: 0.7;
	transition: transform 120ms ease;
}
.nxtl-v2-site-currency__pill[aria-expanded="true"] .nxtl-v2-site-currency__pill-chev {
	transform: rotate(180deg);
	opacity: 1;
}

.nxtl-v2-site-currency__panel {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	z-index: 50;
	min-width: 220px;
	max-height: 280px;
	overflow-y: auto;
	padding: 6px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: linear-gradient(165deg, rgba(23, 24, 29, 0.98), rgba(15, 17, 22, 0.99));
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
/* When the pill is rendered very close to the top of its container
   (e.g. sticky header), align the panel below the pill instead of
   above so it does not get clipped by the viewport. The author can
   force this via `data-nxtl-currency-widget="pill"` plus a parent
   class — handled by JS in a later pass; for now the default places
   it above the pill, which is the right call for footer placement. */
.nxtl-v2-site-currency--inline-flow .nxtl-v2-site-currency__panel {
	bottom: calc(100% + 8px);
}
.nxtl-v2-site-currency__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nxtl-v2-site-currency__option {
	display: grid;
	grid-template-columns: 18px auto 1fr 14px;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	font-size: 13px;
	transition: background 100ms ease, color 100ms ease;
}
.nxtl-v2-site-currency__option:hover,
.nxtl-v2-site-currency__option:focus-visible {
	background: rgba(255, 255, 255, 0.04);
	color: var(--nxtl-text, #fff);
	outline: none;
}
.nxtl-v2-site-currency__option.is-current {
	background: rgba(244, 75, 96, 0.10);
	color: #fff;
}
.nxtl-v2-site-currency__option-symbol {
	font-weight: 700;
	color: var(--nxtl-accent, #f44b60);
	text-align: center;
	font-size: 13px;
}
.nxtl-v2-site-currency__option-code {
	font-weight: 700;
	letter-spacing: 0.04em;
}
.nxtl-v2-site-currency__option-name {
	color: rgba(255, 255, 255, 0.6);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nxtl-v2-site-currency__option-check {
	color: var(--nxtl-accent, #f44b60);
}

/* ---------- Style: inline (chip row) ---------- */
.nxtl-v2-site-currency__inline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
}
.nxtl-v2-site-currency__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	padding: 4px 9px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.nxtl-v2-site-currency__chip:hover,
.nxtl-v2-site-currency__chip:focus-visible {
	border-color: var(--nxtl-accent, #f44b60);
	color: var(--nxtl-text, #fff);
	background: rgba(244, 75, 96, 0.08);
	outline: none;
}
.nxtl-v2-site-currency__chip.is-current {
	background: var(--nxtl-accent, #f44b60);
	color: #fff;
	border-color: var(--nxtl-accent, #f44b60);
}

/* ---------- Style: select ---------- */
.nxtl-v2-site-currency__selectbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.nxtl-v2-site-currency__selectbox select,
.nxtl-v2-site-currency select {
	min-width: 165px;
	padding: 9px 11px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(9, 10, 14, 0.7);
	color: var(--nxtl-text, #fff);
}

.nxtl-v2-quick-buy label,
.nxtl-v2-balance-topup-form label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--nxtl-text);
}

.nxtl-v2-quick-buy input[type='number'],
.nxtl-v2-balance-topup-form input[type='number'] {
	min-width: 140px;
	max-width: 180px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	background: rgba(9, 10, 14, 0.7);
	color: var(--nxtl-text);
}

.nxtl-v2-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: var(--nxtl-space-4);
}
.nxtl-v2-summary-tip {
	margin: var(--nxtl-space-3) 0;
}

.nxtl-v2-step-grid,
.nxtl-v2-tier-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--nxtl-space-4);
	margin-top: var(--nxtl-space-3);
}

.nxtl-v2-step,
.nxtl-v2-tier-card {
	padding: 0;
	border: 0;
	background: transparent;
}

.nxtl-v2-step h4,
.nxtl-v2-tier-card h4 {
	margin: 0 0 8px;
}

.nxtl-v2-step p,
.nxtl-v2-tier-card p {
	margin: 0;
	color: var(--nxtl-muted);
	font-size: 0.9rem;
	line-height: 1.55;
}

.nxtl-v2-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-bottom: 10px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(180deg, var(--nxtl-accent), var(--nxtl-accent-2));
}

.nxtl-v2-balance-amount {
	margin: 24px 0 12px;
	font-size: clamp(2.4rem, 5vw, 3.2rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--nxtl-accent);
}

.nxtl-v2-summary-line {
	margin: 4px 0;
	font-size: 0.95rem;
	color: #dbe0e9;
}

.nxtl-v2-esim-summary-card .nxtl-v2-muted {
	margin: var(--nxtl-space-3) 0;
}

.nxtl-v2-muted {
	color: var(--nxtl-muted);
	font-size: 0.88rem;
}

.nxtl-v2-line-status {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.nxtl-v2-line-status li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 12px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(255, 255, 255, 0.02);
}

.nxtl-v2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 9px 14px;
	border-radius: 10px;
	border: 0;
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.nxtl-v2-btn:hover {
	transform: translateY(-1px);
}

.nxtl-v2-btn-primary {
	color: #fff !important;
	background: linear-gradient(180deg, var(--nxtl-accent), var(--nxtl-accent-2));
	box-shadow: 0 10px 20px rgba(255, 56, 79, 0.28);
}

.nxtl-v2-btn-outline {
	color: var(--nxtl-text) !important;
	background: rgba(255, 255, 255, 0.01);
	border: 1px solid rgba(255, 255, 255, 0.26);
}

.nxtl-v2-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.nxtl-v2-badge-ready,
.nxtl-v2-badge-in-service {
	background: rgba(58, 214, 140, 0.2);
	color: #a4f3cb;
}

.nxtl-v2-badge-pending,
.nxtl-v2-badge-provisioning,
.nxtl-v2-badge-preparing,
.nxtl-v2-badge-pre-service {
	background: rgba(243, 186, 47, 0.18);
	color: #ffe6a2;
}

.nxtl-v2-badge-suspended {
	background: rgba(110, 138, 168, 0.22);
	color: #cfe0ff;
}

.nxtl-v2-badge-terminated {
	background: rgba(120, 120, 120, 0.22);
	color: #d8d8d8;
}

.nxtl-v2-badge-failed {
	background: rgba(255, 107, 107, 0.2);
	color: #ffd0d0;
}

.nxtl-v2-esims {
	display: grid;
	gap: var(--nxtl-space-3);
}

.nxtl-v2-toolbar {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.03);
}

.nxtl-v2-toolbar a {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	color: #dce1ea;
}

.nxtl-v2-toolbar a.active {
	color: #fff;
	background: rgba(255, 94, 112, 0.24);
	border-color: rgba(255, 94, 112, 0.65);
}

.nxtl-v2-esim-grid {
	display: grid;
	/* `minmax(min(440px, 100%), 1fr)` lets each card try for a 440px
	   minimum BUT collapses to 100% of the container when the viewport
	   is narrower than that. Using a hard 440px minimum (the previous
	   value) forced every card to be ?440px wide on phones, blowing the
	   layout out past the viewport on anything under 460-ish CSS px and
	   making the QR/activation/Exchange button row scroll horizontally. */
	grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
	gap: 18px;
}

@media (min-width: 1400px) {
	.nxtl-v2-esim-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
	}
}

.nxtl-v2-esim-list {
	display: grid;
	gap: 12px;
}

.nxtl-v2-esim-list .nxtl-v2-esim-card {
	max-width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 0;
	align-items: start;
}

.nxtl-v2-esim-list .nxtl-v2-esim-card.nxtl-v2-esim-no-qr {
	grid-template-columns: 1fr;
}

.nxtl-v2-esim-list .nxtl-v2-esim-head,
.nxtl-v2-esim-list .nxtl-v2-esim-meta,
.nxtl-v2-esim-list .nxtl-v2-copy-block,
.nxtl-v2-esim-list .nxtl-v2-esim-foot,
.nxtl-v2-esim-list .nxtl-v2-esim-card > .nxtl-v2-muted {
	grid-column: 1;
}

.nxtl-v2-esim-list .nxtl-v2-qr-wrap {
	grid-column: 1;
	grid-row: auto;
	margin: 0;
	position: static;
}

.nxtl-v2-esim-details {
	margin-top: var(--nxtl-space-4);
	padding-top: var(--nxtl-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.nxtl-v2-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.nxtl-v2-detail-grid p {
	margin: 0;
}

.nxtl-v2-activity-list {
	list-style: none;
	margin: 10px 0 12px;
	padding: 0;
	display: grid;
	gap: 8px;
}

.nxtl-v2-activity-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	font-size: 0.86rem;
	color: var(--nxtl-muted);
}

.nxtl-v2-esim-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: var(--nxtl-space-3);
	padding-bottom: var(--nxtl-space-3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Left cluster: checkbox + nickname ? wrapped together so space-between
   only distributes between left-cluster and right-cluster (badge + Exchange).
   Without this wrapper the nickname becomes a 3rd flex child and gets
   centred in the middle of the row, leaving an awkward gap on the left. */
.nxtl-v2-esim-head-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}

h4.nxtl-v2-esim-head-name {
	margin: 0;
	min-width: 0;
	flex: 1 1 auto;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--nxtl-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nxtl-v2-esim-head-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* --- Custom card-select checkbox (grid view) ---
   Checkbox now lives INSIDE the .nxtl-v2-esim-head flex row directly to the
   left of the nickname. Inline positioning means notices, errors, or any
   future content prepended to the card cannot push the control out of place
   relative to the title ? it always reads as the nickname's selection
   control. */
.nxtl-v2-esim-select-wrap {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.nxtl-v2-esim-select-wrap .nxtl-v2-esim-select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.nxtl-v2-esim-select-box {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 7px;
	background: rgba(9, 10, 14, 0.85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.nxtl-v2-esim-select-box::after {
	content: "";
	width: 10px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -2px);
	opacity: 0;
	transition: opacity 0.12s ease;
}

.nxtl-v2-esim-select-wrap:hover .nxtl-v2-esim-select-box {
	border-color: var(--nxtl-accent);
	transform: scale(1.06);
}

.nxtl-v2-esim-select-wrap:has(.nxtl-v2-esim-select:checked) .nxtl-v2-esim-select-box {
	border-color: var(--nxtl-accent);
	background: linear-gradient(180deg, var(--nxtl-accent), var(--nxtl-accent-2));
	box-shadow: 0 4px 14px rgba(255, 56, 79, 0.4);
}

.nxtl-v2-esim-select-wrap:has(.nxtl-v2-esim-select:checked) .nxtl-v2-esim-select-box::after {
	opacity: 1;
}

.nxtl-v2-esim-select-wrap:focus-within .nxtl-v2-esim-select-box {
	outline: 2px solid rgba(255, 94, 112, 0.5);
	outline-offset: 2px;
}

/* Reveal the checkbox when:
 *  - the card is hovered,
 *  - the checkbox itself is focused,
 *  - this card is already checked (stay visible),
 *  - ANY card in the grid is checked (selection mode across all cards).
 */
.nxtl-v2-esim-card:hover .nxtl-v2-esim-select-wrap,
.nxtl-v2-esim-select-wrap:focus-within,
.nxtl-v2-esim-select-wrap:has(.nxtl-v2-esim-select:checked),
#nxtl-v2-esim-results.nxtl-v2-esim-grid:has(.nxtl-v2-esim-select:checked) .nxtl-v2-esim-select-wrap {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.nxtl-v2-esim-main-grid {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"qr  info"
		"qrb info";
	gap: 12px 20px;
	align-items: start;
	margin-bottom: var(--nxtl-space-3);
}

.nxtl-v2-esim-main-grid > .nxtl-v2-qr-wrap {
	grid-area: qr;
}

.nxtl-v2-esim-main-grid > .nxtl-v2-esim-qr-actions {
	grid-area: qrb;
	justify-self: start;
	max-width: 146px;
}

.nxtl-v2-esim-main-grid > .nxtl-v2-esim-qr-actions .nxtl-v2-btn {
	width: 100%;
	justify-content: center;
}

.nxtl-v2-esim-main-grid > .nxtl-v2-esim-info-grid {
	grid-area: info;
	display: flex;
	flex-direction: column;
	gap: var(--nxtl-space-3);
	min-width: 0;
}

.nxtl-v2-esim-install-block,
.nxtl-v2-esim-manage-card {
	padding: 0;
	border: 0;
	background: transparent;
}

.nxtl-v2-esim-install-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--nxtl-space-3);
}

.nxtl-v2-install-kicker {
	margin: 0 0 8px;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nxtl-accent);
}

.nxtl-v2-esim-install-copy h5 {
	margin: 0 0 8px;
	font-size: 1.02rem;
	color: var(--nxtl-text);
}

.nxtl-v2-esim-install-copy p {
	margin: 0;
	color: var(--nxtl-muted);
	font-size: 0.9rem;
	line-height: 1.55;
}

.nxtl-v2-esim-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px 14px;
	margin: 0;
}

.nxtl-v2-esim-meta p {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	min-width: 0;
}

.nxtl-v2-esim-meta .nxtl-v2-muted {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nxtl-muted);
	margin-bottom: 2px;
}

.nxtl-v2-esim-meta strong,
.nxtl-v2-esim-meta code {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: var(--nxtl-text);
}

.nxtl-v2-esim-meta code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	color: #ffa7b2;
	letter-spacing: 0.02em;
}

.nxtl-v2-lifecycle-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: var(--nxtl-space-3);
	padding-top: var(--nxtl-space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 600px) {
	.nxtl-v2-lifecycle-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.nxtl-v2-lifecycle-actions .nxtl-v2-btn {
		width: 100%;
		justify-content: center;
	}
	.nxtl-v2-bulk-actions {
		flex-direction: column;
		align-items: stretch !important;
	}
	.nxtl-v2-bulk-group {
		flex-wrap: wrap;
	}
}

.nxtl-v2-manage-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--nxtl-space-3);
	margin-top: var(--nxtl-space-3);
	padding-top: var(--nxtl-space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.nxtl-v2-inline-form {
	padding: 0;
	border: 0;
	background: transparent;
	min-width: 0;
}

.nxtl-v2-inline-form .nxtl-v2-muted {
	margin-top: 8px;
}

.nxtl-v2-inline-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nxtl-muted);
}

.nxtl-v2-inline-row {
	display: flex;
	align-items: stretch;
	gap: 6px;
	min-width: 0;
}

.nxtl-v2-inline-form input[type='text'],
.nxtl-v2-inline-form select {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(9, 12, 17, 0.78);
	color: #fff;
	font-size: 13px;
}

.nxtl-v2-inline-row .nxtl-v2-btn {
	min-height: 36px;
	height: 36px;
	padding: 0 12px;
	font-size: 0.72rem;
	flex: 0 0 auto;
}

.nxtl-v2-qr-wrap {
	margin: 0;
	padding: 6px;
	width: 146px;
	height: 146px;
	box-sizing: border-box;
	border-radius: var(--nxtl-radius-md);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

#nxtl-v2-esims-root.nxtl-v2-loading {
	opacity: 0.65;
	pointer-events: none;
}

.nxtl-v2-qr-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 6px;
	border: 0;
}

.nxtl-v2-copy-block {
	margin: 0;
	padding: 0;
	border-top: 0;
}

.nxtl-v2-copy-block > .nxtl-v2-muted {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nxtl-muted);
	margin-bottom: 4px;
}

.nxtl-v2-copy-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-top: 4px;
}

.nxtl-v2-copy-row .nxtl-v2-copy-field {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	padding: 0 12px;
	font-size: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	color: #ffd3d8;
	background: rgba(9, 12, 17, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
}

.nxtl-v2-copy-row .nxtl-v2-btn {
	height: 36px;
	min-height: 36px;
	padding: 0 14px;
	font-size: 0.75rem;
	flex: 0 0 auto;
}

.nxtl-v2-share-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nxtl-v2-share-row .nxtl-v2-share-label {
	margin-right: 4px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nxtl-muted);
}

.nxtl-v2-share-row .nxtl-v2-btn {
	flex: 0 0 auto;
	font-size: 0.78rem;
}

@media (max-width: 640px) {
	.nxtl-v2-share-row {
		justify-content: flex-start;
	}
	.nxtl-v2-share-row .nxtl-v2-share-label {
		flex: 1 0 100%;
		margin-bottom: 2px;
	}
}

.nxtl-v2-copy-field {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(9, 12, 17, 0.78);
	color: #fff;
}

.nxtl-v2-btn-xs {
	min-height: 38px;
	padding: 0 12px;
	font-size: 0.75rem;
}

.nxtl-v2-esim-foot {
	margin-top: var(--nxtl-space-4);
	padding-top: var(--nxtl-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.nxtl-v2-empty {
	text-align: center;
	padding: 36px 24px;
}

.nxtl-v2-empty h3 {
	margin: 0;
}

.nxtl-v2-token-chip {
	padding: 7px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #ffe7eb;
	border: 1px solid rgba(255, 94, 112, 0.55);
	background: rgba(255, 94, 112, 0.2);
}

.nxtl-v2-auto-topup-page label,
#nxtl-v2-token-redeem label,
#nxtl-v2-token-p2p label,
.nxtl-v2-setting-card > label {
	display: block;
	margin-bottom: 12px;
	font-size: 0.89rem;
	font-weight: 600;
	color: #d7dee9;
}

.nxtl-v2-setting-card .nxtl-v2-notice {
	margin-top: var(--nxtl-space-3);
}

#nxtl-v2-auto-topup-form p,
#nxtl-v2-token-redeem p,
#nxtl-v2-token-p2p p {
	margin-bottom: 14px;
}

.nxtl-v2-auto-topup-page input[type='number'],
#nxtl-v2-token-redeem input[type='number'],
#nxtl-v2-token-p2p input[type='number'],
#nxtl-v2-token-p2p input[type='email'],
.nxtl-v2-ref-link {
	width: 100%;
	max-width: 100%;
	height: 42px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(9, 10, 14, 0.7);
	color: #fff;
	font-size: 1rem;
}

.nxtl-v2-auto-topup-page select {
	width: 100%;
	max-width: 100%;
	height: 42px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(9, 10, 14, 0.7);
	color: #fff;
	font-size: 1rem;
}

.nxtl-v2-help {
	margin-top: 2px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(56, 189, 248, 0.27);
	background: rgba(8, 47, 73, 0.22);
	color: #dbeafe;
}

.nxtl-v2-help a {
	color: #9ed2ff;
}

.nxtl-v2-notice {
	padding: 10px 12px;
	border-radius: 10px;
	margin-bottom: 10px;
	font-size: 0.9rem;
}

.nxtl-v2-notice-success {
	border: 1px solid rgba(58, 214, 140, 0.44);
	background: rgba(20, 83, 45, 0.35);
	color: #bbf7d0;
}

.nxtl-v2-notice-error {
	border: 1px solid rgba(255, 107, 107, 0.52);
	background: rgba(127, 29, 29, 0.36);
	color: #fecaca;
}

.nxtl-v2-ref-table-wrap {
	overflow-x: auto;
	margin-top: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.02);
}

.nxtl-v2-ref-table {
	width: 100%;
	border-collapse: collapse;
}

.nxtl-v2-ref-table th,
.nxtl-v2-ref-table td {
	padding: 12px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	text-align: left;
	font-size: 0.86rem;
	vertical-align: middle;
	color: rgba(255, 255, 255, 0.92);
}

#nxtl-v2-balance-history-table .nxtl-v2-ref-table {
	background: rgba(0, 0, 0, 0.15);
	border-radius: var(--nxtl-radius-md);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

#nxtl-v2-balance-history-table .nxtl-v2-ref-table td {
	color: rgba(255, 255, 255, 0.9);
}

#nxtl-v2-balance-history-table .nxtl-v2-muted {
	color: rgba(255, 255, 255, 0.55);
}

.nxtl-v2-ref-table th {
	color: #dce1ea;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.03);
}

.nxtl-v2-section-title {
	margin-top: 18px;
}

.nxtl-v2-esim-simple-table code {
	font-size: 11px;
	word-break: break-all;
}

.nxtl-v2-esim-simple-table td,
.nxtl-v2-esim-simple-table th {
	white-space: nowrap;
}

.nxtl-v2-esim-simple-table td:first-child,
.nxtl-v2-esim-simple-table th:first-child {
	min-width: 150px;
}

.woocommerce-account .woocommerce-MyAccount-content #payment .wc_payment_methods {
	margin: var(--nxtl-space-2) 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods {
	padding: 0;
	margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods li {
	display: block !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	border-radius: 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	background: rgba(255, 255, 255, 0.02) !important;
	text-align: left !important;
	transition: all 0.2s ease !important;
	overflow: hidden !important;
	position: relative !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods li::before {
	display: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods li.is-active {
	border-color: rgba(255, 94, 112, 0.65) !important;
	background: rgba(255, 94, 112, 0.04) !important;
	box-shadow: 0 0 0 1px rgba(255, 94, 112, 0.18) inset !important;
}

/* Remove radio button visuals and use card style */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods li > label,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods li > input[type='radio'] + label,
body.woocommerce-account .woocommerce-MyAccount-content #payment .wc_payment_methods li > label,
body.woocommerce-account .woocommerce-MyAccount-content #payment .wc_payment_methods li > input[type='radio'] + label {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	text-align: left !important;
	padding: 16px 20px !important;
	margin: 0 !important;
	cursor: pointer !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: #f5f7fa !important;
	width: 100% !important;
	box-sizing: border-box !important;
	line-height: 1.4 !important;
	min-height: 60px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods input[type='radio'],
body.woocommerce-account .woocommerce-MyAccount-content #payment .wc_payment_methods input[type='radio'] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods input[name='payment_method'],
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod input[name='payment_method'] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods li > label::before,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods li > input[type='radio'] + label::before,
body.woocommerce-account .woocommerce-PaymentMethods li > label::after,
body.woocommerce-account .woocommerce-PaymentMethods li > input[type='radio'] + label::after,
body.woocommerce-account .woocommerce-MyAccount-content #payment .wc_payment_methods li > label::before,
body.woocommerce-account .woocommerce-MyAccount-content #payment .wc_payment_methods li > input[type='radio'] + label::before,
body.woocommerce-account .woocommerce-MyAccount-content #payment .wc_payment_methods li > label::after,
body.woocommerce-account .woocommerce-MyAccount-content #payment .wc_payment_methods li > input[type='radio'] + label::after {
	display: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box,
body.woocommerce-account .woocommerce-MyAccount-content #payment .payment_box {
	background: transparent !important;
	padding: 0 20px 20px !important;
	margin: 0 !important;
	border-top: 0 !important;
	font-size: 13px !important;
	color: #aeb5c0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box::before,
body.woocommerce-account .woocommerce-MyAccount-content #payment .payment_box::before {
	display: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods li > label img,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods li > input[type='radio'] + label img,
body.woocommerce-account .woocommerce-MyAccount-content #payment .wc_payment_methods li > label img {
	margin-left: auto !important;
	max-height: 24px !important;
	display: block !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	max-width: 120px !important;
	flex-shrink: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box label,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box legend {
	color: #d7dee9 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	margin-bottom: 6px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box input[type='text'],
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box input[type='tel'],
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box input[type='email'],
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box select,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box .wc-stripe-elements-field,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box .StripeElement,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box .ppcp-hosted-field {
	width: 100% !important;
	background: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	color: #111111 !important;
	-webkit-text-fill-color: #111111 !important;
	font-size: 14px !important;
	box-sizing: border-box !important;
	min-height: 44px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box input[type='text']::placeholder,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box input[type='tel']::placeholder,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box input[type='email']::placeholder {
	color: #6b7280 !important;
	opacity: 1 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box input[type='text']:-webkit-autofill,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box input[type='tel']:-webkit-autofill,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box input[type='email']:-webkit-autofill {
	-webkit-text-fill-color: #111111 !important;
	transition: background-color 99999s ease-out 0s !important;
	box-shadow: 0 0 0 1000px #ffffff inset !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box .ppcp-hosted-field {
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	overflow: hidden !important;
	background: #ffffff !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods .payment_box .ppcp-hosted-field iframe {
	border: 0 !important;
	background: transparent !important;
	padding: 0 14px !important;
	height: 100% !important;
}

body.woocommerce-account .woocommerce-MyAccount-content #wc-ppcp-credit-card-gateway-cc-form,
body.woocommerce-account .woocommerce-MyAccount-content #wc-ppcp-credit-card-gateway-cc-form .form-row {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content #ppcp-credit-card-gateway-card-number,
body.woocommerce-account .woocommerce-MyAccount-content #ppcp-credit-card-gateway-card-expiry,
body.woocommerce-account .woocommerce-MyAccount-content #ppcp-credit-card-gateway-card-cvc {
	background: #ffffff !important;
	color: #111111 !important;
	-webkit-text-fill-color: #111111 !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	box-shadow: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content #ppcp-credit-card-gateway-card-number iframe,
body.woocommerce-account .woocommerce-MyAccount-content #ppcp-credit-card-gateway-card-expiry iframe,
body.woocommerce-account .woocommerce-MyAccount-content #ppcp-credit-card-gateway-card-cvc iframe {
	background: transparent !important;
}

form#add_payment_method .form-row,
.woocommerce-AddPaymentMethod .form-row {
	padding: 0 !important;
	margin: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod {
	text-align: left !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method .form-row:last-child,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .form-row:last-child {
	margin-top: 20px !important;
	display: flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method .button,
body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod button[type="submit"] {
	width: auto !important;
	min-width: 220px !important;
	border-radius: 12px !important;
	background: linear-gradient(160deg, #ff5e70, #ff384f) !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 16px 24px !important;
	border: 0 !important;
	font-size: 16px !important;
	box-shadow: 0 10px 20px rgba(255, 56, 79, 0.28) !important;
	cursor: pointer !important;
	transition: transform 0.15s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method button[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod button[type="submit"]:hover {
	transform: translateY(-1px) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method #payment:has(li.payment_method_ppcp-gateway input:checked) #place_order,
body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method #payment:has(li.payment_method_paypal input:checked) #place_order {
	display: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method #payment:has(li.payment_method_ppcp-credit-card-gateway input:checked) #place_order {
	display: inline-flex !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .payment_box .ppcp-hosted-field,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .payment_box .StripeElement,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .payment_box .wc-stripe-elements-field {
	background: rgba(9, 12, 17, 0.78) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 10px !important;
	color: #111 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .payment_box .ppcp-hosted-field iframe {
	background: transparent !important;
	border: 0 !important;
	padding: 0 14px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .payment_box .paypal-button-container,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .payment_box .ppc-button-wrapper,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .payment_box [data-funding-source],
body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method .payment_box .paypal-button-container,
body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method .payment_box .ppc-button-wrapper,
body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method .payment_box [data-funding-source] {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 100% !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method .payment_box .paypal-button-container,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-AddPaymentMethod .payment_box .paypal-button-container {
	width: min(420px, 100%) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form#add_payment_method.nxtl-paypal-selected #place_order {
	display: none !important;
}

.woocommerce-checkout .nxtl-v2-checkout-shell {
	margin: 0 0 16px;
}

body.nxtl-v2-modal-open {
	overflow: hidden;
}

.nxtl-v2-modal[hidden] {
	display: none !important;
}

.nxtl-v2-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
}

.nxtl-v2-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 10, 16, 0.78);
}

		.nxtl-v2-modal-dialog {
			position: relative;
			z-index: 2;
			width: min(720px, calc(100vw - 32px));
			height: min(88vh, 760px);
			border-radius: 16px;
			border: 1px solid rgba(255, 255, 255, 0.12);
			background: #11131a;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.nxtl-v2-modal-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			padding: 16px 20px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		}

		.nxtl-v2-modal-head h3 {
			margin: 0;
			font-size: 1.1rem;
			font-weight: 700;
			color: var(--nxtl-text);
		}

		.nxtl-v2-modal-body {
			flex: 1 1 auto;
			display: flex;
			flex-direction: column;
			padding: 0;
			gap: 0;
			min-height: 0;
			position: relative;
		}

		.nxtl-v2-modal-loading-text {
			position: absolute;
			top: 20px;
			left: 20px;
			margin: 0;
			z-index: 1;
		}

		.nxtl-v2-modal-body iframe {
			flex: 1 1 auto;
			width: 100%;
			border: 0;
			border-radius: 0 0 16px 16px;
			background: transparent;
			min-height: 0;
			position: relative;
			z-index: 2;
		}

@media (max-width: 980px) {
	.nxtl-v2-page-head,
	.nxtl-v2-page-head-panel {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.nxtl-v2-page-head-actions {
		justify-content: flex-start;
		margin-top: 12px;
	}

	.nxtl-v2-esim-meta {
		grid-template-columns: 1fr;
	}

	.nxtl-v2-manage-grid {
		grid-template-columns: 1fr;
	}

	.nxtl-v2-esim-list .nxtl-v2-esim-card {
		grid-template-columns: 1fr;
	}

	.nxtl-v2-esim-list .nxtl-v2-esim-head,
	.nxtl-v2-esim-list .nxtl-v2-esim-meta,
	.nxtl-v2-esim-list .nxtl-v2-copy-block,
	.nxtl-v2-esim-list .nxtl-v2-esim-foot,
	.nxtl-v2-esim-list .nxtl-v2-esim-card > .nxtl-v2-muted,
	.nxtl-v2-esim-list .nxtl-v2-qr-wrap {
		grid-column: auto;
		grid-row: auto;
		position: static;
	}
}

@media (max-width: 640px) {
	.woocommerce-account .woocommerce {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* On mobile, switch the account navigation from a 2-column grid (which
	   eats ~280px of vertical space before the first card) to a horizontally
	   scrollable chip rail. All sections stay visible/discoverable, the
	   active item snaps into view, and the page content sits ~80px from
	   the top of the screen ? matching modern mobile dashboards (Stripe,
	   GitHub, Linear). */
	.nxtl-v2-account-nav-wrap {
		position: relative;
		margin: 0 -12px 14px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin: 0 !important;
		padding: 0 12px !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex !important;
		grid-template-columns: none !important;
		flex-wrap: nowrap;
		gap: 8px;
		padding-right: 32px !important; /* leaves room for the right chevron affordance */
		width: max-content;
		min-width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		min-height: 38px;
		padding: 8px 16px !important;
		font-size: 13px !important;
		white-space: nowrap;
		border-radius: 999px;
	}

	/* --- Scroll-affordance buttons (real clickable chevrons) -------------
	   Two real <button> elements injected by JS sit on the wrapper's left
	   and right edges. Tapping them scrolls the rail one "page" in that
	   direction. They visually combine a fade gradient with a chevron
	   icon so they read as both a "more this way" affordance and an
	   actionable control. Visibility is driven by `data-can-scroll-left`
	   and `data-can-scroll-right` on the wrapper. */
	.nxtl-v2-account-nav-wrap {
		isolation: isolate;
	}

	.nxtl-v2-account-nav-arrow {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		border: 0;
		color: #fff;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		transform: translateY(0);
		transition: opacity 0.18s ease, visibility 0.18s ease, background-color 0.18s ease;
		z-index: 3;
		-webkit-tap-highlight-color: transparent;
		appearance: none;
		-webkit-appearance: none;
		font-size: 0;
		line-height: 0;
	}

	.nxtl-v2-account-nav-arrow:focus-visible {
		outline: 2px solid var(--nxtl-accent);
		outline-offset: -4px;
	}

	.nxtl-v2-account-nav-arrow svg {
		width: 14px;
		height: 22px;
		display: block;
		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
	}

	.nxtl-v2-account-nav-arrow--prev {
		left: 0;
		background: linear-gradient(to right, #0b0d12 0, #0b0d12 18px, rgba(11, 13, 18, 0.65) 60%, transparent 100%);
		justify-content: flex-start;
		padding-left: 10px;
	}

	.nxtl-v2-account-nav-arrow--next {
		right: 0;
		background: linear-gradient(to left, #0b0d12 0, #0b0d12 18px, rgba(11, 13, 18, 0.65) 60%, transparent 100%);
		justify-content: flex-end;
		padding-right: 10px;
	}

	.nxtl-v2-account-nav-arrow:active {
		background-color: rgba(255, 94, 112, 0.18);
	}

	.nxtl-v2-account-nav-wrap[data-can-scroll-left="true"] .nxtl-v2-account-nav-arrow--prev {
		opacity: 1;
		visibility: visible;
	}

	.nxtl-v2-account-nav-wrap[data-can-scroll-right="true"] .nxtl-v2-account-nav-arrow--next {
		opacity: 1;
		visibility: visible;
	}

	/* Subtle pulse on the right chevron until the user has interacted.
	   Stopped immediately on first scroll/tap. */
	.nxtl-v2-account-nav-wrap[data-needs-hint="true"][data-can-scroll-right="true"] .nxtl-v2-account-nav-arrow--next svg {
		animation: nxtl-v2-nav-hint-pulse 1.6s ease-in-out infinite;
	}

	@keyframes nxtl-v2-nav-hint-pulse {
		0%, 100% { transform: translateX(0); }
		50%      { transform: translateX(-3px); }
	}

	/* One-time "peek" animation that briefly scrolls the rail to teach
	   the gesture. Triggered by the JS adding the `is-peeking` class on
	   first session visit. We animate the inner <ul> so the smooth
	   transform doesn't fight the scroll snapping on the parent. */
	.nxtl-v2-account-nav-wrap.is-peeking .woocommerce-MyAccount-navigation ul {
		animation: nxtl-v2-nav-peek 1100ms cubic-bezier(0.4, 0, 0.2, 1) 1;
	}

	@keyframes nxtl-v2-nav-peek {
		0%   { transform: translateX(0); }
		35%  { transform: translateX(-46px); }
		70%  { transform: translateX(-46px); }
		100% { transform: translateX(0); }
	}

	@media (prefers-reduced-motion: reduce) {
		.nxtl-v2-account-nav-wrap.is-peeking .woocommerce-MyAccount-navigation ul,
		.nxtl-v2-account-nav-wrap[data-needs-hint="true"][data-can-scroll-right="true"] .nxtl-v2-account-nav-arrow--next svg {
			animation: none !important;
		}
	}

	.nxtl-v2-form-grid {
		grid-template-columns: 1fr;
	}

	.nxtl-v2-copy-row {
		flex-direction: column;
		align-items: stretch;
	}

	.nxtl-v2-inline-row {
		flex-direction: column;
		align-items: stretch;
	}

	/* --- Mobile orders list -------------------------------------------
	   WooCommerce's "responsive" shop_table stacks each <td> into a
	   label/value row but does no visual grouping, so consecutive orders
	   blur into one another (see screenshot: four orders look like a
	   single tall list of rows). We turn each <tr> into its own dark
	   card with breathing room between orders, hide the redundant
	   "Actions:" label, and right-size the View button.
	   Selectors are scoped to .woocommerce-orders-table only so the
	   single-order details and any cart-style tables are unaffected. */
	body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table {
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		display: block;
		width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody {
		display: block;
		width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody > tr {
		display: block;
		margin-bottom: 12px;
		padding: 14px 16px;
		border: 1px solid var(--nxtl-border) !important;
		border-radius: 14px;
		background: linear-gradient(165deg, rgba(23, 24, 29, 0.96), rgba(15, 17, 22, 0.98));
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody > tr:last-child {
		margin-bottom: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody > tr > td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 14px;
		padding: 8px 0 !important;
		border: 0 !important;
		border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
		text-align: right;
		font-size: 14px;
		line-height: 1.4;
		color: var(--nxtl-text);
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody > tr > td:last-child {
		border-bottom: 0 !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody > tr > td::before {
		content: attr(data-title);
		flex: 0 0 auto;
		float: none !important;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--nxtl-muted);
	}

	/* Order number row: prefer the order number to read prominently. */
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number {
		font-weight: 700;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a {
		color: var(--nxtl-text);
		text-decoration: none;
	}

	/* Status text: keep capitalised even if WC outputs it in lowercase. */
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status {
		text-transform: capitalize;
	}

	/* Actions row: hide the "Actions:" label and let the button stretch. */
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
		display: block !important;
		padding-top: 12px !important;
		margin-top: 4px;
		border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions::before {
		display: none !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
		display: block;
		width: 100%;
		min-height: 42px;
		text-align: center;
	}

	/* When multiple action buttons stack (e.g. View + Invoice from the
	   PDF Invoices plugin), give them breathing room so they don't read
	   as one continuous tappable bar that's easy to mis-tap. */
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button + .button,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a + a,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .wpo-wcpdf-invoice-button,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .invoice {
		margin-top: 8px;
	}

	/* Pagination row sits inside its own card so it doesn't get swept
	   into the list above. */
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination {
		margin-top: 16px;
	}
}

/* B2B registration & status */
.nxtl-v2-b2b .nxtl-v2-b2b-metric-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.nxtl-v2-b2b .nxtl-v2-b2b-metric-list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--nxtl-border);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
}

.nxtl-v2-b2b .nxtl-v2-b2b-dl {
	margin: 12px 0 0;
	display: grid;
	gap: 6px;
}

.nxtl-v2-b2b .nxtl-v2-b2b-dl dt {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nxtl-muted);
}

.nxtl-v2-b2b .nxtl-v2-b2b-dl dd {
	margin: 0 0 8px;
	word-break: break-word;
}

.nxtl-v2-b2b .nxtl-v2-b2b-details {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nxtl-v2-b2b .nxtl-v2-b2b-details li {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 6px 0;
	border-bottom: 1px solid var(--nxtl-border);
}

.nxtl-v2-b2b .nxtl-v2-b2b-details span {
	min-width: 120px;
	color: var(--nxtl-muted);
	font-size: 13px;
}

.nxtl-v2-b2b-form .nxtl-v2-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}

.nxtl-v2-b2b-form .nxtl-v2-field-span2 {
	grid-column: 1 / -1;
}

.nxtl-v2-b2b-form .nxtl-v2-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.nxtl-v2-b2b-form .nxtl-v2-field span {
	font-size: 13px;
	color: var(--nxtl-muted);
}

.nxtl-v2-b2b-form .nxtl-v2-field input {
	border-radius: 10px;
	border: 1px solid var(--nxtl-border);
	background: var(--nxtl-surface-2);
	color: var(--nxtl-text);
	padding: 10px 12px;
}

.nxtl-v2-b2b-form-section {
	margin: 18px 0 8px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--nxtl-muted);
}

.nxtl-v2-flash {
	padding: 12px 14px;
	border-radius: 10px;
	margin-bottom: 14px;
	font-weight: 600;
}

.nxtl-v2-flash-success {
	background: rgba(58, 214, 140, 0.12);
	border: 1px solid rgba(58, 214, 140, 0.35);
	color: var(--nxtl-success);
}

.nxtl-v2-flash-error {
	background: rgba(255, 107, 107, 0.1);
	border: 1px solid rgba(255, 107, 107, 0.35);
	color: var(--nxtl-danger);
}

@media (max-width: 720px) {
	.nxtl-v2-b2b-form .nxtl-v2-form-grid {
		grid-template-columns: 1fr;
	}

	.nxtl-v2-site-currency--floating {
		left: 14px;
		right: 14px;
		bottom: 14px;
	}

	.nxtl-v2-site-currency--floating .nxtl-v2-site-currency-inner,
	.nxtl-v2-site-currency--floating .nxtl-v2-site-currency__pillbox,
	.nxtl-v2-site-currency--floating .nxtl-v2-site-currency__selectbox {
		justify-content: space-between;
		width: 100%;
	}
}

@media (max-width: 760px) {
	.nxtl-v2-esim-main-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"qr"
			"qrb"
			"info";
		justify-items: center;
	}

	.nxtl-v2-esim-main-grid > .nxtl-v2-esim-info-grid {
		width: 100%;
	}

	.nxtl-v2-esim-main-grid > .nxtl-v2-esim-qr-actions {
		max-width: none;
		width: auto;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.nxtl-v2-esim-main-grid > .nxtl-v2-esim-qr-actions .nxtl-v2-btn {
		width: auto;
		flex: 0 1 auto;
	}

	.nxtl-v2-esim-install-block,
	.nxtl-v2-manage-grid {
		grid-template-columns: 1fr;
	}
}

.nxtl-v2-notice-info {
	background: rgba(104, 164, 255, 0.08);
	border: 1px solid rgba(104, 164, 255, 0.3);
	color: #a9caff;
	padding: 14px 16px;
	border-radius: var(--nxtl-radius-sm);
}

.nxtl-v2-notice-warning {
	background: rgba(243, 186, 47, 0.08);
	border: 1px solid rgba(243, 186, 47, 0.3);
	color: var(--nxtl-warning);
	padding: 14px 16px;
	border-radius: var(--nxtl-radius-sm);
}

.nxtl-v2-help-text {
	display: block;
	font-size: 11px;
	margin-top: 2px;
	line-height: 1.4;
}

.nxtl-v2-amount-positive {
	color: var(--nxtl-success);
	font-weight: 600;
}

.nxtl-v2-amount-negative {
	color: var(--nxtl-danger);
	font-weight: 600;
}

.nxtl-v2-balance-breakdown tfoot td {
	border-top: 2px solid var(--nxtl-border);
}

.nxtl-v2-reinstall-info {
	font-size: 13px;
}

.nxtl-v2-reinstall-info summary {
	font-weight: 600;
}

.nxtl-v2-bulk-bar-wrap {
	padding: 16px 24px;
	background: rgba(15, 17, 22, 0.97);
	border: 1px solid rgba(255, 94, 112, 0.2);
}

.nxtl-v2-esim-card.nxtl-v2-esim-selected {
	border-color: rgba(255, 94, 112, 0.6) !important;
	box-shadow: 0 0 16px rgba(255, 94, 112, 0.15), inset 0 0 0 1px rgba(255, 94, 112, 0.35);
}

/*
 * The old layout used a 38px left-padding gutter to reserve space for an
 * absolutely-positioned selection checkbox. The checkbox now lives inline
 * inside the .nxtl-v2-esim-head-left flex cluster, so the gutter is no
 * longer needed and was actually pushing the nickname visually right.
 * Kept as a 0-padding rule for clarity in case anyone greps for it.
 */
.nxtl-v2-esim-grid .nxtl-v2-esim-card .nxtl-v2-esim-head {
	padding-left: 0;
}

.nxtl-v2-esim-select,
.nxtl-v2-esim-select-all {
	width: 20px;
	height: 20px;
	accent-color: var(--nxtl-accent);
	cursor: pointer;
	border-radius: 4px;
	margin: 0;
}

.nxtl-v2-esim-card:hover {
	border-color: rgba(255, 94, 112, 0.28);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 94, 112, 0.08);
	transform: translateY(-1px);
}

.nxtl-v2-btn-exchange {
	border-color: rgba(255, 107, 107, 0.45) !important;
	color: #ffb2b2 !important;
	font-weight: 600;
}

.nxtl-v2-btn-exchange:hover,
.nxtl-v2-btn-exchange:focus-visible {
	background: rgba(255, 107, 107, 0.15) !important;
	border-color: var(--nxtl-danger) !important;
	color: var(--nxtl-danger) !important;
}

.nxtl-v2-esim-head .nxtl-v2-btn-exchange {
	padding: 0 10px;
	min-height: 32px;
	font-size: 0.72rem;
}

.nxtl-v2-esim-faq {
	font-size: 12px;
	color: var(--nxtl-muted);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding-top: 10px;
	margin-top: var(--nxtl-space-3);
}

.nxtl-v2-esim-faq summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 12px;
	color: var(--nxtl-muted);
	letter-spacing: 0.02em;
	padding: 2px 0;
}

.nxtl-v2-esim-faq summary:hover {
	color: var(--nxtl-text);
}

.nxtl-v2-esim-faq p {
	margin: 8px 0;
	line-height: 1.55;
	color: #c4ccd6;
}

.nxtl-v2-esim-faq p strong {
	color: var(--nxtl-text);
}

.nxtl-v2-esim-faq .nxtl-v2-esim-faq-body {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.6;
}

.nxtl-v2-tier-error {
	margin-top: 8px;
}

.nxtl-v2-esim-advanced-toggle {
	margin-top: var(--nxtl-space-3);
}

.nxtl-v2-esim-history-link {
	margin-top: 8px;
	display: inline-flex;
}

.nxtl-v2-esim-qr-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: stretch;
	width: 146px;
}

.nxtl-v2-esim-qr-actions .nxtl-v2-btn {
	min-height: 32px;
	padding: 0 10px;
	font-size: 0.72rem;
	width: 100%;
}

.nxtl-v2-esim-list-card .nxtl-v2-ref-table {
	border: none !important;
	border-collapse: collapse !important;
}

.nxtl-v2-esim-list-card .nxtl-v2-ref-table td,
.nxtl-v2-esim-list-card .nxtl-v2-ref-table th {
	border-left: none !important;
	border-right: none !important;
}

.nxtl-v2-esim-list-card .nxtl-v2-ref-table thead th {
	border-top: none !important;
}

.nxtl-v2-esim-list-card .nxtl-v2-ref-table tbody tr:last-child td {
	border-bottom: none !important;
}

.nxtl-v2-esim-list-card .nxtl-v2-ref-table-wrap {
	border: none !important;
	box-shadow: none !important;
}

.nxtl-v2-bulk-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.nxtl-v2-bulk-label {
	font-weight: 700;
	font-size: 14px;
	color: var(--nxtl-text);
	white-space: nowrap;
}

.nxtl-v2-bulk-group {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 16px;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.nxtl-v2-bulk-select {
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 13px;
	min-width: 110px;
	appearance: none;
	-webkit-appearance: none;
}

.nxtl-v2-bulk-select:focus {
	border-color: var(--nxtl-accent);
	outline: none;
}

#nxtl-v2-bulk-bar {
	transition: all 0.2s;
}

#nxtl-v2-bulk-bar[hidden] {
	display: none !important;
}

#nxtl-v2-balance-history-container select {
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	padding: 9px 14px;
	font-size: 13px;
	min-width: 140px;
	appearance: none;
	-webkit-appearance: none;
}

#nxtl-v2-balance-history-container select:focus {
	border-color: var(--nxtl-accent);
	outline: none;
}

#nxtl-v2-bulk-tier-bar[hidden] {
	display: none !important;
}

#nxtl-v2-bulk-tier-bar:not([hidden]) {
	display: inline-flex;
}

.nxtl-v2-code-block {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--nxtl-border);
	border-radius: var(--nxtl-radius-sm);
	padding: 14px 16px;
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.6;
	color: #c8d6e5;
	white-space: pre-wrap;
	word-break: break-all;
}

.nxtl-v2-api-docs .nxtl-v2-ref-table code {
	background: rgba(104, 164, 255, 0.1);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
}

.nxtl-v2-api-docs h4 {
	margin-top: 16px;
	font-size: 14px;
	color: var(--nxtl-text);
}

#tablepress-3_wrapper .dt-scroll-body {
	scroll-behavior: auto !important;
}

#tablepress-3_wrapper {
	scroll-behavior: auto !important;
	overflow-anchor: none !important;
}

.nxtl-v2-badge-processing {
	background: rgba(243, 186, 47, 0.14);
	border: 1px solid rgba(243, 186, 47, 0.32);
	color: var(--nxtl-warning);
}

.nxtl-v2-badge-usage,
.nxtl-v2-badge-allocate_to_sim {
	background: rgba(255, 107, 107, 0.1);
	border: 1px solid rgba(255, 107, 107, 0.25);
	color: var(--nxtl-danger);
}

.nxtl-v2-badge-credit_woocommerce,
.nxtl-v2-badge-credit_topup,
.nxtl-v2-badge-credit_referral,
.nxtl-v2-badge-credit_token_redeem,
.nxtl-v2-badge-api_topup {
	background: rgba(58, 214, 140, 0.1);
	border: 1px solid rgba(58, 214, 140, 0.25);
	color: var(--nxtl-success);
}

.nxtl-v2-badge-repair_reconcile,
.nxtl-v2-badge-exchange_wallet_return,
.nxtl-v2-badge-clawback_referral {
	background: rgba(104, 164, 255, 0.1);
	border: 1px solid rgba(104, 164, 255, 0.25);
	color: #a9caff;
}

.nxtl-v2-esim-list-card {
	overflow: hidden;
}

.nxtl-v2-esim-list-card .nxtl-v2-ref-table-wrap {
	overflow-x: auto;
}

.nxtl-v2-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nxtl-accent);
	margin: 0 0 6px;
}

.nxtl-v2-b2b-hero {
	text-align: center;
	padding: clamp(32px, 5vw, 56px) clamp(18px, 4vw, 40px);
}

.nxtl-v2-b2b-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-top: 14px;
}

/* --- Shared input styling --- */
.nxtl-v2-input,
.nxtl-v2-auto-topup-page select,
.nxtl-v2-card-stack select {
	background: rgba(0, 0, 0, 0.3) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 10px !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	width: 100%;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	/* Tell the OS to render the native dropdown popup in dark mode so the
	   highlighted option keeps a readable contrast. Without this Chrome /
	   Edge / Safari render a light-themed popup that clashes with the dark
	   site (the "selected row" then renders white text on near-white). */
	color-scheme: dark;
}

/* Apply the dark color-scheme to every plain <select> inside our account
   surface, including third-party widgets (e.g. the "Network tier" dropdown
   in the bulk-action bar) so their native popups match the site theme. */
.woocommerce-account .woocommerce-MyAccount-content select,
.nxtl-v2-card-stack select,
.nxtl-v2-bulk-actions select,
.nxtl-v2-bulk-tier-select,
select.nxtl-v2-bulk-tier-select,
.nxtl-v2-currency-switch select,
.nxtl-v2-site-currency select {
	color-scheme: dark;
}

/* Fallback styling for the option list itself. Chromium honours these,
   Firefox partially, Safari ignores them but uses color-scheme above. */
.woocommerce-account .woocommerce-MyAccount-content select option,
.nxtl-v2-card-stack select option,
.nxtl-v2-bulk-actions select option,
.nxtl-v2-currency-switch select option,
.nxtl-v2-site-currency select option,
.nxtl-v2-input option {
	background-color: #14171d;
	color: #f4f6fa;
}

.woocommerce-account .woocommerce-MyAccount-content select option:checked,
.nxtl-v2-card-stack select option:checked,
.nxtl-v2-bulk-actions select option:checked,
.nxtl-v2-input option:checked {
	background: linear-gradient(rgba(255, 94, 112, 0.55), rgba(255, 94, 112, 0.55)) #1c2029;
	color: #fff;
}

.nxtl-v2-input:focus,
.nxtl-v2-auto-topup-page select:focus,
.nxtl-v2-card-stack select:focus {
	border-color: var(--nxtl-accent) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(255, 94, 112, 0.2) !important;
}

/* --- Grid card compactness --- */
.nxtl-v2-esim-card {
	padding: clamp(18px, 2.3vw, 22px) !important;
	border-radius: var(--nxtl-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: linear-gradient(168deg, rgba(27, 30, 39, 0.78), rgba(15, 17, 22, 0.92));
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.nxtl-v2-esim-card .nxtl-v2-notice-info {
	margin-top: var(--nxtl-space-3) !important;
	padding: 10px 12px !important;
	font-size: 12px !important;
	line-height: 1.5;
}

.nxtl-v2-esim-card .nxtl-v2-notice-info strong {
	color: #cfe0ff;
}

.nxtl-v2-esim-details {
	margin-top: var(--nxtl-space-3);
	padding-top: var(--nxtl-space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- eSIM detail modal --- */
.nxtl-v2-detail-modal-content {
	padding: 24px;
	color: var(--nxtl-text);
	max-height: 80vh;
	overflow-y: auto;
}

.nxtl-v2-detail-modal-content h3 {
	margin: 0 0 16px;
}

.nxtl-v2-detail-modal-content .nxtl-v2-detail-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 13px;
}

.nxtl-v2-detail-modal-content .nxtl-v2-detail-row:last-child {
	border-bottom: none;
}

.nxtl-v2-detail-modal-content .nxtl-v2-detail-label {
	color: var(--nxtl-muted);
}

.nxtl-v2-detail-modal-content .nxtl-v2-detail-value {
	font-weight: 600;
	text-align: right;
	word-break: break-all;
}

/* --- TablePress #3 pricing table (plugin-owned) --- */
#tablepress-3_wrapper,
.tablepress-id-3_wrapper {
	background: linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 50%, transparent 100%) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 20px !important;
	padding: 22px 18px 16px !important;
	box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: visible !important;
	overflow-anchor: none !important;
}

#tablepress-3_wrapper .dt-container,
.tablepress-id-3_wrapper .dt-container {
	background: transparent !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

#tablepress-3,
#tablepress-3.tablepress {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: transparent !important;
	color: #fff !important;
}

#tablepress-3 thead th {
	background: rgba(255,255,255,0.07) !important;
	color: rgba(255,255,255,0.94) !important;
	border-bottom: 1px solid rgba(255,255,255,0.09) !important;
	border-left: 0 !important;
	border-right: 0 !important;
	padding: 12px 14px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	white-space: nowrap;
}

#tablepress-3 thead th:first-child { border-top-left-radius: 12px; }
#tablepress-3 thead th:last-child { border-top-right-radius: 12px; }

#tablepress-3 tbody td {
	background: rgba(0,0,0,0.20) !important;
	color: rgba(255,255,255,0.92) !important;
	border-bottom: 1px solid rgba(255,255,255,0.08) !important;
	border-left: 0 !important;
	border-right: 0 !important;
	padding: 12px 14px !important;
	font-size: 13px !important;
}

#tablepress-3 tbody tr:nth-child(even) td {
	background: rgba(0,0,0,0.28) !important;
}

#tablepress-3 tbody tr:hover td {
	background: rgba(255,255,255,0.06) !important;
}

#tablepress-3 tbody td:first-child,
#tablepress-3 tbody td:nth-child(2) {
	font-weight: 600;
}

#tablepress-3_wrapper .dt-search input,
#tablepress-3_wrapper .dt-length select {
	background: rgba(0,0,0,0.4) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.15) !important;
	border-radius: 12px !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	outline: none !important;
	appearance: none;
	-webkit-appearance: none;
}

#tablepress-3_wrapper .dt-search input:focus,
#tablepress-3_wrapper .dt-length select:focus {
	border-color: #FF5E70 !important;
	box-shadow: 0 0 0 2px rgba(255,94,112,0.25) !important;
}

#tablepress-3_wrapper .dt-length,
#tablepress-3_wrapper .dt-search,
#tablepress-3_wrapper .dt-info,
#tablepress-3_wrapper .dt-paging {
	color: rgba(255,255,255,0.9) !important;
	font-size: 14px !important;
}

#tablepress-3_wrapper .dt-info {
	color: rgba(255,255,255,0.6) !important;
	font-size: 13px !important;
}

#tablepress-3_wrapper .dt-paging .dt-paging-button {
	border-radius: 12px !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	background: rgba(255,255,255,0.06) !important;
	color: rgba(255,255,255,0.92) !important;
	margin: 0 3px !important;
	padding: 8px 14px !important;
	font-size: 13px !important;
	transition: background 0.2s, border-color 0.2s;
}

#tablepress-3_wrapper .dt-paging .dt-paging-button:hover {
	background: rgba(255,255,255,0.1) !important;
	border-color: rgba(255,255,255,0.22) !important;
}

#tablepress-3_wrapper .dt-paging .dt-paging-button.current {
	background: rgba(255,94,112,0.2) !important;
	border-color: #FF5E70 !important;
	color: #FF5E70 !important;
}

#tablepress-3_wrapper .dt-layout-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

#tablepress-3_wrapper .dt-scroll-body {
	overflow-x: hidden !important;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(0,0,0,0.10);
	scroll-behavior: auto !important;
}

@media (max-width: 767px) {
	#tablepress-3_wrapper,
	.tablepress-id-3_wrapper {
		padding: 16px 12px 14px !important;
		border-radius: 14px !important;
	}

	#tablepress-3_wrapper .dt-length,
	#tablepress-3_wrapper .dt-search,
	#tablepress-3_wrapper .dt-info,
	#tablepress-3_wrapper .dt-paging {
		float: none !important;
		width: 100% !important;
		text-align: left !important;
		margin: 0 0 10px !important;
	}

	#tablepress-3_wrapper .dt-search input {
		width: 100% !important;
	}

	#tablepress-3_wrapper .dt-scroll-body {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

/* Dashboard next action + usage sparkline */
.nxtl-v2-nba-card {
	border: 1px solid rgba(255, 94, 112, 0.22);
	background: linear-gradient(135deg, rgba(255, 94, 112, 0.08), rgba(0, 0, 0, 0.15));
}
.nxtl-v2-nba-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nxtl-space-3);
}
.nxtl-v2-nba-title {
	margin: 0 0 6px;
	font-size: 1.15rem;
}
.nxtl-v2-nba-body {
	margin: 0;
	max-width: 52ch;
}
.nxtl-v2-sparkline-label {
	margin: 12px 0 6px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nxtl-muted);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.nxtl-v2-sparkline-total {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--nxtl-text);
}
.nxtl-v2-sparkline {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 56px;
	margin-top: 4px;
}
.nxtl-v2-spark-bar {
	flex: 1;
	min-width: 6px;
	max-width: 14px;
	border-radius: 4px 4px 2px 2px;
	background: linear-gradient(180deg, rgba(255, 122, 140, 0.5), rgba(255, 61, 90, 0.45));
	opacity: 0.6;
	transition: opacity 120ms ease, transform 120ms ease;
	cursor: default;
}
.nxtl-v2-spark-bar.has-value {
	background: linear-gradient(180deg, #ff7a8c, #ff3d5a);
	opacity: 0.95;
}
.nxtl-v2-spark-bar:hover {
	opacity: 1;
	transform: scaleY(1.04);
}

/* Payment-method picker ? small modal that intercepts Buy / Exchange clicks
   when the customer has saved cards, so they can pay in one tap. */
.nxtl-v2-paypicker-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	isolation: isolate;
	animation: nxtl-v2-paypicker-fade 160ms ease-out;
}
@keyframes nxtl-v2-paypicker-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.nxtl-v2-paypicker-panel {
	position: relative;
	max-width: 440px;
	width: 100%;
	background: linear-gradient(180deg, #1a1923, #121119);
	color: var(--nxtl-text);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 26px 26px 22px;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
	animation: nxtl-v2-coverage-pop 220ms ease-out;
}
.nxtl-v2-paypicker-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	border: 0;
	border-radius: 999px;
	width: 32px;
	height: 32px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 120ms ease;
}
.nxtl-v2-paypicker-close:hover {
	background: rgba(255, 61, 90, 0.4);
}
.nxtl-v2-paypicker-title {
	margin: 0 0 4px;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.nxtl-v2-paypicker-sub {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.88rem;
	line-height: 1.5;
}
.nxtl-v2-paypicker-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}
.nxtl-v2-paypicker-card {
	border: 1px solid rgba(255, 61, 90, 0.45);
	background: linear-gradient(180deg, rgba(255, 61, 90, 0.18), rgba(255, 61, 90, 0.08));
	color: var(--nxtl-text);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 13px 16px;
	border-radius: 12px;
	cursor: pointer;
	text-align: left;
	transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.nxtl-v2-paypicker-card:hover {
	border-color: rgba(255, 61, 90, 0.8);
	background: linear-gradient(180deg, rgba(255, 61, 90, 0.28), rgba(255, 61, 90, 0.12));
	transform: translateY(-1px);
}
.nxtl-v2-paypicker-new {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
	font-size: 0.88rem;
	padding: 11px 14px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}
.nxtl-v2-paypicker-new:hover {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
}

/* Network coverage modal ? opened from the dashboard "Network coverage &
   pricing" button. Dark glass styling, two-column layout on wide screens,
   collapses to single column on mobile. The modal node is moved to
   <body> on first open via JS so transformed page-builder / theme parents
   can't trap it (transform creates a containing block, which would otherwise
   confine our position:fixed and let the site header poke through). */
.nxtl-v2-coverage-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	isolation: isolate;
}
.nxtl-v2-coverage-modal[hidden] {
	display: none;
}
.nxtl-v2-coverage-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.nxtl-v2-coverage-panel {
	position: relative;
	max-width: 1100px;
	width: 100%;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #1a1923, #121119);
	color: var(--nxtl-text);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	animation: nxtl-v2-coverage-pop 220ms ease-out;
}
@keyframes nxtl-v2-coverage-pop {
	from { transform: scale(0.96); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}
.nxtl-v2-coverage-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 26px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nxtl-v2-coverage-head h2 {
	margin: 4px 0 0;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.nxtl-v2-coverage-close {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	border: 0;
	border-radius: 999px;
	width: 38px;
	height: 38px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 120ms ease, transform 120ms ease;
}
.nxtl-v2-coverage-close:hover {
	background: rgba(255, 61, 90, 0.4);
	transform: scale(1.05);
}
.nxtl-v2-coverage-body {
	padding: 22px 26px 26px;
	overflow-y: auto;
	flex: 1 1 auto;
}
.nxtl-v2-coverage-lead {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.78);
	max-width: 80ch;
	line-height: 1.55;
}
.nxtl-v2-coverage-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
	margin: 6px 0 16px;
}
.nxtl-v2-coverage-tier {
	border-radius: 14px;
	padding: 16px 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.nxtl-v2-coverage-tier h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
}
.nxtl-v2-coverage-tier--economy h3 { color: #a4f3cb; }
.nxtl-v2-coverage-tier--comfort h3 { color: #ffe6a2; }
.nxtl-v2-coverage-tier--full h3    { color: #ff7a8c; }
.nxtl-v2-coverage-tier--full {
	border-color: rgba(255, 61, 90, 0.4);
	background: linear-gradient(180deg, rgba(255, 61, 90, 0.1), rgba(255, 61, 90, 0.04));
}
.nxtl-v2-coverage-tier-pitch {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.5;
}
.nxtl-v2-coverage-tier-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px 12px;
	margin: 4px 0 2px;
	font-size: 0.78rem;
}
.nxtl-v2-coverage-tier-stats div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.nxtl-v2-coverage-tier-stats dt {
	color: rgba(255, 255, 255, 0.55);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 10px;
	margin: 0;
}
.nxtl-v2-coverage-tier-stats dd {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--nxtl-text);
}
.nxtl-v2-coverage-tier-best {
	margin: 0;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.6);
	border-top: 1px dashed rgba(255, 255, 255, 0.08);
	padding-top: 8px;
}
.nxtl-v2-coverage-recommend {
	margin: 4px 0 18px;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(58, 214, 140, 0.08);
	border-left: 3px solid #3ad68c;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
}
.nxtl-v2-coverage-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.nxtl-v2-coverage-search {
	flex: 1 1 240px;
	min-width: 240px;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: var(--nxtl-text);
	font-size: 0.95rem;
	outline: none;
	transition: border-color 120ms ease, background-color 120ms ease;
}
.nxtl-v2-coverage-search:focus {
	border-color: rgba(255, 61, 90, 0.55);
	background: rgba(255, 255, 255, 0.07);
}
.nxtl-v2-coverage-filterbar {
	display: inline-flex;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 10px;
	padding: 3px;
	gap: 0;
}
.nxtl-v2-coverage-filter {
	border: 0;
	background: transparent;
	color: var(--nxtl-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 7px 12px;
	border-radius: 8px;
	cursor: pointer;
	text-transform: uppercase;
	transition: background-color 120ms ease, color 120ms ease;
}
.nxtl-v2-coverage-filter:hover {
	color: var(--nxtl-text);
}
.nxtl-v2-coverage-filter.is-active {
	background: rgba(255, 61, 90, 0.18);
	color: #ff7a8c;
}
.nxtl-v2-coverage-tablewrap {
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.02);
}
.nxtl-v2-coverage-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.nxtl-v2-coverage-table thead th {
	text-align: left;
	padding: 12px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}
.nxtl-v2-coverage-table thead th.is-center,
.nxtl-v2-coverage-table tbody td.is-center {
	text-align: center;
}
.nxtl-v2-coverage-table thead th.is-numeric,
.nxtl-v2-coverage-table tbody td.is-numeric {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.nxtl-v2-coverage-table tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.85);
}
.nxtl-v2-coverage-table tbody tr:hover td {
	background: rgba(255, 61, 90, 0.05);
}
.nxtl-v2-coverage-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: rgba(58, 214, 140, 0.18);
	color: #a4f3cb;
	font-weight: 700;
}
.nxtl-v2-coverage-cross {
	color: rgba(255, 255, 255, 0.25);
	font-size: 14px;
}
.nxtl-v2-coverage-empty {
	margin: 18px 0 6px;
	text-align: center;
	color: var(--nxtl-muted);
	font-size: 0.9rem;
}
.nxtl-v2-coverage-footnote {
	margin: 14px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
}
@media (max-width: 720px) {
	.nxtl-v2-coverage-modal {
		padding: 0;
	}
	.nxtl-v2-coverage-panel {
		max-width: 100%;
		width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}
	.nxtl-v2-coverage-table thead th:nth-child(2),
	.nxtl-v2-coverage-table tbody td:nth-child(2) {
		display: none;
	}
}

/* Full ICCID display ? narrow letter-spacing keeps the 19-digit string
   readable while still fitting in the eSIM card's info grid without wrap. */
.nxtl-v2-iccid-full {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	word-break: break-all;
}

/* Two-column eSIM insights: chart left, activity right. Collapses to one
   column on narrow viewports, and the chart auto-promotes to full-width
   whenever 90d is selected (90 bars don't fit comfortably in a half column). */
.nxtl-v2-esim-insights {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 18px;
	align-items: stretch;
	margin: 18px 0 4px;
}
.nxtl-v2-esim-insights.is-wide {
	grid-template-columns: 1fr;
}
@media (max-width: 880px) {
	.nxtl-v2-esim-insights {
		grid-template-columns: 1fr;
	}
}
.nxtl-v2-esim-activity {
	display: flex;
	flex-direction: column;
}
.nxtl-v2-esim-activity h5 {
	margin: 0 0 8px;
}
.nxtl-v2-esim-history-link {
	margin-top: auto;
	align-self: flex-start;
}

/* Per-eSIM data spend chart (rendered inside the eSIM details panel). */
.nxtl-v2-line-chart {
	margin: 0 0 6px;
	padding: 14px 14px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
}
.nxtl-v2-line-chart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.nxtl-v2-line-chart-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.nxtl-v2-range-tabs {
	display: inline-flex;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 8px;
	padding: 2px;
	gap: 0;
}
.nxtl-v2-range-tab {
	border: 0;
	background: transparent;
	color: var(--nxtl-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 5px 10px;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}
.nxtl-v2-range-tab:hover {
	color: var(--nxtl-text);
}
.nxtl-v2-range-tab.is-active {
	background: rgba(255, 61, 90, 0.18);
	color: #ff7a8c;
}
.nxtl-v2-line-chart-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
	min-height: 16px;
	font-size: 12px;
}
.nxtl-v2-line-chart-range {
	color: var(--nxtl-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
.nxtl-v2-line-chart-total {
	font-weight: 700;
	color: var(--nxtl-text);
}
.nxtl-v2-line-chart-body {
	min-height: 96px;
	display: flex;
	align-items: flex-end;
	gap: 4px;
	flex: 1 1 auto;
	/* Prevent the bar grid from forcing the parent card past the
	 * viewport on narrow screens ? 90 bars ? 4px is ~720px wide, which
	 * blew the right border on phones. Clip horizontally and let the
	 * bars themselves shrink to fit, which keeps the entire eSIM card
	 * inside its parent at any width. */
	overflow: hidden;
	min-width: 0;
}
.nxtl-v2-line-chart-state {
	margin: 0 auto;
	align-self: center;
	font-size: 12px;
}
.nxtl-v2-line-chart-bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 100%;
	width: 100%;
	min-width: 0;
}
.nxtl-v2-line-chart-bar {
	/* `0` minimum lets bars shrink under their natural 4px floor when
	 * 90 of them have to share a 320-wide viewport. Bars below ~2px
	 * effectively become a sparkline, which is the right reading for
	 * such a dense range on mobile. The desktop break below restores
	 * the comfortable 4px floor whenever space exists. */
	flex: 1 1 0;
	min-width: 0;
	border-radius: 4px 4px 2px 2px;
	background: linear-gradient(180deg, rgba(255, 122, 140, 0.45), rgba(255, 61, 90, 0.4));
	opacity: 0.55;
	transition: opacity 120ms ease, transform 120ms ease;
	cursor: default;
}
@media (min-width: 720px) {
	.nxtl-v2-line-chart-bar {
		min-width: 4px;
	}
}
.nxtl-v2-line-chart-bar.has-value {
	background: linear-gradient(180deg, #ff7a8c, #ff3d5a);
	opacity: 0.95;
}
.nxtl-v2-line-chart-bar:hover {
	opacity: 1;
	transform: scaleY(1.04);
}
.nxtl-v2-line-chart-empty {
	margin: 0 auto;
	align-self: center;
	color: var(--nxtl-muted);
	font-size: 12px;
}

/* Activity timeline accent (tokens / referrals) */
.nxtl-v2-activity-timeline {
	position: relative;
	padding-left: 14px;
	border-left: 2px solid rgba(255, 94, 112, 0.35);
	margin-top: 8px;
}
.nxtl-v2-activity-timeline .nxtl-v2-ref-table-wrap {
	margin-left: 0;
}

@media (max-width: 600px) {
	.nxtl-v2-history-toolbar {
		flex-direction: column;
		align-items: stretch !important;
	}
	.nxtl-v2-history-toolbar .nxtl-v2-input,
	.nxtl-v2-history-toolbar .nxtl-v2-btn {
		width: 100%;
	}
	.nxtl-v2-nba-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =================================================================
 * B2B marketing landing (shortcode nxtl_v2_b2b_landing) ? full page,
 * sales-led design system. Section eyebrow ? big headline ? lead ?
 * content. Generous whitespace, clear card hierarchy, inline SVG icons.
 * Coexists with the dark Satka theme without inheriting its tight
 * page-wrapper paddings (we let the section grow edge-to-edge inside
 * #site-content and constrain via .nxtl-v2-b2b-section-head etc.).
 * ================================================================= */

.nxtl-v2-b2b-landing {
	--b2b-bg-deep: #0a0c12;
	--b2b-bg-card: rgba(255, 255, 255, 0.04);
	--b2b-bg-card-strong: rgba(255, 255, 255, 0.06);
	--b2b-border: rgba(255, 255, 255, 0.09);
	--b2b-border-strong: rgba(255, 255, 255, 0.14);
	--b2b-accent-1: #ff5e70;
	--b2b-accent-2: #7d4cff;
	--b2b-accent-soft: rgba(125, 76, 255, 0.18);
	--b2b-text: #f3f4f8;
	--b2b-text-muted: rgba(255, 255, 255, 0.62);
	--b2b-radius: 18px;
	--b2b-radius-sm: 12px;
	--b2b-section-x: clamp(20px, 5vw, 56px);
	--b2b-section-y: clamp(56px, 9vw, 96px);

	color: var(--b2b-text);
	font-family: inherit;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
}
.nxtl-v2-b2b-landing > section + section {
	border-top: 1px solid var(--b2b-border);
}
.nxtl-v2-b2b-landing code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	font-size: 0.92em;
	background: rgba(0, 0, 0, 0.32);
	padding: 2px 6px;
	border-radius: 5px;
	color: #ffd5db;
	white-space: nowrap;
}

/* ---------- Section head ---------- */
.nxtl-v2-b2b-section {
	padding: var(--b2b-section-y) var(--b2b-section-x);
	position: relative;
}
.nxtl-v2-b2b-section--alt {
	background: linear-gradient(180deg, rgba(125, 76, 255, 0.04), rgba(0, 0, 0, 0)),
		radial-gradient(120% 90% at 50% 0%, rgba(255, 94, 112, 0.06), transparent 60%);
}
.nxtl-v2-b2b-section-head {
	max-width: 720px;
	margin: 0 auto clamp(36px, 5vw, 56px);
	text-align: center;
}
.nxtl-v2-b2b-section-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--b2b-accent-1);
}
.nxtl-v2-b2b-section-head h2 {
	margin: 0 0 14px;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--b2b-text);
}
.nxtl-v2-b2b-section-lead {
	margin: 0;
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	line-height: 1.6;
	color: var(--b2b-text-muted);
}

/* ---------- Hero ---------- */
.nxtl-v2-b2b-hero {
	position: relative;
	padding: clamp(72px, 11vw, 120px) var(--b2b-section-x) clamp(56px, 9vw, 96px);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}
.nxtl-v2-b2b-hero-glow {
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 110%;
	background:
		radial-gradient(50% 60% at 30% 30%, rgba(125, 76, 255, 0.22), transparent 60%),
		radial-gradient(40% 60% at 75% 25%, rgba(255, 94, 112, 0.18), transparent 60%);
	filter: blur(40px);
	z-index: -1;
}
.nxtl-v2-b2b-hero-inner {
	max-width: 920px;
	margin: 0 auto;
}
.nxtl-v2-b2b-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 24px;
}
.nxtl-v2-b2b-eyebrow-pill {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: linear-gradient(135deg, var(--b2b-accent-1), var(--b2b-accent-2));
	color: #fff;
	box-shadow: 0 4px 18px rgba(125, 76, 255, 0.4);
}
.nxtl-v2-b2b-eyebrow-tag {
	font-size: 12px;
	color: var(--b2b-text-muted);
}
.nxtl-v2-b2b-hero-title {
	margin: 0 0 22px;
	font-size: clamp(2rem, 5vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--b2b-text);
}
.nxtl-v2-b2b-hero-lead {
	margin: 0 auto 36px;
	max-width: 680px;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.55;
	color: var(--b2b-text-muted);
}
.nxtl-v2-b2b-hero-cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 56px;
}
.nxtl-v2-b2b-hero-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nxtl-v2-b2b-hero-metrics > div {
	margin: 0;
	padding: 22px 18px;
	border-radius: var(--b2b-radius-sm);
	background: var(--b2b-bg-card);
	border: 1px solid var(--b2b-border);
	text-align: left;
}
.nxtl-v2-b2b-hero-metrics dt {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--b2b-text-muted);
}
.nxtl-v2-b2b-hero-metrics dd {
	margin: 0 0 4px;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	background: linear-gradient(135deg, var(--b2b-accent-1), var(--b2b-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.nxtl-v2-b2b-hero-metrics small {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: var(--b2b-text-muted);
}
@media (max-width: 760px) {
	.nxtl-v2-b2b-hero-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 420px) {
	.nxtl-v2-b2b-hero-metrics {
		grid-template-columns: 1fr;
	}
}

/* Buttons override (page-scoped) */
.nxtl-v2-b2b-landing .nxtl-v2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
	text-decoration: none;
}
.nxtl-v2-b2b-landing .nxtl-v2-btn-lg {
	padding: 14px 26px;
	font-size: 15px;
}
.nxtl-v2-b2b-landing .nxtl-v2-btn-primary {
	background: linear-gradient(135deg, var(--b2b-accent-1), var(--b2b-accent-2));
	color: #fff;
	box-shadow: 0 8px 24px rgba(125, 76, 255, 0.35);
}
.nxtl-v2-b2b-landing .nxtl-v2-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(125, 76, 255, 0.45);
}
.nxtl-v2-b2b-landing .nxtl-v2-btn-outline {
	background: transparent;
	color: var(--b2b-text);
	border-color: var(--b2b-border-strong);
}
.nxtl-v2-b2b-landing .nxtl-v2-btn-outline:hover {
	background: var(--b2b-bg-card-strong);
	border-color: rgba(255, 255, 255, 0.28);
}
.nxtl-v2-b2b-landing .nxtl-v2-btn-ghost {
	background: transparent;
	color: var(--b2b-text);
	border-color: transparent;
}
.nxtl-v2-b2b-landing .nxtl-v2-btn-ghost:hover {
	color: var(--b2b-accent-1);
}

/* ---------- Feature grid ---------- */
.nxtl-v2-b2b-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1140px;
	margin: 0 auto;
}
@media (max-width: 960px) {
	.nxtl-v2-b2b-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.nxtl-v2-b2b-feature-grid {
		grid-template-columns: 1fr;
	}
}
.nxtl-v2-b2b-feature-card {
	padding: 28px;
	border-radius: var(--b2b-radius);
	background: var(--b2b-bg-card);
	border: 1px solid var(--b2b-border);
	transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.nxtl-v2-b2b-feature-card:hover {
	transform: translateY(-2px);
	border-color: rgba(125, 76, 255, 0.35);
	background: var(--b2b-bg-card-strong);
}
.nxtl-v2-b2b-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 18px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(255, 94, 112, 0.18), rgba(125, 76, 255, 0.18));
	color: var(--b2b-accent-1);
}
.nxtl-v2-b2b-feature-icon svg {
	width: 22px;
	height: 22px;
}
.nxtl-v2-b2b-feature-card h3 {
	margin: 0 0 10px;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--b2b-text);
}
.nxtl-v2-b2b-feature-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--b2b-text-muted);
}

/* ---------- API split ---------- */
.nxtl-v2-b2b-api-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	max-width: 1140px;
	margin: 0 auto;
	align-items: start;
}
@media (max-width: 880px) {
	.nxtl-v2-b2b-api-split {
		grid-template-columns: 1fr;
	}
}
.nxtl-v2-b2b-api-endpoints {
	padding: 28px;
	border-radius: var(--b2b-radius);
	background: var(--b2b-bg-card);
	border: 1px solid var(--b2b-border);
}
.nxtl-v2-b2b-api-subtitle {
	margin: 0 0 16px;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--b2b-text-muted);
}
.nxtl-v2-b2b-endpoint-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nxtl-v2-b2b-endpoint-list li {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	padding: 10px 0;
	border-bottom: 1px solid var(--b2b-border);
	font-size: 14px;
	line-height: 1.4;
}
.nxtl-v2-b2b-endpoint-list li:last-child {
	border-bottom: 0;
}
.nxtl-v2-b2b-endpoint-method {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-family: ui-monospace, monospace;
	flex-shrink: 0;
}
.nxtl-v2-b2b-method-get   { background: rgba(34, 197, 94, 0.18); color: #67d690; }
.nxtl-v2-b2b-method-post  { background: rgba(56, 132, 255, 0.18); color: #7eb1ff; }
.nxtl-v2-b2b-method-patch { background: rgba(255, 175, 56, 0.18); color: #ffc274; }
.nxtl-v2-b2b-api-base {
	margin: 18px 0;
	font-size: 13px;
}

.nxtl-v2-b2b-api-snippet {
	border-radius: var(--b2b-radius);
	background: #0d0f17;
	border: 1px solid var(--b2b-border-strong);
	overflow: hidden;
	box-shadow: 0 16px 50px -20px rgba(0, 0, 0, 0.6);
}
.nxtl-v2-b2b-snippet-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.035);
	border-bottom: 1px solid var(--b2b-border);
}
.nxtl-v2-b2b-snippet-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: inline-block;
}
.nxtl-v2-b2b-snippet-title {
	margin-left: auto;
	font-size: 12px;
	color: var(--b2b-text-muted);
	font-family: ui-monospace, monospace;
}
.nxtl-v2-b2b-snippet-body {
	margin: 0;
	padding: 18px 18px;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 13px;
	line-height: 1.7;
	color: #e3e6ee;
	overflow-x: auto;
	white-space: pre;
}
.nxtl-v2-b2b-snippet-body code {
	background: transparent;
	padding: 0;
	color: inherit;
	white-space: pre;
}
.nxtl-v2-b2b-c-comment { color: #6e7689; font-style: italic; }
.nxtl-v2-b2b-c-flag    { color: #ff9aa2; }
.nxtl-v2-b2b-c-string  { color: #a3d6ff; }

/* ---------- Use case grid ---------- */
.nxtl-v2-b2b-case-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 1080px;
	margin: 0 auto;
}
@media (max-width: 720px) {
	.nxtl-v2-b2b-case-grid {
		grid-template-columns: 1fr;
	}
}
.nxtl-v2-b2b-case-card {
	padding: 30px;
	border-radius: var(--b2b-radius);
	background: linear-gradient(180deg, var(--b2b-bg-card-strong), var(--b2b-bg-card));
	border: 1px solid var(--b2b-border);
}
.nxtl-v2-b2b-case-card h3 {
	margin: 0 0 12px;
	font-size: 1.2rem;
	color: var(--b2b-text);
}
.nxtl-v2-b2b-case-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--b2b-text-muted);
}

/* ---------- Process / steps ---------- */
.nxtl-v2-b2b-process {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1080px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	counter-reset: nxtl-process;
}
@media (max-width: 760px) {
	.nxtl-v2-b2b-process {
		grid-template-columns: 1fr;
	}
}
.nxtl-v2-b2b-process-step {
	padding: 28px;
	border-radius: var(--b2b-radius);
	background: var(--b2b-bg-card);
	border: 1px solid var(--b2b-border);
	position: relative;
}
.nxtl-v2-b2b-process-num {
	display: inline-block;
	margin: 0 0 14px;
	font-size: 36px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, var(--b2b-accent-1), var(--b2b-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	line-height: 1;
}
.nxtl-v2-b2b-process-step h3 {
	margin: 0 0 10px;
	font-size: 1.15rem;
	color: var(--b2b-text);
}
.nxtl-v2-b2b-process-step p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--b2b-text-muted);
}

/* ---------- NXTL vs roaming ---------- */
.nxtl-v2-b2b-vs-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 1020px;
	margin: 0 auto;
}
@media (max-width: 720px) {
	.nxtl-v2-b2b-vs-grid {
		grid-template-columns: 1fr;
	}
}
.nxtl-v2-b2b-vs-col {
	padding: 28px;
	border-radius: var(--b2b-radius);
	border: 1px solid var(--b2b-border);
}
.nxtl-v2-b2b-vs-col--good {
	background: linear-gradient(180deg, rgba(125, 76, 255, 0.10), rgba(255, 94, 112, 0.06));
	border-color: rgba(125, 76, 255, 0.32);
}
.nxtl-v2-b2b-vs-col--bad {
	background: rgba(0, 0, 0, 0.18);
	border-color: rgba(255, 80, 80, 0.18);
}
.nxtl-v2-b2b-vs-col-title {
	margin: 0 0 18px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--b2b-text);
}
.nxtl-v2-b2b-vs-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nxtl-v2-b2b-vs-col li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--b2b-text);
	border-bottom: 1px solid var(--b2b-border);
}
.nxtl-v2-b2b-vs-col li:last-child {
	border-bottom: 0;
}
.nxtl-v2-b2b-vs-col--bad li {
	color: var(--b2b-text-muted);
}
.nxtl-v2-b2b-vs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	flex-shrink: 0;
}
.nxtl-v2-b2b-vs-icon svg {
	width: 16px;
	height: 16px;
}
.nxtl-v2-b2b-vs-col--good .nxtl-v2-b2b-vs-icon {
	background: rgba(34, 197, 94, 0.16);
	color: #67d690;
}
.nxtl-v2-b2b-vs-col--bad .nxtl-v2-b2b-vs-icon {
	background: rgba(255, 99, 99, 0.14);
	color: #ff8585;
}

/* ---------- Rates / pricing block ---------- */
.nxtl-v2-b2b-rates-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1080px;
	margin: 0 auto 28px;
}
@media (max-width: 880px) {
	.nxtl-v2-b2b-rates-grid {
		grid-template-columns: 1fr;
	}
}
.nxtl-v2-b2b-rate-card {
	padding: 28px;
	border-radius: var(--b2b-radius);
	background: var(--b2b-bg-card);
	border: 1px solid var(--b2b-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.nxtl-v2-b2b-rate-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--b2b-text-muted);
}
.nxtl-v2-b2b-rate-value {
	font-size: clamp(2rem, 4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	background: linear-gradient(135deg, var(--b2b-accent-1), var(--b2b-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	line-height: 1.1;
}
.nxtl-v2-b2b-rate-card p {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--b2b-text-muted);
}
.nxtl-v2-b2b-enterprise {
	max-width: 1080px;
	margin: 0 auto;
	padding: 32px;
	border-radius: var(--b2b-radius);
	background: linear-gradient(135deg, rgba(125, 76, 255, 0.18), rgba(255, 94, 112, 0.10));
	border: 1px solid rgba(125, 76, 255, 0.32);
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.nxtl-v2-b2b-enterprise-body {
	flex: 1 1 320px;
	min-width: 0;
}
.nxtl-v2-b2b-enterprise-body h3 {
	margin: 4px 0 8px;
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	color: var(--b2b-text);
	line-height: 1.25;
}
.nxtl-v2-b2b-enterprise-body p {
	margin: 0;
	color: var(--b2b-text-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

/* ---------- FAQ ---------- */
.nxtl-v2-b2b-faq {
	max-width: 820px;
	margin: 0 auto;
}
.nxtl-v2-b2b-faq-item {
	border-bottom: 1px solid var(--b2b-border);
	padding: 6px 0;
}
.nxtl-v2-b2b-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 4px 18px 4px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--b2b-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.nxtl-v2-b2b-faq-item summary::-webkit-details-marker { display: none; }
.nxtl-v2-b2b-faq-item summary::after {
	content: '+';
	font-size: 22px;
	font-weight: 400;
	color: var(--b2b-accent-1);
	transition: transform 200ms ease;
	flex-shrink: 0;
	line-height: 1;
}
.nxtl-v2-b2b-faq-item[open] summary::after {
	content: '−';
}
.nxtl-v2-b2b-faq-item p {
	margin: 0 0 18px;
	padding: 0 4px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--b2b-text-muted);
	max-width: 70ch;
}

/* ---------- Final CTA + form ---------- */
.nxtl-v2-b2b-final-cta {
	padding: var(--b2b-section-y) var(--b2b-section-x);
	background: linear-gradient(180deg, rgba(125, 76, 255, 0.08), rgba(0, 0, 0, 0.4));
}
.nxtl-v2-b2b-final-cta-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.nxtl-v2-b2b-final-cta h2 {
	margin: 0 0 14px;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	line-height: 1.15;
	color: var(--b2b-text);
}
.nxtl-v2-b2b-final-cta-lead {
	margin: 0 auto 36px;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--b2b-text-muted);
}
.nxtl-v2-b2b-final-cta .nxtl-v2-b2b-form,
.nxtl-v2-b2b-final-cta .nxtl-v2-b2b-apply-stack--landing,
.nxtl-v2-b2b-final-cta .nxtl-v2-b2b-hero {
	text-align: left;
}

/* Public API reference page (standalone + inside My Account) */
.nxtl-v2-api-docs-standalone {
	width: 100%;
	max-width: min(1420px, 100%);
	margin: 0 auto 32px;
	padding: clamp(20px, 2.5vw, 36px) clamp(14px, 4vw, 48px) clamp(28px, 4vw, 48px);
	background: linear-gradient(165deg, #0c0e14 0%, #131722 42%, #0b0d12 100%);
	border-radius: var(--nxtl-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	color: var(--nxtl-text);
	box-sizing: border-box;
}
.woocommerce-account .woocommerce-MyAccount-content .nxtl-v2-api-docs-standalone {
	max-width: min(1420px, 96vw);
}
.nxtl-v2-api-docs-standalone .nxtl-v2-card-stack {
	gap: 12px;
}
.nxtl-v2-api-docs-standalone .nxtl-v2-card {
	background: rgba(255, 255, 255, 0.035);
	border-color: rgba(255, 255, 255, 0.1);
	padding: clamp(18px, 2.4vw, 26px);
}
.nxtl-v2-api-docs-standalone .nxtl-v2-card h2 {
	margin-top: 0;
	font-size: clamp(1.2rem, 2.5vw, 1.45rem);
	letter-spacing: -0.02em;
}
.nxtl-v2-api-docs-standalone .nxtl-v2-card h3 {
	margin: 1.15em 0 0.5em;
	font-size: 1.05rem;
	color: var(--nxtl-text);
}
.nxtl-v2-api-docs-standalone .nxtl-v2-card h3:first-child {
	margin-top: 0;
}
.nxtl-v2-api-docs-standalone .nxtl-v2-b2b-api-health {
	margin-bottom: 12px;
}
.nxtl-v2-api-docs-standalone .nxtl-v2-ref-table-wrap {
	margin-top: 10px;
}
.nxtl-v2-api-docs-standalone .nxtl-v2-ref-table {
	font-size: 13px;
}
.nxtl-v2-api-docs-standalone .nxtl-v2-ref-table th,
.nxtl-v2-api-docs-standalone .nxtl-v2-ref-table td {
	padding: 10px 12px;
	vertical-align: top;
}
.nxtl-v2-api-docs-standalone .nxtl-v2-code-block {
	font-size: 12px;
	line-height: 1.5;
	overflow-x: auto;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.35);
}
.nxtl-v2-api-docs-webhook-event {
	margin: 20px 0 0;
	padding: 16px 18px 18px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.2);
}
.nxtl-v2-api-docs-webhook-event:first-of-type {
	margin-top: 12px;
}
.nxtl-v2-api-docs-webhook-event h4 {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 700;
}
.nxtl-v2-api-docs-webhook-event .nxtl-v2-api-docs-webhook-sub {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--nxtl-muted);
	line-height: 1.45;
}
.nxtl-v2-api-docs-webhook-event h5 {
	margin: 12px 0 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.55);
}
.nxtl-v2-api-docs-hero {
	margin-bottom: 14px;
}
.nxtl-v2-api-docs-hero h1 {
	margin: 0 0 8px;
	font-size: clamp(1.45rem, 3.2vw, 2rem);
	line-height: 1.15;
}
.nxtl-v2-api-docs-hero-actions {
	margin-top: 12px;
}
.nxtl-v2-api-docs-base {
	margin: 10px 0 0;
	font-size: 13px;
}
.nxtl-v2-api-docs-ol {
	margin: 8px 0 12px;
	padding-left: 20px;
	color: var(--nxtl-muted);
	line-height: 1.55;
}
.nxtl-v2-api-docs-ol li {
	margin-bottom: 4px;
}
/* =================================================================
 * NXTL Business — partner portal layout, rail, and identity surface.
 *
 * Layout note:
 *   The B2B page is wrapped in `.nxtl-v2-b2b-layout`. On desktop it is a
 *   two-column grid (rail + content). On mobile it collapses to a single
 *   stack with the sub-nav rendered as a horizontally-scrollable chip
 *   row so the content stays the primary surface.
 *
 * Partner-context note:
 *   We deliberately do NOT shrink the WooCommerce account-pill nav for
 *   partners any more — the previous override made the partner pills
 *   visibly smaller than the B2C ones (a regression the user flagged
 *   when comparing the two menus). The `body.nxtl-v2-partner-context`
 *   accent is now scoped to surfaces that are visually distinct from
 *   the consumer pages (button tint), not the shared nav chrome.
 * ================================================================= */

.nxtl-v2-b2b-layout {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nxtl-v2-b2b-rail {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 960px) {
	.nxtl-v2-b2b-layout {
		display: grid;
		grid-template-columns: 248px minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}
	.nxtl-v2-b2b-layout > .nxtl-v2-b2b-rail {
		align-self: start;
		position: sticky;
		top: 12px;
	}
}

/* ---- Partner identity card (top of rail) ----
 *
 * Brand-aligned variant. The previous blue accent introduced a second
 * colour system that fought the red active "Business" pill in the menu
 * row above the rail. Switching to `--nxtl-accent` keeps a single
 * accent across B2C and B2B; the partner identity stays distinguishable
 * via the wordmark, the avatar shape, and the role chip — not via a
 * competing hue.
 */

.nxtl-v2-b2b-identity {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 16px 14px;
	border-radius: 16px;
	border: 1px solid rgba(255, 94, 112, 0.20);
	background:
		radial-gradient(120% 80% at 0% 0%, rgba(255, 94, 112, 0.22) 0%, transparent 60%),
		linear-gradient(180deg, rgba(28, 18, 24, 0.94) 0%, rgba(12, 14, 20, 0.96) 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 36px -28px rgba(255, 56, 79, 0.45);
}

.nxtl-v2-b2b-identity__wordmark {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(245, 247, 250, 0.78);
}
.nxtl-v2-b2b-identity__wordmark::before {
	content: '';
	width: 14px;
	height: 2px;
	background: linear-gradient(90deg, var(--nxtl-accent), transparent);
	border-radius: 1px;
}

.nxtl-v2-b2b-identity__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nxtl-v2-b2b-identity__avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #f5f7fa;
	background: linear-gradient(135deg, var(--nxtl-accent) 0%, var(--nxtl-accent-2) 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	overflow: hidden;
}
.nxtl-v2-b2b-identity__avatar--photo {
	padding: 0;
	background: rgba(0, 0, 0, 0.45);
}
.nxtl-v2-b2b-identity__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nxtl-v2-b2b-identity__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.nxtl-v2-b2b-identity__company {
	font-size: 15px;
	font-weight: 700;
	color: #f5f7fa;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nxtl-v2-b2b-identity__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: rgba(245, 247, 250, 0.78);
}

.nxtl-v2-b2b-identity__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34c759;
	box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18);
}

.nxtl-v2-b2b-identity__role {
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 999px;
	/* Role chip stays neutral on purpose: it's metadata ("you are the
	   owner / a member"), not a status the user should act on, so we
	   keep it slate-grey and let the green Active dot remain the only
	   coloured indicator next to the company name. */
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: rgba(228, 232, 240, 0.82);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nxtl-v2-b2b-identity__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 2px;
}

.nxtl-v2-b2b-identity__file {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.nxtl-v2-b2b-identity__upload-btn,
.nxtl-v2-b2b-identity__remove-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 94, 112, 0.32);
	background: rgba(255, 94, 112, 0.10);
	color: rgba(252, 232, 234, 0.94);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.nxtl-v2-b2b-identity__upload-btn:hover,
.nxtl-v2-b2b-identity__upload-btn:focus-within,
.nxtl-v2-b2b-identity__remove-btn:hover,
.nxtl-v2-b2b-identity__remove-btn:focus-visible {
	background: rgba(255, 94, 112, 0.18);
	border-color: rgba(255, 94, 112, 0.55);
	color: #fff;
	outline: none;
}
.nxtl-v2-b2b-identity__remove-btn {
	background: transparent;
	border-color: rgba(255, 91, 91, 0.28);
	color: rgba(255, 169, 169, 0.86);
}
.nxtl-v2-b2b-identity__remove-btn:hover,
.nxtl-v2-b2b-identity__remove-btn:focus-visible {
	background: rgba(255, 91, 91, 0.12);
	border-color: rgba(255, 91, 91, 0.55);
	color: #fff;
}

.nxtl-v2-b2b-identity__hint {
	margin: 0;
	font-size: 11px;
	color: rgba(220, 226, 236, 0.58);
}

.nxtl-v2-b2b-identity__flash-detail {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 500;
	color: rgba(255, 217, 217, 0.86);
}

.nxtl-v2-b2b-identity__flash {
	margin: 0;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 12px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.25);
	color: rgba(245, 247, 250, 0.88);
}
.nxtl-v2-b2b-identity__flash--good {
	border-color: rgba(52, 199, 89, 0.32);
	background: rgba(52, 199, 89, 0.10);
	color: #d8f5dc;
}
.nxtl-v2-b2b-identity__flash--urgent {
	border-color: rgba(255, 91, 91, 0.40);
	background: rgba(255, 91, 91, 0.10);
	color: #ffd9d9;
}

/* ---- Sub-nav (inside the rail) ---- */

.nxtl-v2-b2b-subnav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px;
	border-radius: 14px;
	border: 1px solid var(--nxtl-border);
	background:
		linear-gradient(180deg, rgba(20, 23, 31, 0.78) 0%, rgba(12, 14, 20, 0.86) 100%);
}

.nxtl-v2-b2b-subnav__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	color: rgba(228, 232, 240, 0.82);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid transparent;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.nxtl-v2-b2b-subnav__item:hover,
.nxtl-v2-b2b-subnav__item:focus-visible {
	background: rgba(255, 94, 112, 0.10);
	color: #fff;
	outline: none;
}
.nxtl-v2-b2b-subnav__item.is-active {
	background: linear-gradient(180deg, rgba(255, 94, 112, 0.36) 0%, rgba(255, 56, 79, 0.20) 100%);
	border-color: rgba(255, 94, 112, 0.50);
	color: #fff;
	box-shadow: 0 6px 16px -10px rgba(255, 56, 79, 0.55);
}

.nxtl-v2-b2b-subnav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(220, 226, 236, 0.82);
	flex: 0 0 auto;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.nxtl-v2-b2b-subnav__item.is-active .nxtl-v2-b2b-subnav__icon,
.nxtl-v2-b2b-subnav__item:hover .nxtl-v2-b2b-subnav__icon {
	background: rgba(255, 94, 112, 0.22);
	border-color: rgba(255, 94, 112, 0.42);
	color: #fff;
}

.nxtl-v2-b2b-subnav__label {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Below the rail breakpoint the sub-nav becomes a horizontal chip row.
   We use the same chips but lay them out in a row so the rail content
   doesn't push the tab content way down on narrow screens. */
@media (max-width: 959px) {
	.nxtl-v2-b2b-subnav {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 6px;
		padding: 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.nxtl-v2-b2b-subnav::-webkit-scrollbar { display: none; }
	.nxtl-v2-b2b-subnav__item {
		flex: 0 0 auto;
		padding: 7px 10px;
	}
	.nxtl-v2-b2b-subnav__label { display: none; }
	/* On phones, restore the label so chips read correctly when iconography
	   alone is ambiguous. We hide the icon background frame to save room. */
	@media (max-width: 640px) {
		.nxtl-v2-b2b-subnav__label { display: inline; }
	}
}

/* ---- Hero KPI strip ---- */

.nxtl-v2-b2b-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 12px;
	align-items: stretch;
}

.nxtl-v2-b2b-hero__tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 6px;
	padding: 16px 18px 14px;
	min-height: 116px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background:
		linear-gradient(180deg, rgba(255, 94, 112, 0.08) 0%, rgba(8, 10, 16, 0.45) 100%);
	color: inherit;
	text-decoration: none;
	transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.nxtl-v2-b2b-hero__tile:hover,
.nxtl-v2-b2b-hero__tile:focus-visible {
	/*
	 * Use the brand red at full opacity for the border so the top
	 * edge stays visible against the red-tinged top of the tile
	 * gradient (the previous 0.42 alpha vanished into the gradient
	 * and made it look like the top border was missing). We also
	 * stack an inset 1px ring of the same colour to guarantee a
	 * crisp full perimeter at any subpixel zoom level — borders
	 * alone can lose a side on fractional DPI.
	 */
	border-color: var(--nxtl-accent, #f44b60);
	background:
		linear-gradient(180deg, rgba(255, 94, 112, 0.14) 0%, rgba(8, 10, 16, 0.55) 100%);
	transform: translateY(-1px);
	box-shadow:
		inset 0 0 0 1px var(--nxtl-accent, #f44b60),
		0 14px 28px -22px rgba(255, 56, 79, 0.50);
	outline: none;
}

.nxtl-v2-b2b-hero__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(220, 226, 236, 0.66);
}

.nxtl-v2-b2b-hero__value {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-weight: 800;
	color: #f5f7fa;
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.nxtl-v2-b2b-hero__value--money,
.nxtl-v2-b2b-hero__value--count {
	font-size: clamp(1.45rem, 2.2vw, 1.75rem);
}
.nxtl-v2-b2b-hero__value--money .woocommerce-Price-currencySymbol {
	font-size: 0.65em;
	font-weight: 700;
	color: rgba(220, 226, 236, 0.66);
	margin-right: 2px;
}
/* Compact text-status variant (Webhook health). The previous design used
   the same 22px treatment as the numeric tiles, which forced strings like
   "Not configured" onto two lines and left the tile visually broken next
   to the others. Smaller weight + own line keeps every tile aligned. */
.nxtl-v2-b2b-hero__value--status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.nxtl-v2-b2b-hero__health-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.nxtl-v2-b2b-hero__hint {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: rgba(220, 226, 236, 0.68);
}

.nxtl-v2-b2b-hero__health-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
	flex: 0 0 auto;
}

/* Partner-context cool accent — applied to body so it scopes every B2B page
   without bleeding into B2C surfaces. Subtle: a faint cool tint in the
   primary button hover. We intentionally leave the WooCommerce
   account-pill nav untouched so the partner menu pills look identical to
   the B2C ones (Balance / Auto top-up / Orders / Profile) — see header
   note above for context. */
body.nxtl-v2-partner-context .nxtl-v2-btn-primary {
	--nxtl-btn-primary-tint: rgba(46, 109, 184, 0.22);
}

/* ---- Overview onboarding (Getting started + Next steps two-column) ---- */

.nxtl-v2-b2b-onboarding {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nxtl-space-5);
}
@media (min-width: 1100px) {
	.nxtl-v2-b2b-onboarding {
		grid-template-columns: 1.15fr 1fr;
	}
}

.nxtl-v2-b2b-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nxtl-v2-b2b-checklist__item {
	display: flex;
	align-items: stretch;
	gap: 10px;
	padding: 0;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.04);
	background: linear-gradient(180deg, rgba(20, 23, 31, 0.55) 0%, rgba(10, 13, 18, 0.65) 100%);
	transition: border-color 120ms ease, background 120ms ease;
}
.nxtl-v2-b2b-checklist__item:hover {
	border-color: rgba(255, 94, 112, 0.30);
	background: linear-gradient(180deg, rgba(36, 22, 28, 0.62) 0%, rgba(10, 13, 18, 0.75) 100%);
}

.nxtl-v2-b2b-checklist__bullet {
	flex: 0 0 auto;
	align-self: center;
	margin-left: 12px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid rgba(180, 200, 226, 0.42);
	background: rgba(0, 0, 0, 0.35);
	position: relative;
}
.nxtl-v2-b2b-checklist__item.is-done .nxtl-v2-b2b-checklist__bullet {
	border-color: #34c759;
	background: #34c759;
}
.nxtl-v2-b2b-checklist__item.is-done .nxtl-v2-b2b-checklist__bullet::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1.5px;
	width: 4px;
	height: 8px;
	border: solid #0a0d12;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.nxtl-v2-b2b-checklist__link {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 10px 12px 10px 6px;
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.nxtl-v2-b2b-checklist__title {
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(245, 247, 250, 0.94);
}

.nxtl-v2-b2b-checklist__hint {
	font-size: 12px;
	color: rgba(180, 200, 226, 0.74);
}
.nxtl-v2-b2b-checklist__item.is-done .nxtl-v2-b2b-checklist__hint {
	color: rgba(149, 224, 168, 0.88);
}

a.nxtl-v2-b2b-checklist__link:hover .nxtl-v2-b2b-checklist__title,
a.nxtl-v2-b2b-checklist__link:focus-visible .nxtl-v2-b2b-checklist__title {
	color: #fff;
}

/* "You also have N personal eSIMs" inline callout — only renders when
   the partner-owner has retail-side lines, so we don't strand the rare
   case after we hide the personal `My eSIMs` / `Balance` pills. */
.nxtl-v2-b2b-personal-callout {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: linear-gradient(180deg, rgba(36, 22, 28, 0.55) 0%, rgba(10, 13, 18, 0.65) 100%);
	font-size: 13px;
	color: rgba(245, 247, 250, 0.86);
}
.nxtl-v2-b2b-personal-callout__icon {
	color: var(--nxtl-accent);
	font-size: 16px;
	line-height: 1;
}
.nxtl-v2-b2b-personal-callout a {
	color: var(--nxtl-accent);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px dotted rgba(255, 94, 112, 0.45);
}
.nxtl-v2-b2b-personal-callout a:hover,
.nxtl-v2-b2b-personal-callout a:focus-visible {
	color: var(--nxtl-accent-2);
	border-bottom-color: var(--nxtl-accent-2);
	outline: none;
}

/* ---------- B2B pricing strip (always-on disclosure under hero) ----------
 *
 * Two pricing facts a partner needs to know before issuing eSIMs are now
 * visible on the Overview without hunting the API docs. The strip is
 * intentionally low-contrast so it sits below the hero KPI tiles
 * without competing visually, but stays accessible (semantic <aside>,
 * proper heading-style labels, large enough type).
 * ---------------------------------------------------------------------- */
.nxtl-v2-b2b-pricing-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	background: linear-gradient(180deg, rgba(20, 23, 31, 0.55) 0%, rgba(10, 13, 18, 0.65) 100%);
	font-size: 13px;
}
.nxtl-v2-b2b-pricing-strip__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 160px;
}
.nxtl-v2-b2b-pricing-strip__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(220, 226, 236, 0.66);
}
.nxtl-v2-b2b-pricing-strip__value {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: #f5f7fa;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.nxtl-v2-b2b-pricing-strip__value .woocommerce-Price-currencySymbol {
	font-size: 0.7em;
	font-weight: 700;
	color: rgba(220, 226, 236, 0.74);
	margin-right: 2px;
}
.nxtl-v2-b2b-pricing-strip__per {
	font-size: 11.5px;
	font-weight: 600;
	color: rgba(220, 226, 236, 0.66);
	letter-spacing: 0;
	text-transform: none;
}
.nxtl-v2-b2b-pricing-strip__source {
	font-size: 11px;
	color: rgba(220, 226, 236, 0.5);
	font-variant-numeric: tabular-nums;
	margin-top: 1px;
	cursor: help;
}
.nxtl-v2-b2b-pricing-strip__divider {
	width: 1px;
	height: 36px;
	background: rgba(255, 255, 255, 0.10);
}
.nxtl-v2-b2b-pricing-strip__note {
	margin: 0;
	flex: 1 1 240px;
	min-width: 220px;
	font-size: 12px;
	line-height: 1.45;
	color: rgba(220, 226, 236, 0.62);
}
.nxtl-v2-b2b-pricing-strip__note a {
	color: var(--nxtl-accent);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px dotted rgba(255, 94, 112, 0.45);
}
.nxtl-v2-b2b-pricing-strip__note a:hover,
.nxtl-v2-b2b-pricing-strip__note a:focus-visible {
	color: var(--nxtl-accent-2);
	border-bottom-color: var(--nxtl-accent-2);
	outline: none;
}
@media (max-width: 540px) {
	.nxtl-v2-b2b-pricing-strip__divider { display: none; }
	.nxtl-v2-b2b-pricing-strip__item { min-width: 100%; }
}

/* =================================================================
 * Partner Dashboard tab.
 *
 * The default Dashboard pill points at the same `nxtl-dashboard`
 * endpoint for everyone. For partners we override the render to a
 * condensed B2B landing (welcome card + KPI hero + quick actions +
 * recent activity) instead of the consumer "Buy your first eSIM"
 * funnel. Styles below scope to that view only via the
 * `nxtl-v2-b2b-dashboard-tab` wrapper so we don't pollute the
 * consumer dashboard.
 * ================================================================= */

.nxtl-v2-b2b-dash-welcome {
	background:
		radial-gradient(circle at 0% 0%, rgba(244, 75, 96, 0.18), transparent 55%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
	border: 1px solid var(--nxtl-border, rgba(255, 255, 255, 0.08));
	overflow: hidden;
	position: relative;
}
.nxtl-v2-b2b-dash-welcome::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, var(--nxtl-accent, #f44b60), transparent);
}
.nxtl-v2-b2b-dash-welcome__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.nxtl-v2-b2b-dash-welcome__title {
	margin: 4px 0 6px;
	font-size: 24px;
	line-height: 1.2;
	color: var(--nxtl-text, #fff);
}
.nxtl-v2-b2b-dash-welcome__sub {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--nxtl-muted, rgba(255, 255, 255, 0.65));
}
.nxtl-v2-b2b-dash-welcome__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34c759;
	box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.15);
}
.nxtl-v2-b2b-dash-welcome__divider {
	opacity: 0.5;
}
.nxtl-v2-b2b-dash-welcome__actions {
	flex-wrap: wrap;
}

.nxtl-v2-b2b-quickactions__head {
	margin-bottom: 12px;
}
.nxtl-v2-b2b-quickactions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
.nxtl-v2-b2b-quickactions__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--nxtl-border, rgba(255, 255, 255, 0.08));
	background: rgba(255, 255, 255, 0.02);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.nxtl-v2-b2b-quickactions__item:hover,
.nxtl-v2-b2b-quickactions__item:focus-visible {
	border-color: var(--nxtl-accent, #f44b60);
	background: rgba(244, 75, 96, 0.06);
	transform: translateY(-1px);
	box-shadow:
		inset 0 0 0 1px var(--nxtl-accent, #f44b60),
		0 12px 24px -20px rgba(255, 56, 79, 0.45);
	outline: none;
}
.nxtl-v2-b2b-quickactions__title {
	font-weight: 600;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--nxtl-text, #fff);
}
.nxtl-v2-b2b-quickactions__hint {
	font-size: 12.5px;
	color: var(--nxtl-muted, rgba(255, 255, 255, 0.65));
	line-height: 1.4;
}
.nxtl-v2-b2b-quickactions__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	padding: 0 6px;
	height: 18px;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: rgba(244, 75, 96, 0.12);
	color: var(--nxtl-accent, #f44b60);
	text-transform: uppercase;
}
.nxtl-v2-b2b-quickactions__pill--ok {
	background: rgba(52, 199, 89, 0.14);
	color: #34c759;
}
.nxtl-v2-b2b-quickactions__pill--warn {
	background: rgba(245, 185, 74, 0.16);
	color: #f5b94a;
}

.nxtl-v2-b2b-recent__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.nxtl-v2-b2b-recent__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.nxtl-v2-b2b-recent__item {
	padding: 10px 0;
	border-top: 1px solid var(--nxtl-border, rgba(255, 255, 255, 0.06));
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.nxtl-v2-b2b-recent__item:first-child {
	border-top: none;
	padding-top: 0;
}
.nxtl-v2-b2b-recent__line {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.nxtl-v2-b2b-recent__action {
	font-weight: 600;
	color: var(--nxtl-text, #fff);
	font-size: 13.5px;
}
.nxtl-v2-b2b-recent__target {
	font-size: 11.5px;
	background: rgba(255, 255, 255, 0.04);
	padding: 1px 6px;
	border-radius: 4px;
	color: var(--nxtl-muted, rgba(255, 255, 255, 0.7));
}
.nxtl-v2-b2b-recent__meta {
	display: inline-flex;
	gap: 6px;
	font-size: 12px;
	color: var(--nxtl-muted, rgba(255, 255, 255, 0.6));
}
.nxtl-v2-b2b-recent__sep {
	opacity: 0.5;
}

@media (max-width: 540px) {
	.nxtl-v2-b2b-dash-welcome__inner { flex-direction: column; align-items: flex-start; }
	.nxtl-v2-b2b-dash-welcome__actions { width: 100%; }
	.nxtl-v2-b2b-dash-welcome__actions .nxtl-v2-btn { flex: 1 0 auto; text-align: center; }
}

/* =================================================================
 * Webhook event subscriptions — grouped picker.
 *
 * Replaces the previous flat 2-column grid of plain checkboxes whose
 * cells re-sized to the content of each description, producing a
 * jagged ribbon of misaligned tiles. The new layout uses a single
 * full-width row per event with a real toggle switch on the right;
 * rows are siblings so they all share the same height regardless of
 * description length, and rows are bucketed under namespace headers
 * (eSIM / Balance / Bulk job / Test) so 14 events read as four
 * digestible sections.
 * ================================================================= */

.nxtl-v2-b2b-event-fieldset {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nxtl-v2-b2b-event-legend {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(220, 226, 236, 0.66);
	margin-bottom: 6px;
	padding: 0;
}

.nxtl-v2-b2b-event-group {
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	background: linear-gradient(180deg, rgba(20, 23, 31, 0.55) 0%, rgba(10, 13, 18, 0.65) 100%);
	overflow: hidden;
}

.nxtl-v2-b2b-event-group__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	background: rgba(255, 255, 255, 0.015);
}

.nxtl-v2-b2b-event-group__title {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(245, 247, 250, 0.80);
}

.nxtl-v2-b2b-event-group__toggle-all {
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: rgba(255, 255, 255, 0.02);
	color: rgba(245, 247, 250, 0.74);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.nxtl-v2-b2b-event-group__toggle-all:hover,
.nxtl-v2-b2b-event-group__toggle-all:focus-visible {
	background: rgba(255, 94, 112, 0.12);
	border-color: rgba(255, 94, 112, 0.42);
	color: #fff;
	outline: none;
}

.nxtl-v2-b2b-event-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nxtl-v2-b2b-event-row + .nxtl-v2-b2b-event-row {
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.nxtl-v2-b2b-event-row__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 14px;
	cursor: pointer;
	transition: background 120ms ease;
}
.nxtl-v2-b2b-event-row__label:hover {
	background: rgba(255, 94, 112, 0.06);
}

.nxtl-v2-b2b-event-row__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.nxtl-v2-b2b-event-row__name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13px;
}
.nxtl-v2-b2b-event-row__name code {
	font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--nxtl-accent);
	background: transparent;
	padding: 0;
}

.nxtl-v2-b2b-event-row__pip {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(52, 199, 89, 0.14);
	border: 1px solid rgba(52, 199, 89, 0.32);
	color: #a8eab9;
}

.nxtl-v2-b2b-event-row__desc {
	font-size: 12.5px;
	color: rgba(220, 226, 236, 0.72);
	line-height: 1.45;
}

/* Toggle switch — pure CSS, the underlying <input> stays a real
   checkbox so the form submit set is unchanged and assistive tech
   can still announce / toggle it. */
.nxtl-v2-b2b-event-row__switch {
	position: relative;
	flex: 0 0 auto;
}
.nxtl-v2-b2b-event-row__switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0;
}
.nxtl-v2-b2b-event-row__switch-track {
	display: inline-block;
	position: relative;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.10);
	transition: background 120ms ease, border-color 120ms ease;
	vertical-align: middle;
}
.nxtl-v2-b2b-event-row__switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #f5f7fa;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	transition: transform 140ms ease;
}
.nxtl-v2-b2b-event-row__switch input:checked + .nxtl-v2-b2b-event-row__switch-track {
	background: linear-gradient(180deg, var(--nxtl-accent), var(--nxtl-accent-2));
	border-color: var(--nxtl-accent);
}
.nxtl-v2-b2b-event-row__switch input:checked + .nxtl-v2-b2b-event-row__switch-track .nxtl-v2-b2b-event-row__switch-thumb {
	transform: translateX(16px);
}
.nxtl-v2-b2b-event-row__switch input:focus-visible + .nxtl-v2-b2b-event-row__switch-track {
	outline: 2px solid rgba(255, 94, 112, 0.55);
	outline-offset: 2px;
}

/* In-page API health (fetch + cards) */
#nxtl-v2-api-health,
#nxtl-v2-api-reference {
	scroll-margin-top: 88px;
}
.nxtl-v2-b2b-api-health-title {
	margin: 0 0 6px;
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
}
.nxtl-v2-b2b-api-health-lead {
	margin: 0 0 12px;
	font-size: 13px;
}
.nxtl-v2-b2b-api-health--compact .nxtl-v2-b2b-api-health-title {
	font-size: 1.05rem;
}
.nxtl-v2-b2b-api-health--compact .nxtl-v2-b2b-api-health-lead {
	margin-bottom: 8px;
}
.nxtl-v2-b2b-api-health-body {
	min-height: 3.5rem;
}
.nxtl-v2-b2b-api-health-actions {
	margin-top: 12px;
	flex-wrap: wrap;
	gap: 8px;
}
.nxtl-v2-health-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 16px;
}
@media (max-width: 640px) {
	.nxtl-v2-health-grid {
		grid-template-columns: 1fr;
	}
}
.nxtl-v2-health-metric {
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.25);
}
.nxtl-v2-health-metric-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--nxtl-muted);
	margin-bottom: 6px;
}
.nxtl-v2-health-metric strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--nxtl-text);
	word-break: break-word;
}
.nxtl-v2-health-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}
.nxtl-v2-health-pill--ok {
	background: rgba(46, 204, 113, 0.2);
	color: #8fefb8;
	border: 1px solid rgba(46, 204, 113, 0.45);
}
.nxtl-v2-health-pill--warn {
	background: rgba(241, 196, 15, 0.15);
	color: #f1c40f;
	border: 1px solid rgba(241, 196, 15, 0.4);
}
.nxtl-v2-health-error {
	margin: 0;
	color: #ff8a8a;
	font-size: 14px;
}

/*
 * One-tap saved-card flow UI.
 *
 * - .nxtl-v2-modal--confirm: in-design alert dialog used in place of the
 *   browser's native window.confirm() prompt.
 * - .nxtl-v2-charge-overlay: full-page veil with a spinner shown while we
 *   talk to the PayPal API and while we redirect for SCA.
 */

/*
 * Confirm dialog ? intentionally compact. Layout: icon sits inline next
 * to the title (single row), then a one-line body, then the two action
 * buttons. Targets ~150px tall on desktop, ~165px on phones.
 *
 * The base `.nxtl-v2-modal-dialog` rule pins every modal dialog to
 * `height: min(88vh, 760px)` because the iframe checkout modal needs the
 * full vertical real estate. We explicitly opt back out of that here so
 * the confirm dialog only takes the height of its content.
 */
.nxtl-v2-modal-dialog--confirm {
	max-width: 400px;
	width: calc(100% - 24px);
	height: auto !important;
	min-height: 0 !important;
	background: #11131a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
	padding: 14px 16px;
	color: #f5f7fa;
	margin: auto;
	display: block;
}
.nxtl-v2-modal--confirm .nxtl-v2-modal-dialog--confirm {
	overflow: visible;
}
.nxtl-v2-confirm-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	gap: 8px;
}
.nxtl-v2-confirm-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.nxtl-v2-confirm-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
}
.nxtl-v2-modal--confirm-info .nxtl-v2-confirm-icon {
	background: linear-gradient(160deg, #ff5e70, #ff384f);
	box-shadow: 0 4px 12px rgba(255, 56, 79, 0.25);
}
.nxtl-v2-modal--confirm-info .nxtl-v2-confirm-icon::before { content: "\20AC"; font-size: 14px; }
.nxtl-v2-modal--confirm-danger .nxtl-v2-confirm-icon {
	background: linear-gradient(160deg, #ff6b6b, #ff384f);
	box-shadow: 0 4px 12px rgba(255, 56, 79, 0.25);
}
.nxtl-v2-modal--confirm-danger .nxtl-v2-confirm-icon::before { content: "!"; font-size: 16px; }
.nxtl-v2-confirm-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #f5f7fa;
	line-height: 1.25;
}
.nxtl-v2-confirm-body {
	margin: 0;
	color: #aeb5c0;
	font-size: 13px;
	line-height: 1.45;
}
.nxtl-v2-confirm-actions {
	display: flex;
	gap: 8px;
	margin-top: 4px;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 100%;
}
.nxtl-v2-confirm-actions .nxtl-v2-btn {
	flex: 0 1 auto;
	min-width: 110px;
	max-width: 240px;
	justify-content: center;
	padding: 9px 14px;
	font-size: 13px;
}
@media (max-width: 480px) {
	.nxtl-v2-modal-dialog--confirm {
		max-width: 100%;
		width: calc(100% - 24px);
		border-radius: 14px;
		padding: 14px;
	}
	.nxtl-v2-confirm-actions .nxtl-v2-btn { flex: 1 1 0; min-width: 0; }
}
.nxtl-v2-confirm-actions .nxtl-v2-btn-primary {
	background: linear-gradient(160deg, #ff5e70, #ff384f);
	border: 0;
	color: #fff;
	box-shadow: 0 10px 20px rgba(255, 56, 79, 0.28);
}
.nxtl-v2-confirm-actions .nxtl-v2-btn-primary:hover {
	transform: translateY(-1px);
}

.nxtl-v2-charge-overlay {
	position: fixed;
	inset: 0;
	background: rgba(8, 12, 18, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.nxtl-v2-charge-overlay[hidden] { display: none !important; }
.nxtl-v2-charge-overlay__card {
	background: #11131a;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 22px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
	min-width: 240px;
}
.nxtl-v2-charge-overlay__spinner {
	width: 22px;
	height: 22px;
	border: 2px solid rgba(255, 255, 255, 0.12);
	border-top-color: #ff5e70;
	border-radius: 50%;
	animation: nxtl-v2-spin 0.85s linear infinite;
	flex-shrink: 0;
}
.nxtl-v2-charge-overlay__text {
	margin: 0;
	color: #f5f7fa;
	font-size: 14px;
	font-weight: 500;
}
@keyframes nxtl-v2-spin { to { transform: rotate(360deg); } }

/*
 * Saved-card / one-tap top-up row on the Balance page. Layout adapts so
 * the buttons stack and fill width on phones, and stay inline beside the
 * "Add balance" form on desktop.
 */
.nxtl-v2-saved-card-row {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nxtl-v2-saved-card-row__label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #aeb5c0;
}
.nxtl-v2-saved-card-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.nxtl-v2-saved-card-buttons .nxtl-v2-saved-card-btn {
	flex: 0 1 auto;
	min-width: 0;
	padding: 9px 14px;
	font-size: 13px;
	white-space: nowrap;
	letter-spacing: 0.01em;
}
.nxtl-v2-saved-card-row__hint {
	margin: 10px 0 0;
	color: #6c7484;
	font-size: 12px;
	line-height: 1.5;
}
.nxtl-v2-saved-card-row__hint a {
	color: #aeb5c0;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.18);
	text-underline-offset: 2px;
}
.nxtl-v2-saved-card-row__hint a:hover {
	color: #ffffff;
}
@media (max-width: 600px) {
	.nxtl-v2-saved-card-buttons .nxtl-v2-saved-card-btn {
		flex: 1 1 100%;
		justify-content: center;
		padding: 11px 14px;
	}
}

/* -----------------------------------------------------------------------
   My eSIMs page ? narrow-viewport overflow safeguards.

   The eSIM cards contain a long readonly activation code (e.g.
   `LPA:1$consumer.e-sim.global$TN20250310113927F9673A...`), a bulk-action
   bar, and a header with a status badge plus an "Exchange (?1.71)" button.
   On phones any of these can push the card wider than the viewport
   if the parent flex/grid containers can't shrink past their intrinsic
   content width.

   Mitigations:
     ? Clamp every level of the subtree to 100% viewport width and
       reset min-width chain so children can actually shrink.
     ? `overflow-x: clip` on the outermost containers as a backstop.
     ? Wrap the card header so the IN SERVICE badge + Exchange button drop
       below the nickname instead of fighting the title for room.
     ? Stack lifecycle actions (Suspend / Terminate) full-width vertically
       so they no longer poke past the right edge.
     ? Shrink the activation-code field font and let ICCIDs break.
   ----------------------------------------------------------------------- */
@media (max-width: 640px) {
	.nxtl-v2-esims,
	.nxtl-v2-esim-grid,
	.nxtl-v2-esim-list,
	.nxtl-v2-esim-card,
	.nxtl-v2-esim-main-grid,
	.nxtl-v2-esim-info-grid,
	.nxtl-v2-esim-head,
	.nxtl-v2-esim-head-left,
	.nxtl-v2-esim-head-actions,
	.nxtl-v2-bulk-bar-wrap,
	.nxtl-v2-bulk-actions,
	.nxtl-v2-bulk-group,
	.nxtl-v2-lifecycle-actions,
	.nxtl-v2-manage-grid {
		max-width: 100%;
		min-width: 0;
	}

	.nxtl-v2-esims,
	.nxtl-v2-esim-card,
	.nxtl-v2-bulk-bar-wrap {
		overflow-x: clip;
	}

	/* Header: wrap so the badge + Exchange CTA drop to a new row when the
	   title cluster + actions cluster don't both fit. Without `flex-wrap`
	   the right cluster just escapes the card. */
	.nxtl-v2-esim-head {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.nxtl-v2-esim-head-actions {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.nxtl-v2-esim-head-actions .nxtl-v2-btn {
		flex: 0 1 auto;
	}

	/* Lifecycle (Suspend / Terminate) ? stack full-width on phones. The
	   default flex row puts them side-by-side, which on narrow screens
	   pushed the Terminate button beyond the card edge. */
	.nxtl-v2-lifecycle-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.nxtl-v2-lifecycle-actions .nxtl-v2-btn {
		width: 100%;
		justify-content: center;
	}

	.nxtl-v2-bulk-group {
		padding-left: 0;
		border-left: 0;
	}

	.nxtl-v2-copy-row .nxtl-v2-copy-field,
	.nxtl-v2-copy-field {
		font-size: 11px;
		padding: 0 10px;
	}

	.nxtl-v2-iccid-full {
		word-break: break-all;
		overflow-wrap: anywhere;
	}

	/* Manage grid (Nickname + Tier) is already 1fr at 760px, but make sure
	   the inner inputs/selects can't push the column wider than its track. */
	.nxtl-v2-manage-grid input,
	.nxtl-v2-manage-grid select {
		max-width: 100%;
		min-width: 0;
	}
}

/* =======================================================================
   Account hero ? personalised greeting + KPI strip rendered above the
   navigation pills (woocommerce_before_account_navigation).
   ======================================================================= */

/* Hide the theme's redundant "My account" page-title band on every WC
   account subpage so the new hero becomes the canonical greeting. The
   selectors are deliberately broad to cover Astra/Twenty Twenty/Storefront/
   custom themes without us having to fork them ? `display: none` only
   applies inside `body.woocommerce-account`. */
body.woocommerce-account .entry-header,
body.woocommerce-account .page-header,
body.woocommerce-account .page-title-wrapper,
body.woocommerce-account header.entry-header,
body.woocommerce-account .ast-page-header,
body.woocommerce-account .elementor-section.elementor-top-section.page-header,
body.woocommerce-account .breadcrumbs-area,
body.woocommerce-account .page > header,
body.woocommerce-account .single-page-title,
body.woocommerce-account #page-title,
body.woocommerce-account .e-page-title,
body.woocommerce-account h1.entry-title:not(.nxtl-v2-account-hero-title) {
	display: none !important;
}

.nxtl-v2-account-hero {
	position: relative;
	/* Negative top margin pulls the card up so it visually overlaps the
	   bottom of the theme band ? premium dashboard pattern (Stripe,
	   Vercel) where the hero card "lifts off" the page hero. The card
	   keeps its own dark gradient so contrast stays high regardless of
	   what the band shows behind it. */
	margin: -28px 0 18px;
	padding: 24px 28px 22px;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background:
		radial-gradient(900px 240px at 0% 0%, rgba(255, 94, 112, 0.10), transparent 70%),
		linear-gradient(165deg, rgba(28, 31, 40, 0.98) 0%, rgba(15, 17, 22, 0.99) 60%, rgba(11, 13, 18, 1) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 24px 60px -28px rgba(0, 0, 0, 0.7);
	color: var(--nxtl-text);
	overflow: hidden;
	z-index: 2;
}

@media (max-width: 720px) {
	.nxtl-v2-account-hero {
		margin-top: -16px;
	}
}

.nxtl-v2-account-hero::after {
	content: '';
	position: absolute;
	right: -120px;
	top: -60px;
	width: 320px;
	height: 320px;
	background: radial-gradient(closest-side, rgba(255, 56, 79, 0.18), transparent 70%);
	pointer-events: none;
}

.nxtl-v2-account-hero--urgent::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--nxtl-accent), var(--nxtl-accent-2));
}

.nxtl-v2-account-hero--attention::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--nxtl-warning), #d8950b);
}

.nxtl-v2-account-hero-row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}

.nxtl-v2-account-hero-greeting {
	flex: 1 1 auto;
	min-width: 0;
}

.nxtl-v2-account-hero-greeting .nxtl-v2-kicker {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--nxtl-accent);
}

.nxtl-v2-account-hero-title {
	margin: 0 0 8px;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
	letter-spacing: -0.01em;
}

.nxtl-v2-account-hero-status {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--nxtl-muted);
	max-width: 64ch;
}

.nxtl-v2-account-hero--urgent .nxtl-v2-account-hero-status {
	color: #ffd0d0;
}

.nxtl-v2-account-hero--attention .nxtl-v2-account-hero-status {
	color: #ffe4ad;
}

.nxtl-v2-account-hero-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	flex-wrap: wrap;
}

.nxtl-v2-account-hero-currency {
	margin: 0;
}

.nxtl-v2-account-hero-currency select {
	height: 36px;
	/* Custom white chevron ? replaces the browser default black/grey
	   arrow that read as a debug glitch against the dark hero card. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0 34px 0 14px;
	border-radius: 999px;
	border: 1px solid var(--nxtl-border);
	background-color: rgba(9, 12, 17, 0.78);
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px 10px;
	color: var(--nxtl-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.nxtl-v2-account-hero-currency select:hover,
.nxtl-v2-account-hero-currency select:focus-visible {
	border-color: rgba(255, 94, 112, 0.5);
	outline: none;
}

/* Same white-chevron treatment for the dashboard's currency picker
   (and any other selects inside our account cards) so visual language
   is consistent across the dashboard. */
.nxtl-v2-currency-switch select,
.nxtl-v2-card-stack select.nxtl-v2-input,
.woocommerce-account .woocommerce-MyAccount-content select {
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L2 4h8z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 10px 10px !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 32px !important;
}

.nxtl-v2-account-hero-logout {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--nxtl-border);
	background: rgba(9, 12, 17, 0.6);
	color: var(--nxtl-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.nxtl-v2-account-hero-logout:hover,
.nxtl-v2-account-hero-logout:focus-visible {
	color: #fff;
	border-color: rgba(255, 94, 112, 0.6);
	background: rgba(255, 94, 112, 0.16);
	outline: none;
}

.nxtl-v2-account-hero-logout svg {
	flex: 0 0 auto;
	transition: transform 0.18s ease;
}

.nxtl-v2-account-hero-logout:hover svg,
.nxtl-v2-account-hero-logout:focus-visible svg {
	transform: translateX(2px);
}

.nxtl-v2-account-hero-stats {
	position: relative;
	margin: 18px 0 0;
	padding: 18px 0 0;
	list-style: none;
	display: grid;
	/* Mirror the pill-nav grid template so KPI tiles and pills line up
	   into the same vertical columns when the row has room. The pill
	   nav uses minmax(min(140px,100%),1fr) ? same here. */
	grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
	gap: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nxtl-v2-account-hero-stat,
.nxtl-v2-account-hero-stat-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.nxtl-v2-account-hero-stat:has(.nxtl-v2-account-hero-stat-link) {
	padding: 0;
	border: 0;
	background: transparent;
}

.nxtl-v2-account-hero-stat-link {
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
	cursor: pointer;
}

.nxtl-v2-account-hero-stat-link:hover,
.nxtl-v2-account-hero-stat-link:focus-visible {
	border-color: rgba(255, 94, 112, 0.4);
	background: rgba(255, 94, 112, 0.08);
	transform: translateY(-1px);
	outline: none;
}

.nxtl-v2-account-hero-stat-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nxtl-muted);
}

.nxtl-v2-account-hero-stat-value {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--nxtl-text);
	letter-spacing: -0.01em;
}

.nxtl-v2-account-hero-stat-on {
	color: var(--nxtl-success);
}

.nxtl-v2-account-hero-stat-off {
	color: var(--nxtl-muted);
}

.nxtl-v2-account-hero-stat-hint {
	font-size: 12px;
	color: rgba(174, 181, 192, 0.85);
	line-height: 1.4;
}

.nxtl-v2-account-hero-stat--muted .nxtl-v2-account-hero-stat-value {
	color: rgba(245, 247, 250, 0.78);
}

@media (max-width: 720px) {
	.nxtl-v2-account-hero {
		padding: 20px 18px 18px;
		border-radius: 18px;
	}
	.nxtl-v2-account-hero-row {
		gap: 14px;
	}
	.nxtl-v2-account-hero-actions {
		width: 100%;
		justify-content: flex-end;
	}
	.nxtl-v2-account-hero-stats {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.nxtl-v2-account-hero-title {
		font-size: 22px;
	}
}

/* =======================================================================
   Account-pill nav ? KPI subtitles injected by JS (`nxtl-v2-nav-kpi`).
   The injector also wraps the original label in a `nxtl-v2-nav-label` span
   so we can stack label-on-top, KPI-below cleanly without affecting the
   pills that DON'T have a KPI (those keep the original single-line look).
   ======================================================================= */
/* Inline link-style button (looks like a text link, behaves like a
   button). Used for the "See coverage & pricing" prompt on My eSIMs
   that opens the global Network Coverage modal ? keeps the text flow
   intact instead of breaking out into a full button block. */
.nxtl-v2-link-button {
	display: inline;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--nxtl-accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: rgba(255, 94, 112, 0.4);
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.nxtl-v2-link-button:hover,
.nxtl-v2-link-button:focus-visible {
	color: var(--nxtl-accent-2);
	text-decoration-color: rgba(255, 56, 79, 0.85);
	outline: none;
}

.nxtl-v2-tier-hint {
	margin-top: 6px !important;
	font-size: 13px !important;
	color: rgba(245, 247, 250, 0.74) !important;
}

/* All pills get a uniform 50px tall column-flex layout so the row reads
   as a balanced ribbon regardless of which pills carry a KPI subtitle.
   Pills WITHOUT a KPI keep their label centered vertically at the same
   height as those with one.

   Padding kept slim (10px horizontal) so the longest label
   ("NXTL Tokens", "Auto top-up") fits into the 116px min-column the
   nav grid uses ? every pill stays on a single row at desktop widths. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	flex-direction: column !important;
	justify-content: center;
	gap: 2px;
	padding: 6px 10px !important;
	min-height: 50px;
	line-height: 1.18;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a .nxtl-v2-nav-label {
	font-size: 13px;
	font-weight: 700;
	color: inherit;
	letter-spacing: 0.01em;
}

/* KPI subtitle as a subtle bottom chip ? pill-shaped, translucent,
   tabular-nums for clean numeric alignment. Reads as "supporting metric"
   without screaming for attention. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a .nxtl-v2-nav-kpi {
	display: inline-block;
	margin-top: 2px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--nxtl-muted);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a .nxtl-v2-nav-kpi,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover .nxtl-v2-nav-kpi {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 640px) {
	/* On the mobile chip rail the KPI subtitle would steal a third row of
	   height per chip ? drop back to single-line chips on phones; the
	   hero card already shows the live numbers full-width above. */
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		flex-direction: row !important;
		min-height: 38px;
		padding: 8px 16px !important;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a .nxtl-v2-nav-kpi {
		display: none;
	}
}

/* =================================================================
 * B2B portal ? fleet table, stat tiles, alerts grid, flash messages.
 * Lives at the end of the file so it overrides earlier base styles
 * without surprising the consumer dashboard.
 * ================================================================= */
.nxtl-v2-stat-tile {
	background: linear-gradient(180deg, rgba(125, 76, 255, 0.10), rgba(125, 76, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 76px;
}
.nxtl-v2-stat-label {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}
.nxtl-v2-stat-value {
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.nxtl-v2-table {
	font-size: 14px;
}
.nxtl-v2-table thead th {
	text-align: left;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	padding: 8px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nxtl-v2-table tbody td {
	padding: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.84);
	vertical-align: middle;
}
.nxtl-v2-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.03);
}
.nxtl-v2-table code {
	background: rgba(255, 255, 255, 0.06);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 12px;
}

.nxtl-v2-table-wrap {
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.18);
}
.nxtl-v2-table-wrap > table {
	margin: 0;
}

/* B2B Managed eSIMs — fleet filter row: keep Filter aligned with inputs (not vertically centered vs labels) */
.nxtl-v2-fleet-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin-top: 12px;
}
.nxtl-v2-fleet-filter__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}
.nxtl-v2-fleet-filter__field input[type="text"],
.nxtl-v2-fleet-filter__field select {
	min-height: 40px;
	box-sizing: border-box;
}
.nxtl-v2-fleet-filter__ghost-label {
	visibility: hidden;
	line-height: 1.35;
	user-select: none;
	pointer-events: none;
}
.nxtl-v2-fleet-filter__actions .nxtl-v2-btn {
	align-self: flex-start;
	flex-shrink: 0;
}

/* Bulk-action checkbox column - keep it tight + make pointer obvious */
.nxtl-v2-fleet-row-check,
[data-nxtl-select-all] {
	cursor: pointer;
}

.nxtl-v2-pagination .nxtl-v2-btn {
	min-width: 36px;
	text-align: center;
}

/* Flash bubbles spawned by the portal JS */
.nxtl-v2-flash {
	font-weight: 500;
	font-size: 14px;
}

/* Webhook subscription grid: compact two-line label/desc */
.nxtl-v2-events-grid label {
	background: rgba(255, 255, 255, 0.03);
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: background-color 120ms ease, border-color 120ms ease;
}
.nxtl-v2-events-grid label:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(125, 76, 255, 0.4);
}

/* Mobile: tables overflow-x with hint */
@media (max-width: 720px) {
	.nxtl-v2-table th,
	.nxtl-v2-table td {
		white-space: nowrap;
	}
	.nxtl-v2-stat-value {
		font-size: 18px;
	}
	.nxtl-v2-events-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ── WooCommerce Profile (/my-account/edit-account/) NXTL extras ─────── */
body.woocommerce-account .nxtl-v2-account-extras-stack {
	display: flex;
	flex-direction: column;
	gap: var(--nxtl-space-3);
	margin: var(--nxtl-space-4) 0;
}

body.woocommerce-account .nxtl-v2-account-extras-stack fieldset.nxtl-v2-prefs-fieldset,
body.woocommerce-account .nxtl-v2-account-extras-stack fieldset.nxtl-v2-billing-fieldset {
	margin: 0;
	padding: clamp(14px, 2.5vw, 20px);
	border: 1px solid var(--nxtl-border);
	border-radius: var(--nxtl-radius-md);
	background: linear-gradient(165deg, rgba(23, 24, 29, 0.96), rgba(15, 17, 22, 0.98));
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	min-inline-size: 0;
}

body.woocommerce-account .nxtl-v2-prefs-fieldset__legend,
body.woocommerce-account .nxtl-v2-billing-fieldset__legend {
	font-weight: 700;
	font-size: 1.05rem;
	padding: 0 8px;
	color: var(--nxtl-text);
}

body.woocommerce-account .nxtl-v2-prefs-fieldset__lead {
	margin: 0 0 var(--nxtl-space-3);
	font-size: 0.88rem;
	line-height: 1.52;
	color: var(--nxtl-muted);
}

body.woocommerce-account .nxtl-v2-billing-fieldset__intro {
	margin: 0 0 var(--nxtl-space-3);
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--nxtl-muted);
}

body.woocommerce-account .nxtl-v2-billing-fieldset__field {
	margin-bottom: var(--nxtl-space-2);
}

body.woocommerce-account label.nxtl-v2-email-pref-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nxtl-space-3);
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--nxtl-radius-sm);
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.2);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

body.woocommerce-account label.nxtl-v2-email-pref-row:hover {
	border-color: rgba(255, 94, 112, 0.35);
	background: rgba(255, 94, 112, 0.06);
	box-shadow: 0 10px 20px rgba(255, 56, 79, 0.12);
}

body.woocommerce-account .nxtl-v2-email-pref-row__title {
	flex: 1;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.38;
	color: var(--nxtl-text);
}

body.woocommerce-account .nxtl-v2-switch {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	width: 48px;
	height: 28px;
}

body.woocommerce-account .nxtl-v2-switch input {
	position: absolute;
	opacity: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: 2;
	cursor: pointer;
	margin: 0;
}

body.woocommerce-account .nxtl-v2-switch-track {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	transition: background 0.2s ease;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body.woocommerce-account .nxtl-v2-switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(180deg, #f5f7fa 0%, #d7dbe3 100%);
	transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

body.woocommerce-account .nxtl-v2-switch input:checked + .nxtl-v2-switch-track {
	background: linear-gradient(160deg, var(--nxtl-accent) 0%, var(--nxtl-accent-2) 100%);
	box-shadow: 0 0 0 1px rgba(255, 56, 79, 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.2);
}

body.woocommerce-account .nxtl-v2-switch input:checked + .nxtl-v2-switch-track::after {
	transform: translateX(18px);
}

body.woocommerce-account .nxtl-v2-switch input:focus-visible + .nxtl-v2-switch-track {
	outline: 2px solid var(--nxtl-accent);
	outline-offset: 3px;
}