/* Top-up buy box for grouped variation swatches (inc/product-options.php).
   Everything is scoped to body.rd-po, which only configured products get. */
.rd-po {
	--rd-ink: #16181d;
	--rd-muted: #5a6170;
	--rd-line: #e4e7ec;
	--rd-soft: #f4f6f9;
	--rd-accent: #1e4fd8;
	--rd-accent-soft: #eef3ff;
	--rd-cta: #ffb400;
	--rd-cta-ink: #0b1f4b;
}

/* ---------- Numbered steps ---------- */
.rd-po .variations_form {
	counter-reset: rdstep;
}

.rd-po .rd-type__label,
.rd-po table.variations th.label label,
.rd-po .rd-account-head__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--rd-ink);
}

.rd-po .rd-type__label::before,
.rd-po table.variations th.label label::before,
.rd-po .rd-account-head__title::before {
	counter-increment: rdstep;
	content: counter(rdstep);
	flex: 0 0 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--rd-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 22px;
	text-align: center;
}

/* Attribute table stacked: label above, cards full width. */
.rd-po table.variations,
.rd-po table.variations tbody,
.rd-po table.variations tr,
.rd-po table.variations th,
.rd-po table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
}

.rd-po table.variations {
	margin-bottom: 6px;
}

.rd-po .variations .reset_variations {
	display: none !important;
}

/* ---------- Step 1: item type (segmented control) ---------- */
.rd-type {
	margin-bottom: 22px;
}

.rd-po .rd-type__options {
	display: grid;
	grid-template-columns: repeat(var(--rd-cols, 2), minmax(0, 1fr));
	gap: 4px;
	padding: 4px;
	border-radius: 14px;
	background: var(--rd-soft);
}

.rd-po .rd-type .ux-swatch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	min-width: 0;
	margin: 0;
	padding: 0 10px;
	border-radius: 11px;
	background: transparent;
	box-shadow: none;
	color: var(--rd-muted);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.rd-po .rd-type .ux-swatch:hover {
	color: var(--rd-ink);
}

.rd-po .rd-type .ux-swatch.selected {
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12), 0 0 0 1px var(--rd-line);
	color: var(--rd-ink);
}

.rd-po .rd-type .rd-icon {
	width: 24px;
	height: 24px;
}

/* Three or four types: icon above the name so the tabs stay narrow. */
.rd-po .rd-type__options[style*="--rd-cols:3"] .ux-swatch,
.rd-po .rd-type__options[style*="--rd-cols:4"] .ux-swatch {
	flex-direction: column;
	gap: 4px;
	height: auto;
	min-height: 64px;
	padding: 8px 4px;
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
}

/* Other attribute rows (e.g. Region): compact pills, not cards. */
.rd-po table.variations .ux-swatches:not(.rd-cards) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 6px;
}

.rd-po table.variations .ux-swatches:not(.rd-cards) .ux-swatch {
	height: 40px;
	min-width: 56px;
	margin: 0;
	padding: 0 14px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--rd-line);
	color: var(--rd-ink);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.rd-po table.variations .ux-swatches:not(.rd-cards) .ux-swatch:hover {
	box-shadow: 0 0 0 1px var(--rd-accent);
}

.rd-po table.variations .ux-swatches:not(.rd-cards) .ux-swatch.selected {
	background: var(--rd-accent-soft);
	box-shadow: 0 0 0 2px var(--rd-accent);
}

.rd-po table.variations tr + tr {
	margin-top: 22px;
}

/* ---------- Step 2: package cards ---------- */
.rd-po .rd-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 10px;
	padding-top: 6px;
}

.rd-po .rd-cards .ux-swatch {
	position: relative;
	display: block;
	height: auto;
	min-width: 0;
	margin: 0;
	padding: 16px 8px 12px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--rd-line);
	color: var(--rd-ink);
	text-align: center;
	cursor: pointer;
	transition: box-shadow 0.15s, transform 0.15s, background-color 0.15s;
}

.rd-po .rd-cards .ux-swatch:hover {
	box-shadow: 0 0 0 1px var(--rd-accent), 0 6px 16px rgba(16, 24, 40, 0.08);
	transform: translateY(-1px);
}

.rd-po .rd-cards .ux-swatch.selected {
	background: var(--rd-accent-soft);
	box-shadow: 0 0 0 2px var(--rd-accent);
}

.rd-po .rd-cards .ux-swatch.selected::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--rd-accent) url("icons/check.svg") center / 12px no-repeat;
}

.rd-po .rd-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	white-space: normal;
	line-height: 1.2;
}

.rd-icon {
	display: inline-block;
	flex: none;
	background: center / contain no-repeat;
}

.rd-icon--vbucks {
	background-image: url("icons/vbucks.svg");
}

.rd-icon--crew {
	background-image: url("icons/crew.svg");
}

.rd-icon--gems {
	background-image: url("icons/gems.svg");
}

.rd-icon--crystal {
	background-image: url("icons/crystal.svg");
}

.rd-icon--moon {
	background-image: url("icons/moon.svg");
}

.rd-icon--pass {
	background-image: url("icons/pass.svg");
}

.rd-icon--gift {
	background-image: url("icons/gift.svg");
}

.rd-icon--pokecoin {
	background-image: url("icons/pokecoin.svg");
}

.rd-icon--ticket {
	background-image: url("icons/ticket.svg");
}

.rd-icon--bag {
	background-image: url("icons/bag.svg");
}

/* Long item names (passes, tickets) get a smaller card title. */
.rd-po .rd-card--long .rd-card__name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
}

.rd-po .rd-card .rd-icon {
	width: 34px;
	height: 34px;
	margin-bottom: 6px;
}

.rd-po .rd-card__name {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--rd-ink);
}

.rd-po .rd-card__unit {
	font-size: 12px;
	color: var(--rd-muted);
}

.rd-po .rd-card__price {
	margin-top: 8px;
	font-size: 15px;
	font-weight: 800;
	color: var(--rd-ink);
}

.rd-po .rd-card__price del,
.rd-po .rd-total__price del,
.rd-po .rd-sticky__price del {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--rd-muted);
	opacity: 0.8;
}

.rd-po .rd-card__price ins,
.rd-po .rd-total__price ins,
.rd-po .rd-sticky__price ins {
	text-decoration: none;
}

.rd-po .rd-card__off {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 6px;
	border-radius: 99px;
	background: #e3f6ea;
	color: #0a7a3d;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
}

.rd-po .rd-card__tag {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	padding: 2px 8px;
	border-radius: 99px;
	background: var(--rd-cta);
	color: var(--rd-cta-ink);
	font-size: 10px;
	font-weight: 800;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* ---------- Step 3: account ---------- */
.rd-po .single_variation .woocommerce-variation-price {
	display: none;
}

.rd-po .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.rd-po .woocommerce-variation-add-to-cart > * {
	flex: 0 0 100%;
	min-width: 0;
}

.rd-po .woocommerce-variation-add-to-cart > .single_add_to_cart_button {
	width: 100%;
	height: 52px;
	margin: 0;
	font-size: 16px;
}

.rd-account-head {
	margin-top: 16px;
}

.rd-po .rd-account-head__title {
	margin-bottom: 4px;
}

.rd-account-head__note {
	display: block;
	position: relative;
	padding-left: 30px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--rd-muted);
}

.rd-account-head__note::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 15px;
	height: 15px;
	background: url("icons/lock.svg") center / contain no-repeat;
}

/* Account fields card: radogo-topup's .rt-fields (older: snippet 2's .wf-fortnite-fields). */
.rd-po .rt-fields,
.rd-po .wf-fortnite-fields {
	margin: 0 !important;
	padding: 16px;
	border: 1px solid var(--rd-line);
	border-radius: 14px;
	background: #fafbfc;
}

.rd-po .rt-fields-row:last-of-type {
	margin-bottom: 0;
}

.rd-po .rt-fields input[type="text"],
.rd-po .rt-fields input[type="email"],
.rd-po .rt-fields input[type="password"],
.rd-po .wf-fortnite-fields input[type="text"],
.rd-po .wf-fortnite-fields input[type="email"],
.rd-po .wf-fortnite-fields input[type="password"] {
	height: 46px;
	margin-bottom: 0;
	border-radius: 10px;
	background: #fff;
}

/* ---------- Order summary: quantity, you get, total ---------- */
.rd-total {
	margin-top: 6px;
	padding: 4px 16px;
	border-radius: 14px;
	background: var(--rd-soft);
}

.rd-total__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 8px 0;
}

.rd-total__row[hidden] {
	display: none;
}

.rd-total__row + .rd-total__row {
	border-top: 1px dashed #d9dde5;
}

.rd-total__label {
	font-size: 14px;
	color: var(--rd-muted);
}

.rd-total__get {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	line-height: 1.25;
}

.rd-total__amount {
	font-size: 16px;
	font-weight: 800;
	color: var(--rd-ink);
}

.rd-total__each {
	font-size: 12px;
	color: var(--rd-muted);
}

.rd-total__each:empty {
	display: none;
}

.rd-total__price {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--rd-ink);
	text-align: right;
}

/* Stepper: Flatsome's quantity box as a pill. */
.rd-po .rd-total .ux-quantity {
	display: inline-flex;
	align-items: center;
	height: 44px;
	margin: 0;
	padding: 3px;
	border: 1px solid var(--rd-line);
	border-radius: 99px;
	background: #fff;
	opacity: 1;
}

.rd-po .rd-total .ux-quantity .ux-quantity__button {
	width: 36px;
	min-width: 0;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	/* Flatsome (.quantity .button.minus/plus) squares the inner corners. */
	border-top-left-radius: 50% !important;
	border-top-right-radius: 50% !important;
	border-bottom-right-radius: 50% !important;
	border-bottom-left-radius: 50% !important;
	background: var(--rd-soft);
	box-shadow: none;
	color: var(--rd-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 36px;
	transition: background-color 0.15s, color 0.15s;
}

.rd-po .rd-total .ux-quantity .ux-quantity__button:hover {
	background: var(--rd-accent);
	color: #fff;
}

.rd-po .rd-total .ux-quantity input.qty {
	width: 48px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--rd-ink);
	font-size: 16px;
	font-weight: 800;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.rd-po .rd-total .ux-quantity input.qty::-webkit-outer-spin-button,
.rd-po .rd-total .ux-quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* ---------- Trust ---------- */
.rd-trust {
	margin-top: 4px;
}

.rd-trust__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

.rd-trust__item {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0 !important;
	padding: 34px 8px 10px;
	border-radius: 12px;
	background: var(--rd-soft) center 10px / 18px no-repeat;
	text-align: center;
	line-height: 1.25;
}

.rd-trust__item--fast {
	background-image: url("icons/bolt.svg");
}

.rd-trust__item--auto {
	background-image: url("icons/auto.svg");
}

.rd-trust__item--safe {
	background-image: url("icons/shield.svg");
}

.rd-trust__item strong {
	font-size: 12.5px;
	color: var(--rd-ink);
}

.rd-trust__item span {
	font-size: 11.5px;
	color: var(--rd-muted);
}

.rd-trust__pay {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

.rd-trust__pay img {
	width: auto;
	height: 22px;
}

/* ---------- Sticky buy bar (phones) ---------- */
.rd-sticky {
	display: none;
}

@media (max-width: 849px) {
	.rd-sticky.is-on {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -4px 18px rgba(16, 24, 40, 0.12);
	}

	.rd-sticky__info {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-width: 0;
	}

	.rd-sticky__name {
		overflow: hidden;
		font-size: 13px;
		font-weight: 700;
		color: var(--rd-ink);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.rd-sticky__price {
		font-size: 17px;
		font-weight: 800;
		line-height: 1.2;
		color: var(--rd-ink);
	}

	.rd-po .rd-sticky__price del {
		display: none;
	}

	.rd-po .rd-sticky__btn {
		flex: none;
		height: 46px;
		margin: 0;
		padding: 0 22px;
		background: var(--rd-cta);
		color: var(--rd-cta-ink);
		font-size: 15px;
	}
}

@media (max-width: 549px) {
	.rd-po .rd-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rd-po .rd-type__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}