/* PSPG PayLink public pages
 * Scope: #pspg-paylink
 * Theme-friendly layout (theme controls visuals)
 */

#pspg-paylink {
	padding: 48px 16px;
}

#pspg-paylink .pspg-paylink-wrap {
	max-width: 520px;
	margin: 0 auto;
}

#pspg-paylink .pspg-paylink-card {
	background: #fff; /* допустимо: контейнер */
	padding: 24px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.08); /* нейтральная тень */
}

/* Header */

#pspg-paylink .pspg-paylink-header {
	margin-bottom: 20px;
}

#pspg-paylink .pspg-paylink-title {
	margin: 0 0 6px 0;
}

#pspg-paylink .pspg-paylink-subtitle {
	margin: 0;
	opacity: 0.75;
}

/* Summary */

#pspg-paylink .pspg-paylink-summary {
	margin: 20px 0;
}

#pspg-paylink .pspg-paylink-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

#pspg-paylink .pspg-paylink-label {
	opacity: 0.7;
}

#pspg-paylink .pspg-paylink-value {
	text-align: right;
}

/* Small meta chip (ID) */

#pspg-paylink .pspg-chip {
	display: inline-block;
	padding: 2px 8px;
	background: rgba(0, 0, 0, 0.06);
}

/* Divider */

#pspg-paylink .pspg-paylink-divider {
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin: 20px 0;
}

/* State blocks */

#pspg-paylink .pspg-state-text {
	margin: 0 0 16px 0;
}

#pspg-paylink .pspg-state-actions {
	margin-top: 16px;
}

/* Status hints only (no forcing colors elsewhere) */

#pspg-paylink .pspg-state--success .pspg-state-text {
	color: #065f46;
}

#pspg-paylink .pspg-state--failed .pspg-state-text {
	color: #7c2d12;
}

/* Receipt */

#pspg-paylink .pspg-receipt {
	margin-top: 24px;
}

#pspg-paylink .pspg-receipt-title {
	margin: 0 0 10px 0;
}

/* Form layout only — visuals by theme */

#pspg-paylink .pspg-receipt-form {
	display: flex;
	gap: 8px;
	align-items: center;
}

#pspg-paylink .pspg-input {
	flex: 1;
}

/* Footer */

#pspg-paylink .pspg-paylink-footnote {
	margin-top: 16px;
	text-align: center;
	opacity: 0.6;
}

/* Mobile layout */

@media (max-width: 520px) {
	#pspg-paylink .pspg-paylink-row {
		display: block;
	}

	#pspg-paylink .pspg-paylink-value {
		text-align: left;
		margin-top: 4px;
	}
}