/**
 * Novixa Addons - Advanced Button
 *
 * Everything is namespaced under `novixa-advanced-button`, so nothing here can
 * touch another widget or plugin.
 *
 * Specificity map (why the selectors look the way they do):
 *   (0,1,0)  structural defaults ........ .novixa-advanced-button
 *   (0,2,0)  preset colour defaults ..... .novixa-advanced-button-wrap .novixa-advanced-button--preset-x
 *            (beats theme `a` / `.entry-content a` colour rules)
 *   (0,3,0)+ Elementor style controls ... {{WRAPPER}} .btn.btn (doubled class, see PHP)
 *            => any control the user touches always wins over a preset default,
 *               and an untouched control emits nothing.
 *
 * Hover styles use :is(:hover, :focus-visible) so keyboard users get exactly the
 * same visual feedback as mouse users.
 *
 * Runtime custom properties (set by advanced-button.js):
 *   --nab-tx / --nab-ty   magnetic translate of the button
 *   --nab-cx / --nab-cy   parallax translate of the inner content
 *   --nab-mx / --nab-my   pointer position (outline fill origin, magnetic spotlight)
 */

/* ---------------------------------------------------------------------------
 * Wrapper + base button
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap {
	display: flex;
	justify-content: flex-start;
	max-width: 100%;
}

.novixa-advanced-button,
.novixa-advanced-button::before,
.novixa-advanced-button::after,
.novixa-advanced-button *,
.novixa-advanced-button *::before,
.novixa-advanced-button *::after {
	box-sizing: border-box;
}

.novixa-advanced-button {
	--nab-t: var(--nab-speed, 350ms) var(--nab-ease, cubic-bezier(.22, 1, .36, 1));

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-height: 44px; /* comfortable touch target */
	margin: 0;
	padding: 14px 30px;
	border: 0 solid transparent;
	border-radius: 10px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transform: translate3d(var(--nab-tx, 0px), var(--nab-ty, 0px), 0) translateY(var(--nab-y, 0px)) scale(var(--nab-s, 1));
	transition:
		transform var(--nab-tf-speed, var(--nab-speed, 350ms)) var(--nab-tf-ease, var(--nab-ease, cubic-bezier(.22, 1, .36, 1))),
		color var(--nab-t),
		background-color var(--nab-t),
		background-position var(--nab-t),
		border-color var(--nab-t),
		box-shadow var(--nab-t),
		opacity var(--nab-t);
}

/* Theme-proof: some themes underline / recolour links on hover. */
.novixa-advanced-button-wrap .novixa-advanced-button,
.novixa-advanced-button-wrap .novixa-advanced-button:is(:hover, :focus, :active, :visited) {
	text-decoration: none;
}

/* Keyboard focus: always visible, never removed for keyboard users. */
.novixa-advanced-button:focus {
	outline: var(--nab-focus-w, 3px) solid var(--nab-focus-color, #2563eb);
	outline-offset: var(--nab-focus-offset, 3px);
}

.novixa-advanced-button:focus:not(:focus-visible) {
	outline: none;
}

/* Pressed (mouse, touch and Enter/Space via .is-pressed). */
.novixa-advanced-button:active,
.novixa-advanced-button.is-pressed {
	--nab-s: var(--nab-active-scale, .97);
}

/* ---------------------------------------------------------------------------
 * Content, text and icons
 * ------------------------------------------------------------------------- */
.novixa-advanced-button__content {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	transform: translate3d(var(--nab-cx, 0px), var(--nab-cy, 0px), 0);
	transition: transform var(--nab-tf-speed, var(--nab-speed, 350ms)) var(--nab-tf-ease, var(--nab-ease, cubic-bezier(.22, 1, .36, 1)));
}

.novixa-advanced-button__text {
	display: inline-block;
	min-width: 0;
	overflow-wrap: anywhere;
}

.novixa-advanced-button__icon {
	--nab-icon-dir: 1;

	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	font-size: var(--nab-icon-size, 1em);
	line-height: 1;
	color: var(--nab-icon-color, currentColor);
	transition: transform var(--nab-t), opacity var(--nab-t), color var(--nab-t);
}

.novixa-advanced-button__icon--left {
	--nab-icon-dir: -1;

	margin-right: var(--nab-gap, 10px);
}

.novixa-advanced-button__icon--right {
	margin-left: var(--nab-gap, 10px);
}

.novixa-advanced-button__icon i {
	display: block;
	font-size: inherit;
	line-height: 1;
}

.novixa-advanced-button__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.novixa-advanced-button:is(:hover, :focus-visible) .novixa-advanced-button__icon {
	color: var(--nab-icon-hover, var(--nab-icon-color, currentColor));
}

/* Icon hover animations (every preset except Icon Reveal). */
.novixa-advanced-button--icon-anim-nudge:is(:hover, :focus-visible) .novixa-advanced-button__icon {
	transform: translateX(calc(var(--nab-icon-dir, 1) * 5px));
}

.novixa-advanced-button--icon-anim-rotate:is(:hover, :focus-visible) .novixa-advanced-button__icon {
	transform: rotate(calc(var(--nab-icon-dir, 1) * 45deg));
}

.novixa-advanced-button--icon-anim-grow:is(:hover, :focus-visible) .novixa-advanced-button__icon {
	transform: scale(1.3);
}

.novixa-advanced-button--icon-anim-bounce:is(:hover, :focus-visible) .novixa-advanced-button__icon {
	animation: novixa-ab-bounce .7s ease-in-out infinite;
}

@keyframes novixa-ab-bounce {
	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(calc(var(--nab-icon-dir, 1) * 6px));
	}
}

/* ---------------------------------------------------------------------------
 * 1. Classic - clean solid button, soft lift
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap .novixa-advanced-button--preset-classic {
	color: #fff;
	background-color: #16213e;
	box-shadow: 0 1px 2px rgba(22, 33, 62, .25);
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-classic:is(:hover, :focus-visible) {
	--nab-y: calc(var(--nab-lift, 2px) * -1);

	color: #fff;
	background-color: #0f3460;
	box-shadow: 0 12px 24px -10px rgba(15, 52, 96, .65);
}

/* ---------------------------------------------------------------------------
 * 2. Gradient - 3-stop gradient that glides across on hover
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap .novixa-advanced-button--preset-gradient {
	color: #fff;
	background-color: var(--nab-g1, #5b3df5);
	background-image: linear-gradient(var(--nab-angle, 100deg), var(--nab-g1, #5b3df5) 0%, var(--nab-g2, #19c3ff) 50%, var(--nab-g1, #5b3df5) 100%);
	background-size: 200% 100%;
	background-position: 0% 50%;
	box-shadow: 0 8px 20px -12px var(--nab-g1, #5b3df5);
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-gradient:is(:hover, :focus-visible) {
	--nab-y: calc(var(--nab-lift, 3px) * -1);

	color: #fff;
	background-position: 100% 50%;
	box-shadow: 0 14px 28px -12px var(--nab-g2, #19c3ff);
}

/* ---------------------------------------------------------------------------
 * Shared fill layer (Outline + Slide Fill)
 * ------------------------------------------------------------------------- */
.novixa-advanced-button__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
}

/* ---------------------------------------------------------------------------
 * 3. Outline - transparent, fills from the point the cursor entered
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap .novixa-advanced-button--preset-outline {
	color: var(--nab-accent, #0f766e);
	background-color: transparent;
	border: 2px solid var(--nab-accent, #0f766e);
}

.novixa-advanced-button--preset-outline .novixa-advanced-button__bg {
	background-color: var(--nab-accent, #0f766e);
	clip-path: circle(0px at var(--nab-mx, 50%) var(--nab-my, 50%));
	transition: clip-path var(--nab-t);
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-outline:is(:hover, :focus-visible) {
	--nab-y: calc(var(--nab-lift, 0px) * -1);

	color: #fff;
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-outline:is(:hover, :focus-visible) .novixa-advanced-button__bg {
	clip-path: circle(150% at var(--nab-mx, 50%) var(--nab-my, 50%));
}

/* ---------------------------------------------------------------------------
 * 4. Animated Border - a gradient ring that rotates around the button
 *    ::before = rotating conic ring, ::after = inner face (inherits the
 *    button's background colour, so Background Color controls still work)
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap .novixa-advanced-button--preset-animated-border {
	color: #fff;
	background-color: #0b1020;
	border: 0;
}

.novixa-advanced-button--preset-animated-border::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -2;
	width: max(220%, 240px);
	aspect-ratio: 1 / 1;
	background: conic-gradient(from 0deg, var(--nab-b1, #7cf3ff), var(--nab-b2, #ff6bd6), var(--nab-b1, #7cf3ff));
	transform: translate(-50%, -50%);
	animation: novixa-ab-spin calc(var(--nab-speed, 350ms) * 6) linear infinite;
	animation-play-state: paused;
}

.novixa-advanced-button--preset-animated-border::after {
	content: "";
	position: absolute;
	inset: var(--nab-bw, 2px);
	z-index: -1;
	border-radius: inherit;
	background-color: inherit;
	transition: background-color var(--nab-t);
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-animated-border:is(:hover, :focus-visible) {
	--nab-y: calc(var(--nab-lift, 0px) * -1);

	box-shadow: 0 0 26px -8px var(--nab-b1, #7cf3ff);
}

.novixa-advanced-button--preset-animated-border:is(:hover, :focus-visible)::before,
.novixa-advanced-button--preset-animated-border.novixa-advanced-button--ab-always::before {
	animation-play-state: running;
}

.novixa-advanced-button--preset-animated-border.novixa-advanced-button--ab-ccw::before {
	animation-direction: reverse;
}

@keyframes novixa-ab-spin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* ---------------------------------------------------------------------------
 * 5. 3D - solid depth, lifts on hover, physically presses on click
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap .novixa-advanced-button--preset-3d {
	color: #fff;
	background-color: #ff7a18;
	border-radius: 12px;
	overflow: visible;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, .35),
		0 var(--nab-depth, 6px) 0 var(--nab-depth-c, #b84a00),
		0 calc(var(--nab-depth, 6px) + 8px) 18px -4px rgba(0, 0, 0, .35);
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-3d:is(:hover, :focus-visible) {
	--nab-y: -2px;

	background-color: #ff8a33;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, .4),
		0 calc(var(--nab-depth, 6px) + 2px) 0 var(--nab-depth-c, #b84a00),
		0 calc(var(--nab-depth, 6px) + 14px) 24px -4px rgba(0, 0, 0, .35);
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-3d:active,
.novixa-advanced-button-wrap .novixa-advanced-button--preset-3d.is-pressed {
	--nab-y: var(--nab-depth, 6px);
	--nab-s: 1;

	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, .2),
		0 0 0 var(--nab-depth-c, #b84a00),
		0 2px 6px -1px rgba(0, 0, 0, .3);
}

/* ---------------------------------------------------------------------------
 * 6. Shine - a band of light sweeps across
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap .novixa-advanced-button--preset-shine {
	color: #fff;
	background-color: #111827;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.novixa-advanced-button__shine {
	--nab-sd: 1;

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 38%;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(100deg, transparent 0%, var(--nab-shine, rgba(255, 255, 255, .55)) 50%, transparent 100%);
	transform: translateX(calc(var(--nab-sd) * -260%)) skewX(calc(var(--nab-sd) * -20deg));
}

.novixa-advanced-button--shine-rtl .novixa-advanced-button__shine {
	--nab-sd: -1;

	right: 0;
	left: auto;
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-shine:is(:hover, :focus-visible) {
	--nab-y: calc(var(--nab-lift, 2px) * -1);

	background-color: #1f2937;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 24px -12px rgba(17, 24, 39, .7);
}

.novixa-advanced-button--preset-shine:is(:hover, :focus-visible) .novixa-advanced-button__shine {
	opacity: 1;
	transform: translateX(calc(var(--nab-sd) * 420%)) skewX(calc(var(--nab-sd) * -20deg));
	transition: transform calc(var(--nab-speed, 350ms) * 2) ease-in-out;
}

.novixa-advanced-button--shine-loop .novixa-advanced-button__shine {
	opacity: 1;
	animation: novixa-ab-shine calc(var(--nab-speed, 350ms) * 9) ease-in-out infinite;
}

@keyframes novixa-ab-shine {
	0% {
		transform: translateX(calc(var(--nab-sd) * -260%)) skewX(calc(var(--nab-sd) * -20deg));
	}

	45%,
	100% {
		transform: translateX(calc(var(--nab-sd) * 420%)) skewX(calc(var(--nab-sd) * -20deg));
	}
}

/* ---------------------------------------------------------------------------
 * 7. Slide Fill - a colour panel slides in from the chosen direction
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap .novixa-advanced-button--preset-slide-fill {
	color: #2b1b0e;
	background-color: #fff0e5;
	border: 1.5px solid #2b1b0e;
}

.novixa-advanced-button--preset-slide-fill .novixa-advanced-button__bg {
	background-color: var(--nab-fill, #2b1b0e);
	transition: transform var(--nab-t);
}

.novixa-advanced-button--preset-slide-fill.novixa-advanced-button--dir-left .novixa-advanced-button__bg {
	transform: translateX(-101%);
}

.novixa-advanced-button--preset-slide-fill.novixa-advanced-button--dir-right .novixa-advanced-button__bg {
	transform: translateX(101%);
}

.novixa-advanced-button--preset-slide-fill.novixa-advanced-button--dir-top .novixa-advanced-button__bg {
	transform: translateY(-101%);
}

.novixa-advanced-button--preset-slide-fill.novixa-advanced-button--dir-bottom .novixa-advanced-button__bg {
	transform: translateY(101%);
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-slide-fill:is(:hover, :focus-visible) {
	--nab-y: calc(var(--nab-lift, 0px) * -1);

	color: #fff0e5;
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-slide-fill:is(:hover, :focus-visible) .novixa-advanced-button__bg {
	transform: translate(0, 0);
}

/* ---------------------------------------------------------------------------
 * 8. Icon Reveal - the icon is hidden until hover / focus
 *    The text is shifted by half the icon slot so the resting button looks
 *    centred, and the button never changes size when the icon appears.
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap .novixa-advanced-button--preset-icon-reveal {
	color: #fff;
	background-color: #7c3aed;
}

.novixa-advanced-button--preset-icon-reveal .novixa-advanced-button__text {
	transition: transform var(--nab-t);
}

.novixa-advanced-button--preset-icon-reveal.novixa-advanced-button--icon-pos-right .novixa-advanced-button__text {
	transform: translateX(calc((var(--nab-icon-size, 1em) + var(--nab-gap, 10px)) / 2));
}

.novixa-advanced-button--preset-icon-reveal.novixa-advanced-button--icon-pos-left .novixa-advanced-button__text {
	transform: translateX(calc((var(--nab-icon-size, 1em) + var(--nab-gap, 10px)) / -2));
}

.novixa-advanced-button--preset-icon-reveal .novixa-advanced-button__icon--primary {
	opacity: 0;
}

.novixa-advanced-button--reveal-slide .novixa-advanced-button__icon--primary {
	transform: translateX(calc(var(--nab-icon-dir, 1) * -70%));
}

.novixa-advanced-button--reveal-pop .novixa-advanced-button__icon--primary {
	transform: scale(.2) rotate(calc(var(--nab-icon-dir, 1) * -120deg));
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-icon-reveal:is(:hover, :focus-visible) {
	--nab-y: calc(var(--nab-lift, 0px) * -1);

	background-color: #6d28d9;
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-icon-reveal:is(:hover, :focus-visible) .novixa-advanced-button__text {
	transform: translateX(0);
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-icon-reveal:is(:hover, :focus-visible) .novixa-advanced-button__icon--primary {
	opacity: 1;
	transform: none;
}

/* Touch screens have no hover: show the icon all the time. */
@media (hover: none) {
	.novixa-advanced-button-wrap .novixa-advanced-button--preset-icon-reveal .novixa-advanced-button__icon--primary {
		opacity: 1;
		transform: none;
	}

	.novixa-advanced-button-wrap .novixa-advanced-button--preset-icon-reveal .novixa-advanced-button__text {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 9. Magnetic Hover - follows the cursor (desktop), spotlight under the pointer
 *    JS drives --nab-tx/--nab-ty (button) and --nab-cx/--nab-cy (content).
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap .novixa-advanced-button--preset-magnetic {
	color: #fff;
	background-color: #0f172a;
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px -8px rgba(15, 23, 42, .6);
}

.novixa-advanced-button--preset-magnetic::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle 90px at var(--nab-mx, 50%) var(--nab-my, 50%), var(--nab-spot, rgba(125, 211, 252, .55)), transparent 70%);
	transition: opacity var(--nab-t);
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-magnetic:is(:hover, :focus-visible) {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 30px -12px rgba(15, 23, 42, .75);
}

.novixa-advanced-button--preset-magnetic:is(:hover, :focus-visible)::before {
	opacity: 1;
}

/* While the pointer is inside the attraction area the button must follow it
 * closely; the long, smooth transition only plays when it springs back. */
.novixa-advanced-button--preset-magnetic.is-magnet-active {
	--nab-tf-speed: 140ms;
	--nab-tf-ease: cubic-bezier(.2, .7, .3, 1);
}

/* Touch / coarse pointers: no magnetism, a clear press effect instead. */
@media (hover: none), (pointer: coarse) {
	.novixa-advanced-button--preset-magnetic:active::before,
	.novixa-advanced-button--preset-magnetic.is-pressed::before {
		opacity: 1;
	}

	.novixa-advanced-button--preset-magnetic:active,
	.novixa-advanced-button--preset-magnetic.is-pressed {
		--nab-s: var(--nab-active-scale, .95);
	}
}

/* ---------------------------------------------------------------------------
 * 10. Modern Minimal - text only, animated underline and/or sliding arrow
 * ------------------------------------------------------------------------- */
.novixa-advanced-button-wrap .novixa-advanced-button--preset-minimal {
	min-height: 0;
	padding: 10px 2px;
	color: #111827;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.novixa-advanced-button--preset-minimal::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 2px;
	left: 0;
	height: var(--nab-ul, 2px);
	background-color: var(--nab-underline, currentColor);
	transform: scaleX(.28);
	transform-origin: left center;
	transition: transform var(--nab-t);
}

.novixa-advanced-button--preset-minimal.novixa-advanced-button--min-arrow::after {
	display: none;
}

.novixa-advanced-button-wrap .novixa-advanced-button--preset-minimal:is(:hover, :focus-visible) {
	color: #4338ca;
}

.novixa-advanced-button--preset-minimal:is(:hover, :focus-visible)::after {
	transform: scaleX(1);
}

.novixa-advanced-button--preset-minimal.novixa-advanced-button--min-arrow:is(:hover, :focus-visible) .novixa-advanced-button__icon,
.novixa-advanced-button--preset-minimal.novixa-advanced-button--min-both:is(:hover, :focus-visible) .novixa-advanced-button__icon {
	transform: translateX(calc(var(--nab-icon-dir, 1) * 7px));
}

/* ---------------------------------------------------------------------------
 * Accessibility: reduced motion + forced colours
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.novixa-advanced-button,
	.novixa-advanced-button::before,
	.novixa-advanced-button::after,
	.novixa-advanced-button * {
		animation: none !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	/* No movement at all - colour / fill changes still happen. */
	.novixa-advanced-button,
	.novixa-advanced-button__content,
	.novixa-advanced-button__text,
	.novixa-advanced-button__icon {
		transform: none !important;
	}

	.novixa-advanced-button__shine {
		display: none;
	}

	/* Icon Reveal: skip the reveal, keep the icon visible. */
	.novixa-advanced-button--preset-icon-reveal .novixa-advanced-button__icon--primary {
		opacity: 1;
	}
}

@media (forced-colors: active) {
	.novixa-advanced-button {
		border: 1px solid ButtonText;
		forced-color-adjust: auto;
	}

	.novixa-advanced-button--preset-minimal::after {
		background-color: LinkText;
	}
}