/* =========================================================
   GM SHOCK Motion - Thunder Button
   Shown only where the [gms_button] shortcode is placed.
   Default colors: GM SHOCK Motion settings. Per button colors: Button Builder.
   ========================================================= */
:root {
	--gms-btn-bg: #7B2CF5;
	--gms-btn-color: #fff;
	--gms-btn-hover: #5B14CC;
	--gms-btn-radius: 10px;
	--gms-btn-glow: rgba(123, 44, 245, .45);
}

/* ---------- Base ---------- */
.gms-btn {
	--b-bg: var(--gms-btn-bg);
	--b-fg: var(--gms-btn-color);
	--b-hover: var(--gms-btn-hover);
	--b-hover-fg: var(--gms-btn-color);
	--b-border: transparent;
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 14px 28px;
	border: 2px solid var(--b-border); border-radius: var(--gms-btn-radius);
	background: var(--b-bg); color: var(--b-fg) !important;
	font-family: var(--e-global-typography-primary-font-family, 'Outfit'), 'Montserrat', system-ui, sans-serif;
	font-weight: 700; font-size: 15px; line-height: 1.1; letter-spacing: .2px;
	text-decoration: none !important; text-align: center; cursor: pointer;
	box-shadow: 0 6px 18px -8px var(--gms-btn-glow);
	transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background-color .3s, color .3s, border-color .3s;
	-webkit-tap-highlight-color: transparent;
}
.gms-btn:hover, .gms-btn:focus-visible {
	background: var(--b-hover); color: var(--b-hover-fg) !important;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -10px var(--gms-btn-glow), 0 0 0 4px color-mix(in srgb, var(--gms-btn-glow) 35%, transparent);
}
.gms-btn:active { transform: translateY(0) scale(.97); }
.gms-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.gms-btn__ico { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.gms-btn__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gms-btn__ico--bolt svg { fill: currentColor; stroke: none; }
.gms-btn--icon-right .gms-btn__ico { order: 2; }

/* ---------- Effects (switched on by body classes from settings) ---------- */
/* Shine sweep on hover */
body.gms-btn-shine .gms-btn::after {
	content: ''; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
	transform: translateX(-130%); transition: transform .75s cubic-bezier(.22,1,.36,1);
}
body.gms-btn-shine .gms-btn:hover::after { transform: translateX(130%); }

/* Icon zap on hover */
body.gms-btn-zap .gms-btn:hover .gms-btn__ico { animation: gmsBtnZap .55s ease; }
body.gms-btn-zap .gms-btn--arrow:hover .gms-btn__ico { animation: gmsBtnNudge .6s ease; }
@keyframes gmsBtnZap { 0%,100% { transform: none; filter: none; } 20% { transform: rotate(-14deg) scale(1.3); filter: drop-shadow(0 0 6px #fff); } 40% { transform: rotate(10deg) scale(.92); } 65% { transform: rotate(-6deg) scale(1.15); filter: drop-shadow(0 0 4px #fff); } }
@keyframes gmsBtnNudge { 0%,100% { transform: none; } 50% { transform: translateX(5px); } }

/* Pulse ring (all buttons via setting, or one button with pulse="yes") */
body.gms-btn-pulse .gms-btn, .gms-btn.gms-btn--pulse { animation: gmsBtnPulse 2.6s infinite; }
@keyframes gmsBtnPulse { 0% { box-shadow: 0 0 0 0 var(--gms-btn-glow); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Styles ---------- */
.gms-btn--black { --b-bg: #000; --b-fg: #fff; --b-hover: var(--gms-btn-bg); --b-hover-fg: var(--gms-btn-color); }
.gms-btn--white { --b-bg: #fff; --b-fg: var(--gms-btn-hover); --b-hover: var(--gms-btn-bg); --b-hover-fg: var(--gms-btn-color); }
.gms-btn--outline { --b-bg: transparent; --b-fg: var(--gms-btn-bg); --b-border: var(--gms-btn-bg); --b-hover: var(--gms-btn-bg); --b-hover-fg: var(--gms-btn-color); box-shadow: none; }
.gms-btn--outline-light { --b-bg: transparent; --b-fg: #fff; --b-border: #fff; --b-hover: #fff; --b-hover-fg: var(--gms-btn-hover); box-shadow: none; }

/* Own colors from the Button Builder (or bg/color/hover in the shortcode) win over the style */
.gms-btn.gms-btn--custom { --b-bg: var(--gms-btn-bg); --b-fg: var(--gms-btn-color); --b-border: transparent; --b-hover: var(--gms-btn-hover); --b-hover-fg: var(--gms-btn-color); }
.gms-btn.gms-btn--custom.gms-btn--outline, .gms-btn.gms-btn--custom.gms-btn--outline-light { --b-bg: transparent; --b-fg: var(--gms-btn-bg); --b-border: var(--gms-btn-bg); --b-hover: var(--gms-btn-hover); --b-hover-fg: var(--gms-btn-color); }

/* ---------- Sizes ---------- */
.gms-btn--sm { min-height: 40px; padding: 10px 18px; font-size: 13px; gap: 8px; }
.gms-btn--sm .gms-btn__ico { width: 15px; height: 15px; }
.gms-btn--lg { min-height: 58px; padding: 18px 36px; font-size: 17px; }
.gms-btn--lg .gms-btn__ico { width: 21px; height: 21px; }
.gms-btn--full { display: flex; width: 100%; }

/* Wrapper for alignment */
.gms-btn-wrap { display: flex; margin: 6px 0; }
.gms-btn-wrap--left { justify-content: flex-start; }
.gms-btn-wrap--center { justify-content: center; }
.gms-btn-wrap--right { justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
	.gms-btn { animation: none !important; transition: none; }
	.gms-btn:hover { transform: none; }
	.gms-btn__ico { animation: none !important; }
}