/* =========================================================
   SLP Circular Process Slider
   Base = Style 1 (Premium Glass Orange)
========================================================= */

.slp-cp,
.slp-cp * {
	box-sizing: border-box;
}

.slp-cp {
	/* colours */
	--slp-accent: #ff7700;
	--slp-accent2: #ff9a3d;
	--slp-title: #ffffff;
	--slp-text: rgba(255, 255, 255, .58);
	--slp-text-hover: #ffffff;
	--slp-active: var(--slp-accent);
	--slp-center-text: #ffffff;
	--slp-desc: rgba(255, 255, 255, .68);

	/* accent tints (follow --slp-accent automatically) */
	--slp-a05: color-mix(in srgb, var(--slp-accent) 5.5%, transparent);
	--slp-a08: color-mix(in srgb, var(--slp-accent) 8%, transparent);
	--slp-a12: color-mix(in srgb, var(--slp-accent) 12%, transparent);
	--slp-a28: color-mix(in srgb, var(--slp-accent) 28%, transparent);
	--slp-a45: color-mix(in srgb, var(--slp-accent) 45%, transparent);
	--slp-a65: color-mix(in srgb, var(--slp-accent) 65%, transparent);

	/* surfaces */
	--slp-font: 'Montserrat', sans-serif;
	--slp-wrap-radius: 30px;
	--slp-wrap-bg: radial-gradient(circle at 50% 45%, var(--slp-a05), transparent 42%), rgba(255, 255, 255, .018);
	--slp-wrap-border: rgba(255, 255, 255, .07);
	--slp-wrap-shadow: 0 25px 70px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .12);
	--slp-outer-border: rgba(255, 255, 255, .035);
	--slp-orbit-border: 1px dashed var(--slp-a28);
	--slp-orbit-glow: 0 0 20px var(--slp-a08), inset 0 0 20px var(--slp-a05);
	--slp-orb-bg: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .10), transparent 45%), rgba(255, 255, 255, .045);
	--slp-orb-border: 1px solid rgba(255, 255, 255, .14);
	--slp-orb-shadow: 0 20px 45px rgba(0, 0, 0, .32), 0 0 30px var(--slp-a12), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 25px rgba(255, 255, 255, .035);
	--slp-orb-radius: 50%;
	--slp-tshadow: 0 0 8px var(--slp-a65), 0 0 20px var(--slp-a28);
	--slp-title-shadow: 0 0 18px var(--slp-a28);
	--slp-btn-bg: rgba(255, 255, 255, .04);
	--slp-btn-hover-color: #ffffff;

	/* sizes (controlled from Elementor) */
	--slp-circle: 520px;
	--slp-orbit: 400px;
	--slp-outer: 430px;
	--slp-center: 190px;
	--slp-textr: 193px;
	--slp-rotate: .9s;
	--slp-ease: cubic-bezier(.22, 1, .36, 1);

	position: relative;
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
	padding: 42px 20px;
	font-family: var(--slp-font);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: var(--slp-wrap-radius);
	overflow: hidden;
	background: var(--slp-wrap-bg);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--slp-wrap-border);
	box-shadow: var(--slp-wrap-shadow);
}

/* soft background glow */
.slp-cp::before {
	content: "";
	position: absolute;
	width: 300px;
	height: 300px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--slp-a05);
	filter: blur(70px);
	pointer-events: none;
	animation: slpCpSoftGlow 4s ease-in-out infinite alternate;
}

.slp-cp--no-bgglow::before {
	display: none;
}

@keyframes slpCpSoftGlow {
	from { opacity: .45; transform: translate(-50%, -50%) scale(.90); }
	to   { opacity: .8;  transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes slpCpSpin {
	to { transform: rotate(360deg); }
}

@keyframes slpCpPulse {
	0%, 100% { transform: scale(.9); }
	50%      { transform: scale(1.15); }
}

/* heading */
.slp-cp__header {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	z-index: 20;
}

.slp-cp .slp-cp__title {
	margin: 0;
	color: var(--slp-title);
	font-family: var(--slp-font);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .8px;
	text-shadow: var(--slp-title-shadow);
}

/* circle area */
.slp-cp__circle {
	position: relative;
	flex: 0 0 auto;
	width: var(--slp-circle);
	height: var(--slp-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.slp-cp__circle::before {
	content: "";
	position: absolute;
	width: var(--slp-outer);
	height: var(--slp-outer);
	border-radius: 50%;
	border: 1px solid var(--slp-outer-border);
	box-shadow: 0 0 35px var(--slp-a05), inset 0 0 30px var(--slp-a05);
}

.slp-cp__circle::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	top: calc(50% - var(--slp-outer) / 2 - 2px);
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: var(--slp-accent);
	box-shadow: 0 0 8px var(--slp-accent), 0 0 22px var(--slp-accent), 0 0 40px var(--slp-a45);
	opacity: .35;
}

.slp-cp--no-outer .slp-cp__circle::before,
.slp-cp--no-outer .slp-cp__circle::after {
	display: none;
}

/* orbit */
.slp-cp__orbit {
	position: absolute;
	width: var(--slp-orbit);
	height: var(--slp-orbit);
	border-radius: 50%;
	border: var(--slp-orbit-border);
	box-shadow: var(--slp-orbit-glow);
}

.slp-cp__orbit::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .025);
}

.slp-cp--no-orbit .slp-cp__orbit {
	display: none;
}

/* pointer */
.slp-cp__pointer {
	position: absolute;
	top: calc(50% - var(--slp-orbit) / 2 - 18px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 15;
}

.slp-cp__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--slp-accent2) 0%, var(--slp-accent) 55%, var(--slp-accent) 100%);
	box-shadow: 0 0 8px var(--slp-accent), 0 0 18px var(--slp-accent), 0 0 35px var(--slp-a65);
	animation: slpCpPulse 2s ease-in-out infinite;
}

.slp-cp__arrow {
	width: 0;
	height: 0;
	margin-top: 3px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--slp-accent);
	filter: drop-shadow(0 0 5px var(--slp-accent));
}

.slp-cp--no-pointer .slp-cp__pointer {
	display: none;
}

/* rotating svg */
.slp-cp__rotor {
	position: absolute;
	inset: 0;
	transition: transform var(--slp-rotate) var(--slp-ease);
	will-change: transform;
}

.slp-cp__rotor svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.slp-cp .slp-cp__text {
	fill: var(--slp-text);
	font-family: var(--slp-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .35px;
	text-transform: uppercase;
	cursor: pointer;
	outline: none;
	transition: fill .45s ease, filter .45s ease, opacity .45s ease;
}

.slp-cp--no-click .slp-cp__text {
	cursor: default;
}

.slp-cp .slp-cp__text:hover {
	fill: var(--slp-text-hover);
}

.slp-cp .slp-cp__text.active {
	fill: var(--slp-active);
	font-weight: 800;
	filter: drop-shadow(0 0 5px var(--slp-a65)) drop-shadow(0 0 14px var(--slp-a65));
}

.slp-cp--no-glow .slp-cp__text.active {
	filter: none;
}

.slp-cp .slp-cp__text:focus-visible {
	opacity: .8;
}

/* center orb */
.slp-cp__center {
	position: absolute;
	width: var(--slp-center);
	height: var(--slp-center);
	border-radius: var(--slp-orb-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	text-align: center;
	z-index: 10;
	background: var(--slp-orb-bg);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: var(--slp-orb-border);
	box-shadow: var(--slp-orb-shadow);
}

.slp-cp__center::before {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: inherit;
	border: 1px solid var(--slp-a12);
	box-shadow: 0 0 18px var(--slp-a08);
	pointer-events: none;
}

.slp-cp__center-inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: opacity .3s ease, transform .3s ease;
}

.slp-cp__center-inner.is-out {
	opacity: 0;
	transform: scale(.88);
}

.slp-cp .slp-cp__center-title {
	margin: 0;
	color: var(--slp-center-text);
	font-family: var(--slp-font);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .7px;
	text-transform: uppercase;
	text-shadow: var(--slp-tshadow);
}

.slp-cp .slp-cp__center-desc {
	margin: 0;
	color: var(--slp-desc);
	font-family: var(--slp-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

.slp-cp .slp-cp__counter {
	color: var(--slp-accent);
	font-family: var(--slp-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
}

.slp-cp__center-desc:empty,
.slp-cp__counter:empty {
	display: none;
}

/* arrows */
.slp-cp__nav {
	position: relative;
	display: flex;
	gap: 12px;
	margin-top: 6px;
	z-index: 5;
}

.slp-cp .slp-cp__btn {
	-webkit-appearance: none;
	appearance: none;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--slp-a45);
	background: var(--slp-btn-bg);
	color: var(--slp-accent);
	line-height: 1;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, transform .2s ease;
}

.slp-cp .slp-cp__btn:hover {
	background: var(--slp-accent);
	color: var(--slp-btn-hover-color);
}

.slp-cp .slp-cp__btn:active {
	transform: scale(.92);
}

.slp-cp__data {
	display: none !important;
}

/* =========================================================
   STYLE 2 — NEON CYAN
========================================================= */
.slp-cp--style-2 {
	--slp-accent: #00e5ff;
	--slp-accent2: #3b82f6;
	--slp-text: rgba(170, 230, 255, .5);
	--slp-desc: rgba(190, 235, 255, .72);
	--slp-wrap-bg: radial-gradient(circle at 50% 45%, var(--slp-a08), transparent 48%), #050b18;
	--slp-wrap-border: var(--slp-a28);
	--slp-wrap-shadow: 0 0 60px var(--slp-a12), inset 0 0 40px var(--slp-a08);
	--slp-orbit-border: 1px solid var(--slp-a45);
	--slp-orbit-glow: 0 0 18px var(--slp-a28), inset 0 0 18px var(--slp-a12);
	--slp-orb-bg: radial-gradient(circle, var(--slp-a12), rgba(5, 11, 24, .92) 72%);
	--slp-orb-border: 1px solid var(--slp-a45);
	--slp-orb-shadow: 0 0 30px var(--slp-a28), inset 0 0 25px var(--slp-a12);
	--slp-outer-border: var(--slp-a12);
}

/* =========================================================
   STYLE 3 — SOLAR GOLD RING
========================================================= */
.slp-cp--style-3 {
	--slp-accent: #ffb300;
	--slp-accent2: #ff6a00;
	--slp-text: rgba(255, 225, 170, .5);
	--slp-desc: rgba(255, 230, 180, .72);
	--slp-wrap-bg: radial-gradient(circle at 50% 40%, var(--slp-a12), transparent 52%), linear-gradient(160deg, #1a1205, #0c0903);
	--slp-wrap-border: var(--slp-a28);
	--slp-wrap-shadow: 0 25px 70px rgba(0, 0, 0, .45), inset 0 1px 0 var(--slp-a28);
	--slp-orb-bg: radial-gradient(circle at 35% 25%, var(--slp-a28), transparent 60%), rgba(30, 20, 5, .7);
	--slp-orb-border: 1px solid var(--slp-a45);
	--slp-orb-shadow: 0 20px 45px rgba(0, 0, 0, .4), 0 0 30px var(--slp-a12), inset 0 1px 0 var(--slp-a28);
	--slp-outer-border: var(--slp-a12);
}

/* =========================================================
   STYLE 4 — EMERALD ECO
========================================================= */
.slp-cp--style-4 {
	--slp-accent: #22c55e;
	--slp-accent2: #84cc16;
	--slp-text: rgba(190, 255, 215, .5);
	--slp-desc: rgba(200, 255, 220, .7);
	--slp-wrap-bg: radial-gradient(circle at 50% 45%, var(--slp-a08), transparent 45%), linear-gradient(160deg, #07170f, #040d08);
	--slp-wrap-border: var(--slp-a28);
	--slp-wrap-shadow: 0 25px 70px rgba(0, 0, 0, .45), inset 0 1px 0 var(--slp-a12);
	--slp-orbit-border: 2px dotted var(--slp-a45);
	--slp-orb-bg: radial-gradient(circle at 35% 25%, var(--slp-a28), transparent 60%), rgba(6, 28, 16, .75);
	--slp-orb-border: 1px solid var(--slp-a45);
	--slp-orb-shadow: 0 20px 45px rgba(0, 0, 0, .4), 0 0 30px var(--slp-a12);
	--slp-outer-border: var(--slp-a12);
}

/* =========================================================
   STYLE 5 — ROYAL PURPLE AURORA
========================================================= */
.slp-cp--style-5 {
	--slp-accent: #a855f7;
	--slp-accent2: #ec4899;
	--slp-text: rgba(230, 210, 255, .5);
	--slp-desc: rgba(235, 220, 255, .7);
	--slp-wrap-bg: radial-gradient(circle at 25% 15%, rgba(236, 72, 153, .14), transparent 45%), radial-gradient(circle at 75% 85%, var(--slp-a12), transparent 45%), linear-gradient(145deg, #150a26, #0a0614);
	--slp-wrap-border: var(--slp-a28);
	--slp-wrap-shadow: 0 25px 70px rgba(0, 0, 0, .5), inset 0 1px 0 var(--slp-a28);
	--slp-orbit-border: 1px dashed var(--slp-a45);
	--slp-orb-bg: linear-gradient(135deg, var(--slp-a28), rgba(236, 72, 153, .16)), rgba(20, 10, 38, .6);
	--slp-orb-border: 1px solid var(--slp-a45);
	--slp-orb-shadow: 0 20px 45px rgba(0, 0, 0, .45), 0 0 34px var(--slp-a28);
	--slp-outer-border: var(--slp-a12);
}

/* =========================================================
   STYLE 6 — MINIMAL LIGHT
========================================================= */
.slp-cp--style-6 {
	--slp-accent: #ff7700;
	--slp-accent2: #ffb066;
	--slp-title: #14161a;
	--slp-text: rgba(20, 22, 26, .42);
	--slp-text-hover: #14161a;
	--slp-center-text: #14161a;
	--slp-desc: rgba(20, 22, 26, .62);
	--slp-wrap-bg: #ffffff;
	--slp-wrap-border: rgba(20, 22, 26, .07);
	--slp-wrap-shadow: 0 25px 70px rgba(20, 22, 26, .09);
	--slp-outer-border: rgba(20, 22, 26, .05);
	--slp-orbit-border: 1px solid rgba(20, 22, 26, .10);
	--slp-orbit-glow: none;
	--slp-orb-bg: #ffffff;
	--slp-orb-border: 1px solid rgba(20, 22, 26, .06);
	--slp-orb-shadow: 0 18px 45px rgba(20, 22, 26, .12), 0 0 0 8px var(--slp-a08);
	--slp-tshadow: none;
	--slp-title-shadow: none;
	--slp-btn-bg: #ffffff;
}

.slp-cp--style-6,
.slp-cp--style-6 .slp-cp__center {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.slp-cp--style-6 .slp-cp__orbit::before {
	border-color: rgba(20, 22, 26, .04);
}

.slp-cp--style-6 .slp-cp__text.active {
	filter: none;
}

/* =========================================================
   STYLE 7 — DARK LUXE GOLD
========================================================= */
.slp-cp--style-7 {
	--slp-accent: #d4af37;
	--slp-accent2: #f5e6a8;
	--slp-title: #f5e6a8;
	--slp-text: rgba(245, 230, 168, .42);
	--slp-text-hover: #f5e6a8;
	--slp-center-text: #f5e6a8;
	--slp-desc: rgba(245, 230, 168, .62);
	--slp-wrap-bg: #090909;
	--slp-wrap-border: var(--slp-a28);
	--slp-wrap-shadow: 0 25px 70px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .02);
	--slp-orbit-border: 4px double var(--slp-a65);
	--slp-orbit-glow: 0 0 24px var(--slp-a08);
	--slp-orb-bg: radial-gradient(circle at 35% 25%, var(--slp-a12), transparent 55%), #101010;
	--slp-orb-border: 1px solid var(--slp-a65);
	--slp-orb-shadow: 0 20px 45px rgba(0, 0, 0, .6), 0 0 30px var(--slp-a12);
	--slp-outer-border: var(--slp-a12);
	--slp-btn-hover-color: #090909;
}

/* =========================================================
   STYLE 8 — OCEAN BLUE GLASS
========================================================= */
.slp-cp--style-8 {
	--slp-accent: #38bdf8;
	--slp-accent2: #6366f1;
	--slp-text: rgba(210, 235, 255, .55);
	--slp-desc: rgba(215, 238, 255, .75);
	--slp-wrap-bg: linear-gradient(160deg, rgba(20, 70, 140, .5), rgba(6, 22, 56, .75));
	--slp-wrap-border: rgba(150, 200, 255, .2);
	--slp-wrap-shadow: 0 25px 70px rgba(0, 20, 60, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
	--slp-orbit-border: 1px solid var(--slp-a28);
	--slp-orbit-glow: 0 0 30px var(--slp-a12), inset 0 0 30px var(--slp-a08);
	--slp-orb-bg: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .22), transparent 50%), rgba(56, 189, 248, .08);
	--slp-orb-border: 1px solid rgba(255, 255, 255, .25);
	--slp-orb-shadow: 0 20px 45px rgba(0, 20, 60, .45), 0 0 34px var(--slp-a28), inset 0 1px 0 rgba(255, 255, 255, .3);
	--slp-outer-border: rgba(255, 255, 255, .07);
}

/* =========================================================
   STYLE 9 — SUNSET SPINNING RING
========================================================= */
.slp-cp--style-9 {
	--slp-accent: #ff5e3a;
	--slp-accent2: #ff2d95;
	--slp-text: rgba(255, 220, 225, .5);
	--slp-desc: rgba(255, 228, 232, .72);
	--slp-wrap-bg: radial-gradient(circle at 50% 100%, rgba(255, 45, 149, .16), transparent 55%), radial-gradient(circle at 50% 0%, var(--slp-a12), transparent 50%), linear-gradient(160deg, #1c0b16, #10060f);
	--slp-wrap-border: var(--slp-a28);
	--slp-wrap-shadow: 0 25px 70px rgba(0, 0, 0, .5), inset 0 1px 0 var(--slp-a28);
	--slp-orb-bg: radial-gradient(circle at 35% 25%, var(--slp-a28), transparent 60%), rgba(40, 10, 25, .6);
	--slp-orb-border: 1px solid var(--slp-a45);
	--slp-orb-shadow: 0 20px 45px rgba(0, 0, 0, .45), 0 0 34px var(--slp-a28);
	--slp-outer-border: var(--slp-a12);
}

/* gradient ring used by style 3 (static) and 9 (spinning) */
.slp-cp--style-3 .slp-cp__orbit,
.slp-cp--style-9 .slp-cp__orbit {
	border: 0;
	background: conic-gradient(from 0deg, var(--slp-accent), var(--slp-accent2), transparent 55%, var(--slp-accent));
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
	box-shadow: none;
}

.slp-cp--style-3 .slp-cp__orbit::before,
.slp-cp--style-9 .slp-cp__orbit::before {
	display: none;
}

.slp-cp--style-9 .slp-cp__orbit {
	animation: slpCpSpin 12s linear infinite;
}

/* =========================================================
   STYLE 10 — CYBER TECH
========================================================= */
.slp-cp--style-10 {
	--slp-accent: #00ff9c;
	--slp-accent2: #00b8ff;
	--slp-font: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	--slp-wrap-radius: 12px;
	--slp-text: rgba(190, 255, 225, .45);
	--slp-desc: rgba(200, 255, 230, .65);
	--slp-wrap-bg: linear-gradient(rgba(0, 255, 156, .045) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(0, 255, 156, .045) 1px, transparent 1px) 0 0 / 28px 28px, #04080a;
	--slp-wrap-border: var(--slp-a28);
	--slp-wrap-shadow: 0 0 0 1px rgba(0, 255, 156, .05), 0 25px 70px rgba(0, 0, 0, .6);
	--slp-orbit-border: 1px dashed var(--slp-a65);
	--slp-orbit-glow: 0 0 22px var(--slp-a08);
	--slp-orb-radius: 26%;
	--slp-orb-bg: linear-gradient(135deg, var(--slp-a08), rgba(0, 0, 0, .65));
	--slp-orb-border: 1px solid var(--slp-a65);
	--slp-orb-shadow: 0 0 28px var(--slp-a28), inset 0 0 22px var(--slp-a08);
	--slp-outer-border: var(--slp-a12);
	--slp-btn-hover-color: #04080a;
}

.slp-cp--style-10 .slp-cp__center::before {
	inset: -10px;
	border: 1px dashed var(--slp-a45);
	animation: slpCpSpin 18s linear infinite;
}

.slp-cp--style-10 .slp-cp__btn {
	border-radius: 8px;
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
	.slp-cp::before,
	.slp-cp__dot,
	.slp-cp--style-9 .slp-cp__orbit,
	.slp-cp--style-10 .slp-cp__center::before {
		animation: none;
	}

	.slp-cp__rotor {
		transition: none;
	}
}