/**
 * DeVsN Addons — Reading Progress bar + Back to Top button.
 * Front-end and admin live preview share these styles.
 *
 * @since 4.1.0
 */

/* ------------------------------------------------------------------ */
/* Reading progress bar                                                */
/* ------------------------------------------------------------------ */

.devsn-rp {
	position: fixed;
	z-index: var(--drp-z, 99990);
	pointer-events: none;
	--drp-p: 0%;
}

.devsn-rp__track {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--drp-bg, #e5e7eb);
	border-radius: var(--drp-radius, 0);
	overflow: visible;
}

.devsn-rp__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--drp-p, 0%);
	height: 100%;
	background: linear-gradient(90deg, var(--drp-c1, #2563eb), var(--drp-c2, #22d3ee));
	border-radius: var(--drp-radius, 0);
	overflow: hidden;
	transition: width .12s linear;
	will-change: width;
}

.devsn-rp__shine {
	display: none;
}

/* Horizontal placement */
.devsn-rp--top,
.devsn-rp--bottom {
	left: 0;
	width: var(--drp-w, 100%);
	height: var(--drp-h, 6px);
}

.devsn-rp--top {
	top: var(--drp-offset, 0);
}

.devsn-rp--bottom {
	bottom: var(--drp-offset, 0);
}

.devsn-rp--top.devsn-rp--align-center,
.devsn-rp--bottom.devsn-rp--align-center {
	left: 50%;
	transform: translateX(-50%);
}

.devsn-rp--top.devsn-rp--align-end,
.devsn-rp--bottom.devsn-rp--align-end {
	left: auto;
	right: 0;
}

/* Vertical placement */
.devsn-rp--left,
.devsn-rp--right {
	top: 0;
	height: var(--drp-w, 100%);
	width: var(--drp-h, 6px);
}

.devsn-rp--left {
	left: var(--drp-offset, 0);
}

.devsn-rp--right {
	right: var(--drp-offset, 0);
}

.devsn-rp--left.devsn-rp--align-center,
.devsn-rp--right.devsn-rp--align-center {
	top: 50%;
	transform: translateY(-50%);
}

.devsn-rp--left.devsn-rp--align-end,
.devsn-rp--right.devsn-rp--align-end {
	top: auto;
	bottom: 0;
}

.devsn-rp--left .devsn-rp__fill,
.devsn-rp--right .devsn-rp__fill {
	inset: auto auto 0 0;
	width: 100%;
	height: var(--drp-p, 0%);
	background: linear-gradient(180deg, var(--drp-c2, #22d3ee), var(--drp-c1, #2563eb));
	transition: height .12s linear;
}

/* Styles */
.devsn-rp.has-shadow .devsn-rp__fill {
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.devsn-rp--style-glow .devsn-rp__fill {
	box-shadow: 0 0 12px var(--drp-c2, #22d3ee), 0 0 24px rgba(37, 99, 235, .35);
}

.devsn-rp--style-neon .devsn-rp__fill {
	box-shadow: 0 0 6px var(--drp-c1), 0 0 18px var(--drp-c2), 0 0 34px var(--drp-c2);
	filter: saturate(1.4);
}

.devsn-rp--style-soft .devsn-rp__track,
.devsn-rp--style-soft .devsn-rp__fill {
	border-radius: 999px;
}

.devsn-rp--style-soft {
	padding: 0;
}

.devsn-rp--style-split .devsn-rp__fill {
	background-image: linear-gradient(90deg, var(--drp-c1), var(--drp-c2)),
		repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 14px);
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 16px);
	mask-image: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 16px);
}

.devsn-rp--style-shadow .devsn-rp__track {
	box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
}

/* Animations */
.devsn-rp--anim-stripes .devsn-rp__fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .28) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%, transparent 75%, transparent);
	background-size: 22px 22px;
	animation: devsn-rp-stripes 1s linear infinite;
}

@keyframes devsn-rp-stripes {
	from { background-position: 0 0; }
	to { background-position: 22px 0; }
}

.devsn-rp--anim-shine .devsn-rp__fill::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 60px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
	animation: devsn-rp-shine 1.8s ease-in-out infinite;
}

@keyframes devsn-rp-shine {
	from { left: -70px; }
	to { left: 100%; }
}

.devsn-rp--anim-pulse .devsn-rp__fill {
	animation: devsn-rp-pulse 1.4s ease-in-out infinite;
}

@keyframes devsn-rp-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .55; }
}

.devsn-rp--anim-flow .devsn-rp__fill {
	background: linear-gradient(90deg, var(--drp-c1), var(--drp-c2), var(--drp-c1));
	background-size: 200% 100%;
	animation: devsn-rp-flow 2.4s linear infinite;
}

@keyframes devsn-rp-flow {
	from { background-position: 0 0; }
	to { background-position: 200% 0; }
}

/* Percentage label */
.devsn-rp__pct {
	position: absolute;
	top: 50%;
	left: var(--drp-p, 0%);
	transform: translate(-50%, -50%);
	background: var(--drp-pct-bg, #2563eb);
	color: var(--drp-pct-c, #fff);
	font-size: var(--drp-pct-s, 12px);
	line-height: 1;
	font-weight: 700;
	padding: .38em .6em;
	border-radius: 999px;
	white-space: nowrap;
	font-style: normal;
	box-shadow: 0 3px 10px rgba(15, 23, 42, .2);
	transition: left .12s linear;
}

.devsn-rp__pct i {
	font-style: normal;
}

.devsn-rp--pct-start .devsn-rp__pct {
	left: 10px;
	transform: translate(0, -50%);
}

.devsn-rp--pct-end .devsn-rp__pct {
	left: auto;
	right: 10px;
	transform: translate(0, -50%);
}

.devsn-rp--left .devsn-rp__pct,
.devsn-rp--right .devsn-rp__pct {
	left: 50%;
	top: auto;
	bottom: var(--drp-p, 0%);
	transform: translate(-50%, 50%);
	transition: bottom .12s linear;
}

.devsn-rp--left.devsn-rp--pct-start .devsn-rp__pct,
.devsn-rp--right.devsn-rp--pct-start .devsn-rp__pct {
	bottom: 10px;
}

.devsn-rp--left.devsn-rp--pct-end .devsn-rp__pct,
.devsn-rp--right.devsn-rp--pct-end .devsn-rp__pct {
	bottom: auto;
	top: 10px;
	transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------ */
/* Back to top                                                         */
/* ------------------------------------------------------------------ */

.devsn-btt {
	position: fixed;
	bottom: var(--dbt-y, 24px);
	z-index: var(--dbt-z, 99991);
	width: var(--dbt-size, 52px);
	height: var(--dbt-size, 52px);
	padding: 0;
	margin: 0;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--dbt-radius, 50%);
	background: linear-gradient(135deg, var(--dbt-bg1, #2563eb), var(--dbt-bg2, #22d3ee));
	color: var(--dbt-fg, #fff);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease, box-shadow .3s ease;
	--dbt-p: 0;
}

.devsn-btt--pos-right { right: var(--dbt-x, 24px); }
.devsn-btt--pos-left { left: var(--dbt-x, 24px); }

.devsn-btt--pos-center {
	left: 50%;
	margin-left: calc(var(--dbt-size, 52px) / -2);
}

.devsn-btt.has-shadow {
	box-shadow: 0 10px 26px rgba(15, 23, 42, .25);
}

.devsn-btt__inner {
	position: relative;
	z-index: 3;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	line-height: 1;
}

.devsn-btt__icon {
	width: 45%;
	height: 45%;
	min-width: 14px;
	min-height: 14px;
	display: block;
}

.devsn-btt.has-percent .devsn-btt__icon {
	width: 34%;
	height: 34%;
}

.devsn-btt__pct {
	font-size: 10px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: -.02em;
}

.devsn-btt__pct i { font-style: normal; }

.devsn-btt__fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	background: rgba(255, 255, 255, .22);
	z-index: 1;
	border-radius: inherit;
	display: none;
}

.devsn-btt__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	z-index: 2;
	display: none;
}

.devsn-btt.has-ring .devsn-btt__ring { display: block; }

.devsn-btt__ring circle {
	fill: none;
	stroke-width: var(--dbt-ring-w, 3);
	stroke-linecap: round;
}

.devsn-btt__ring-bg { stroke: var(--dbt-ring-bg, #dbeafe); }

.devsn-btt__ring-fg {
	stroke: var(--dbt-ring, #22d3ee);
	stroke-dasharray: 283;
	stroke-dashoffset: calc(283 - (283 * var(--dbt-p, 0) / 100));
	transition: stroke-dashoffset .12s linear;
}

.devsn-btt__tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	background: #0f172a;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 7px 10px;
	border-radius: 8px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.devsn-btt:hover .devsn-btt__tip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Visible state + entrance animations */
.devsn-btt.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.devsn-btt--in-zoom { transform: scale(.6); }
.devsn-btt--in-zoom.is-visible { transform: scale(1); }

.devsn-btt--in-slide { transform: translateY(24px); }
.devsn-btt--in-slide.is-visible { transform: translateY(0); }

.devsn-btt--in-flip { transform: rotateY(90deg); }
.devsn-btt--in-flip.is-visible { transform: rotateY(0); }

.devsn-btt--in-bounce.is-visible { animation: devsn-btt-bounce .55s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes devsn-btt-bounce {
	0% { transform: translateY(30px) scale(.7); }
	60% { transform: translateY(-8px) scale(1.06); }
	100% { transform: translateY(0) scale(1); }
}

/* Hover animations */
.devsn-btt--hover-lift.is-visible:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(15, 23, 42, .3); }
.devsn-btt--hover-grow.is-visible:hover { transform: scale(1.12); }
.devsn-btt--hover-rotate.is-visible:hover { transform: rotate(360deg); }
.devsn-btt--hover-shake.is-visible:hover { animation: devsn-btt-shake .5s ease; }

@keyframes devsn-btt-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}

/* Idle animations */
.devsn-btt--idle-float.is-visible { animation: devsn-btt-float 2.6s ease-in-out infinite; }

@keyframes devsn-btt-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

.devsn-btt--idle-beat.is-visible { animation: devsn-btt-beat 1.8s ease-in-out infinite; }

@keyframes devsn-btt-beat {
	0%, 100% { transform: scale(1); }
	25% { transform: scale(1.09); }
	45% { transform: scale(1); }
}

.devsn-btt--idle-pulse::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--dbt-bg1, #2563eb);
	opacity: .5;
	z-index: 0;
	animation: devsn-btt-pulse 2s ease-out infinite;
}

@keyframes devsn-btt-pulse {
	0% { transform: scale(1); opacity: .5; }
	100% { transform: scale(1.7); opacity: 0; }
}

/* Designs */
.devsn-btt--solid { background: var(--dbt-bg1, #2563eb); }

.devsn-btt--glass {
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .45);
	color: var(--dbt-fg, #fff);
	box-shadow: 0 10px 30px rgba(15, 23, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.devsn-btt--neon {
	background: transparent;
	border: 2px solid var(--dbt-bg1, #2563eb);
	color: var(--dbt-bg1, #2563eb);
	box-shadow: 0 0 10px var(--dbt-bg2, #22d3ee), inset 0 0 10px rgba(34, 211, 238, .35);
	text-shadow: 0 0 8px var(--dbt-bg2, #22d3ee);
}

.devsn-btt--square { border-radius: 16px; }

.devsn-btt--pill {
	width: auto;
	min-width: var(--dbt-size, 52px);
	border-radius: 999px;
	padding: 0 18px;
}

.devsn-btt--pill .devsn-btt__inner {
	flex-direction: row;
	gap: 8px;
}

.devsn-btt--pill.devsn-btt--pos-center { margin-left: 0; transform-origin: center; }

.devsn-btt--pill .devsn-btt__text {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.devsn-btt--pill .devsn-btt__icon { width: 18px; height: 18px; }

.devsn-btt--minimal {
	background: transparent;
	color: var(--dbt-bg1, #2563eb);
	box-shadow: none;
}

.devsn-btt--minimal.has-shadow { box-shadow: none; }

.devsn-btt--minimal .devsn-btt__icon { width: 60%; height: 60%; }

.devsn-btt--fill {
	background: var(--dbt-ring-bg, #dbeafe);
	color: var(--dbt-fg, #fff);
	overflow: hidden;
}

.devsn-btt--fill .devsn-btt__fill {
	display: block;
	height: calc(var(--dbt-p, 0) * 1%);
	background: linear-gradient(180deg, var(--dbt-bg2, #22d3ee), var(--dbt-bg1, #2563eb));
	transition: height .15s linear;
}

.devsn-btt--fill .devsn-btt__inner { mix-blend-mode: normal; }

.devsn-btt--ring { background: linear-gradient(135deg, var(--dbt-bg1), var(--dbt-bg2)); }

/* Device targeting */
@media (max-width: 767px) {
	.devsn-rp--dev-desktop,
	.devsn-btt--dev-desktop { display: none !important; }
}

@media (min-width: 768px) {
	.devsn-rp--dev-mobile,
	.devsn-btt--dev-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.devsn-rp__fill,
	.devsn-btt,
	.devsn-btt__ring-fg { transition: none; }

	.devsn-rp--anim-stripes .devsn-rp__fill::after,
	.devsn-rp--anim-shine .devsn-rp__fill::after,
	.devsn-rp--anim-pulse .devsn-rp__fill,
	.devsn-rp--anim-flow .devsn-rp__fill,
	.devsn-btt--idle-float.is-visible,
	.devsn-btt--idle-beat.is-visible,
	.devsn-btt--idle-pulse::before { animation: none; }
}