/* Shareholders Chart by Shiksite
 * The SVG donut is drawn in a 0..100 viewBox and fills a square container, so
 * every coordinate maps 1:1 to a container percentage. Percentages, labels and
 * logos are absolutely-positioned overlays placed via inline left/top
 * percentages computed from each segment angle. Their SIZES (image widths and
 * text sizes) and the ring/connector stroke widths are driven by Elementor
 * responsive controls, so each is fully responsive with px/%/em/rem/vw.
 */

.shc-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	overflow: visible;
}

.shc-container {
	position: relative;
	width: 520px;            /* overridden by the "chart width" control */
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	overflow: visible;
	direction: rtl;
}

/* Fallback for very old browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1 / 1) {
	.shc-container::before {
		content: "";
		display: block;
		padding-top: 100%;
	}
	.shc-container > .shc-svg {
		position: absolute;
		inset: 0;
	}
}

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

/* Decorative SVG strokes -- widths/colors come from the controls; these are
 * the fallback defaults. */
.shc-accent {
	stroke-width: 1;
}

.shc-connector {
	stroke: #C9CDCF;
	stroke-width: 0.5;
}

/* Center logo overlay. */
.shc-center-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 120px;            /* overridden by the "center logo width" control */
	height: auto;
	max-width: 80%;
	object-fit: contain;
	pointer-events: none;
}

/* Per-segment logo overlay -- width comes from each segment's own control. */
.shc-logo-img {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 78px;             /* overridden per segment */
	height: auto;
	object-fit: contain;
	pointer-events: none;
}

/* Percentage label overlay. */
.shc-percent {
	position: absolute;
	transform: translate(-50%, -50%);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
	pointer-events: none;
	font-size: 28px;         /* overridden by the "percentage size" control */
}

.shc-percent-sign {
	font-size: 0.55em;       /* scales with the percentage size */
	vertical-align: 0.35em;
	margin-inline-start: 0.06em;
}

/* Segment label overlay. */
.shc-label {
	position: absolute;
	transform: translate(-50%, -50%);
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.15;
	white-space: nowrap;
	text-align: center;
	color: #3C3C3C;          /* overridden by the "label color" control */
	pointer-events: none;
	font-size: 17px;         /* overridden by the "label size" control */
}

.shc-empty {
	padding: 20px;
	text-align: center;
	color: #888;
	border: 1px dashed #ccc;
	border-radius: 6px;
}

/* ------------------------------------------------------------------ *
 *  Hover effect
 *  Each segment is grouped in <g class="shc-seg"> together with its accent
 *  arc. Hovering scales that group from the chart center (transform-box:
 *  view-box; origin 50% 50%) so the slice lifts outward on its own, while
 *  the rest of the chart and the logos stay put. Gated by .shc-hover-on.
 * ------------------------------------------------------------------ */
.shc-seg {
	transform-box: view-box;
	transform-origin: 50% 50%;
}

.shc-hover-on .shc-seg {
	transition: transform var(--shc-hover-dur, 0.6s) ease-in-out,
		filter var(--shc-hover-dur, 0.6s) ease-in-out;
	will-change: transform;
}

.shc-hover-on .shc-seg:hover {
	transform: scale(var(--shc-hover-scale, 1.12));
}

.shc-hover-on.shc-shadow-on .shc-seg:hover {
	/*filter:drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));*/
}