/* =========================================================
   ONE NATION LOYALTY — Nation Club status card
   ========================================================= */
.onl-wrap { font-family: "DM Sans", sans-serif; margin-bottom: 2rem; }
.onl-wrap * { box-sizing: border-box; }
.onl-empty-notice { background: #f3f3ef; border-radius: .75rem; padding: 1.5rem; text-align: center; color: #666; }

.onl-tier-card {
	border-radius: 1rem; padding: 1.75rem; color: #fff; margin-bottom: 1.25rem;
}
.onl-tier-bronze { background: linear-gradient(to bottom right, #d97706, #92400e); }
.onl-tier-silver { background: linear-gradient(to bottom right, #94a3b8, #475569); }
.onl-tier-gold   { background: linear-gradient(to bottom right, #facc15, #ca8a04); }

.onl-tier-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; }
.onl-eyebrow { font-size: .875rem; opacity: .85; margin: 0 0 .125rem; }
.onl-tier-card h3 { font-family: "Sora", sans-serif; font-size: 1.5rem; margin: 0; color: #fff; }
.onl-tier-emoji { font-size: 2rem; line-height: 1; }

.onl-progress-row { display: flex; justify-content: space-between; font-size: .9375rem; margin-bottom: .5rem; }
.onl-progress-track { width: 100%; height: 12px; background: rgba(255,255,255,.25); border-radius: 999px; overflow: hidden; margin-bottom: 1.5rem; }
.onl-progress-fill { height: 100%; background: #fff; border-radius: 999px; transition: width 1s ease-out; }

.onl-stats-row { display: flex; gap: 2.5rem; }
.onl-stats-row > div p { margin: 0; }
.onl-stat-num { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.375rem; color: #fff; margin-bottom: .125rem !important; }
.onl-stats-row > div p:last-child { font-size: .875rem; opacity: .85; }

.onl-progress-card { background: #fff; border: 1px solid #E3E3DD; border-radius: 1rem; padding: 1.5rem; }
.onl-progress-card h3 { font-family: "Sora", sans-serif; font-size: 1.125rem; margin: 0 0 1.25rem; color: #333; }

.onl-tier-steps { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; text-align: center; }
.onl-step { color: #999; flex: 1; }
.onl-step p { margin: .25rem 0 0; font-size: .8125rem; }
.onl-step-pts { font-size: 11px !important; color: #999; margin-top: 0 !important; }
.onl-step .onl-tier-emoji { font-size: 1.375rem; }
.onl-step-current { color: #186D42; font-weight: 700; }
.onl-step-current p { color: #186D42; }
.onl-step-current .onl-step-pts { color: #186D42; }

.onl-bar-track { width: 100%; height: 8px; background: #F3F3EF; border-radius: 999px; overflow: hidden; }
.onl-bar-fill { height: 100%; background: #186D42; border-radius: 999px; transition: width 1s ease-out; }

@media (min-width: 640px) {
	.onl-tier-card { padding: 2rem; }
}