/* ================================================================
   Orezero Hub — Stato di Presenza
   Badge, Progress bar, KPI, Popup promozione/retrocessione
   ================================================================ */

:root {
	--oz-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--oz-text: rgba(14,14,18,0.92);
	--oz-muted: rgba(14,14,18,0.60);
	--oz-strong: rgba(14,14,18,0.98);
	--oz-kpi-value: rgba(14,14,18,0.98);
	--oz-kpi-label: rgba(14,14,18,0.55);
	--oz-progress-fill-a: #00c6ff;
	--oz-progress-fill-b: #0072ff;
	--oz-progress-glow-a: rgba(0,198,255,.28);
	--oz-progress-glow-b: rgba(0,114,255,.18);
	--oz-progress-track-bg: rgba(14,14,18,0.06);
	--oz-progress-track-border: rgba(14,14,18,0.12);
}

/* ── Tipografia base ── */
body .orezero-badge-icon,
body .orezero-badge-level,
body .orezero-progress,
body .orezero-progress-bar,
body .orezero-kpi,
body .orezero-kpi__value,
body .orezero-kpi__label,
body .orezero-presence-remaining,
body .orezero-presence {
	font-family: var(--oz-font);
}

/* ── Badge ── */
body .orezero-badge-icon {
	font-size: 42px;
	line-height: 1;
	vertical-align: middle;
	margin-right: 10px;
}
body .orezero-badge-level {
	font-size: 30px;
	font-weight: 900;
	letter-spacing: 0.2px;
	line-height: 1;
	vertical-align: middle;
	color: rgba(14,14,18,0.98);
}

/* ── Progress bar ── */
body .orezero-progress {
	position: relative !important;
	width: 100% !important;
	height: 14px !important;
	margin: 14px 0 22px !important;
}
body .orezero-progress::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--oz-progress-track-bg);
	box-shadow: inset 0 0 0 1px var(--oz-progress-track-border);
	z-index: 0;
}
body .orezero-progress-bar {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	height: 100% !important;
	z-index: 1;
	background: linear-gradient(90deg, var(--oz-progress-fill-a) 0%, var(--oz-progress-fill-b) 100%);
	border-radius: 999px;
	transition: width .6s cubic-bezier(.4,0,.2,1);
	box-shadow: 0 0 8px var(--oz-progress-glow-a), 0 0 16px var(--oz-progress-glow-b);
}

/* ── Testo presenza ── */
body .orezero-presence-remaining {
	color: var(--oz-text);
	line-height: 1.35;
	font-size: 16px;
}
body .orezero-presence-remaining strong { color: var(--oz-strong); font-weight: 800; }

/* ── KPI ── */
body .orezero-kpi { display: flex; flex-direction: column; gap: 6px; }
body .orezero-kpi__value { font-size: 36px; font-weight: 900; line-height: 1; color: var(--oz-kpi-value); }
body .orezero-kpi__label { font-size: 13px; font-weight: 600; letter-spacing: 0.2px; color: var(--oz-kpi-label); }

/* ── Popup overlay ── */
.oz-pop-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.35);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2147483647;
	padding: 18px;
	animation: ozOverlayFade .18s ease-out both;
}
@keyframes ozOverlayFade { from { opacity: 0; } to { opacity: 1; } }

.oz-pop-card {
	width: min(560px, 100%);
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 18px 50px rgba(0,0,0,.25);
	padding: 28px 24px 22px;
	font-family: var(--oz-font, -apple-system, sans-serif);
	color: rgba(14,14,18,0.92);
	text-align: center;
	transform: translateY(8px) scale(.985);
	animation: ozCardPop .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ozCardPop { to { transform: translateY(0) scale(1); } }

.oz-pop-title { margin: 0; font-size: 28px; font-weight: 900; line-height: 1.15; letter-spacing: -0.2px; }
.oz-pop-sub   { margin: 10px 0 0; font-size: 16px; color: rgba(14,14,18,0.62); font-weight: 600; }

.oz-pop-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 18px auto 10px;
	padding: 14px 18px;
	border-radius: 16px;
	background: rgba(14,14,18,0.04);
	border: 1px solid rgba(14,14,18,0.10);
	transform-origin: 50% 80%;
	animation: ozBadgeBounce .70s cubic-bezier(.2,.9,.2,1) .10s both;
}
@keyframes ozBadgeBounce {
	0%   { transform: translateY(6px) scale(.96); opacity: 0; }
	45%  { transform: translateY(-10px) scale(1.03); opacity: 1; }
	70%  { transform: translateY(3px) scale(.995); }
	85%  { transform: translateY(-2px) scale(1.005); }
	100% { transform: translateY(0) scale(1); }
}
.oz-pop-badge .icon { font-size: 34px; line-height: 1; }
.oz-pop-badge .text { font-size: 20px; font-weight: 900; }

.oz-pop-after   { margin: 10px 0 0; font-size: 15px; color: rgba(14,14,18,0.70); font-weight: 600; }
.oz-pop-actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.oz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	appearance: none;
	border: none;
	cursor: pointer;
	padding: 12px 18px;
	border-radius: 14px;
	font-weight: 900;
	font-size: 14px;
	min-width: 160px;
}
.oz-btn-primary {
	color: #fff;
	background: linear-gradient(90deg, var(--oz-progress-fill-a, #00c6ff), var(--oz-progress-fill-b, #0072ff));
	box-shadow: 0 10px 20px rgba(0,114,255,.18);
}
.oz-btn-ghost {
	background: rgba(14,14,18,0.06);
	color: rgba(14,14,18,0.72);
	border: 1px solid rgba(14,14,18,0.10);
}
.oz-btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
	.oz-pop-overlay, .oz-pop-card, .oz-pop-badge { animation: none !important; transform: none !important; }
}