/**
 * Frontend prediction card + leaderboard table. Deliberately brand-neutral
 * (this plugin is meant to stay theme-independent) — a live theme can
 * override these classes for a tighter visual match if wanted.
 */

.proace-prediction {
	border: 1px solid #e2e6ee;
	border-radius: 12px;
	padding: 20px 22px;
	margin: 22px 0;
	background: #fafbfc;
}

.proace-prediction__eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #8a93a6;
	margin-bottom: 8px;
}

.proace-prediction__question {
	font-size: 17px;
	font-weight: 700;
	color: #16233c;
	margin-bottom: 14px;
}

.proace-prediction__login {
	margin-bottom: 12px;
	font-size: 14px;
}

.proace-prediction__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.proace-prediction__option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 8px;
	border: 1px solid #d7dce5;
	background: #fff;
	font-size: 14px;
	color: #33405c;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.proace-prediction__option:hover:not(:disabled) {
	border-color: #1e5087;
}

.proace-prediction__option:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.proace-prediction__option--mine {
	border-color: #1e5087;
	background: #eef3fb;
	font-weight: 700;
}

.proace-prediction__option--correct {
	border-color: #2c7a52;
	background: #dff0e5;
	color: #2c7a52;
	font-weight: 700;
}

.proace-prediction__option--wrong.proace-prediction__option--mine {
	border-color: #a8402c;
	background: #f6e3df;
	color: #a8402c;
}

.proace-prediction__pct {
	font-size: 12px;
	opacity: 0.7;
}

.proace-prediction__feedback {
	margin-top: 12px;
	font-size: 13px;
	color: #4c5872;
	min-height: 18px;
}

.proace-prediction__result--correct {
	color: #2c7a52;
}

.proace-prediction__result--wrong {
	color: #a8402c;
}

/* Leaderboard */

.proace-leaderboard__table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
}

.proace-leaderboard__table th,
.proace-leaderboard__table td {
	padding: 10px 12px;
	border-bottom: 1px solid #e2e6ee;
	text-align: left;
	font-size: 14px;
}

.proace-leaderboard__table th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #8a93a6;
}

.proace-leaderboard__table img {
	vertical-align: middle;
	border-radius: 50%;
	margin-right: 8px;
}

.proace-leaderboard__row--top {
	background: #fff8ec;
	font-weight: 700;
}

/* Vote in flight (public/js/prediction.js) */
.proace-prediction__option--pending {
	animation: proace-pending 0.9s ease-in-out infinite;
}

@keyframes proace-pending {
	50% { opacity: 0.55; }
}

@media ( prefers-reduced-motion: reduce ) {
	.proace-prediction__option--pending {
		animation: none;
		opacity: 0.7;
	}
}

/* Logged-out visitors on an open prediction (0.8.2) — theme-neutral base. */
.proace-prediction__option--preview {
	border-color: #1e5087;
	background: #eef3fb;
}

.proace-prediction__guest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 12px;
	border: 1px solid #d7dce5;
	border-radius: 10px;
}

.proace-prediction__guest-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 180px;
}

.proace-prediction__guest-actions {
	display: flex;
	gap: 8px;
}