/* ==========================================================
   Payment Page
   ========================================================== */

.pay-page {
	padding: 60px 0 80px;
	background: var(--color-bg, #FAFBFD);
	min-height: 70vh;
}

.pay-page .container {
	max-width: 680px;
}

.pay-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
}

/* ---- State wrapper ---- */
.pay-state {
	background: var(--color-card, #FAFBFD);
	border-radius: 12px;
	box-shadow: 0 2px 16px rgba(30, 58, 95, 0.08);
	padding: 48px 40px;
	text-align: center;
}

@media (max-width: 600px) {
	.pay-state {
		padding: 32px 20px;
	}
}

.pay-state__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.pay-state__icon--success,
.pay-state__icon--green   { background: #e8f5ee; color: var(--color-success, #4A7C59); }
.pay-state__icon--error,
.pay-state__icon--crimson { background: #fdecea; color: #B22234; }
.pay-state__icon--warning,
.pay-state__icon--gold    { background: #fff8e6; color: var(--color-accent, #D4A843); }
.pay-state__icon--info    { background: #e8eef5; color: var(--color-primary, #1E3A5F); }

.pay-state__title {
	font-family: 'Playfair Display', serif;
	font-size: 1.75rem;
	color: var(--color-primary, #1E3A5F);
	margin: 0 0 12px;
}

.pay-state__message {
	font-size: 1rem;
	color: #555;
	margin: 0 0 28px;
	line-height: 1.6;
}

/* ---- Member summary card ---- */
.pay-summary {
	background: var(--color-surface, #F0F2F6);
	border-radius: 10px;
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	text-align: left;
	margin-bottom: 32px;
}

.pay-summary__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary, #1E3A5F);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pay-summary__details,
.pay-summary__left {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
}

.pay-summary__name {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-primary, #1E3A5F);
	margin: 0 0 2px;
}

.pay-summary__meta,
.pay-summary__id {
	font-size: 0.875rem;
	color: #666;
	margin: 0;
}

.pay-summary__fee {
	text-align: right;
	flex-shrink: 0;
}

.pay-summary__fee-amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-primary, #1E3A5F);
	display: block;
}

.pay-summary__fee-label {
	font-size: 0.75rem;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pay-summary__fee-note {
	font-size: 0.75rem;
	color: #aaa;
}

/* ---- Payment options ---- */
.pay-options {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pay-option {
	border: 2px solid var(--color-border, #E2E6EC);
	border-radius: 10px;
	padding: 20px 24px;
	text-align: left;
	transition: border-color 0.2s;
}

.pay-option:hover {
	border-color: var(--color-primary, #1E3A5F);
}

.pay-option__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.pay-option__icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--color-primary, #1E3A5F);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pay-option__title {
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-primary, #1E3A5F);
	margin: 0;
}

.pay-option__desc {
	font-size: 0.875rem;
	color: #666;
	margin: 0 0 16px;
	line-height: 1.5;
}

/* Stripe button */
.btn--stripe {
	background: var(--color-primary, #1E3A5F);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 13px 28px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: background 0.2s, opacity 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn--stripe:hover:not(:disabled) {
	background: #15294a;
}

.btn--stripe:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ---- Option variants ---- */
.pay-option--stripe {
	border-color: var(--color-primary, #1E3A5F);
}

.pay-option__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.pay-option__recommended {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-success, #4A7C59);
	background: #e8f5ee;
	padding: 2px 8px;
	border-radius: 20px;
}

.pay-card-icons {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.pay-card-icon {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #555;
	border: 1px solid var(--color-border, #E2E6EC);
	border-radius: 4px;
	padding: 3px 7px;
	background: var(--color-card, #FAFBFD);
}

.pay-option__lock {
	font-size: 0.75rem;
	color: #aaa;
	margin: 10px 0 0;
	display: flex;
	align-items: center;
	gap: 5px;
}

/* Bank section inside details */
.pay-bank-body {
	margin-top: 16px;
}

.pay-bank-section {
	margin-bottom: 20px;
}

.pay-bank-section h4 {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
	margin: 0 0 10px;
}

.pay-bank-table th {
	font-weight: normal;
	color: #666;
	text-align: left;
	padding: 8px 12px 8px 0;
	white-space: nowrap;
	width: 40%;
}

.pay-bank-table td {
	padding: 8px 0;
}

.pay-bank-table tr + tr th,
.pay-bank-table tr + tr td {
	border-top: 1px solid var(--color-border, #E2E6EC);
}

.pay-bank-note {
	font-size: 0.8rem;
	color: #888;
	margin: 8px 0 0;
	display: flex;
	align-items: flex-start;
	gap: 5px;
}

.pay-bank-notice {
	background: var(--color-surface, #F0F2F6);
	border-radius: 6px;
	padding: 12px 14px;
	font-size: 0.85rem;
	color: #555;
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 16px;
}

/* ---- Divider ---- */
.pay-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #aaa;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 8px 0;
}

.pay-divider::before,
.pay-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border, #E2E6EC);
}

/* ---- Bank transfer details ---- */
.pay-bank-details summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	color: var(--color-primary, #1E3A5F);
	font-weight: 600;
}

.pay-bank-details summary::-webkit-details-marker { display: none; }

.pay-bank-details summary::after {
	content: '▸';
	font-size: 0.875rem;
	transition: transform 0.2s;
}

.pay-bank-details[open] summary::after {
	transform: rotate(90deg);
}

.pay-bank-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
	font-size: 0.9rem;
}

.pay-bank-table tr + tr td {
	border-top: 1px solid var(--color-border, #E2E6EC);
}

.pay-bank-table td {
	padding: 10px 0;
	vertical-align: top;
}

.pay-bank-table td:first-child {
	color: #666;
	width: 40%;
	padding-right: 12px;
}

.pay-bank-table td:last-child {
	font-weight: 600;
	color: var(--color-primary, #1E3A5F);
}

.pay-copy-btn {
	background: none;
	border: 1px solid var(--color-border, #E2E6EC);
	border-radius: 4px;
	padding: 6px 10px;
	min-height: 44px;
	font-size: 0.75rem;
	cursor: pointer;
	color: #666;
	margin-left: 8px;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}

.pay-copy-btn:hover,
.pay-copy-btn.is-copied {
	background: var(--color-success, #4A7C59);
	border-color: var(--color-success, #4A7C59);
	color: #fff;
}

/* ---- Reference card ---- */
.pay-ref-card {
	background: var(--color-surface, #F0F2F6);
	border-left: 4px solid var(--color-accent, #D4A843);
	border-radius: 6px;
	padding: 14px 16px;
	margin-top: 16px;
	font-size: 0.875rem;
	color: #555;
}

.pay-ref-card strong {
	color: var(--color-primary, #1E3A5F);
}

/* ---- Success steps ---- */
.pay-success-steps {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	text-align: left;
}

.pay-success-steps li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	font-size: 0.95rem;
	color: #444;
	border-bottom: 1px solid var(--color-border, #E2E6EC);
}

.pay-success-steps li:last-child {
	border-bottom: none;
}

.pay-success-steps__num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-success, #4A7C59);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

/* ---- Error message ---- */
.pay-error {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	border-radius: 6px;
	color: #8b1a1a;
	padding: 12px 16px;
	font-size: 0.9rem;
	margin-top: 16px;
}

/* ---- Misc ---- */
.pay-cancel-link {
	display: block;
	margin-top: 20px;
	font-size: 0.875rem;
	color: #888;
	text-decoration: none;
}

.pay-cancel-link:hover {
	color: var(--color-secondary, #B22234);
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
	.pay-summary {
		flex-wrap: wrap;
		gap: 12px;
	}
	.pay-summary__fee {
		width: 100%;
		text-align: left;
		border-top: 1px solid var(--color-border, #E2E6EC);
		padding-top: 12px;
	}
	.pay-bank-table td:first-child {
		width: 45%;
	}
	.pay-state__actions {
		flex-direction: column;
	}
	.pay-state__actions .btn {
		width: 100%;
		justify-content: center;
	}
}