/* ============================================================================
   Orça Silks — Biblioteca de Botões WhatsApp (v3.4.0 "Chimera")
   Mesmo padrão da Biblioteca de Carrinhos (surface x animação, catalogados
   em class-loa-whatsapp-button-library.php).

   NAMESPACE PRÓPRIO (loa-wbtn-*): os botões "Orçar" já usam as classes
   .loa-anim-shimmer / .loa-anim-pulse / .loa-anim-slide_up para o sistema
   de animação de hover pré-existente (campo h_animation). Para não colidir
   com ele, todas as classes desta biblioteca usam o prefixo "loa-wbtn-".
   Os dois sistemas coexistem sem nenhum conflito.

   As classes .loa-lib-* (galeria, toolbar, filtros) são reaproveitadas de
   loa-cart-library.css — já são genéricas o suficiente para as duas
   bibliotecas; aqui só adicionamos o miniature-preview específico de botão
   (retângulo com texto), diferente do ícone circular do carrinho.
   100% CSS — sem GIF.
   ========================================================================= */

.loa-wbtn-model {
	--loa-wbtn-color: #25D366;
	--loa-wbtn-color-rgb: 37, 211, 102;
	--loa-wbtn-color-dark: #1ebe5b;
	--loa-wbtn-anim-dur: 1.8s;
}

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

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

.loa-wbtn-surface-outline {
	background: transparent;
	border: 2px solid var(--loa-wbtn-color);
	color: var(--loa-wbtn-color);
}

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

.loa-wbtn-surface-glass {
	background: rgba(var(--loa-wbtn-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-wbtn-surface-gradient {
	background: linear-gradient(135deg, var(--loa-wbtn-color), var(--loa-wbtn-color-dark));
}

/* ── Animações contínuas (idle) ──────────────────────────────────────────
   Mesmos 10 tipos da Biblioteca de Carrinhos, com nomes de classe
   próprios para não colidir com o sistema de hover já existente. */

.loa-wbtn-anim-none {}

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

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

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

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

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

@keyframes loaWbtnElastic {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.08); }
	50%  { transform: scale(0.97); }
	70%  { transform: scale(1.02); }
	100% { transform: scale(1); }
}
.loa-wbtn-anim-elastic { animation: loaWbtnElastic var(--loa-wbtn-anim-dur) cubic-bezier(.68, -0.55, .27, 1.55) infinite; }

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

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

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

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

.loa-wbtn-glow-fx { position: relative; }
.loa-wbtn-glow-fx::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: inherit;
	box-shadow: 0 0 16px 3px rgba(var(--loa-wbtn-color-rgb), 0.5);
	animation: loaWbtnGlowPulse calc(var(--loa-wbtn-anim-dur) * 1.2) ease-in-out infinite;
	pointer-events: none;
	z-index: -2;
}
@keyframes loaWbtnGlowPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

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

.loa-wbtn-hover-scale:hover { transform: scale(1.05); }
.loa-wbtn-hover-lift:hover { transform: translateY(-4px); }
.loa-wbtn-hover-rotate:hover { transform: rotate(-2deg); }
.loa-wbtn-hover-glow:hover { box-shadow: 0 0 18px 4px rgba(var(--loa-wbtn-color-rgb), 0.55); }

/* Respeita "Ativar animações" já existente e prefers-reduced-motion */
.loa-anims-off .loa-wbtn-anim-pulse,
.loa-anims-off .loa-wbtn-anim-bounce,
.loa-anims-off .loa-wbtn-anim-float,
.loa-anims-off .loa-wbtn-anim-breathe,
.loa-anims-off .loa-wbtn-anim-wobble,
.loa-anims-off .loa-wbtn-anim-elastic,
.loa-anims-off .loa-wbtn-anim-shimmer::after,
.loa-anims-off .loa-wbtn-anim-ring::before,
.loa-anims-off .loa-wbtn-anim-rotate-glow::before,
.loa-anims-off .loa-wbtn-glow-fx::before {
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.loa-wbtn-anim-pulse, .loa-wbtn-anim-bounce, .loa-wbtn-anim-float, .loa-wbtn-anim-breathe,
	.loa-wbtn-anim-wobble, .loa-wbtn-anim-elastic, .loa-wbtn-anim-shimmer::after,
	.loa-wbtn-anim-ring::before, .loa-wbtn-anim-rotate-glow::before, .loa-wbtn-glow-fx::before {
		animation: none !important;
	}
}

/* ── Mini-preview de botão (retângulo com texto) para a galeria admin ────
   As classes .loa-lib-grid / .loa-lib-card / .loa-lib-toolbar / .loa-lib-filter
   já existem em loa-cart-library.css e são reaproveitadas aqui — só o
   miolo do card (retângulo em vez de círculo) é específico desta biblioteca. */

.loa-lib-card-mini-btn {
	width: auto;
	min-width: 84px;
	height: 34px;
	border-radius: 8px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}