/**
 * FNF Customer Tier badges — lightweight, mobile-first, no external fonts.
 * Each .fnf-tier-* class carries its own visual identity (Section 11).
 */

/* ---------- Base pill (used beside username, in cards) ---------- */
.fnf-tier-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2px;
	white-space: nowrap;
	max-width: 100%;
	line-height: 1.6;
	vertical-align: middle;
}

/* ---------- Tier identities ---------- */
.fnf-tier-silver   { background: #eef0f2; color: #4b5563; }
.fnf-tier-gold      { background: #fff6df; color: #8a6100; }
.fnf-tier-diamond   { background: #e7f6fb; color: #0f6d8c; }
.fnf-tier-platinum  { background: #f1eefc; color: #5b3aa8; }

.fnf-tier-elite {
	background: linear-gradient(135deg, #2b2b33, #1c1c22);
	color: #f5d67b;
	border: 1px solid #f5d67b55;
}

/* Subtle shine on Elite only — one lightweight CSS animation, not applied
   to any other tier, and only on the larger profile/shortcode badge, not
   on every small pill in a busy activity feed (Section 12/25 performance). */
@media (prefers-reduced-motion: no-preference) {
	.fnf-tier-badge-lg.fnf-tier-elite,
	.fnf-tier-shortcode.fnf-tier-elite .fnf-tier-shortcode-badge {
		background-size: 200% 100%;
		background-image: linear-gradient(120deg, #1c1c22 40%, #3a3a2e 50%, #1c1c22 60%);
		animation: fnf-elite-shine 4.5s ease-in-out infinite;
	}
}
@keyframes fnf-elite-shine {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ---------- Profile header badge (Section 21) ---------- */
.fnf-profile-tier {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 6px 0 10px;
}
.fnf-tier-badge-lg {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .3px;
}
.fnf-tier-badge-lg.fnf-tier-silver   { background: #eef0f2; color: #4b5563; }
.fnf-tier-badge-lg.fnf-tier-gold     { background: #fff6df; color: #8a6100; }
.fnf-tier-badge-lg.fnf-tier-diamond  { background: #e7f6fb; color: #0f6d8c; }
.fnf-tier-badge-lg.fnf-tier-platinum { background: #f1eefc; color: #5b3aa8; }
.fnf-profile-tier .fnf-tier-points {
	font-size: 12px;
	color: #666;
}

/* ---------- [fnf_customer_tier] shortcode ---------- */
.fnf-tier-shortcode {
	display: inline-block;
	max-width: 100%;
	padding: 14px 18px;
	border-radius: 14px;
	background: #fafafa;
	border: 1px solid #eaeaea;
	box-sizing: border-box;
}
.fnf-tier-shortcode-badge {
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 4px;
	word-break: break-word;
}
.fnf-tier-shortcode.fnf-tier-elite .fnf-tier-shortcode-badge {
	color: #f5d67b;
	background: #1c1c22;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 8px;
}
.fnf-tier-shortcode-points { font-size: 13px; color: #555; margin-bottom: 2px; }
.fnf-tier-shortcode-next   { font-size: 12px; color: #888; }
.fnf-tier-shortcode-next.fnf-tier-max { color: #8a6100; font-weight: 700; }

/* ---------- [fnf_customer_tier_progress] shortcode ---------- */
.fnf-tier-progress {
	max-width: 360px;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 18px;
	border-radius: 14px;
	background: #fafafa;
	border: 1px solid #eaeaea;
}
.fnf-tier-progress-badge { font-size: 15px; font-weight: 800; margin-bottom: 6px; word-break: break-word; }
.fnf-tier-progress-count { font-size: 12px; color: #666; margin-bottom: 6px; }
.fnf-tier-progress-bar {
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: #e5e5e5;
	overflow: hidden;
	margin-bottom: 8px;
}
.fnf-tier-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #4a90d9, #1a7f37);
	transition: width .4s ease;
}
.fnf-tier-progress-fill.fnf-tier-progress-full { background: linear-gradient(90deg, #f5d67b, #c9a227); }
.fnf-tier-progress-remaining { font-size: 12px; color: #777; }
.fnf-tier-progress-remaining.fnf-tier-max { color: #8a6100; font-weight: 700; }

/* ---------- Mobile safety (Section 24) ---------- */
@media (max-width: 480px) {
	.fnf-tier-pill { font-size: 10px; padding: 2px 7px; }
	.fnf-tier-shortcode,
	.fnf-tier-progress { width: 100%; padding: 12px 14px; }
	.fnf-profile-tier { gap: 6px; }
}

/* No horizontal scroll from long names anywhere these badges sit */
.fnf-tier-pill, .fnf-tier-badge-lg, .fnf-tier-shortcode-badge, .fnf-tier-progress-badge {
	overflow-wrap: break-word;
}