/* /DonutWithArcLabels.razor.rz.scp.css */

/* Make the SVG fill the container as you already have */
svg[b-ygoalvtn3e] {
    width: 100%;
    height: 100%;
    display: block;
}

/* Labels shouldn't block mouse events */
.arc-label[b-ygoalvtn3e] {
    pointer-events: none;
}

.arc-label text[b-ygoalvtn3e] {
    fill: #fff;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* The group (path + label) scales together */
.slice-group[b-ygoalvtn3e] {
    transform-origin: 50% 50%;
    transition: transform .25s ease, filter .25s ease;
}

.slice-group.interactive[b-ygoalvtn3e] {
    cursor: pointer;
}

.slice-group.interactive:hover[b-ygoalvtn3e] {
    transform: scale(1.03);
    filter: brightness(1.2) drop-shadow(0 2px 3px rgba(0,0,0,.4));
}

/* The actual shape path (kept separate for styling if needed) */
.slice-shape[b-ygoalvtn3e] {
    pointer-events: fill;
}

/* Non-interactive slices ignore pointer events */
.slice-group.disabled[b-ygoalvtn3e] {
    pointer-events: none;
}


/* Fill the viewport and center the SVG */
.donut-host[b-ygoalvtn3e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: #DFDBDA; /* optional dark backdrop */
}

/* Keep the chart square and responsive */
.donut-host > svg[b-ygoalvtn3e] {
    width: 100vmin;
    height: 100vmin;
    display: block;
}

/* Curved labels on the rings */
.arc-label text[b-ygoalvtn3e] {
    fill: rgba(0,0,0,.4); /*#ffffff*/
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Center title styling (sizes come from component params) */
.hub-title text[b-ygoalvtn3e]{
  text-anchor: middle;
  dominant-baseline: middle;
  font-weight: 700;
  letter-spacing: .5px;
}

.hub-title-line1[b-ygoalvtn3e] {
}

.hub-title-line2[b-ygoalvtn3e] {
}

.hub-title-line3[b-ygoalvtn3e] {
}

/* Slice visuals & interactions */
.slice[b-ygoalvtn3e] {
    transform-origin: 50% 50%;
    transition: transform .25s ease, filter .25s ease;
}

.slice.interactive[b-ygoalvtn3e] {
    cursor: pointer;
}

.slice.interactive:hover[b-ygoalvtn3e] {
    filter: brightness(1.2) drop-shadow(0 2px 3px rgba(0,0,0,.4));
    transform: scale(1.03);
}

.slice.disabled[b-ygoalvtn3e] {
    pointer-events: none;
}

/* Optional: style outside-band labels if desired */
.band-label text[b-ygoalvtn3e] {
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.badge-text[b-ygoalvtn3e] {
    font-size: 6px;
    font-weight: 600;
    fill: rgba(0,0,0,.4); /*rgba(0,0,0,.25)*/
}

.badge circle[b-ygoalvtn3e] {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}


.video-overlay[b-ygoalvtn3e] {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 100px;
    pointer-events: none;
}

.video-overlay video[b-ygoalvtn3e] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.center-video[b-ygoalvtn3e] {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -100%);
    width: 180px;
    height: 100px;
    object-fit: contain;
    background-color: transparent; /* not needed, but harmless */
    pointer-events: none;
}

.center-arc-text text[b-ygoalvtn3e] {
    font-weight: 700; /* bold */
    letter-spacing: 1.2px;
}

/* Simple fade-in effect */
@keyframes fadeInVideo-b-ygoalvtn3e {
    to {
        opacity: 1;
    }
}

@keyframes seg-reveal-b-ygoalvtn3e {
    0% {
        opacity: 0;
        transform: scale(0.94);
    }

    60% {
        opacity: 1;
        transform: scale(1.03);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.slice-group.reveal[b-ygoalvtn3e] {
    opacity: 0;
    animation: seg-reveal-b-ygoalvtn3e var(--revDur,600ms) cubic-bezier(.2,.8,.3,1) forwards;
    animation-delay: var(--revDelay,0ms);
}

.touch-rotate[b-ygoalvtn3e] {
    /*touch-action: none;*/ /* block browser zoom/scroll on this element */
    overscroll-behavior: contain; /* stop page bounce/scroll chaining */
}
/* /Index.razor.rz.scp.css */
.tiny-footer[b-xrbow302sr] {
	position: fixed;
	bottom: 6px;
	left: 8px;
	font-size: 10px;
	color: rgba(128, 128, 128, 0.6);
	pointer-events: none;
	user-select: none;
}