/**
 * Smart Scroll UX — Frontend Stylesheet  v1.1.0
 *
 * CSS custom properties are injected inline by PHP (ssum_build_button_style).
 * --ssum-bg is ALWAYS a real colour or gradient string, never the keyword
 * "none", so background:var(--ssum-bg) always resolves correctly.
 *
 * Theme-compatibility strategy
 * ─────────────────────────────────────────────────────────────────────────────
 * • JS reparents #ssum-back-to-top directly to <body> at runtime.
 *   This escapes any ancestor with overflow:hidden, CSS transform, filter, or
 *   will-change (Blocksy, Divi, Avada, Elementor, Fusion Builder).
 *
 * • position:fixed is declared with !important to override any theme rule.
 *
 * • Dual selectors (#ssum-back-to-top + .ssum-btn) keep styles active even if
 *   a theme mutates the ID but preserves the class.
 *
 * • z-index applied via PHP inline style for maximum override power.
 *
 * • Full CSS reset block normalises across Blocksy's reset, Divi's normalizer,
 *   and themes that modify browser defaults aggressively (Avada, Flatsome).
 */

/* ============================================================
   Reset layer — normalize across all theme environments
   ============================================================ */

#ssum-back-to-top,
.ssum-btn {
	-webkit-appearance:          none !important;
	        appearance:          none !important;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-font-smoothing:      antialiased;
	box-sizing:                  border-box !important;
	margin:                      0 !important;
	font-family:                 inherit;
	font-weight:                 600;
	line-height:                 1;
	letter-spacing:              0;
	text-transform:              none;
	text-decoration:             none !important;
	cursor:                      pointer !important;
	-webkit-user-select:         none;
	        user-select:         none;
}

/* ============================================================
   Base button
   ============================================================ */

#ssum-back-to-top,
.ssum-btn {
	display:         inline-flex !important;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	overflow:        visible;
	padding:         0;
	border:          none;

	/*
	 * position:fixed + !important is the primary CSS compatibility fix.
	 * Themes like Blocksy apply CSS transforms to page wrapper elements
	 * (.ct-container, .entry-content) which normally break position:fixed.
	 * The JS reparent-to-body fix handles the transform case at runtime;
	 * !important here handles theme stylesheets that reset our position rule.
	 */
	position: fixed !important;

	/* Dimensions & shape — PHP injects as CSS custom properties */
	width:         var( --ssum-size, 56px );
	height:        var( --ssum-size, 56px );
	border-radius: var( --ssum-radius, 50% );

	/* Background */
	background:  var( --ssum-bg, #333333 );
	color:       var( --ssum-icon-color, #ffffff );
	box-shadow:  var( --ssum-shadow, none );

	/* Hidden by default — JS adds .ssum-visible at scroll threshold */
	opacity:        0;
	visibility:     hidden;
	pointer-events: none;

	/* Default transitions */
	transition:
		opacity     0.3s ease,
		visibility  0.3s ease,
		transform   0.25s ease,
		background  0.2s ease,
		color       0.2s ease,
		box-shadow  0.2s ease,
		filter      0.2s ease;
}

#ssum-back-to-top.ssum-visible,
.ssum-btn.ssum-visible {
	opacity:        var( --ssum-opacity, 1 );
	visibility:     visible;
	pointer-events: auto;
}

/* ============================================================
   Hover
   ============================================================ */

#ssum-back-to-top.ssum-visible:hover,
.ssum-btn.ssum-visible:hover {
	background: var( --ssum-hover-bg, #000000 );
	color:      var( --ssum-hover-icon, #ffffff );
}

/* Gradient: dim on hover instead of color-swap */
#ssum-back-to-top.ssum-gradient.ssum-visible:hover,
.ssum-btn.ssum-gradient.ssum-visible:hover {
	filter:     brightness( 0.85 );
	background: var( --ssum-bg );
}

/* ============================================================
   Hover effects
   ============================================================ */

#ssum-back-to-top.ssum-hover-scale.ssum-visible:hover,
.ssum-btn.ssum-hover-scale.ssum-visible:hover  { transform: scale( 1.12 ); }

#ssum-back-to-top.ssum-hover-lift.ssum-visible:hover,
.ssum-btn.ssum-hover-lift.ssum-visible:hover   { transform: translateY( -4px ); box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important; }

#ssum-back-to-top.ssum-hover-none.ssum-visible:hover,
.ssum-btn.ssum-hover-none.ssum-visible:hover   { transform: none !important; filter: none !important; }

@keyframes ssum-pulse {
	0%   { box-shadow: 0 0 0 0    rgba(255,255,255,0.55); }
	70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0);    }
	100% { box-shadow: 0 0 0 0    rgba(255,255,255,0);    }
}
#ssum-back-to-top.ssum-hover-pulse.ssum-visible:hover,
.ssum-btn.ssum-hover-pulse.ssum-visible:hover { animation: ssum-pulse 0.9s ease-out infinite; }

/* ============================================================
   Icon
   ============================================================ */

#ssum-back-to-top .ssum-icon,
.ssum-btn .ssum-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           calc( var( --ssum-size, 56px ) * 0.40 );
	height:          calc( var( --ssum-size, 56px ) * 0.40 );
}

#ssum-back-to-top .ssum-icon svg,
.ssum-btn .ssum-icon svg {
	width:   100%;
	height:  100%;
	display: block;
}

/* ============================================================
   Text label
   ============================================================ */

#ssum-back-to-top .ssum-text,
.ssum-btn .ssum-text {
	font-size:      calc( var( --ssum-size, 56px ) * 0.23 );
	font-weight:    700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space:    nowrap;
}

@media ( max-width: 767px ) {
	#ssum-back-to-top.ssum-hide-text-mobile .ssum-text,
	.ssum-btn.ssum-hide-text-mobile .ssum-text { display: none; }
}

/* ============================================================
   Progress ring
   ============================================================ */

#ssum-back-to-top .ssum-progress-ring,
.ssum-btn .ssum-progress-ring {
	position:       absolute;
	top:            -4px;
	left:           -4px;
	width:          calc( 100% + 8px );
	height:         calc( 100% + 8px );
	pointer-events: none;
	overflow:       visible;
}

#ssum-back-to-top .ssum-ring-fill,
.ssum-btn .ssum-ring-fill { transition: stroke-dashoffset 0.15s linear; }

/* ============================================================
   Entrance animations
   ============================================================ */

/* Fade (default) */
#ssum-back-to-top.ssum-entrance-fade,
.ssum-btn.ssum-entrance-fade {
	transition: opacity 0.35s ease, visibility 0.35s ease,
	            transform 0.2s ease, background 0.2s ease,
	            color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Slide up */
#ssum-back-to-top.ssum-entrance-slide-up,
.ssum-btn.ssum-entrance-slide-up {
	transform:  translateY( 24px );
	transition: opacity 0.35s ease, visibility 0.35s ease,
	            transform 0.40s cubic-bezier(0.34, 1.56, 0.64, 1),
	            background 0.2s ease, color 0.2s ease,
	            box-shadow 0.2s ease, filter 0.2s ease;
}
#ssum-back-to-top.ssum-entrance-slide-up.ssum-visible,
.ssum-btn.ssum-entrance-slide-up.ssum-visible              { transform: translateY(0); }
#ssum-back-to-top.ssum-pos-mid-right.ssum-entrance-slide-up,
.ssum-btn.ssum-pos-mid-right.ssum-entrance-slide-up        { transform: translateX(24px) translateY(-50%); }
#ssum-back-to-top.ssum-pos-mid-right.ssum-entrance-slide-up.ssum-visible,
.ssum-btn.ssum-pos-mid-right.ssum-entrance-slide-up.ssum-visible { transform: translateX(0) translateY(-50%); }

/* Bounce */
@keyframes ssum-bounce-in {
	0%   { opacity:0; transform:scale(0.3);  }
	50%  { opacity:1; transform:scale(1.18); }
	70%            { transform:scale(0.9);  }
	85%            { transform:scale(1.05); }
	100%           { transform:scale(1);    }
}
#ssum-back-to-top.ssum-entrance-bounce.ssum-visible,
.ssum-btn.ssum-entrance-bounce.ssum-visible { animation: ssum-bounce-in 0.55s cubic-bezier(0.36,0.07,0.19,0.97) both; }

/* Zoom */
@keyframes ssum-zoom-in {
	0%   { opacity:0; transform:scale(0.5); }
	100% { opacity:1; transform:scale(1);   }
}
#ssum-back-to-top.ssum-entrance-zoom.ssum-visible,
.ssum-btn.ssum-entrance-zoom.ssum-visible { animation: ssum-zoom-in 0.3s cubic-bezier(0.175,0.885,0.32,1.275) both; }

/* None */
#ssum-back-to-top.ssum-entrance-none,
.ssum-btn.ssum-entrance-none { transition: none !important; }

/* ============================================================
   Mobile position overrides (classes added by JS)
   ============================================================ */

@media ( max-width: 767px ) {
	#ssum-back-to-top.ssum-mobile-center,
	.ssum-btn.ssum-mobile-center { left:50% !important; right:auto !important; transform:translateX(-50%) !important; }
	#ssum-back-to-top.ssum-mobile-left,
	.ssum-btn.ssum-mobile-left   { right:auto !important; }
	#ssum-back-to-top.ssum-mobile-right,
	.ssum-btn.ssum-mobile-right  { left:auto !important; }
}

/* ============================================================
   Accessibility
   ============================================================ */

#ssum-back-to-top:focus-visible,
.ssum-btn:focus-visible {
	outline:        3px solid #ffffff;
	outline-offset: 3px;
	box-shadow:     0 0 0 6px rgba(79,70,229,0.5) !important;
}

/* ============================================================
   Theme-specific compatibility overrides
   These are surgical fixes for known theme interference patterns.
   ============================================================ */

/*
 * Blocksy — The theme applies `transform: translateZ(0)` to its
 * `.ct-container` wrapper for GPU-compositing optimization. This would make
 * `position:fixed` relative to that wrapper. Our JS reparents the element
 * to <body>, but if JS is slow/blocked, this rule ensures the button still
 * displays correctly by forcing it above Blocksy's stacking context.
 */
body > #ssum-back-to-top,
body > .ssum-btn {
	/* Direct <body> child — position:fixed always refers to viewport here */
	position: fixed !important;
}

/*
 * Generic: any theme that sets `transform` on html or body.
 * The `transform: none` on html/body forces position:fixed to again refer
 * to the viewport, not the transformed container.
 * We don't modify html/body directly (would break theme layout), but we
 * document this known issue and rely on JS reparenting as the fix.
 */