/**
 * PowerX Standard Button Component Styles
 *
 * High-performance button styles with GPU-accelerated shine & flare effects:
 * diagonal sweep, double beam, liquid shimmer, glass glare, and radial burst.
 *
 * =========================================================================
 * TABLE OF CONTENTS
 * =========================================================================
 * 1.0 BUTTON WRAPPER & BASE LINK
 * 2.0 JUSTIFIED / FULL-WIDTH STRETCH
 * 3.0 ICON CONTAINERS & SVGS
 * 4.0 ADVANCED HOVER SHINE & FLARE EFFECTS
 *     4.1 Diagonal Reflection Sweep
 *     4.2 Double Beam Flare
 *     4.3 Liquid Shimmer Wave
 *     4.4 3D Glossy Glass Lens Glare
 *     4.5 Radial Flare Burst
 * =========================================================================
 *
 * @package PowerX_Core
 * @version 0.0.1
 */

/* =========================================================================
 * 1.0 BUTTON WRAPPER & BASE LINK
 * ========================================================================= */
.px-btn-wrapper {
	display: flex;
	width: 100%;
	align-items: center;
}

.px-btn-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	background-color: var(--powerx-primary-color, #2563eb);
	color: var(--powerx-neutral-0, #ffffff);
	border: 1px solid transparent;
	border-radius: var(--powerx-btn-radius, var(--powerx-radius-md, 4px));
	transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
	text-align: center;
	line-height: 1;
	padding: var(--px-btn-padding, 12px 24px);
}

.px-btn-link:hover {
	background-color: var(--powerx-primary-hover, #1d4ed8);
	color: var(--powerx-neutral-0, #ffffff);
}

/* =========================================================================
 * 2.0 JUSTIFIED / FULL-WIDTH STRETCH
 * ========================================================================= */
/* Width is controlled by Elementor's responsive align selector. */
.px-btn-wrapper.px-btn-stretch .px-btn-link {
	width: 100%;
}

/* =========================================================================
 * 3.0 ICON CONTAINERS & SVGS
 * ========================================================================= */
.px-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
	transition: color 0.28s ease, fill 0.28s ease;
}

.px-btn-icon svg {
	display: block;
	width: 1em;
	height: var(--px-btn-icon-size, 1em);
	fill: currentColor;
	transition: fill 0.28s ease, color 0.28s ease;
}

.px-btn-icon i {
	display: inline-block;
	line-height: 1;
	transition: color 0.28s ease;
}

/* Base Position Classes for Instant Fallback */
.px-btn-link.px-btn-icon-align-left {
	flex-direction: row;
}

.px-btn-link.px-btn-icon-align-right {
	flex-direction: row-reverse;
}

.px-btn-link.px-btn-icon-align-top {
	flex-direction: column;
}

.px-btn-link.px-btn-icon-align-bottom {
	flex-direction: column-reverse;
}

/* =========================================================================
 * 4.0 ADVANCED HOVER SHINE & FLARE EFFECTS
 * ========================================================================= */

/* 4.1 DIAGONAL REFLECTION SWEEP */
.px-shine-diagonal {
	position: absolute;
	top: -60%;
	left: -140%;
	width: 65%;
	height: 220%;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(255, 255, 255, 0.15) 25%, 
		rgba(255, 255, 255, 0.65) 50%, 
		rgba(255, 255, 255, 0.15) 75%, 
		transparent 100%
	);
	transform: rotate(26deg);
	pointer-events: none;
	transition: left 2.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.px-btn-link:hover .px-shine-diagonal {
	left: 170%;
}

/* 4.2 DOUBLE BEAM FLARE */
.px-shine-double {
	position: absolute;
	top: -60%;
	left: -150%;
	width: 75%;
	height: 220%;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(255, 255, 255, 0.25) 20%, 
		rgba(255, 255, 255, 0.75) 45%, 
		transparent 55%, 
		rgba(255, 255, 255, 0.45) 75%, 
		transparent 100%
	);
	transform: rotate(26deg);
	pointer-events: none;
	transition: left 3.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.px-btn-link:hover .px-shine-double {
	left: 180%;
}

/* 4.3 LIQUID SHIMMER WAVE */
.px-shine-shimmer {
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 15%, var(--powerx-overlay-light, rgba(255, 255, 255, 0.4)) 45%, var(--powerx-overlay-light, rgba(255, 255, 255, 0.75)) 50%, var(--powerx-overlay-light, rgba(255, 255, 255, 0.4)) 55%, transparent 85%);
	background-size: 200% 100%;
	background-position-x: 180%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.px-btn-link:hover .px-shine-shimmer {
	opacity: 1;
	animation: pxShimmerWave 5.5s infinite linear;
}

@keyframes pxShimmerWave {
	0% {
		background-position-x: 180%;
	}
	100% {
		background-position-x: -180%;
	}
}

/* 4.4 3D GLOSSY GLASS LENS GLARE */
.px-shine-glass-glare {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg, var(--powerx-overlay-light, rgba(255, 255, 255, 0.45)) 0%, var(--powerx-overlay-light, rgba(255, 255, 255, 0.1)) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: inherit;
	pointer-events: none;
	opacity: 0.55;
	transition: opacity 1.4s ease, filter 1.4s ease;
}

.px-btn-link:hover .px-shine-glass-glare {
	opacity: 1;
	filter: brightness(1.3);
}

/* 4.5 RADIAL FLARE BURST */
.px-shine-radial {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 140px;
	height: 140px;
	margin-top: -70px;
	margin-left: -70px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--powerx-overlay-light, rgba(255, 255, 255, 0.65)) 0%, var(--powerx-overlay-light, rgba(255, 255, 255, 0)) 70%);
	transform: scale(0);
	pointer-events: none;
	opacity: 1;
	transition: transform 2.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 2.6s ease;
}

.px-btn-link:hover .px-shine-radial {
	transform: scale(3.5);
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.px-btn-link:hover .px-shine-shimmer {
		animation: none;
	}
}