/* =============================================================================
   Orbit Circle Widget — Frontend Styles
   Text Domain: orbit-circle-widget
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Outer flex container (alignment handled via Elementor selectors)
   --------------------------------------------------------------------------- */
.ocw-outer {
	display: flex;
	align-items: center;
}

/* ---------------------------------------------------------------------------
   Main wrapper — canvas
   --------------------------------------------------------------------------- */
.ocw-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Profile
   --------------------------------------------------------------------------- */
.ocw-profile-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.ocw-profile-wrap a {
	display: block;
	text-decoration: none;
}

.ocw-profile {
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-style: solid;
	position: relative;
}

.ocw-profile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Pulse keyframes */
@keyframes ocw-pulse {
	0%, 100% {
		box-shadow: var(--ocw-profile-glow-start, 0 0 20px 4px rgba(79, 142, 247, 0.7));
	}
	50% {
		box-shadow: var(--ocw-profile-glow-end, 0 0 40px 12px rgba(79, 142, 247, 0.2));
	}
}

/* ---------------------------------------------------------------------------
   Orbit rings
   --------------------------------------------------------------------------- */
.ocw-orbit-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	border-radius: 50%;
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.2);
	/* Rotation is driven entirely by JS rAF so the ring angle and
	   counter-rotation always share the exact same computed value —
	   no GPU/JS drift, no CSS animation conflict. */
}

/* ---------------------------------------------------------------------------
   Orbit items
   --------------------------------------------------------------------------- */
.ocw-item {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ocw-item-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.ocw-item-inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	border-style: solid;
	border-color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	/* No transform transition — JS sets transform every rAF frame,
	   a transition would cause lag and visible rotation drift. */
}

.ocw-item-inner:hover {
	/* Scale via filter or outline instead to avoid conflicting with JS transform */
	box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

/* Media container — does NOT have a background; background is on .ocw-item-inner */
.ocw-item-media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ocw-item-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Fallback text */
.ocw-item-text {
	display: block;
	line-height: 1;
	font-weight: 600;
	font-size: 12px;
	text-align: center;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Keep-upright counter-rotation (applied via JS)
   --------------------------------------------------------------------------- */
.ocw-item.ocw-upright {
	/* JS drives the counter-rotation via inline animation */
}

/* ---------------------------------------------------------------------------
   Editor / Preview utilities
   --------------------------------------------------------------------------- */
.elementor-editor-active .ocw-orbit-ring {
	/* Keep rings visible with a minimum border in editor */
	min-border-color: rgba(255, 255, 255, 0.1);
}