/* ========================================================================
   FPG Frontend CSS
   Payment overlay, messages, and retry button styles.
   ======================================================================== */

/* ── Payment message banner ─────────────────────────────────────────────── */
.fpg-payment-message {
	display: block;
	padding: 14px 20px;
	margin-bottom: 20px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
	border-left: 4px solid transparent;
	animation: fpgFadeIn 0.3s ease;
}

@keyframes fpgFadeIn {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fpg-message--info {
	background: #e8f4fd;
	border-left-color: #2980b9;
	color: #1a5276;
}

.fpg-message--success {
	background: #eafaf1;
	border-left-color: #27ae60;
	color: #1e8449;
}

.fpg-message--error {
	background: #fdf3f3;
	border-left-color: #e74c3c;
	color: #a93226;
}

/* ── Retry button ────────────────────────────────────────────────────────── */
.fpg-btn--retry {
	display: inline-block;
	margin-top: 10px;
	padding: 10px 22px;
	background: #e74c3c;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
}

.fpg-btn--retry:hover {
	background: #c0392b;
	transform: translateY(-1px);
}

.fpg-btn--retry:active {
	transform: translateY(0);
}

/* ── Processing spinner ──────────────────────────────────────────────────── */
.fpg-message--info::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	border: 2px solid #2980b9;
	border-top-color: transparent;
	border-radius: 50%;
	animation: fpgSpin 0.7s linear infinite;
	vertical-align: middle;
}

@keyframes fpgSpin {
	to { transform: rotate(360deg); }
}

/* Hide spinner for non-info states */
.fpg-message--success::before,
.fpg-message--error::before {
	display: none;
}