/**
 * ElementorPlus — Promoção: banner de progresso.
 * Usado no mini-cart (epmc-panel) e no widget carrinho (epcart-aside).
 */

/* ── Variáveis ──────────────────────────────────────────────────────────── */
.eppr-banner {
	--eppr-accent:   #f59e0b;   /* dourado/âmbar: evoca "recompensa" */
	--eppr-accent2:  #fbbf24;
	--eppr-green:    #22c55e;
	--eppr-surface:  #0e131c;
	--eppr-surface2: #161c27;
	--eppr-border:   #232b39;
	--eppr-text:     #ffffff;
	--eppr-muted:    #9aa4b2;
	--eppr-radius:   12px;
}

/* ── Container principal ────────────────────────────────────────────────── */
.eppr-banner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--eppr-accent) 8%, var(--eppr-surface2)) 0%,
		var(--eppr-surface2) 100%
	);
	border: 1px solid color-mix(in srgb, var(--eppr-accent) 20%, var(--eppr-border));
	border-radius: var(--eppr-radius);
	margin-bottom: 14px;
	transition: background 0.3s ease, border-color 0.3s ease;
}

/* Fallback para navegadores sem color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {
	.eppr-banner {
		background: #1a1f2b;
		border-color: #3a3010;
	}
}

/* ── Estado: desbloqueado (tem grátis) ──────────────────────────────────── */
.eppr-banner--unlocked,
.eppr-banner--partial {
	--eppr-accent: #22c55e;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, #22c55e 10%, var(--eppr-surface2)) 0%,
		var(--eppr-surface2) 100%
	);
	border-color: color-mix(in srgb, #22c55e 30%, var(--eppr-border));
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.eppr-banner--unlocked,
	.eppr-banner--partial {
		background: #0f1f16;
		border-color: #1a4a28;
	}
}

/* ── Linha superior: ícone + mensagem ──────────────────────────────────── */
.eppr-banner-top {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.eppr-icon {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 1px;
}

.eppr-msg {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--eppr-muted);
}

.eppr-msg strong {
	color: var(--eppr-text);
	font-weight: 600;
}

/* ── Área de progresso: pontos + barra ─────────────────────────────────── */
.eppr-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Pontos */
.eppr-dots {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.eppr-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--eppr-border);
	transition: background 0.25s ease, transform 0.25s ease;
	flex-shrink: 0;
}

.eppr-dot--filled {
	background: var(--eppr-accent);
	transform: scale(1.15);
	box-shadow: 0 0 6px color-mix(in srgb, var(--eppr-accent) 60%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.eppr-dot--filled {
		box-shadow: 0 0 6px rgba(245,158,11,.5);
	}
}

/* Barra de progresso */
.eppr-bar {
	height: 5px;
	background: var(--eppr-border);
	border-radius: 99px;
	overflow: hidden;
}

.eppr-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--eppr-accent), var(--eppr-accent2));
	border-radius: 99px;
	transition: width 0.45s cubic-bezier(.4,0,.2,1);
	min-width: 0;
}

/* Barra cheia (100%): verde */
.eppr-banner--unlocked .eppr-bar-fill,
.eppr-banner--partial .eppr-bar-fill {
	background: linear-gradient(90deg, #16a34a, var(--eppr-green));
}

/* ── Animação de "destravou" ────────────────────────────────────────────── */
@keyframes eppr-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.06); }
	70%  { transform: scale(0.97); }
	100% { transform: scale(1); }
}

.eppr-banner--unlocked.eppr-anim {
	animation: eppr-pop 0.45s ease forwards;
}

/* ── Variante MINI-CART ─────────────────────────────────────────────────── */
/*
 * No mini-cart o espaço é menor. O banner fica entre o cabeçalho (.epmc-head)
 * e a lista de itens (.epmc-items), dentro do .epmc-panel (que pode ter sido
 * portado para .epmc-portal no body).
 */
.epmc-panel .eppr-banner,
.epmc-portal .eppr-banner {
	margin: 0 14px 12px;
	padding: 12px 14px;
}

/* ── Variante CARRINHO (epcart-aside) ───────────────────────────────────── */
.epcart-aside .eppr-banner {
	margin-bottom: 16px;
}

/* ── Responsivo mobile ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.eppr-banner {
		padding: 12px 14px;
		gap: 9px;
	}
	.eppr-icon {
		font-size: 20px;
	}
	.eppr-msg {
		font-size: 12px;
	}
	.eppr-dot {
		width: 9px;
		height: 9px;
	}
	/* No mini-cart mobile a margem lateral já vem do painel */
	.epmc-panel .eppr-banner,
	.epmc-portal .eppr-banner {
		margin: 0 10px 10px;
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.eppr-bar-fill,
	.eppr-dot,
	.eppr-banner,
	.eppr-banner--unlocked.eppr-anim {
		transition: none;
		animation: none;
	}
}