/* WASD Buttons — Frontend styles */

.wasd-btn-wrap {
	display: inline-block;          /* respeita text-align do pai pra width=auto */
	margin: 8px 0;
	max-width: 100%;
	vertical-align: top;
}

/* A/B: por default a variante B fica escondida (fallback se JS atrasar/falhar
   mostra só a A). JS sortea e adiciona classe .wasd-ab-show-b no wrap quando
   precisa mostrar a B (e esconde a A). */
.wasd-btn-ab[data-ab="1"] > .wasd-btn-variant--b { display: none; }
.wasd-btn-ab.wasd-ab-show-b > .wasd-btn-variant--a { display: none; }
.wasd-btn-ab.wasd-ab-show-b > .wasd-btn-variant--b { display: inline; }

/* full/half/custom: wrap vira block (linha inteira) + text-align centraliza filhos
   (o <a> é centralizado via margin:0 auto, o disclaimer via text-align:center) */
.wasd-btn-wrap--width-full,
.wasd-btn-wrap--width-half,
.wasd-btn-wrap--width-custom {
	display: block;
	text-align: center;
}

.wasd-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	font-family: inherit;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .1s ease;
	box-sizing: border-box;
	border: 0;
	max-width: 100%;
	position: relative;
	overflow: hidden; /* contém o efeito shine */
	-webkit-tap-highlight-color: transparent;
}

/* Anti-tema: força remoção de sublinhado em todos os estados
   (tema/Gutenberg estilizam <a> dentro do conteúdo com text-decoration) */
.wasd-btn,
.wasd-btn:link,
.wasd-btn:visited,
.wasd-btn:hover,
.wasd-btn:focus,
.wasd-btn:active {
	text-decoration: none !important;
	box-shadow: none;
}

/* Garante que ícone e span herdem a cor definida no botão
   (tema pode forçar cor em <span> ou <i> dentro de <a>) */
.wasd-btn .wasd-btn__text,
.wasd-btn .wasd-btn__icon {
	color: inherit;
	text-decoration: inherit;
}

.wasd-btn:active {
	transform: translateY(1px);
}

.wasd-btn:focus-visible {
	outline: 2px solid rgba(0,0,0,.4);
	outline-offset: 2px;
}

/* Tamanhos */
.wasd-btn--size-small  { padding: 8px 14px;  font-size: 14px; }
.wasd-btn--size-medium { padding: 12px 20px; font-size: 16px; }
.wasd-btn--size-large  { padding: 16px 28px; font-size: 18px; }

/* Largura — half/custom usam margin:auto pra ficar centralizados dentro do wrap block */
.wasd-btn--width-auto   { display: inline-flex; }
.wasd-btn--width-full   { display: flex; width: 100%; }
.wasd-btn--width-half   { display: flex; width: 50%; margin-left: auto; margin-right: auto; }
.wasd-btn--width-custom { display: flex; margin-left: auto; margin-right: auto; }

/* ============================================================ */
/* POSICIONAMENTO DO ÍCONE                                       */
/* width=auto: ícone fica colado ao texto (4 posições parecem iguais visualmente, ok)
   width=full/half/custom: posição do ícone IMPORTA — deve ficar na borda quando left/right */
/* ============================================================ */

/* Default — ícone+texto juntos centralizados (vale pra center-before, center-after, e auto) */
.wasd-btn--width-full,
.wasd-btn--width-half,
.wasd-btn--width-custom {
	justify-content: center;
}

/* LEFT no botão esticado: ícone na borda esquerda, texto centralizado no resto */
.wasd-btn--width-full.wasd-btn--pos-left,
.wasd-btn--width-half.wasd-btn--pos-left,
.wasd-btn--width-custom.wasd-btn--pos-left {
	justify-content: flex-start;
}
.wasd-btn--width-full.wasd-btn--pos-left  .wasd-btn__text,
.wasd-btn--width-half.wasd-btn--pos-left  .wasd-btn__text,
.wasd-btn--width-custom.wasd-btn--pos-left .wasd-btn__text {
	flex: 1;
	text-align: center;
	padding-right: 1.5em; /* compensa visual do ícone do outro lado */
}

/* RIGHT no botão esticado: texto centralizado + ícone na borda direita */
.wasd-btn--width-full.wasd-btn--pos-right,
.wasd-btn--width-half.wasd-btn--pos-right,
.wasd-btn--width-custom.wasd-btn--pos-right {
	justify-content: flex-end;
}
.wasd-btn--width-full.wasd-btn--pos-right  .wasd-btn__text,
.wasd-btn--width-half.wasd-btn--pos-right  .wasd-btn__text,
.wasd-btn--width-custom.wasd-btn--pos-right .wasd-btn__text {
	flex: 1;
	text-align: center;
	padding-left: 1.5em;
}

/* CENTER-BEFORE / CENTER-AFTER: já fica ok com justify-content center (default herdado acima) */

/* Disclaimer */
.wasd-btn-disclaimer {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: #666;
	text-align: center;
}

/* disclaimer sempre centralizado em relação ao seu wrap (já é default) */

/* ============================================================ */
/* ANIMAÇÕES CONTÍNUAS (funcionam em mobile, sem hover)          */
/* ============================================================ */

.wasd-btn--anim-pulse {
	animation: wasd-btn-pulse 1.8s ease-in-out infinite;
}
@keyframes wasd-btn-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.04); }
}

.wasd-btn--anim-bounce {
	animation: wasd-btn-bounce 1.6s ease-in-out infinite;
}
@keyframes wasd-btn-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}

.wasd-btn--anim-glow {
	animation: wasd-btn-glow 1.8s ease-in-out infinite;
	--wasd-glow: rgba(204,46,62,.45);
}
@keyframes wasd-btn-glow {
	0%, 100% { box-shadow: 0 0 0 0 var(--wasd-glow); }
	50%      { box-shadow: 0 0 0 8px transparent; }
}

.wasd-btn--anim-shine::before {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 50%;
	height: 100%;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
	animation: wasd-btn-shine 2.8s ease-in-out infinite;
	pointer-events: none;
}
@keyframes wasd-btn-shine {
	0%   { left: -60%; }
	60%  { left: 110%; }
	100% { left: 110%; }
}

/* Respeitar usuário que desativou animações */
@media (prefers-reduced-motion: reduce) {
	.wasd-btn--anim-pulse,
	.wasd-btn--anim-bounce,
	.wasd-btn--anim-glow,
	.wasd-btn--anim-shine::before {
		animation: none;
	}
}