/* ============================================================================
   Orça Silks — Biblioteca de Carrinhos (v3.3.0 "Griffin")
   Sistema modular: "surfaces" (tratamento de superfície) x "animações"
   (movimento contínuo) x glow (halo opcional) x hover (efeito ao passar o
   mouse). Os 40 modelos catalogados em class-loa-cart-library.php são
   combinações destas camadas — nenhuma delas sobrescreve cor, tamanho,
   posição ou sombra já configurados pelo usuário no painel: todas usam as
   variáveis --loa-cart-color / --loa-cart-color-rgb, preenchidas a partir
   da cor escolhida em "Cor de fundo" (icone_fundo_cor / shortcode_fundo_cor).
   100% CSS — sem GIF.
   ========================================================================= */

.loa-cart-model {
	--loa-cart-color: #1f2933;
	--loa-cart-color-rgb: 31, 41, 51;
	--loa-cart-color-dark: #12181e;
	--loa-anim-dur: 1.8s;
}

/* ── Surfaces ─────────────────────────────────────────────────────────── */

.loa-surface-flat {
	background: var(--loa-cart-color);
}

.loa-surface-outline {
	background: transparent;
	border: 2px solid var(--loa-cart-color);
}
.loa-surface-outline .loa-cart-icon,
.loa-surface-outline .loa-preview-fab-icon {
	color: var(--loa-cart-color);
	filter: none;
}

.loa-surface-neon {
	background: #0b0f14;
	border: 2px solid var(--loa-cart-color);
	box-shadow: 0 0 10px rgba(var(--loa-cart-color-rgb), 0.9), inset 0 0 8px rgba(var(--loa-cart-color-rgb), 0.5);
}

.loa-surface-glass {
	background: rgba(var(--loa-cart-color-rgb), 0.30);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.loa-surface-gradient {
	background: linear-gradient(135deg, var(--loa-cart-color), var(--loa-cart-color-dark));
}

/* ── Animações contínuas (idle) ─────────────────────────────────────────── */

.loa-anim-none {}

@keyframes loaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.loa-anim-pulse { animation: loaPulse var(--loa-anim-dur) ease-in-out infinite; }

@keyframes loaBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.loa-anim-bounce { animation: loaBounce var(--loa-anim-dur) ease-in-out infinite; }

@keyframes loaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.loa-anim-float { animation: loaFloat calc(var(--loa-anim-dur) * 1.6) ease-in-out infinite; }

@keyframes loaBreathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: .88; } }
.loa-anim-breathe { animation: loaBreathe calc(var(--loa-anim-dur) * 1.4) ease-in-out infinite; }

@keyframes loaWobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.loa-anim-wobble { animation: loaWobble calc(var(--loa-anim-dur) * 1.2) ease-in-out infinite; }

@keyframes loaElastic {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.16); }
	50%  { transform: scale(0.94); }
	70%  { transform: scale(1.04); }
	100% { transform: scale(1); }
}
.loa-anim-elastic { animation: loaElastic var(--loa-anim-dur) cubic-bezier(.68, -0.55, .27, 1.55) infinite; }

.loa-anim-shimmer { position: relative; overflow: hidden; }
.loa-anim-shimmer::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-120%);
	animation: loaShimmerSweep var(--loa-anim-dur) ease-in-out infinite;
	pointer-events: none;
}
@keyframes loaShimmerSweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.loa-anim-ring { position: relative; }
.loa-anim-ring::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var(--loa-cart-color);
	animation: loaRingPing var(--loa-anim-dur) ease-out infinite;
	pointer-events: none;
}
@keyframes loaRingPing {
	0%   { transform: scale(1); opacity: .7; }
	100% { transform: scale(1.7); opacity: 0; }
}

.loa-anim-rotate-glow { position: relative; }
.loa-anim-rotate-glow::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: inherit;
	background: conic-gradient(from 0deg, transparent, rgba(var(--loa-cart-color-rgb), 0.9), transparent 60%);
	animation: loaRotateGlow var(--loa-anim-dur) linear infinite;
	z-index: -1;
	filter: blur(4px);
	pointer-events: none;
}
@keyframes loaRotateGlow { to { transform: rotate(360deg); } }

/* ── Glow (halo pulsante independente, opt-in via "cart_glow_ativo") ────── */

.loa-glow-fx { position: relative; }
.loa-glow-fx::before {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: inherit;
	box-shadow: 0 0 20px 4px rgba(var(--loa-cart-color-rgb), 0.55);
	animation: loaGlowPulse calc(var(--loa-anim-dur) * 1.2) ease-in-out infinite;
	pointer-events: none;
	z-index: -2;
}
@keyframes loaGlowPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ── Hover (opt-in via "cart_hover_effeito", além da troca de cor já existente) ── */

.loa-hover-scale:hover { transform: scale(1.12); }
.loa-hover-lift:hover { transform: translateY(-6px); }
.loa-hover-rotate:hover { transform: rotate(12deg); }
.loa-hover-glow:hover { box-shadow: 0 0 22px 6px rgba(var(--loa-cart-color-rgb), 0.6); }

/* Respeita a opção "Ativar animações" (popup_animacoes_ativas) já existente */
.loa-anims-off .loa-anim-pulse,
.loa-anims-off .loa-anim-bounce,
.loa-anims-off .loa-anim-float,
.loa-anims-off .loa-anim-breathe,
.loa-anims-off .loa-anim-wobble,
.loa-anims-off .loa-anim-elastic,
.loa-anims-off .loa-anim-shimmer::after,
.loa-anims-off .loa-anim-ring::before,
.loa-anims-off .loa-anim-rotate-glow::before,
.loa-anims-off .loa-glow-fx::before {
	animation: none !important;
}

/* Respeita "prefers-reduced-motion" do sistema operacional do visitante */
@media (prefers-reduced-motion: reduce) {
	.loa-anim-pulse, .loa-anim-bounce, .loa-anim-float, .loa-anim-breathe,
	.loa-anim-wobble, .loa-anim-elastic, .loa-anim-shimmer::after,
	.loa-anim-ring::before, .loa-anim-rotate-glow::before, .loa-glow-fx::before {
		animation: none !important;
	}
}

/* ── Galeria (painel admin) ─────────────────────────────────────────────── */

.loa-lib-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.loa-lib-filter {
	border: 1px solid #e6ebf1;
	background: #fff;
	color: #475569;
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.loa-lib-filter.active {
	background: #1f2933;
	color: #fff;
	border-color: #1f2933;
}

.loa-lib-filter:hover { border-color: #1f2933; }

.loa-lib-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 6px;
}

.loa-lib-card {
	border: 2px solid #e6ebf1;
	border-radius: 12px;
	padding: 14px 10px 12px;
	text-align: center;
	cursor: pointer;
	background: #fff;
	transition: border-color .15s ease;
	position: relative;
}

.loa-lib-card:hover { border-color: #94a3b8; }

.loa-lib-card.loa-lib-selected {
	border-color: #25D366;
	box-shadow: 0 0 0 3px rgba(37, 211, 102, .15);
}

.loa-lib-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.loa-lib-card-check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	font-size: 11px;
	display: none;
	align-items: center;
	justify-content: center;
}

.loa-lib-card.loa-lib-selected .loa-lib-card-check { display: flex; }

.loa-lib-card-stage {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

.loa-lib-card-mini {
	width: 46px;
	height: 46px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	flex-shrink: 0;
}

.loa-lib-card-name { font-size: 12px; font-weight: 700; color: #1f2933; }
.loa-lib-card-desc { font-size: 10.5px; color: #94a3b8; margin-top: 3px; line-height: 1.35; }

.loa-lib-empty {
	text-align: center;
	color: #94a3b8;
	font-size: 13px;
	padding: 30px 0;
	display: none;
}