/**
 * CursorX - Styles
 *
 * Covers:
 *  - Custom cursor shapes and animations
 *  - Trail and particle elements
 *  - Admin settings page UI
 *  - Live preview box
 *  - Responsive and accessibility overrides
 *
 * @package CursorX
 */

/* ==========================================================================
   BASE CURSOR
   FIX #11: position changed to fixed on the base class so the frontend cursor
            follows the viewport, not the document. The admin preview overrides
            this back to absolute via #cursorx-preview .cursorx-cursor below.
   FIX #16: mix-blend-mode removed from the base rule so it does not make the
            cursor invisible on mid-tone backgrounds. Applied only where chosen.
   ========================================================================== */

.cursorx-cursor {
	position: fixed; /* FIX #11 */
	pointer-events: none;
	top: 0;
	left: 0;
	z-index: 9999;
	will-change: transform;
	backface-visibility: hidden;
	perspective: 1000px;
	/* CSS custom properties — updated live by JS */
	--cursorx-color: #ffffff;
	--cursorx-size: 30px;
	--cursorx-rgb: 255, 255, 255;
	background-color: var( --cursorx-color );
	/* Smooth transitions for size/color changes */
	transition: width 0.2s, height 0.2s, background-color 0.2s, opacity 0.2s;
}

/* ==========================================================================
   SHAPES
   ========================================================================== */

.cursorx-circle {
	width: var( --cursorx-size ) !important;
	height: var( --cursorx-size ) !important;
	border-radius: 50% !important;
	overflow: hidden !important;
}

.cursorx-triangle {
	width: 0;
	height: 0;
	background: transparent !important;
	border-left: calc( var( --cursorx-size ) / 2 ) solid transparent;
	border-right: calc( var( --cursorx-size ) / 2 ) solid transparent;
	border-bottom: calc( var( --cursorx-size ) * 0.866 ) solid var( --cursorx-color ) !important;
	border-radius: 20%;
}

/* Custom image / icon cursor */
.cursorx-custom,
.cursorx-advanced {
	width: var( --cursorx-size ) !important;
	height: var( --cursorx-size ) !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	transition: none !important;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

/* --- None (fallback) --- */
.cursorx-none {
	background: var( --cursorx-color );
}

.cursorx-circle.cursorx-none {
	background: var( --cursorx-color );
}

.cursorx-triangle.cursorx-none {
	border-bottom-color: var( --cursorx-color );
}

/* --- Neon Orbit --- */
.cursorx-neon-orbit {
	background: transparent !important;
	border: 1px solid var( --cursorx-color ) !important;
	box-shadow: 0 0 5px var( --cursorx-color ) !important;
	position: relative !important;
}

.cursorx-neon-orbit::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	width: calc( 100% + 10px );
	height: calc( 100% + 10px );
	border-radius: 50%;
	border: 1px solid var( --cursorx-color );
	box-shadow: 0 0 10px var( --cursorx-color );
	animation: cursorx-orbit 4s infinite linear;
	opacity: 0.7;
}

.cursorx-neon-orbit::after {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	width: calc( 100% + 20px );
	height: calc( 100% + 20px );
	border-radius: 50%;
	border: 1px solid var( --cursorx-color );
	box-shadow: 0 0 15px var( --cursorx-color );
	animation: cursorx-orbit 4s infinite linear 2s;
	opacity: 0.4;
}

/* --- Liquid Morph --- */
.cursorx-liquid-morph {
	background: var( --cursorx-color );
	animation: cursorx-liquid-morph 2s infinite ease-in-out;
}

.cursorx-triangle.cursorx-liquid-morph {
	border-bottom-color: var( --cursorx-color );
}

/* --- Particle Halo --- */
.cursorx-particle-halo {
	background: transparent;
	box-shadow: 0 0 15px var( --cursorx-color );
}

/* --- Gradient Flow Trail --- */
.cursorx-gradient-trail {
	background: linear-gradient( 45deg, var( --cursorx-color ), cyan );
	animation: cursorx-gradient-trail-anim 3s infinite alternate ease-in-out;
}

/* --- Magnetic Hover --- */
.cursorx-magnetic-hover {
	background: var( --cursorx-color );
	transition: transform 0.3s ease !important;
}

.cursorx-triangle.cursorx-magnetic-hover {
	border-bottom-color: var( --cursorx-color );
}

/* --- Plasma Burst ---
 * Pulsing, layered plasma rings that breathe in and out.
 * Works on circle and triangle shapes.
 */
.cursorx-plasma-burst {
	background: var( --cursorx-color );
	animation: cursorx-plasma-burst 1.8s infinite ease-in-out;
}

.cursorx-plasma-burst::before,
.cursorx-plasma-burst::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	border: 2px solid var( --cursorx-color );
	/* FIX #8: Explicit width/height so rings start at cursor size, not 0. */
	width: var( --cursorx-size );
	height: var( --cursorx-size );
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	animation: cursorx-plasma-ring 1.8s infinite ease-out;
	opacity: 0;
}

.cursorx-plasma-burst::after {
	animation-delay: 0.9s;
}

.cursorx-triangle.cursorx-plasma-burst {
	border-bottom-color: var( --cursorx-color );
	background: transparent;
}

/* --- Electric Arc ---
 * Crackling dashed border that spins continuously.
 * Gives a high-voltage feel to the cursor.
 */
.cursorx-electric-arc {
	background: transparent !important;
	border: 2px dashed var( --cursorx-color ) !important;
	box-shadow:
		0 0 8px var( --cursorx-color ),
		inset 0 0 8px rgba( var( --cursorx-rgb ), 0.3 ) !important;
	animation: cursorx-electric-spin 0.6s infinite linear !important;
	position: relative !important;
}

.cursorx-electric-arc::before {
	content: '';
	position: absolute;
	/* FIX #6: Use explicit calc size instead of right/bottom inset
	   so the fill doesn't collapse when parent has no natural dimensions. */
	width: calc( var( --cursorx-size ) - 6px );
	height: calc( var( --cursorx-size ) - 6px );
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	border-radius: 50%;
	background: rgba( var( --cursorx-rgb ), 0.15 );
	animation: cursorx-electric-inner 0.6s infinite linear reverse;
}

.cursorx-electric-arc::after {
	content: '';
	position: absolute;
	/* FIX #6: Explicit size for outer orbit ring. */
	width: calc( var( --cursorx-size ) + 12px );
	height: calc( var( --cursorx-size ) + 12px );
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	border-radius: 50%;
	border: 1px dotted var( --cursorx-color );
	opacity: 0.4;
	animation: cursorx-electric-spin 1.2s infinite linear reverse;
}

.cursorx-triangle.cursorx-electric-arc {
	border-bottom-color: var( --cursorx-color );
	border-style: solid !important;
}

/* --- Ripple Wave ---
 * Concentric ripple rings that expand outward from the cursor
 * like a stone dropped in water.
 */
.cursorx-ripple-wave {
	background: var( --cursorx-color );
	position: relative !important;
}

.cursorx-ripple-wave::before,
.cursorx-ripple-wave::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	border: 1.5px solid var( --cursorx-color );
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate( -50%, -50% ) scale( 1 );
	opacity: 0.8;
	animation: cursorx-ripple 2s infinite ease-out;
}

.cursorx-ripple-wave::after {
	animation-delay: 1s;
}

.cursorx-triangle.cursorx-ripple-wave {
	border-bottom-color: var( --cursorx-color );
	background: transparent;
}

/* --- Glitch ---
 * RGB channel-split glitch effect. The cursor randomly offsets
 * red and blue channel shadows for a digital-distortion look.
 * FIX #7: No transform in the main keyframe — that conflicts with the
 * JS-set position transform. Effect achieved via filter + pseudo-element
 * offset using box-shadow colour splitting instead.
 */
.cursorx-glitch {
	background: var( --cursorx-color );
	animation: cursorx-glitch 2.5s infinite steps( 1 );
	position: relative !important;
	overflow: visible !important;
}

.cursorx-glitch::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba( 255, 0, 80, 0.7 );
	mix-blend-mode: screen;
	animation: cursorx-glitch-red 2.5s infinite steps( 1 );
	opacity: 0;
}

.cursorx-glitch::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba( 0, 200, 255, 0.7 );
	mix-blend-mode: screen;
	animation: cursorx-glitch-blue 2.5s infinite steps( 1 );
	opacity: 0;
}

.cursorx-triangle.cursorx-glitch {
	border-bottom-color: var( --cursorx-color );
	background: transparent;
}

/* --- Shockwave ---
 * A single powerful expanding ring that bursts outward every second,
 * like a sonar ping or an energy shockwave.
 */
.cursorx-shockwave {
	background: var( --cursorx-color );
	position: relative !important;
}

.cursorx-shockwave::before {
	content: '';
	position: absolute;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate( -50%, -50% ) scale( 1 );
	background: transparent;
	border: 2px solid var( --cursorx-color );
	opacity: 1;
	animation: cursorx-shockwave 1.4s infinite cubic-bezier( 0.2, 0.8, 0.4, 1 );
}

.cursorx-shockwave::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate( -50%, -50% ) scale( 1 );
	background: transparent;
	border: 1px solid var( --cursorx-color );
	opacity: 0.5;
	animation: cursorx-shockwave 1.4s infinite cubic-bezier( 0.2, 0.8, 0.4, 1 ) 0.7s;
}

.cursorx-triangle.cursorx-shockwave {
	border-bottom-color: var( --cursorx-color );
	background: transparent;
}

/* ==========================================================================
   HOVER STATES
   FIX #6: .cursorx-hovering no longer contains an absolute translate() that
           would override the JS-set position transform. The scale is applied
           via a CSS filter trick so it stacks on top of the existing transform
           without replacing it. We use filter:none as the default and
           the scale is only a visual enlargement.
   ========================================================================== */

/**
 * Scale the cursor on interactive element hover.
 * We use a CSS variable --cursorx-scale so JS can still read/adjust it,
 * and we apply it in the ::after pseudo-element to avoid transform conflict.
 *
 * Simplified approach: use outline/box-shadow for the visual "grow" effect
 * rather than a transform that conflicts with the position transform.
 */
.cursorx-cursor.cursorx-hovering {
	box-shadow:
		0 0 0 6px rgba( var( --cursorx-rgb ), 0.2 ),
		0 0 0 3px rgba( var( --cursorx-rgb ), 0.15 );
	transition: box-shadow 0.2s ease-out, width 0.2s, height 0.2s, background-color 0.2s !important;
	z-index: 10000 !important;
}

/* Active state (links/buttons press) */
.cursorx-cursor.cursorx-active {
	box-shadow:
		0 0 0 10px rgba( var( --cursorx-rgb ), 0.15 ),
		0 0 0 5px rgba( var( --cursorx-rgb ), 0.1 );
	background-color: rgba( var( --cursorx-rgb ), 0.2 ) !important;
	border: 1px solid var( --cursorx-color ) !important;
}

/* Image hover */
.cursorx-cursor.cursorx-image-hover {
	mix-blend-mode: difference;
	box-shadow: 0 0 0 20px rgba( var( --cursorx-rgb ), 0.1 );
}

/* ==========================================================================
   TRAIL & PARTICLE ELEMENTS
   ========================================================================== */

.cursorx-trail {
	position: fixed;
	pointer-events: none;
	z-index: 9998;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	will-change: left, top, opacity, transform;
	display: block !important;
	/* FIX #5: trailFade now references --trail-opacity set per element by JS */
	animation: trailFade 1s ease-out forwards;
}

/* Gradient tail segments — must NOT have transition for smooth LERP. */
.cursorx-gradient-trail-trail {
	transition: none !important;
}

.cursorx-particle {
	position: fixed;
	pointer-events: none;
	z-index: 9998;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var( --cursorx-color );
	opacity: 0.6;
	animation: particlePulse 2s infinite ease-in-out;
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes cursorx-orbit {
	0% {
		box-shadow: 0 0 10px var( --cursorx-color ), 0 0 20px var( --cursorx-color );
	}
	50% {
		box-shadow: 0 0 20px var( --cursorx-color ), 0 0 30px cyan;
	}
	100% {
		box-shadow: 0 0 10px var( --cursorx-color ), 0 0 20px var( --cursorx-color );
	}
}

@keyframes cursorx-liquid-morph {
	0%, 100% {
		border-radius: 50%;
	}
	25% {
		border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
	}
	50% {
		border-radius: 28% 72% 44% 56% / 49% 40% 60% 51%;
	}
	75% {
		border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
	}
}

@keyframes cursorx-gradient-trail-anim {
	0%   { opacity: 1; }
	100% { opacity: 0.5; }
}

/**
 * FIX #5: Single, canonical trailFade keyframe.
 * References --trail-opacity so each element fades from its own opacity value.
 * Set by JS as: elem.style.setProperty('--trail-opacity', opacityValue)
 */
@keyframes trailFade {
	0% {
		opacity: var( --trail-opacity, 0.8 );
		transform: translate( -50%, -50% ) scale( 1 );
	}
	100% {
		opacity: 0;
		transform: translate( -50%, -50% ) scale( 0 );
	}
}

@keyframes particlePulse {
	0%, 100% {
		transform: scale( 1 );
		opacity: 0.5;
	}
	50% {
		transform: scale( 1.5 );
		opacity: 1;
	}
}

/* --- Plasma Burst keyframes --- */
@keyframes cursorx-plasma-burst {
	0%, 100% {
		box-shadow:
			0 0 4px 1px rgba( var( --cursorx-rgb ), 0.8 ),
			0 0 12px 3px rgba( var( --cursorx-rgb ), 0.4 );
		filter: brightness( 1 );
	}
	50% {
		box-shadow:
			0 0 8px 3px rgba( var( --cursorx-rgb ), 1 ),
			0 0 24px 8px rgba( var( --cursorx-rgb ), 0.6 ),
			0 0 40px 12px rgba( var( --cursorx-rgb ), 0.2 );
		filter: brightness( 1.4 );
	}
}

/* FIX #8: Uses transform:scale so the ring expands from the explicit
   width/height set on the pseudo-element rule above. */
@keyframes cursorx-plasma-ring {
	0% {
		transform: translate( -50%, -50% ) scale( 1 );
		opacity: 0.8;
	}
	100% {
		transform: translate( -50%, -50% ) scale( 3 );
		opacity: 0;
	}
}

/* --- Electric Arc keyframes --- */
@keyframes cursorx-electric-spin {
	0%   { transform: rotate( 0deg ); }
	100% { transform: rotate( 360deg ); }
}

@keyframes cursorx-electric-inner {
	0%   { transform: rotate( 0deg ); opacity: 0.8; }
	50%  { opacity: 0.3; }
	100% { transform: rotate( -360deg ); opacity: 0.8; }
}

/* --- Ripple Wave keyframes --- */
@keyframes cursorx-ripple {
	0% {
		opacity: 0.8;
		transform: translate( -50%, -50% ) scale( 1 );
	}
	100% {
		opacity: 0;
		transform: translate( -50%, -50% ) scale( 3.5 );
	}
}

/* --- Glitch keyframes ---
 * FIX #7: No transform property — would fight the JS position transform.
 * Effect uses filter hue-rotate on the main element and clip-path
 * translate on pseudo-elements via left/top offset instead.
 */
@keyframes cursorx-glitch {
	0%, 90%, 100% {
		filter: none;
		box-shadow: none;
	}
	91% {
		filter: hue-rotate( 90deg ) saturate( 3 );
		box-shadow: -3px 0 0 rgba( 255, 0, 80, 0.8 ), 3px 0 0 rgba( 0, 200, 255, 0.8 );
	}
	93% {
		filter: hue-rotate( -90deg ) saturate( 3 );
		box-shadow: 3px 0 0 rgba( 255, 0, 80, 0.8 ), -3px 0 0 rgba( 0, 200, 255, 0.8 );
	}
	95% {
		filter: hue-rotate( 45deg ) saturate( 2 );
		box-shadow: -2px 0 0 rgba( 255, 0, 80, 0.6 ), 2px 0 0 rgba( 0, 200, 255, 0.6 );
	}
	97% {
		filter: hue-rotate( -45deg );
		box-shadow: none;
	}
}

@keyframes cursorx-glitch-red {
	0%, 90%, 100% {
		opacity: 0;
		clip-path: inset( 0 0 100% 0 );
	}
	91% {
		opacity: 1;
		clip-path: inset( 10% 0 60% 0 );
	}
	93% {
		opacity: 1;
		clip-path: inset( 50% 0 20% 0 );
	}
	95% {
		opacity: 1;
		clip-path: inset( 70% 0 5% 0 );
	}
	97% {
		opacity: 0;
		clip-path: inset( 0 0 100% 0 );
	}
}

@keyframes cursorx-glitch-blue {
	0%, 90%, 100% {
		opacity: 0;
		clip-path: inset( 0 0 100% 0 );
	}
	91% {
		opacity: 1;
		clip-path: inset( 20% 0 50% 0 );
	}
	93% {
		opacity: 1;
		clip-path: inset( 80% 0 5% 0 );
	}
	95% {
		opacity: 1;
		clip-path: inset( 5% 0 70% 0 );
	}
	97% {
		opacity: 0;
		clip-path: inset( 0 0 100% 0 );
	}
}

/* --- Shockwave keyframes --- */
@keyframes cursorx-shockwave {
	0% {
		transform: translate( -50%, -50% ) scale( 1 );
		opacity: 0.9;
	}
	100% {
		transform: translate( -50%, -50% ) scale( 5 );
		opacity: 0;
	}
}

/* ==========================================================================
   SHAPE = NONE — hide custom cursor, restore default
   ========================================================================== */

body.cursorx-shape-none .cursorx-cursor {
	display: none !important;
}

body.cursorx-shape-none,
body.cursorx-shape-none * {
	cursor: default !important;
}

/* ==========================================================================
   WOOCOMMERCE STATES
   ========================================================================== */

.cursorx-cursor.cursorx-cart-mode::after {
	content: '+';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	font-size: 14px;
	color: #fff;
}

.cursorx-cursor.cursorx-success {
	background: #28a745 !important;
	border-color: #28a745 !important;
	box-shadow: 0 0 0 8px rgba( 40, 167, 69, 0.2 ) !important;
}

/* ==========================================================================
   THEME-AWARE COLOR MODES
   ========================================================================== */

/* Opt-in blend mode for themes that suit it */
.cursorx-cursor.cursorx-invert {
	mix-blend-mode: difference !important;
	background-color: #fff !important;
}

.cursorx-cursor.cursorx-light-mode {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	mix-blend-mode: normal;
}

.cursorx-cursor.cursorx-dark-mode {
	background-color: #000000 !important;
	border-color: #000000 !important;
	mix-blend-mode: normal;
}

/* Smooth transition for magnetic buttons */
.cursorx-magnetic,
.btn,
button {
	transition: transform 0.3s cubic-bezier( 0.23, 1, 0.32, 1 );
	display: inline-block;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.cursorx-cursor,
	.cursorx-trail,
	.cursorx-particle {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   RESPONSIVE — MOBILE
   ========================================================================== */

@media only screen and ( max-width: 768px ) {
	body {
		cursor: default !important;
	}

	.cursorx-cursor,
	.cursorx-particle,
	.cursorx-trail {
		display: none !important;
	}
}

/* ==========================================================================
   ADMIN PREVIEW BOX
   FIX #11: Override fixed positioning back to absolute inside the preview box.
   FIX #17: overflow changed from visible to hidden to contain trail particles.
   ========================================================================== */

#cursorx-preview {
	cursor: none !important;
}

#cursorx-preview * {
	cursor: none !important;
}

/* FIX #11: Admin preview needs absolute positioning */
#cursorx-preview .cursorx-cursor {
	position: absolute !important;
	z-index: 10000 !important;
}

/* FIX #17: Prevent trails from leaking outside the preview box */
.cursorx-preview-box {
	width: 100%;
	height: 300px;
	border: 1px solid #ddd;
	border-radius: 4px;
	position: relative;
	overflow: hidden; /* FIX #17: was "visible" — trails leaked outside */
	background: #1a1a2e; /* Dark background makes cursor effects visible */
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.1 );
}

/* Trail elements inside the preview box must be absolute, not fixed */
#cursorx-preview .cursorx-trail {
	position: absolute !important;
}

#cursorx-preview .cursorx-particle {
	position: absolute !important;
}

.cursorx-preview-text {
	text-align: center;
	font-size: 12px;
	color: #666;
	margin-top: 10px;
}

/* ==========================================================================
   ADMIN SETTINGS UI
   ========================================================================== */

.cursorx-settings-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.cursorx-heading {
	font-size: 24px;
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 10px;
}

.cursorx-subheading {
	font-size: 14px;
	color: #555;
	margin-bottom: 20px;
}

.cursorx-subheading strong {
	font-weight: 700 !important;
	color: #1d2327 !important;
}

.cursorx-container {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.cursorx-settings-panel,
.cursorx-preview-panel {
	flex: 1;
	min-width: 300px;
	max-width: 500px;
}

.cursorx-preview-panel {
	position: sticky;
	top: 32px;
	align-self: flex-start;
	z-index: 10;
}

.cursorx-card {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.1 );
	padding: 20px;
	margin-bottom: 20px;
	border: 1px solid #e5e5e5;
}

.cursorx-card h2 {
	font-size: 18px;
	font-weight: 600;
	color: #1d2327;
	margin: 0 0 15px;
}

.cursorx-card h3 {
	font-size: 16px;
	font-weight: 500;
	color: #1d2327;
	margin: 20px 0 10px;
}

.cursorx-field {
	margin-bottom: 15px;
}

.cursorx-label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	margin-bottom: 8px;
}

.cursorx-input,
.cursorx-select {
	width: 100%;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: #f9f9f9;
}

.cursorx-input:focus,
.cursorx-select:focus {
	border-color: #0073aa;
	box-shadow: 0 0 0 2px rgba( 0, 115, 170, 0.2 );
	outline: none;
}

.cursorx-button {
	background: #0073aa;
	color: #fff;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	margin-right: 10px;
	margin-top: 10px;
}

.cursorx-button:hover {
	background: #005f8b;
}

.cursorx-image-preview img {
	max-width: 100px;
	height: auto;
	margin-top: 10px;
	border-radius: 4px;
	border: 1px solid #e5e5e5;
}

.cursorx-description {
	font-size: 12px;
	color: #666;
	margin-top: 8px;
}

.cursorx-submit .button-primary {
	background: #0073aa;
	border: none;
	padding: 10px 20px;
	font-size: 14px;
	border-radius: 4px;
}

.cursorx-submit .button-primary:hover {
	background: #005f8b;
}

/* Disabled color picker */
.cursorx-color-picker:disabled,
.cursorx-color-picker[disabled] {
	background-color: #f0f0f1 !important;
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

.cursorx-color-picker:disabled + .wp-picker-holder {
	display: none !important;
}

/* Range slider value display */
.cursorx-range-value {
	display: inline-block;
	margin-left: 10px;
	font-size: 14px;
	color: #555;
}

/* Tabs */
.cursorx-tab-content {
	margin-top: 20px;
}

.nav-tab-wrapper {
	margin-bottom: 20px !important;
}

/* Help icon */
.cursorx-field .dashicons-editor-help {
	cursor: help;
	color: #0073aa;
	margin-right: 5px;
	vertical-align: middle;
}


/* ==========================================================================
   DUAL CURSOR RING
   ========================================================================== */

.cursorx-dual-ring {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9998;
	will-change: transform;
	backface-visibility: hidden;
	border-radius: 50%;
	border: 1.5px solid var( --ring-color, #ffffff );
	width: var( --ring-size, 48px );
	height: var( --ring-size, 48px );
	transition:
		width 0.25s ease-out,
		height 0.25s ease-out,
		opacity 0.2s,
		border-color 0.2s;
}

/* Admin preview ring */
#cursorx-preview .cursorx-dual-ring {
	position: absolute !important;
}

/* Hover: ring expands slightly */
.cursorx-dual-ring.cursorx-ring-hovering {
	transform-origin: center center;
	border-width: 1.5px;
	opacity: 0.6 !important;
}

/* ==========================================================================
   CLICK PARTICLES
   (spawned via JS — these are helper selectors for z-index / pointer-events)
   ========================================================================== */

.cursorx-click-particle {
	position: fixed;
	pointer-events: none;
	z-index: 10001;
	border-radius: 50%;
	will-change: transform, opacity;
}

/* ==========================================================================
   CURSOR OPACITY (applied inline by JS via cursorEl.style.opacity)
   Transition is defined on the base .cursorx-cursor class already.
   ========================================================================== */

/* ==========================================================================
   PRESETS GRID (admin)
   ========================================================================== */

.cursorx-presets-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 100px, 1fr ) );
	gap: 12px;
	margin-top: 10px;
}

.cursorx-preset-card {
	border: 2px solid #e5e5e5;
	border-radius: 8px;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s, transform 0.15s;
	background: #fff;
}

.cursorx-preset-card:hover {
	border-color: #0073aa;
	transform: translateY( -2px );
}

.cursorx-preset-thumb {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.cursorx-preset-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: 0 0 8px currentColor;
}

.cursorx-preset-name {
	display: block;
	font-size: 11px;
	font-weight: 500;
	color: #444;
	text-align: center;
	padding: 6px 4px;
	background: #f9f9f9;
	border-top: 1px solid #e5e5e5;
	line-height: 1.3;
}

/* ==========================================================================
   ADMIN SAVE NOTICE
   ========================================================================== */

.cursorx-notice {
	margin: 10px 0 20px !important;
}

/* ==========================================================================
   SHORTCODE REGION (cursor: none handled by JS visibility toggle)
   ========================================================================== */

.cursorx-disable {
	cursor: auto !important;
}

.cursorx-disable * {
	cursor: auto !important;
}

/* ==========================================================================
   RESPONSIVE ADMIN
   ========================================================================== */

@media only screen and ( max-width: 782px ) {
	.cursorx-container {
		flex-direction: column;
	}

	.cursorx-settings-panel,
	.cursorx-preview-panel {
		max-width: 100%;
	}
}