.wcub-dashboard-topup-form {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.5em 0 2em;
}

.wcub-dashboard-topup-form .form-row {
	margin: 0;
	padding: 0;
}

.wcub-dashboard-topup-email,
.wcub-dashboard-topup-field {
	flex: 1 1 16rem;
	max-width: 24rem;
}

.wcub-dashboard-topup-email label,
.wcub-dashboard-topup-field label {
	display: block;
	margin-bottom: 0.4em;
}

.wcub-dashboard-topup-email input,
.wcub-dashboard-topup-field input {
	box-sizing: border-box;
	font: inherit;
	max-width: 100%;
	width: 100%;
}

.wcub-dashboard-topup-action {
	flex: 0 0 auto;
}

.wcub-dashboard-topup-action .button {
	font: inherit;
	min-height: 2.75em;
}

.wcub-shortcode-topup-form {
	background: var(--wcub-shortcode-background-color);
	border: 1px solid var(--wcub-shortcode-border-color);
	box-sizing: border-box;
	color: var(--wcub-shortcode-text-color);
	padding: var(--wcub-shortcode-padding);
}

.wcub-shortcode-topup-form label {
	color: var(--wcub-shortcode-text-color);
}

.wcub-shortcode-topup-form .wcub-dashboard-topup-email input,
.wcub-shortcode-topup-form .wcub-dashboard-topup-field input {
	background-color: var(--wcub-shortcode-input-background-color);
	border: 1px solid var(--wcub-shortcode-input-border-color);
	color: var(--wcub-shortcode-input-text-color);
}

.wcub-shortcode-topup-form .wcub-dashboard-topup-action .button {
	background-color: var(--wcub-shortcode-button-background-color);
	border: 1px solid var(--wcub-shortcode-button-border-color);
	color: var(--wcub-shortcode-button-text-color);
}

@media (max-width: 600px) {
	.wcub-dashboard-topup-form {
		align-items: stretch;
		flex-direction: column;
	}

	.wcub-dashboard-topup-email,
	.wcub-dashboard-topup-field {
		max-width: none;
	}

	.wcub-dashboard-topup-action .button {
		width: 100%;
	}
}