.fg-pay-page {
	padding: 48px 0 80px;
	background: var(--fg-bg, #f5f9ff);
}

.fg-pay-card {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 44px);
	border: 1px solid var(--fg-line, #e5edf7);
	border-radius: 16px;
	background: var(--fg-panel, #fff);
	box-shadow: var(--fg-shadow, 0 14px 38px rgba(31, 73, 135, 0.09));
}

.fg-pay-eyebrow {
	margin: 0 0 9px;
	color: var(--fg-primary, #2368ff);
	font-size: 13px;
	font-weight: 800;
}

.fg-pay-card h1 {
	margin: 0 0 22px;
	color: var(--fg-text, #17212b);
	font-size: clamp(27px, 4vw, 38px);
}

.fg-pay-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 26px;
	padding: 20px;
	border-radius: 12px;
	background: var(--fg-bg, #f5f9ff);
}

.fg-pay-summary span {
	color: var(--fg-muted, #74839a);
}

.fg-pay-summary strong {
	color: #ff4f68;
	font-size: 30px;
}

.fg-pay-label {
	margin: 0 0 12px;
	color: var(--fg-text, #17212b);
	font-weight: 800;
}

.fg-pay-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.fg-pay-option {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 16px;
	border: 1px solid var(--fg-line, #e5edf7);
	border-radius: 10px;
	color: var(--fg-text, #17212b);
	background: var(--fg-panel, #fff);
	cursor: pointer;
}

.fg-pay-option:has(input:checked) {
	border-color: var(--fg-primary, #2368ff);
	box-shadow: 0 0 0 2px rgba(35, 104, 255, 0.12);
}

.fg-pay-primary {
	display: grid;
	width: 100%;
	min-height: 48px;
	place-items: center;
	padding: 0 20px;
	border: 0;
	border-radius: 9px;
	color: #fff;
	background: var(--fg-primary, #2368ff);
	box-shadow: 0 10px 22px rgba(35, 104, 255, 0.2);
	font-weight: 800;
	text-align: center;
	cursor: pointer;
}

.fg-pay-primary[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.fg-pay-notice {
	margin-bottom: 22px;
	padding: 14px 16px;
	border-radius: 9px;
	font-size: 13px;
	line-height: 1.7;
}

.fg-pay-notice.is-success {
	color: #137a58;
	background: #eafaf5;
}

.fg-pay-notice.is-error {
	color: #b33245;
	background: #fff0f3;
}

.fg-pay-note {
	margin: 12px 0 0;
	color: var(--fg-muted, #74839a);
	font-size: 12px;
	text-align: center;
}

.fg-paywall {
	margin: 24px 0;
	padding: 25px;
	border: 1px solid #dbe7ff;
	border-radius: 13px;
	background: linear-gradient(145deg, #f7faff, var(--fg-panel, #fff));
	text-align: center;
}

.fg-paywall > strong {
	display: block;
	margin-bottom: 8px;
	color: var(--fg-text, #17212b);
	font-size: 21px;
}

.fg-paywall > p {
	margin: 0 0 18px;
	color: var(--fg-muted, #74839a);
	font-size: 13px;
}

.fg-paywall-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.fg-paywall-actions a {
	display: inline-grid;
	min-height: 41px;
	place-items: center;
	padding: 0 18px;
	border: 1px solid var(--fg-primary, #2368ff);
	border-radius: 8px;
	color: var(--fg-primary, #2368ff);
	font-size: 13px;
	font-weight: 800;
}

.fg-paywall-actions a:first-child {
	color: #fff;
	background: var(--fg-primary, #2368ff);
}

@media (max-width: 600px) {
	.fg-pay-page {
		padding: 24px 0 100px;
	}

	.fg-pay-options {
		grid-template-columns: 1fr;
	}
}