/* ============================================================
   Payment specifics
   ============================================================ */

   /* == Payment Methods (Collapsible Sections) == */

.payment-methods {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	color: var(--foreground);
}

.payment-method-section {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color 0.2s;
}

.payment-method-section.active {
	border-color: var(--primary);
}

.payment-method-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-4);
	background: var(--accent);
	border: none;
	cursor: pointer;
	font-size: var(--text-base);
	font-weight: 500;
	color:var(--foreground);
	transition: background 0.2s;
}

.payment-method-section.active .payment-method-header {
	background: var(--accent);
}

.payment-method-header .method-info {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
}

.payment-method-header .method-info svg {
	color: var(--muted);
}

.payment-method-section.active .payment-method-header .method-info svg {
	color: var(--primary);
}

.payment-method-header .chevron {
	transition: transform 0.2s;
	color: var(--muted);
}

.payment-method-header .chevron.open {
	transform: rotate(180deg);
}

.payment-method-content {
	padding: var(--space-4);
	border-top: 1px solid var(--border);
}

.payment-method-content .method-description {
	font-size: var(--text-sm);
	color: var(--muted);
	margin: 0 0 1rem;
}

/* PayPal button */
.btn-paypal {
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-4) var(--space-6);
	background: #0070ba;
	color: white;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.btn-paypal:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Crypto options */
.crypto-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.crypto-option {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--accent);
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	flex: 1;
	min-width: 120px;
}

.crypto-option.selected {
	border-color: var(--primary);
	background: rgba(var(--primary-rgb, 159, 18, 57), 0.1);
}

.crypto-option input {
	display: none;
}

.crypto-option .crypto-name {
	font-size: var(--text-sm);
	font-weight: 500;
}

.crypto-option .crypto-symbol {
	font-size: var(--text-xs);
	color: var(--muted);
	margin-left: auto;
}

/* Compact payment methods (for modals) */
.payment-methods.compact .payment-method-header {
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
}

.payment-methods.compact .payment-method-content {
	padding: var(--space-3) var(--space-4);
}

.payment-methods.compact .crypto-option {
	padding: var(--space-2) var(--space-3);
	min-width: 100px;
}

/* Security Notice */
.security-notice {
	gap: var(--gap-base);
	padding: var(--space-4);
	background: var(--accent);
	border-radius: var(--radius-md);
	margin: var(--space-2) 0;
}

.security-notice .lock-icon {
	width: 32px;
	height: 32px;
	color: var(--warning);
	flex-shrink: 0;
}

.security-notice p {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--muted);
}

/* Compact security notice */
.security-notice.compact {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	margin-top: var(--space-4);
	font-size: var(--text-xs);
	color: var(--muted);
}

.security-notice.compact svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.expiry-inputs {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.expiry-inputs select {
	flex: 1;
	padding: var(--space-3\.5) var(--space-2);
	text-align: center;
}
.payment-form.compact .form-group .expiry-inputs select.card_expire {
	text-align: left;
	width:5rem;
}

.expiry-inputs .separator {
	color: var(--muted);
	font-size: var(--text-xl);
}

/* Test Mode Banner */
.test-mode-banner {
	background: linear-gradient(135deg, #fef3c7, #fde68a);
	border: 1px solid var(--warning);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-4);
	text-align: center;
	position:fixed;
	top:50%;
	right:1rem;
	width:200px;
}

/* Responsive: Mobile */
@media (max-width: 640px) {
	.test-mode-banner {
		position:relative;
		width:auto;
		right:0;
	}

}
.test-mode-banner strong {
	color: #b45309;
	display: block;
	margin-bottom: var(--space-1);
}

.test-mode-banner p {
	margin: 0;
	font-size: var(--text-sm);
	color: #92400e;
}

.test-mode-banner code {
	background: rgba(0,0,0,0.1);
	padding: var(--space-0\.5) var(--space-1\.5);
	border-radius: var(--radius-xs);
	font-family: monospace;
}


/* == Upgrade Page == */

.plan-price {
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--primary);
}

.benefits-list {
	display: flex;
	flex-direction: column;
}

/* Payment Form */
.selected-plan-summary {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-1) var(--space-4);
	margin-bottom: var(--space-2);
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	background: none;
	border: none;
	color: var(--primary);
	font-size: var(--text-sm);
	cursor: pointer;
	padding: 0;
	white-space: nowrap;
}

.plan-summary-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.plan-summary-details .plan-price {
	font-size: var(--text-xl);
	color: var(--primary);
}
.plan-summary-details .plan-price .price-crossed {
	font-size: var(--text-sm);
	color: var(--muted);
	text-decoration: line-through;
	margin-bottom: var(--space-1);
	margin-right: var(--space-2);
	font-weight: normal;
}

.payment-form h3 {
	font-size: var(--text-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	text-align: center;
	margin: 0 0 1.5rem;
}

/* ============================================================
	 Payment Modal (.payment-modal)
	 Shared by CoinsModal and UpgradeModal.
	 Children styled by semantic elements, not classes.
	============================================================ */
/* Dialog scrolls, header stays pinned, section content flows freely */
dialog.modal.payment-modal {
	max-height: calc(100vh - var(--header-height) - 4rem);
	overflow-y: visible;
	overflow-x: visible;
	margin-top: var(--gap-base);
}
dialog.modal.payment-modal[data-size="lg"] {
	max-width:fit-content;
}

dialog.modal.payment-modal > header {
	position: sticky;
	top: 0;
	z-index: 10;
}

dialog.modal.payment-modal > section {
	margin-top: var(--space-4);
	padding: var(--space-4);
}

dialog#coins-modal.modal.payment-modal > section {
	margin-top:0;
}

/* Tagline text above cards */
.payment-modal .tagline {
	padding: 0;
}

.payment-modal .tagline p {
	font-size: var(--text-xl);
	color: var(--muted);
	margin: var(--space-1) auto var(--space-10) auto;
}

/* Card grid — extends beyond dialog edges */
.payment-modal .cards {
	display: flex;
	flex-direction: row;
	gap: var(--space-2);
	width: calc(100% + 100px);
	margin-left: -50px;
	margin-right: -50px;
}

/* Card base */
.payment-modal article {
	flex:1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-4) var(--space-1);
	background-color: var(--background-color);
	border: 2px solid var(--border);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all 0.15s ease;
	position: relative;
	box-shadow: var(--shadow-md);
}

.payment-modal article:first-child {
	transform: rotate(-3deg);
	transform-origin: bottom center;
}

.payment-modal article:last-child {
	transform: rotate(3deg);
	transform-origin: bottom center;
}

.payment-modal article:nth-child(2) {
	z-index: 2;
	box-shadow: var(--shadow-lg);
}

/* Card selected state */
.payment-modal article.selected {
	border-color: var(--foreground);
	background: var(--foreground);
	color: var(--background-color);
	box-shadow: var(--shadow-xl);
	z-index: 3;
}

.payment-modal article:first-child.selected {
	transform: rotate(-3deg) scale(1.05)  translateX(1rem);
}

.payment-modal article:nth-child(2).selected {
	transform: scale(1.1);
}

.payment-modal article:last-child.selected {
	transform: rotate(3deg) scale(1.05) translateX(-1rem);
}

/* Badge (absolute positioned span inside article) */
.payment-modal article > span {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--radius-full);
	background: var(--vip-gold);
	color: white;
	white-space: nowrap;
}

.payment-modal article > span.best-value {
	background: var(--success);
}

/* Price display */
.payment-modal article .price { font-weight: 600; color: var(--foreground); font-size: var(--text-xl); line-height: 1.2; }

.payment-modal article.selected .price {
	color: var(--background-color);
}

.payment-modal article .price-crossed {
	text-decoration: line-through;
	opacity:0.7;
}

/* "Not verified price" label above price */
.payment-modal article .price-label {
	font-size: var(--text-sm);
	color: var(--info);
	margin-top: var(--space-1);
}

.payment-modal article.selected .price-label {
	color: var(--info);
}

/* Verify hint */
.payment-modal article small {
	color: var(--primary);
	margin-top: var(--space-2);
}

.payment-modal article.selected small {
	color: var(--background-color);
	opacity: 0.8;
}

/* Verify CTA button inside card */
.payment-modal article .verify-cta {
	display: block;
	padding: var(--space-1) var(--space-2);
	background: var(--info);
	color: white;
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	text-align: center;
	cursor: pointer;
	width:80%;
}

.payment-modal article.selected .verify-cta {
	background: var(--info);
	color: white;
	opacity: 1;
}

/* Radio indicator (footer inside article) */
.payment-modal article .plan-select {
	width: 24px;
	height: 24px;
	border: 2px solid var(--border);
	border-radius: var(--radius-full);
	margin-top: var(--space-2);
}

.payment-modal article.selected footer {
	border-color: var(--background-color);
	background: var(--primary);
}

.payment-modal article.selected footer svg {
	width: 12px;
	height: 12px;
	color: var(--foreground);
}

/* CTA button wrapper */
.payment-modal .action {
	display: flex;
	justify-content: center;
	margin-top: var(--space-4);
}

/* === Coins-specific (UpgradeModal won't have these, rules ignored) === */

.payment-modal .coin-amount {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-3xl);
	margin-bottom: var(--space-2);
	color: var(--vip-gold-dark);
}

.payment-modal article.selected .coin-amount {
	color: var(--background-color);
}

/* === Subscription-specific (CoinsModal won't have these, rules ignored) === */
.payment-modal .duration { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-1); }
.payment-modal .per-month { font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-1); }
.payment-modal .per-month .price-crossed { text-decoration: line-through; margin-right: var(--space-1); }

.payment-modal article.selected .duration { color: var(--background-color); }
.payment-modal article.selected .per-month { color: var(--background-color); }
.payment-modal article.selected .per-month .price-crossed { color: var(--background-color); opacity: 0.7; }

/* Billing info */
.payment-modal .billing { font-size: var(--text-2xs); color: var(--muted); margin-top: var(--space-2); }
.payment-modal article.selected .billing { color: var(--background-color); }

/* Trial badge */
.payment-modal .trial {
	margin-top: var(--space-2);
	padding: var(--space-1) var(--space-2);
	background: rgba(34, 197, 94, 0.15);
	border-radius: var(--radius-sm);
	font-size: var(--text-2xs);
	color: var(--success);
	font-weight: 600;
}

/* Subscription radio needs more top margin */
#upgrade-modal.payment-modal article .plan-select {
	margin-top: var(--space-3);
}

/* Mobile */
@media (max-width: 480px) {
	.payment-modal .cards {
		gap: var(--space-1);
	}

	.payment-modal .coin-option-row { display: block; }
	.payment-modal .coin-option-row .coin-option-select {width:auto; text-align:center; margin:0 auto; }
	.coin-option-row .radio-circle { margin:0 auto; }

	.payment-modal article { padding: var(--space-2) var(--space-1); }
	.payment-modal article > span { font-size: 8px; padding: 2px 6px; }
	.payment-modal article .plan-select { width: 16px; height: 16px; }
	.payment-modal article small { font-size: 8px; }

	#upgrade-modal.payment-modal { max-width: 75vw; }

	#coins-modal.payment-modal { max-width: 75vw; }

	.payment-modal .coin-amount { font-size: var(--text-base); }
	.payment-modal .coin-amount img { width: 16px; height: 16px; }
	.payment-modal .duration { font-size: var(--text-xs); }
	.payment-modal .per-month { font-size: var(--text-xs); }
}

/* Balance display for coins modal */
#coins-modal .coins-balance-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-4);
	background: var(--accent);
	border-radius: var(--radius-lg);
}

#coins-modal .coins-balance-display .balance-label {
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--muted);
	margin: 0;
}

#coins-modal .coins-balance-display .balance-amount {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 1.75rem;
	font-weight: 700;
}

.coins-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

/* Locked coins hint badge (verification/photo upload boxes) */
.locked-coins-hint {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
	border: 1px solid #ce93d8;
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: 600;
	color: #7b1fa2;
	white-space: nowrap;
}

/* In photo upload prompt, show on new line centered */
.photo-upload-prompt .locked-coins-hint {
	display: flex;
	margin: var(--space-1\.5) auto 0;
}

/* In empty state, center it */
.empty-state .locked-coins-hint {
	display: flex;
	margin: var(--space-2) auto;
}

.dark .locked-coins-hint {
	background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);
	border-color: #ab47bc;
	color: #e1bee7;
}

/* Compact packages for modal */
#coins-modal .coins-packages {
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

#coins-modal .coin-package-row {
	padding: var(--space-3) var(--space-4);
}

#coins-modal .package-coins-amount {
	font-size: 1.1rem;
}

#coins-modal .price-current {
	font-size: 1.1rem;
}

/* Continue button - full width, centered */
#coins-modal .btn-continue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	font-size: var(--text-lg);
}

/* Fix intro ribbon - position as centered badge at top */
#coins-modal .coin-package-row.intro-offer {
	padding-top: var(--space-6);
	position: relative;
}

#coins-modal .package-ribbon.intro {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) rotate(0deg);
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-2xs);
	border-radius: 0 0 6px 6px;
	white-space: nowrap;
}

#insufficient-coins {
	text-align:center;
}
#insufficient-coins H4,
#insufficient-coins P {
	margin:var(--space-2) auto;
}

.or {
	color: var(--muted);
	font-size: var(--text-xs);
}

/* Compact plan summary */
.selected-plan-summary.compact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	background: var(--accent);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-2);
}

.selected-plan-summary.compact .back-link {
	font-size: var(--text-xs);
}

.selected-plan-summary.compact .plan-summary-details {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
}

/* Compact payment form */
.payment-form.compact {
	padding: 0;
}

.payment-form.compact h3 {
	display: none;
}

.payment-form.compact .form-group {
	margin-bottom: var(--space-3);
}

.payment-form.compact .form-group label {
	font-size: var(--text-xs);
	margin:0;
	text-align: left;
    padding: var(--space-1) var(--space-2);
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-weight: normal;
}

.payment-form.compact .form-group input,
.payment-form.compact .form-group select {
	padding: var(--space-2\.5) var(--space-3);
	font-size: var(--text-sm);
}

.payment-form.compact .form-row {
	gap: var(--gap-base);
}

.btn.btn-pay {
	padding: var(--space-3) var(--space-8);
	margin: var(--space-2) auto;
	font-size: var(--text-base);
	background-color: var(--vip-gold-dark);
	background:	linear-gradient(135deg, var(--vip-gold), #f59e0b);
	color:#403000;
	box-shadow: 0 0 15px #f59e0b;
    border: 1px solid #403000;
}

/* == Upgrade Modal == */

/* shown when user is already a vip */
#already-vip {
	background: url(/assets/shared/gem.webp);
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	color:#fff;
}

.vip-already {
	text-align: center;
	padding: var(--space-4) 0;
	color: inherit;
}

.vip-already .vip-gem {
	margin: var(--space-6) auto;
}

.vip-already .vip-gem img {
	display: block;
	margin: 0 auto;
}

.vip-already H1 {
	margin: 0 auto;
	font-size: var(--text-3xl);
	color: inherit;
}
.vip-already H3 { 
	margin-bottom: 13rem;
	color: inherit;
}

.vip-already .btn-vip {
	margin: var(--space-6) auto;
	border: 1px solid var(--vip-button-text);
}


/* Payment step — scrollable, wider for 2-column layout */
#payment-modal {
	max-height: calc(100vh - var(--header-height) - 2rem);
	max-width: 640px;
	overflow-y: auto;
}

#payment-modal > section {
	max-height: calc(100vh - var(--header-height) - 10rem);
	overflow-y: auto;
	scrollbar-width: auto;
	scrollbar-color: var(--muted) var(--border);
	padding:var(--space-2);
}

/* Error screen styles */
#payment-modal .error-screen {
	text-align: center;
	padding: var(--space-3) var(--space-4);
	background: var(--error-bg-subtle-flat);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-4);
}

#payment-modal .error-screen .error-icon {
	width: var(--icon-3xl);
	height: var(--icon-3xl);
	margin: 0 auto var(--space-4);
	color: var(--error);
}

#payment-modal .error-screen .error-icon svg {
	width: 100%;
	height: 100%;
}

#payment-modal .error-screen .error-title {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--error);
	margin: 0 0 0.5rem;
}

#payment-modal .error-screen .error-message {
	font-size: var(--text-base);
	margin: 0 0 0.5rem;
}

#payment-modal .error-screen .error-suggestion {
	font-size: var(--text-sm);
	color: var(--muted);
	margin: 0;
}


/* Payment 2-column layout */
.payment-layout {
	display: flex;
	flex-direction: column;
	gap: var(--gap-base);
}

.payment-form-col {
	flex: 1;
	min-width: 0;
}

.payment-info-col {
	padding: var(--space-4);
	font-size: var(--text-sm);
	color: var(--muted);
	text-align: center;
}

.billing-descriptor {
	margin: var(--space-2) 0;
	font-size: var(--text-sm);
	color: var(--foreground);
}

@media (min-width: 640px) {
	.payment-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.payment-form-col {
		flex: 3;
	}

	.payment-info-col {
		flex: 2;
		text-align: left;
		position: sticky;
		top: 0;
	}
}

#payment-modal > section::-webkit-scrollbar {
	width: 12px;
}

#payment-modal > section::-webkit-scrollbar-track {
	background: var(--border);
}

#payment-modal > section::-webkit-scrollbar-thumb {
	background: var(--muted);
	border-radius: var(--radius-sm);
}

/* Coin purchase button in payment modal */
.payment-modal .action .btn-coins {
	padding: var(--space-3) var(--space-6);
}

/* Verification Discount Box - Compact inline style */
.verify-discount {
	gap: var(--space-2);
	background: var(--member-verified-bg);
	color:var(--member-verified-text);
	border-radius: var(--radius-md);
	margin: var(--space-3) auto;
	padding-left: var(--space-2);
	cursor:pointer;
}
.verify-discount h4 {
	font-size: var(--text-base);
	margin:0; padding: 0;
}
.verify-discount svg {
	vertical-align: middle;
}

.verify-discount p {
	padding: var(--space-1) 0;
	font-size: var(--text-xs);
}

/* Verified state - confirmation style */
.verify-discount.verified {
	background: none;
	color:var(--foreground);
}


/* Trial in payment s3ummary */
.selected-plan-summary .trial-price-highlight {
	color: var(--success);
	font-weight: 700;
	font-size: 1.1rem;
}

.selected-plan-summary .trial-then-price {
	display: block;
	font-size: var(--text-xs);
	color: var(--muted);
	
	margin-top: var(--space-0\.5);
}

.trial-summary-note {
	font-size: var(--text-sm);
	color: var(--muted);
	padding: var(--space-1) 0;
	text-align: center;
}


.coin-options-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.coin-option-row {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
	padding: var(--space-2) var(--space-3);
	border: 2px solid var(--border);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: var(--text-xs);
	background: var(--card-bg);
}

.coin-option-row.selected {
	border-color: var(--coin-gold);
	background: var(--coin-bg);
}

.coin-option-row.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.coin-option-row.requires-verification {
	opacity: 0.7;
	cursor: not-allowed;
}

.coin-option-label {
	flex: 1;
}

.coin-option-label H4 {
	display: block;
	font-size: var(--text-xl);
	font-weight: normal;
	color: var(--foreground);
}

.coin-option-label P {
	display: block;
	color: var(--muted);
	margin-top: var(--space-1);
}

.coin-option-select { text-align: right; max-width:50%; }
.coin-option-select .btn-hint { font-size:var(--text-xs); }

.coin-option-row .coin-cost {
	display: block;
	font-size: var(--text-lg);
	font-weight: 700;
}

.coin-option-row .plan-select-indicator {
	margin-left: var(--space-2);
}

.coin-option-row .radio-circle {
	width: 22px;
	height: 22px;
	border: 2px solid var(--border);
	border-radius: var(--radius-full);
	transition: all 0.2s;
}

.coin-option-row .radio-circle.checked {
	border-color: var(--coin-gold);
	background: var(--coin-gold);
}

.coin-option-row .radio-circle svg {
	width: 12px;
	height: 12px;
	color: var(--vip-button-text);
}

/* Coins button style */
.btn-coins {
	background: linear-gradient(135deg, var(--vip-gold), var(--vip-gold-dark));
	color: var(--vip-button-text);
	border: none;
	font-weight: 600;
}

.btn-coins:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* == Coin Spend (uses unified modal system) == */

#coin-spend header {
	display: flex;
	justify-content: center;
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--border);
}

#coin-spend header div {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--coin-bg);
	border-radius: var(--button-radius);
	border: 1px solid rgba(255, 215, 0, 0.3);
}

#coin-spend header strong {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--vip-gold-dark);
}

#coin-spend header span {
	color: var(--muted);
	font-size: var(--text-sm);
}

/* Single option view */
#coin-spend section {
	text-align: center;
	padding: var(--space-4) 0;
}

#coin-spend section h3 {
	margin-bottom: var(--space-4);
}

#coin-spend section ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
	text-align: left;
}

#coin-spend section ul li {
	padding: var(--space-1) 0;
	padding-left: var(--space-6);
	position: relative;
	color: var(--muted);
	font-size: var(--text-sm);
}

#coin-spend section ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--success);
}

#coin-spend section .price {
	gap: var(--space-2);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--vip-gold-dark);
}

/* Multiple options view */
#coin-spend section.options {
	padding: var(--space-2) 0;
}

#coin-spend section.options h3 {
	font-size: var(--text-base);
	margin-bottom: var(--space-4);
}

#coin-spend section.options label {
	display: flex;
	align-items: flex-start;
	gap: var(--gap-base);
	padding: var(--space-4);
	margin-bottom: var(--space-3);
	background: var(--card-bg);
	border: 2px solid var(--border);
	border-radius: var(--button-radius);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

#coin-spend section.options label.selected {
	border-color: var(--primary);
	background: rgba(159, 18, 57, 0.1);
}

#coin-spend section.options label.best-value {
	position: relative;
}

#coin-spend section.options input[type="radio"] {
	margin-top: var(--space-1);
	accent-color: var(--primary);
}

#coin-spend section.options label > div {
	flex: 1;
}

#coin-spend section.options label > div > div {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}

#coin-spend section.options strong {
	font-weight: 600;
	color: var(--foreground);
}

#coin-spend section.options .badge {
	font-size: var(--text-xs);
	font-weight: 600;
	padding: var(--space-0\.5) var(--space-2);
	background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%);
	color: var(--vip-button-text);
	border-radius: var(--radius-full);
	text-transform: uppercase;
}

#coin-spend section.options label ul {
	margin: 0 0 0.5rem 0;
}

#coin-spend section.options label ul li {
	padding: var(--space-0\.5) 0;
	padding-left: 0;
	position: static;
}

#coin-spend section.options label ul li::before {
	display: none;
}

#coin-spend section.options time {
	font-size: var(--text-xs);
	color: var(--success);
	display: block;
	margin-bottom: var(--space-1);
}

#coin-spend section.options .price {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-weight: 700;
	font-size: var(--text-lg);
	color: var(--vip-gold-dark);
}

/* Actions */
#coin-spend footer {
	display: flex;
	flex-direction: column;
	gap: var(--gap-base);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border);
	margin-top: var(--space-4);
}

#coin-spend footer .btn-primary {
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-4) var(--space-6);
	font-size: var(--text-base);
	font-weight: 600;
}

#coin-spend footer .btn-gold {
	width: 100%;
	background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%);
	color: var(--vip-button-text);
	border: none;
	font-weight: 600;
	padding: var(--space-4) var(--space-6);
}




#coin-confirm .coin-cost {
	margin: var(--space-3) auto;
}

#coin-confirm .coin-cost .cost-value {
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--vip-gold-dark);
}

#coin-confirm .hint {
	font-size: var(--text-sm);
	color: var(--muted);
	margin: 0;
	line-height: var(--line-height-tight);
}

#coin-confirm footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-base);
	justify-content: center;
}

#coin-confirm footer .btn-primary {
	flex: 1;
	padding: var(--space-3) var(--space-6);
	font-weight: 600;
}

#coin-confirm footer .btn-secondary {
	flex: 1;
	padding: var(--space-3) var(--space-6);
	background: var(--accent);
	color: var(--foreground);
	border: 1px solid var(--border);
}

#coin-confirm footer .btn-premium {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-5);
	background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%);
	color: white;
	border-radius: var(--button-radius);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.2s;
}

/* == Payment Result Page — Cancel + Success screens == */
.vip-benefits {
	text-align: left;
	padding: var(--space-5);
	margin: var(--space-4) auto;
	width:auto;
}

.vip-benefits h4 {
	font-size: var(--text-base);
	margin-bottom: var(--space-3);
	text-align: center;
}

.vip-benefits ul {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4) 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.vip-benefits li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
}

.vip-benefits li svg {
	color: var(--success);
	flex-shrink: 0;
}

.vip-benefits blockquote {
	font-style: italic;
	color: var(--muted);
	font-size: var(--text-sm);
	border-left: 3px solid var(--border);
	padding-left: var(--space-3);
	margin: var(--space-4) 0 0 0;
}

.support-link {
	font-size: var(--text-sm);
	color: var(--muted);
	margin-bottom: var(--space-4);
}
.support-link a {
	color: var(--primary);
	text-decoration: none;
}

.result-page {
	max-width: 480px;
	margin: 0 auto;
	padding: var(--space-8) 0;
	text-align: center;
}
.result-page header h1 {
	margin-bottom: var(--space-6);
}

.result-page header h3 {
	color: var(--muted);
	font-weight: 400;
}

.result-page .cancel-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: var(--space-4) 0;
}

.result-page .cancel-alternative {
	margin-bottom: var(--space-2);
	padding: var(--space-4) 0;
}

.result-page .cancel-alternative h4 {
	margin-bottom: var(--space-1);
}

.result-page .cancel-alternative p {
	font-size: var(--text-sm);
	color: var(--muted);
	margin-bottom: var(--space-3);
}
.result-page .btn-vip {
	color:var(--vip-button-text);
}

.result-page .result-nav {
	margin-bottom: var(--space-4);
}

.result-page .result-nav a {
	color: var(--primary);
	text-decoration: none;
	font-size: var(--text-sm);
}


/* == Payment Result Page — Success Screen (standalone, outside modal) == */
.result-page .result-page {
	max-width: 480px;
	margin: 0 auto;
	padding: var(--space-8) 0;
	text-align: center;
}

.result-page .result-loading {
	padding: var(--space-12) 0;
	text-align: center;
}

.result-page .result-loading .loading-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--border);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin: 0 auto var(--space-4);
}

.result-page  .result-error {
	padding: var(--space-8) 0;
	text-align: center;
}

.result-page .result-error h1 {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-2);
}

.result-page .result-error .error-message {
	color: var(--muted);
	margin-bottom: var(--space-4);
}

.result-page .result-error .help-text {
	font-size: var(--text-sm);
	color: var(--muted);
	margin-bottom: var(--space-4);
}

.result-page .success-screen {
	text-align: center;
	padding: var(--space-4) 0;
}


.result-page .success-screen h1 {
	margin: 0 0 0.5rem;
}

.success-check {
	color: var(--success);
}

.result-page .success-screen p {
	color: var(--muted);
	margin: 0 0 1.5rem;
}

.result-page .success-emoji {
	margin-bottom: var(--space-2);
}

.result-page .success-emoji img {
	display: block;
	margin: 0 auto;
}

.result-page .new-balance {
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	margin-bottom: var(--space-4);
}

.result-page .balance-amount {
	gap: var(--space-4);
	font-size: 1.75rem;
}