/**
 * Advanced Button widget styles.
 *
 * Variable contract (single source of truth):
 *   --dea-ab-bg          Normal background COLOR (driven by the Background Color control).
 *   --dea-ab-hover-bg    Hover background COLOR (driven by the Hover Background control).
 *   --dea-ab-bg-image    Optional decorative background image layered ON TOP of the base
 *                        color. Only a selected "Background Effect" (gradient/glass) sets it.
 *   --dea-ab-text /      Normal / hover text color.
 *   --dea-ab-hover-text
 *
 * The base color always comes from the controls. Presets and effects only adjust the
 * decorative layer (image / overlay / shadow / border) so they never silently override
 * the background the user selected.
 */

.dea-advanced-button-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	overflow: visible;
}

.dea-advanced-button-wrap--align-left {
	justify-content: flex-start;
}

.dea-advanced-button-wrap--align-center {
	justify-content: center;
}

.dea-advanced-button-wrap--align-right {
	justify-content: flex-end;
}

.dea-advanced-button-wrap--align-stretch,
.dea-ab-full-width-yes .dea-advanced-button-wrap {
	align-items: stretch;
	justify-content: stretch;
}

.dea-advanced-button-wrap--align-stretch .dea-advanced-button,
.dea-ab-full-width-yes .dea-advanced-button {
	width: 100%;
}

.dea-advanced-button {
	--dea-ab-bg: #171717;
	--dea-ab-hover-bg: #0f172a;
	--dea-ab-bg-image: none;
	--dea-ab-text: #fff;
	--dea-ab-hover-text: #fff;
	--dea-ab-gradient-1: #6d5dfc;
	--dea-ab-gradient-2: #00d4ff;
	--dea-ab-glow: rgba(109, 93, 252, .45);
	--dea-ab-focus: #38bdf8;
	--dea-ab-ripple-color: rgba(255, 255, 255, .42);
	--dea-ab-svg-color: rgba(255, 255, 255, .45);
	--dea-ab-duration: 420ms;
	--dea-ab-delay: 0ms;
	--dea-ab-ease: cubic-bezier(.2, .8, .2, 1);
	--dea-ab-intensity: 8px;
	--dea-ab-shadow-intensity: 26px;
	--dea-ab-icon-gap: 10px;
	--dea-ab-icon-rotate: 0deg;
	--dea-ab-spinner-size: 18px;
	--dea-ab-spinner-color: #fff;
	--dea-ab-tooltip-gap: 12px;
	--dea-ab-hover-y: 0px;
	--dea-ab-hover-scale: 1;
	--dea-ab-hover-rotate: 0deg;
	--dea-ab-hover-skew: 0deg;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 16px 26px;
	border: 1px solid transparent;
	border-radius: 14px;
	background-color: var(--dea-ab-bg);
	background-image: var(--dea-ab-bg-image);
	background-repeat: no-repeat;
	color: var(--dea-ab-text);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	isolation: isolate;
	overflow: hidden;
	transform: translate3d(var(--dea-ab-mx, 0), calc(var(--dea-ab-my, 0px) + var(--dea-ab-hover-y)), 0) rotate(var(--dea-ab-hover-rotate)) skewX(var(--dea-ab-hover-skew)) scale(var(--dea-ab-hover-scale));
	transition:
		transform var(--dea-ab-duration) var(--dea-ab-ease) var(--dea-ab-delay),
		color var(--dea-ab-duration) var(--dea-ab-ease),
		background-color var(--dea-ab-duration) var(--dea-ab-ease),
		border-color var(--dea-ab-duration) var(--dea-ab-ease),
		box-shadow var(--dea-ab-duration) var(--dea-ab-ease);
	will-change: transform;
	-webkit-tap-highlight-color: transparent;
}

/* Hover/focus apply BOTH the hover text color and the hover background color. */
.dea-advanced-button:hover,
.dea-advanced-button:focus-visible {
	color: var(--dea-ab-hover-text);
	background-color: var(--dea-ab-hover-bg);
}

.dea-advanced-button:focus-visible {
	outline: 3px solid var(--dea-ab-focus);
	outline: 3px solid color-mix(in srgb, var(--dea-ab-focus), transparent 35%);
	outline-offset: 4px;
}

.dea-advanced-button__content {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dea-ab-icon-gap);
	width: 100%;
}

.dea-advanced-button__text,
.dea-advanced-button__icon {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	transition: transform var(--dea-ab-duration) var(--dea-ab-ease), opacity var(--dea-ab-duration) var(--dea-ab-ease), color var(--dea-ab-duration) var(--dea-ab-ease);
}

.dea-advanced-button__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	transition: transform var(--dea-ab-duration) var(--dea-ab-ease), fill var(--dea-ab-duration) var(--dea-ab-ease);
}

.dea-advanced-button__layer,
.dea-advanced-button::before,
.dea-advanced-button::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
}

/* Decoration layer. Hidden by default; used by glass film + liquid/aurora presets. */
.dea-advanced-button__layer {
	z-index: 0;
	border-radius: inherit;
	background: transparent;
	opacity: 0;
	transform: translateY(105%);
	transition: transform var(--dea-ab-duration) var(--dea-ab-ease), opacity var(--dea-ab-duration) var(--dea-ab-ease);
}

/* =========================================================================
 * HOVER EFFECT  ( has-hover-* — one class, mutually exclusive )
 * Legacy aliases: has-effect-*
 * ========================================================================= */
.dea-advanced-button.has-hover-scale:hover,
.dea-advanced-button.has-hover-scale:focus-visible,
.dea-advanced-button.has-effect-scale:hover,
.dea-advanced-button.has-effect-scale:focus-visible {
	--dea-ab-hover-scale: 1.04;
}

.dea-advanced-button.has-hover-lift:hover,
.dea-advanced-button.has-hover-lift:focus-visible,
.dea-advanced-button.has-effect-lift:hover,
.dea-advanced-button.has-effect-lift:focus-visible {
	--dea-ab-hover-y: calc(var(--dea-ab-intensity) * -1);
}

.dea-advanced-button.has-hover-rotate:hover,
.dea-advanced-button.has-hover-rotate:focus-visible,
.dea-advanced-button.has-effect-rotate:hover,
.dea-advanced-button.has-effect-rotate:focus-visible {
	--dea-ab-hover-rotate: -1.5deg;
}

.dea-advanced-button.has-hover-skew:hover,
.dea-advanced-button.has-hover-skew:focus-visible,
.dea-advanced-button.has-effect-skew:hover,
.dea-advanced-button.has-effect-skew:focus-visible {
	--dea-ab-hover-skew: -4deg;
}

.dea-advanced-button.has-hover-glow:hover,
.dea-advanced-button.has-hover-glow:focus-visible,
.dea-advanced-button.has-effect-glow:hover,
.dea-advanced-button.has-effect-glow:focus-visible {
	box-shadow: 0 calc(var(--dea-ab-shadow-intensity) / 2) var(--dea-ab-shadow-intensity) var(--dea-ab-glow), 0 0 calc(var(--dea-ab-shadow-intensity) * .85) var(--dea-ab-glow);
}

/* =========================================================================
 * BACKGROUND EFFECT  ( has-bg-* — one class, mutually exclusive )
 * Legacy aliases: has-effect-shine, has-effect-gradient, .dea-advanced-button--glass,
 *                 .dea-advanced-button--gradient
 * These ONLY adjust the decorative layer, never the base background color.
 * ========================================================================= */

/* Shine: a light sweep on the ::before pseudo-element. Keeps the base background. */
.dea-advanced-button.has-bg-shine::before,
.dea-advanced-button.has-effect-shine::before {
	z-index: 4;
	width: 34%;
	background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .16) 35%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .16) 65%, transparent 100%);
	transform: translateX(-170%) skewX(-20deg);
	transition: transform 760ms var(--dea-ab-ease);
}

.dea-advanced-button.has-bg-shine:hover::before,
.dea-advanced-button.has-bg-shine:focus-visible::before,
.dea-advanced-button.has-effect-shine:hover::before,
.dea-advanced-button.has-effect-shine:focus-visible::before {
	transform: translateX(330%) skewX(-20deg);
}

/* Gradient: an animated gradient image laid over the base color (intentional fill). */
.dea-advanced-button.has-bg-gradient,
.dea-advanced-button.has-effect-gradient,
.dea-advanced-button--gradient {
	--dea-ab-bg-image: linear-gradient(120deg, var(--dea-ab-gradient-1), var(--dea-ab-gradient-2), var(--dea-ab-gradient-1));
	background-size: 220% 220%;
}

.dea-advanced-button.has-bg-gradient:hover,
.dea-advanced-button.has-bg-gradient:focus-visible,
.dea-advanced-button.has-effect-gradient:hover,
.dea-advanced-button.has-effect-gradient:focus-visible,
.dea-advanced-button--gradient:hover,
.dea-advanced-button--gradient:focus-visible {
	animation: dea-ab-gradient 2.6s linear infinite;
}

/* Glass: a translucent film on the decoration layer + backdrop blur on the element.
 * The user's chosen --dea-ab-bg / --dea-ab-hover-bg color shows THROUGH the film,
 * so the background controls keep working. */
.dea-advanced-button.has-bg-glass,
.dea-advanced-button--glass {
	border-color: rgba(255, 255, 255, .32);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 18px 42px rgba(15, 23, 42, .18);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
}

.dea-advanced-button.has-bg-glass .dea-advanced-button__layer,
.dea-advanced-button--glass .dea-advanced-button__layer {
	opacity: 1;
	transform: none;
	background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
}

/* =========================================================================
 * ICON ANIMATION  ( has-icon-* — one class, mutually exclusive )
 * Legacy aliases: has-effect-icon-move, .dea-advanced-button--icon-anim-*
 * ========================================================================= */
.dea-advanced-button.has-icon-slide:hover .dea-advanced-button__icon,
.dea-advanced-button.has-icon-slide:focus-visible .dea-advanced-button__icon,
.dea-advanced-button.has-effect-icon-move:hover .dea-advanced-button__icon,
.dea-advanced-button.has-effect-icon-move:focus-visible .dea-advanced-button__icon,
.dea-advanced-button--icon-anim-move:hover .dea-advanced-button__icon,
.dea-advanced-button--icon-anim-move:focus-visible .dea-advanced-button__icon {
	transform: translateX(5px) rotate(var(--dea-ab-icon-rotate));
}

[dir="rtl"] .dea-advanced-button.has-icon-slide:hover .dea-advanced-button__icon,
[dir="rtl"] .dea-advanced-button.has-icon-slide:focus-visible .dea-advanced-button__icon,
[dir="rtl"] .dea-advanced-button.has-effect-icon-move:hover .dea-advanced-button__icon,
[dir="rtl"] .dea-advanced-button.has-effect-icon-move:focus-visible .dea-advanced-button__icon,
[dir="rtl"] .dea-advanced-button--icon-anim-move:hover .dea-advanced-button__icon,
[dir="rtl"] .dea-advanced-button--icon-anim-move:focus-visible .dea-advanced-button__icon {
	transform: translateX(-5px) rotate(calc(var(--dea-ab-icon-rotate) * -1));
}

.dea-advanced-button.has-icon-rotate:hover .dea-advanced-button__icon,
.dea-advanced-button.has-icon-rotate:focus-visible .dea-advanced-button__icon,
.dea-advanced-button--icon-anim-rotate:hover .dea-advanced-button__icon,
.dea-advanced-button--icon-anim-rotate:focus-visible .dea-advanced-button__icon {
	transform: rotate(calc(180deg + var(--dea-ab-icon-rotate)));
}

.dea-advanced-button.has-icon-bounce:hover .dea-advanced-button__icon,
.dea-advanced-button.has-icon-bounce:focus-visible .dea-advanced-button__icon {
	animation: dea-ab-icon-bounce 620ms var(--dea-ab-ease);
}

/* =========================================================================
 * CLICK EFFECT  ( driven by JS via data-click-effect; one transient class )
 * ========================================================================= */
.dea-advanced-button__ripple {
	position: absolute;
	z-index: 2;
	width: var(--dea-ab-ripple-size, 260px);
	height: var(--dea-ab-ripple-size, 260px);
	border-radius: 999px;
	background: var(--dea-ab-ripple-color);
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0);
	animation: dea-ab-ripple var(--dea-ab-ripple-speed, 620ms) ease-out forwards;
}

.dea-advanced-button.is-pulsing::after {
	z-index: -1;
	border-radius: inherit;
	background: var(--dea-ab-glow);
	animation: dea-ab-pulse .9s ease-out;
}

/* Legacy click states (press / bounce) kept for backward compatibility. */
.dea-advanced-button.is-pressing {
	--dea-ab-hover-scale: .97;
}

.dea-advanced-button.is-bouncing {
	animation: dea-ab-bounce 460ms cubic-bezier(.34, 1.56, .64, 1);
}

/* =========================================================================
 * LOADING STATE  ( .dea-advanced-button--loading-* )
 * ========================================================================= */
.dea-advanced-button.is-loading {
	pointer-events: none;
}

.dea-advanced-button.is-loading .dea-advanced-button__content {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--dea-ab-loading-duration, 320ms) ease, transform var(--dea-ab-loading-duration, 320ms) ease;
}

.dea-advanced-button__loader {
	position: absolute;
	z-index: 5;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: var(--dea-ab-spinner-color);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dea-ab-loading-duration, 320ms) ease, transform var(--dea-ab-loading-duration, 320ms) ease;
}

.dea-advanced-button__loader::after {
	margin-inline-start: 8px;
	content: attr(data-loading-text);
	font-size: .92em;
	font-weight: 700;
	white-space: nowrap;
}

.dea-advanced-button.is-loading .dea-advanced-button__loader {
	opacity: 1;
	transform: translateY(0);
}

.dea-advanced-button--loading-spinner .dea-advanced-button__loader::before {
	display: block;
	width: var(--dea-ab-spinner-size);
	height: var(--dea-ab-spinner-size);
	border: 2px solid rgba(255, 255, 255, .3);
	border: 2px solid color-mix(in srgb, var(--dea-ab-spinner-color), transparent 70%);
	border-top-color: var(--dea-ab-spinner-color);
	border-radius: 999px;
	content: "";
	animation: dea-ab-spin 780ms linear infinite;
}

.dea-advanced-button--loading-spinner .dea-advanced-button__loader span {
	display: none;
}

.dea-advanced-button--loading-dots .dea-advanced-button__loader span {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	animation: dea-ab-dot 860ms ease-in-out infinite;
}

.dea-advanced-button--loading-dots .dea-advanced-button__loader span:nth-child(2) {
	animation-delay: 120ms;
}

.dea-advanced-button--loading-dots .dea-advanced-button__loader span:nth-child(3) {
	animation-delay: 240ms;
}

/* Legacy "progress" loader kept for backward compatibility. */
.dea-advanced-button--loading-progress .dea-advanced-button__loader::before {
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: currentColor;
	content: "";
	transform-origin: left center;
	animation: dea-ab-progress 1.1s ease-in-out infinite;
}

[dir="rtl"] .dea-advanced-button--loading-progress .dea-advanced-button__loader::before {
	transform-origin: right center;
}

.dea-advanced-button--loading-progress .dea-advanced-button__loader span {
	display: none;
}

/* =========================================================================
 * ANIMATED BORDER  ( opt-in switcher )  Legacy: has-effect-border-reveal
 * ========================================================================= */
.dea-advanced-button.has-animated-border::after,
.dea-advanced-button.has-effect-border-reveal::after {
	z-index: 1;
	border: 1px solid var(--dea-ab-hover-border, rgba(255, 255, 255, .85));
	border-radius: inherit;
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--dea-ab-duration) var(--dea-ab-ease);
}

.dea-advanced-button.has-animated-border:hover::after,
.dea-advanced-button.has-animated-border:focus-visible::after,
.dea-advanced-button.has-effect-border-reveal:hover::after,
.dea-advanced-button.has-effect-border-reveal:focus-visible::after {
	clip-path: inset(0 0 0 0);
}

[dir="rtl"] .dea-advanced-button.has-animated-border::after,
[dir="rtl"] .dea-advanced-button.has-effect-border-reveal::after {
	clip-path: inset(0 0 0 100%);
}

[dir="rtl"] .dea-advanced-button.has-animated-border:hover::after,
[dir="rtl"] .dea-advanced-button.has-animated-border:focus-visible::after,
[dir="rtl"] .dea-advanced-button.has-effect-border-reveal:hover::after,
[dir="rtl"] .dea-advanced-button.has-effect-border-reveal:focus-visible::after {
	clip-path: inset(0 0 0 0);
}

/* =========================================================================
 * TOOLTIP
 * ========================================================================= */
.dea-advanced-button.has-tooltip {
	overflow: visible;
}

.dea-advanced-button__tooltip {
	position: absolute;
	z-index: 20;
	inset-inline-start: 50%;
	bottom: calc(100% + var(--dea-ab-tooltip-gap));
	width: max-content;
	max-width: min(260px, 80vw);
	padding: 8px 11px;
	border-radius: 8px;
	background: #111827;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(6px);
	transition: opacity 220ms ease, transform 220ms ease;
}

.dea-advanced-button__tooltip::after {
	position: absolute;
	inset-inline-start: 50%;
	top: 100%;
	width: 8px;
	height: 8px;
	background: inherit;
	content: "";
	transform: translateX(-50%) translateY(-4px) rotate(45deg);
}

.dea-advanced-button:hover .dea-advanced-button__tooltip,
.dea-advanced-button:focus-visible .dea-advanced-button__tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.dea-advanced-button--tooltip-fade:hover .dea-advanced-button__tooltip,
.dea-advanced-button--tooltip-fade:focus-visible .dea-advanced-button__tooltip {
	transform: translateX(-50%) translateY(6px);
}

.dea-advanced-button--tooltip-scale .dea-advanced-button__tooltip {
	transform: translateX(-50%) scale(.92);
}

.dea-advanced-button--tooltip-scale:hover .dea-advanced-button__tooltip,
.dea-advanced-button--tooltip-scale:focus-visible .dea-advanced-button__tooltip {
	transform: translateX(-50%) scale(1);
}

/* =========================================================================
 * PRESETS — these set the COLOR variables and decorative accents only.
 * They never set background-color/background-image directly on the element,
 * so the Background Color / Hover Background controls always win.
 * ========================================================================= */
.dea-advanced-button--minimal {
	--dea-ab-bg: #fff;
	--dea-ab-hover-bg: #f8fafc;
	--dea-ab-text: #111827;
	--dea-ab-hover-text: #020617;
	border-color: rgba(17, 24, 39, .14);
	box-shadow: 0 10px 24px rgba(17, 24, 39, .08);
}

.dea-advanced-button--neon {
	--dea-ab-bg: #050816;
	--dea-ab-hover-bg: #0a1124;
	--dea-ab-text: #ecfeff;
	--dea-ab-hover-text: #ecfeff;
	border-color: var(--dea-ab-gradient-2);
	box-shadow: 0 0 14px rgba(0, 212, 255, .55), inset 0 0 18px rgba(0, 212, 255, .12);
	box-shadow: 0 0 14px color-mix(in srgb, var(--dea-ab-gradient-2), transparent 45%), inset 0 0 18px rgba(0, 212, 255, .12);
	text-shadow: 0 0 12px rgba(0, 212, 255, .7);
	text-shadow: 0 0 12px color-mix(in srgb, var(--dea-ab-gradient-2), transparent 30%);
}

.dea-advanced-button--border {
	--dea-ab-bg: transparent;
	--dea-ab-hover-bg: transparent;
	--dea-ab-text: var(--dea-ab-gradient-1);
	border-color: var(--dea-ab-gradient-1);
	border-color: color-mix(in srgb, var(--dea-ab-gradient-1), transparent 25%);
}

.dea-advanced-button--magnetic {
	--dea-ab-bg: var(--dea-ab-gradient-1);
	--dea-ab-hover-bg: var(--dea-ab-gradient-1);
	box-shadow: 0 16px 38px rgba(109, 93, 252, .32);
	box-shadow: 0 16px 38px color-mix(in srgb, var(--dea-ab-gradient-1), transparent 68%);
}

.dea-advanced-button--magnetic.has-bg-gradient,
.dea-advanced-button--magnetic.has-effect-gradient {
	--dea-ab-bg-image: radial-gradient(circle at var(--dea-ab-cx, 50%) var(--dea-ab-cy, 50%), var(--dea-ab-gradient-2), var(--dea-ab-gradient-1));
	background-size: 100% 100%;
}

.dea-advanced-button--magnetic.has-bg-gradient:hover,
.dea-advanced-button--magnetic.has-bg-gradient:focus-visible {
	animation: none;
}

.dea-advanced-button--liquid {
	--dea-ab-bg: #101010;
	--dea-ab-hover-bg: #101010;
}

.dea-advanced-button--liquid .dea-advanced-button__layer {
	background: radial-gradient(circle at 50% 120%, var(--dea-ab-gradient-2) 0 28%, var(--dea-ab-gradient-1) 68%);
	border-radius: 50% 50% 0 0;
	opacity: 1;
	transform: translateY(112%) scaleX(1.35);
}

.dea-advanced-button--liquid:hover .dea-advanced-button__layer,
.dea-advanced-button--liquid:focus-visible .dea-advanced-button__layer {
	opacity: 1;
	transform: translateY(8%) scaleX(1.35);
}

.dea-advanced-button--depth {
	box-shadow: 0 6px 0 rgba(40, 32, 145, .9), 0 22px 36px rgba(109, 93, 252, .28);
	box-shadow: 0 6px 0 color-mix(in srgb, var(--dea-ab-gradient-1), black 35%), 0 22px 36px color-mix(in srgb, var(--dea-ab-gradient-1), transparent 72%);
}

.dea-advanced-button--depth.has-bg-gradient,
.dea-advanced-button--depth.has-effect-gradient {
	--dea-ab-bg-image: linear-gradient(180deg, color-mix(in srgb, var(--dea-ab-gradient-1), white 12%), var(--dea-ab-gradient-1));
	background-size: 100% 100%;
}

.dea-advanced-button--depth.has-bg-gradient:hover,
.dea-advanced-button--depth.has-bg-gradient:focus-visible {
	animation: none;
}

.dea-advanced-button--depth:hover,
.dea-advanced-button--depth:focus-visible {
	box-shadow: 0 3px 0 rgba(40, 32, 145, .9), 0 12px 22px rgba(109, 93, 252, .22);
	box-shadow: 0 3px 0 color-mix(in srgb, var(--dea-ab-gradient-1), black 35%), 0 12px 22px color-mix(in srgb, var(--dea-ab-gradient-1), transparent 78%);
}

.dea-advanced-button--arrow {
	border-color: rgba(255, 255, 255, .12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 34px rgba(2, 6, 23, .24);
}

.dea-advanced-button--arrow .dea-advanced-button__icon {
	width: 1.9em;
	height: 1.9em;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
}

.dea-advanced-button--arrow .dea-advanced-button__icon::after {
	position: absolute;
	content: "";
	width: .72em;
	height: 1px;
	inset-inline-end: 50%;
	top: 50%;
	background: currentColor;
	opacity: 0;
	transform: translateY(-50%) scaleX(0);
	transform-origin: right center;
	transition: transform var(--dea-ab-duration) var(--dea-ab-ease), opacity var(--dea-ab-duration) var(--dea-ab-ease);
}

.dea-advanced-button--arrow:hover .dea-advanced-button__icon,
.dea-advanced-button--arrow:focus-visible .dea-advanced-button__icon {
	background: var(--dea-ab-gradient-2);
	color: #04111d;
	transform: translateX(7px);
}

.dea-advanced-button--arrow:hover .dea-advanced-button__icon::after,
.dea-advanced-button--arrow:focus-visible .dea-advanced-button__icon::after {
	opacity: 1;
	transform: translateY(-50%) scaleX(1);
}

[dir="rtl"] .dea-advanced-button--arrow:hover .dea-advanced-button__icon,
[dir="rtl"] .dea-advanced-button--arrow:focus-visible .dea-advanced-button__icon {
	transform: translateX(-7px);
}

[dir="rtl"] .dea-advanced-button--arrow .dea-advanced-button__icon::after {
	transform-origin: left center;
}

.dea-advanced-button--aurora {
	border: 2px solid var(--dea-ab-gradient-2);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 42px var(--dea-ab-glow);
}

.dea-advanced-button--aurora.has-bg-gradient,
.dea-advanced-button--aurora.has-effect-gradient {
	--dea-ab-bg-image:
		radial-gradient(circle at 16% 18%, var(--dea-ab-gradient-1), transparent 34%),
		radial-gradient(circle at 82% 82%, var(--dea-ab-gradient-2), transparent 34%);
	background-size: 180% 180%, 180% 180%;
	animation: dea-ab-aurora-fill 7s ease-in-out infinite alternate;
}

.dea-advanced-button--aurora.has-bg-gradient:hover,
.dea-advanced-button--aurora.has-bg-gradient:focus-visible {
	animation: dea-ab-aurora-fill 7s ease-in-out infinite alternate;
}

.dea-advanced-button--aurora::after {
	z-index: 1;
	padding: 2px;
	border: 0;
	border-radius: inherit;
	background: linear-gradient(120deg, var(--dea-ab-gradient-1), var(--dea-ab-gradient-2), #ffffff, var(--dea-ab-gradient-1));
	background-size: 260% 260%;
	clip-path: none;
	content: "";
	opacity: .95;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: dea-ab-aurora-border 4.2s linear infinite;
}

.dea-advanced-button--aurora .dea-advanced-button__content {
	text-shadow: 0 1px 12px rgba(0, 0, 0, .24);
}

.dea-advanced-button--aurora .dea-advanced-button__layer {
	background: radial-gradient(circle at var(--dea-ab-cx, 50%) var(--dea-ab-cy, 50%), var(--dea-ab-gradient-2), transparent 58%);
	opacity: .2;
	transform: scale(1);
}

.dea-advanced-button--aurora:hover .dea-advanced-button__layer,
.dea-advanced-button--aurora:focus-visible .dea-advanced-button__layer {
	opacity: .28;
	transform: scale(1.2);
}

.dea-advanced-button--aurora:hover,
.dea-advanced-button--aurora:focus-visible {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 22px 54px var(--dea-ab-glow);
}

.dea-advanced-button--secondary {
	--dea-ab-bg: transparent;
	--dea-ab-hover-bg: rgba(109, 93, 252, .12);
	--dea-ab-text: var(--dea-ab-gradient-1);
	border-color: rgba(109, 93, 252, .55);
	border-color: color-mix(in srgb, var(--dea-ab-gradient-1), transparent 45%);
	box-shadow: none;
}

.dea-advanced-button--secondary:hover,
.dea-advanced-button--secondary:focus-visible {
	--dea-ab-hover-bg: color-mix(in srgb, var(--dea-ab-gradient-1), transparent 88%);
}

/* =========================================================================
 * SVG BACKGROUND
 * ========================================================================= */
.dea-advanced-button__svg {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--dea-ab-svg-color);
	opacity: .95;
	pointer-events: none;
}

.dea-advanced-button__svg--wave {
	top: auto;
	bottom: -1px;
	inset-inline: -18%;
	width: 136%;
	height: 78%;
}

.dea-advanced-button__svg path,
.dea-advanced-button__svg rect {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.dea-advanced-button__svg--blob path,
.dea-advanced-button__svg--wave path {
	fill: currentColor;
	stroke: none;
	opacity: .28;
}

.dea-advanced-button__svg--lines path {
	stroke-dasharray: 18 18;
	stroke-width: 1.75;
	opacity: .8;
	animation: dea-ab-lines 3s linear infinite;
}

.dea-advanced-button__svg--blob path {
	transform-box: fill-box;
	transform-origin: center;
	animation: dea-ab-blob-float 6s ease-in-out infinite;
}

.dea-advanced-button__svg--wave path {
	transform-box: fill-box;
	transform-origin: center bottom;
}

.dea-advanced-button__wave-back {
	opacity: .2;
	animation: dea-ab-wave-drift 5.4s ease-in-out infinite;
}

.dea-advanced-button__wave-front {
	opacity: .34;
	animation: dea-ab-wave-drift 4.2s ease-in-out infinite reverse;
}

.dea-advanced-button__svg--trace rect {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	stroke-width: 2.5;
	animation: dea-ab-trace 2.2s ease-in-out infinite alternate;
}

.dea-advanced-button__svg--gradient rect {
	stroke: none;
}

.dea-advanced-button.has-svg-gradient .dea-advanced-button__svg {
	mix-blend-mode: screen;
}

/* =========================================================================
 * KEYFRAMES
 * ========================================================================= */
@keyframes dea-ab-ripple {
	to {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes dea-ab-gradient {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 200% 50%;
	}
}

@keyframes dea-ab-pulse {
	0% {
		opacity: .42;
		transform: scale(.98);
	}
	100% {
		opacity: 0;
		transform: scale(1.26);
	}
}

@keyframes dea-ab-bounce {
	0%,
	100% {
		transform: translate3d(var(--dea-ab-mx, 0), calc(var(--dea-ab-my, 0px) + var(--dea-ab-hover-y)), 0) rotate(var(--dea-ab-hover-rotate)) skewX(var(--dea-ab-hover-skew)) scale(1);
	}
	45% {
		transform: translate3d(var(--dea-ab-mx, 0), calc(var(--dea-ab-my, 0px) + var(--dea-ab-hover-y)), 0) rotate(var(--dea-ab-hover-rotate)) skewX(var(--dea-ab-hover-skew)) scale(.94);
	}
	75% {
		transform: translate3d(var(--dea-ab-mx, 0), calc(var(--dea-ab-my, 0px) + var(--dea-ab-hover-y)), 0) rotate(var(--dea-ab-hover-rotate)) skewX(var(--dea-ab-hover-skew)) scale(1.035);
	}
}

@keyframes dea-ab-icon-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-4px);
	}
	70% {
		transform: translateY(-1px);
	}
}

@keyframes dea-ab-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes dea-ab-dot {
	0%,
	100% {
		opacity: .35;
		transform: translateY(0);
	}
	50% {
		opacity: 1;
		transform: translateY(-5px);
	}
}

@keyframes dea-ab-progress {
	0% {
		transform: scaleX(0);
	}
	50% {
		transform: scaleX(1);
	}
	100% {
		transform: scaleX(0);
	}
}

@keyframes dea-ab-lines {
	to {
		stroke-dashoffset: -72;
	}
}

@keyframes dea-ab-aurora-border {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 260% 50%;
	}
}

@keyframes dea-ab-aurora-fill {
	0% {
		background-position: 0% 0%, 100% 100%;
	}
	100% {
		background-position: 100% 70%, 0% 30%;
	}
}

@keyframes dea-ab-blob-float {
	0%,
	100% {
		transform: translateX(-5px) translateY(1px) scale(1);
	}
	50% {
		transform: translateX(6px) translateY(-3px) scale(1.05);
	}
}

@keyframes dea-ab-wave-drift {
	0%,
	100% {
		transform: translateX(-8px) translateY(0);
	}
	50% {
		transform: translateX(8px) translateY(-3px);
	}
}

@keyframes dea-ab-trace {
	to {
		stroke-dashoffset: 0;
	}
}

@media (max-width: 767px) {
	.dea-advanced-button-wrap {
		width: 100%;
	}

	.dea-advanced-button-wrap--dual {
		flex-direction: column;
		align-items: stretch;
	}

	.dea-advanced-button {
		min-height: 46px;
		touch-action: manipulation;
	}

	/* Heavy effects disabled on mobile (data attr set by JS). */
	.dea-advanced-button[data-mobile-light="yes"] {
		animation: none !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.dea-advanced-button[data-mobile-light="yes"] .dea-advanced-button__svg {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dea-advanced-button,
	.dea-advanced-button *,
	.dea-advanced-button::before,
	.dea-advanced-button::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}